Figma Slideとは
Figma社が2024年6月26日に開催した「Config 2024」イベントにて、注目すべき新機能のひとつとして「Figma Slides」を発表しました。[1]この機能はFigmaの設計ツールとプレゼンテーション機能を融合させたものです。
Figma Slidesの導入により、Figmaにおけるデザイン作成とプレゼン作成をFigmaだけで実行可能。デザインからプレゼンへの移行がスムーズになり、ワークフローの効率化が期待できます。
Figma Slideで利用できる機能
Figma Slideには下記のような機能が備わっています。
| 豊富なテンプレート | 様々な種類のテンプレートを搭載。利用用途に合わせたデザインやレイアウトのテンプレートを利用できる。 |
|---|---|
| コラボレーション機能 | スライドを第三者に共有し、共同で作業できる。 |
| ライブインタラクション機能 | アンケートやスタンプなどで意思表示するUIを設定し、複数人にスライドの意見を募ることが可能。 |
| コメント機能 | デザインにコメントを追加したり、コラボレーション中にテキストで会話したりできる。 |
| オートレイアウト機能 | レイアウトの統一性を補完できる。 |
| オートレイアウトフレーム機能 | テキストのトーンを「カジュアル」や「プロフェッショナル」などに調整できる |
スライドの大枠はテンプレートを使って簡単に作成可能。レイアウトの統一性を担保するオートレイアウト機能など効率性の高い機能が備わっています。
特にチームで作成する際の機能に優れているのが特徴。スライドの作成から公開まで複数人で担当するる際に役立つでしょう。
Figma Slideを使ったスライドの作り方
はじめにFigmの公式ページへアクセスします。
Figma:https://www.figma.com
Figmaより
トップページの上部にある「スライドデッキを新規作成」をクリックしてください。
Figmaより
「始める」をクリックします。
Figmaより
するとスライドのテンプレート選択画面が表示されます。画面上部の検索欄から任意のスライドを探すことも可能。気に入ったスライドをクリックして下さい。
Figmaより
選択したテンプレートの内容が表示されます。選びたいテンプレートが見つかったら画面右下の「テンプレートを使用」をクリックして下さい。
Figmaより
すると上記のようにスライド画面が表示されます。最初はトップのスライドのみ表示されており、右上にある「新しいスライド」をクリックしてほかのテンプレートを追加できます。
次に、Figma Slideに搭載されている各機能の使い方を解説します。
Figma Slide「コメント機能」の使い方
Figmaより
コメント機能を使うステップは下記の通りです。
- コメントしたい場所をクリック
- 画面下部にあるツールバーの中から吹き出しのアイコンをクリック
- コメントを入力
コメントを残すことでデザインの意図を詳細に伝えたり、共同作業中にテキストで会話できるのが特徴です。
Figma Slide「ライブインタラクション機能」の使い方
コメント機能の左にある指をタップしているようなアイコンをクリックすることで、ライブインタラクション機能を実行できます。
Figmaより
アイコンをクリックすると上記のように、投稿やスタンプなど票を集めるためのデザインが表示されます。今回はテストとして「投稿」をクリックします。
Figmaより
選んだデザインの入力欄に任意の質問内容と回答を入力できます。
Figmaより
上記のようにアンケートをスライドに配置することで、同じチームの人から意見を募ることが可能です。
Figma Slide「オートレイアウト機能」の使い方
オートレイアウト機能はスライド内にある複数の情報を選択することで利用可能。たとえば同じレイアウトの情報が3つ並んでいる場合、オートレイアウト機能を使うことで各情報の幅を均一に保ちながら操作できます。
Figma Slide「オートレイアウトフレーム機能」の使い方
オートレイアウトフレームは、テキストのトーンを「カジュアル」や「プロフェッショナル」などに調整できる機能です。
Figmaより
上記のようにトーンを変更したいテキストを選択し、画面右の機能一覧から「オートレイアウトフレーム」をクリック。調節したいトーンに指定するとテキストが変わります。
オートレイアウトフレーム機能を使う一連の流れを下記の動画で確認できます。
Figma Slideのデザインモードは有料プランのみ？
Figma Slideのツールバーにあるデザインモードを使うことで、にはさまざまなデザイン機能を使用できます。
Figmaより
しかしデザインモードの使用を試みると「デザインモードにはFigmaデザインプランが必要です」と表示されて利用できませんでした。
上記の結果から、Figmaのデザインモードは無料ユーザーだと利用できない機能だということが伺えます。
References
- ^ PRTimes. 「Config 2024 Figma、プロダクト構築の新時代を作る新たな機能/UIを発表」. https://prtimes.jp/main/html/rd/p/000000013.000097201.html, (参照 2024-07-04).
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
オンラインホワイトボート「FigJam」の使い方。FigJamとMiroの比較結果や料金プランも併せて解説
AI搭載のプレゼンツール「gamma」の使い方。料金プランや日本語対応の有無も併せて解説
ChatGPT搭載のスマートグラス「Solos AirGo 3」登場！言語翻訳やメッセージ読み上げなど豊富な機能を搭載
Luma Dream Machineの新機能「キーフレーム」を使ってみた。2枚の写真から中割り動画を作成可能
