「Pitchdeck」を使って Figma でプレゼンを作ってみた
はじめに
こんにちは kimizuy です。
Figma はデザインツールとして大きな地位を占めるようになりましたが、プレゼンのスライドを作成するのにも便利とのことです。
その方法の 1 つとして「Pitchdeck」というプラグインを使えば、Figma のフレームをプレゼンのスライドに変換できます。
他にもテキストなどの要素にアニメーションを追加できたり、Giphy などのサービスと連携しているため簡単に Gif をスライドに追加できます。
本記事では「Pitchdeck」のインストールから簡単な使い方までをご紹介します。
以下で紹介する手順を通じて、実際のプレゼンのデモを作ってみました。
使ってみた
さっそくプラグインをインストールしましょう。
Pitchdeck Presentation Studio – Figma
次に Figma で空のデザインファイル(プロジェクト的なもの)を作り、そこにフレームを追加します。
左上の「井」マークから追加できます。

フレームのアスペクト比は 16:9 を選択したほうが無難でしょう(ほとんどのスクリーンに最適らしい)。

これでプレゼンのスライドを作る準備が整いました。
タイトルなどのテキスト要素をフレームに追加していきます。

適当な要素を追加したら、ここで Pitchdeck プラグインを起動してみましょう。
右クリック → Pligins → Pitchdeck Presentation Studio をと進んでクリックします。

Pitchdeck のウィンドウが開き、スライドのプレビューができます。

個別の要素に対して多彩なアニメーションを追加できます。アニメーションにディレイをかけたりスピードも変更可能。

Gif の追加も簡単で、検索バーからキーワードを入れるだけで Giphy から選択できます。

プレゼンをエクスポートして公開する
プレゼンの資料が作れたら右上の「Export Presentation」を押して公開します。
今回は Pitchdeck の Web サイト上に公開してみます。「Upload Web Presentation」をクリックします。

公開が完了すると URL が発行されます。発行された URL はパスワードが必要なものと不要なもの(&QR コード)の 2 種類が用意されています。

参考
おわりに
Pitchdeck を使って Figma でプレゼンを作る方法をご紹介しました。Figma の表現力も合わさって、これまでのプレゼンの枠を超えた多様な見せ方ができそうですね。
フロントエンドエンジニアとして Figma を使うトレーニングにもなりそうです。
以上、お読みいただきありがとうございました。
Gaji-Laboでは、UIデザイナーを募集しています
弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!
求人応募してみる!