「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 種類が用意されています。

参考

• 実際のデモ
• Using Pitchdeck

おわりに

Pitchdeck を使って Figma でプレゼンを作る方法をご紹介しました。Figma の表現力も合わさって、これまでのプレゼンの枠を超えた多様な見せ方ができそうですね。

フロントエンドエンジニアとして Figma を使うトレーニングにもなりそうです。

以上、お読みいただきありがとうございました。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。