figma-pitchdeck-presentation-studio-plugin
公開日: 2022.10.28  | 更新日: 2022.10.28

Figmaで作成したスライドをkeynoteやpowerpoint形式で出力する方法

今回は、Figmaでプレゼンテーション用に作成したスライドをkeynoteやpowerpoint形式(pptx)やPDFなどの形式で出力できるプラグイン「Pitchdeck Presentation Studio」の使い方を簡単に紹介します。

なお、フリープランでは10回まで自由な形式でエクスポート可能で、10回以上行いたい場合は月額のライセンスが必要になります。フリープランを使い続ける場合は、PDFによる出力のみ対応しているようです。

この記事のターゲット

  • Figmaのスライド資料をプレゼンテーションツール形式で出力したい方


1. 出力したいスライドデータを用意し、プラグインを実行する

まず、出力したいスライドをファイルに用意します。

今回は、FigJamからフローチャートの要素と矢印をコピ&ペーストで持ってきたものも使用しています。

pitchdeck1

2. スライド内のオブジェクトの設定を行う

プレゼンテーションツールで表示するためのオプションをあらかじめ設定することができます。確認できるオプションは次のとおりです。

  • Animation(アニメーション)

  • Gifs/Videos(動画やGifの埋め込み)※今回は割愛

  • URL/Slide links(URLや別スライドへのリンク)

  • 発表者ノート

「Animation」では、フェードインやフェードアウトといったアニメーションのエフェクトを設定できるようです。

pitchdeck2

「URL/Slide links」では、外部URLによるリンクのほか、別のスライドを指定することでスライド内リンクを設定することもできるようです。

pitchdeck3

発表者ノートは、スライドごとに下部のテキストエリアに入力できます。

pitchdeck4

3. 出力したい形式を設定してエクスポートする

最後に、出力形式を設定してエクスポートします。

出力形式は以下が選択できるようです。

  • Pitchdeck Presentation(Webサイト上にアップロード・公開)

  • Powerpoint(pptx)

  • keynote(pptx)

  • Coogle slides(pptx)

  • PDF

pitchdeck5

また、それぞれの出力形式に応じていくつか設定が可能です。

keynote形式を選択した場合は以下のオプションなどがあります。

  • Use Retina images @2x(Retina画面対応の解像度で出力)

  • Compress images(画像の圧縮率1~100%)

設定できたら、「Export for Keynote」ボタンを押すとファイルが生成され、ダウンロードできるようになります。

以下は出力されたファイルをkeynoteで開いている様子です。

pitchdeck6

テキストなどは編集可能な状態でほぼ完璧に再現されていることがわかります。

URLのリンクや発表者メモもちゃんと反映されていますが、アニメーションの設定は適用されていないようでした。(もしかしたら反映に必要な設定が抜けていたかもしれませんが、今回は詳しく検証はしていませんので悪しからず)

pitchdeck9

また、FigJamから輸入してきた部品についても、プレビューには表示されていましたが出力されたファイルには含まれていないようでした。

これについては、出力前にグルーピングしておくことで、画像として出力されることを確認しています。

pitchdeck7

以下はグルーピング後に再出力したファイルを開いている様子です。

pitchdeck8

なお、Figmaのスライド上で設定されていたフォントがローカルにない場合は置換が必要です。以下はkeynoteでフォントを置換している様子です。

pitchdeck10

この記事を読んだ方におすすめの記事

Figmaで簡単にフローチャートや画面遷移図をつくる方法

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む

figma-connect-with-arrows

Figmaでおすすめの写真・画像加工のTipsまとめ

今回はFigmaで写真や画像を加工するときにおすすめの方法を目的別に紹介します。Figmaの基本機能でできることから無料のプラグインを使用する方法など、当サイトでも人気の解説記事をまとめましたので、参考にしてみてください。 ... 続きを読む

figma-plugins-for-image-processing

Figmaでレイヤーやグループを自動整理できる「Clean Document」の使い方

今回は、Figmaでデザインモックなどを無計画に作った結果とっ散らかってしまったレイヤーを、一瞬できれいに整理・整頓してくれるプラグイン「Clean Document」を紹介します。無駄なグルーピングやラベルと内容が一致していないテキストなどを一括で整理できます。 ... 続きを読む

figma-clean-docment-plugin

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告