「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を味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

タグ


投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。