Figmaの新機能「Figma Slide」の使い方を機能別に詳しく紹介

だーだい

Figma社が2024年6月26日に開催した「Config 2024」イベントにて、注目すべき新機能のひとつとして「Figma Slides」を発表しました。^[1]この機能はFigmaの設計ツールとプレゼンテーション機能を融合させたものです。

Figma Slidesの導入により、Figmaにおけるデザイン作成とプレゼン作成をFigmaだけで実行可能。デザインからプレゼンへの移行がスムーズになり、ワークフローの効率化が期待できます。

Figma Slideには下記のような機能が備わっています。

スライドの大枠はテンプレートを使って簡単に作成可能。レイアウトの統一性を担保するオートレイアウト機能など効率性の高い機能が備わっています。

特にチームで作成する際の機能に優れているのが特徴。スライドの作成から公開まで複数人で担当するる際に役立つでしょう。

はじめにFigmの公式ページへアクセスします。

Figma:https://www.figma.com

Figmaより

トップページの上部にある「スライドデッキを新規作成」をクリックしてください。

Figmaより

「始める」をクリックします。

Figmaより

するとスライドのテンプレート選択画面が表示されます。画面上部の検索欄から任意のスライドを探すことも可能。気に入ったスライドをクリックして下さい。

Figmaより

選択したテンプレートの内容が表示されます。選びたいテンプレートが見つかったら画面右下の「テンプレートを使用」をクリックして下さい。

Figmaより

すると上記のようにスライド画面が表示されます。最初はトップのスライドのみ表示されており、右上にある「新しいスライド」をクリックしてほかのテンプレートを追加できます。

次に、Figma Slideに搭載されている各機能の使い方を解説します。

Figma Slide「コメント機能」の使い方

Figmaより

コメント機能を使うステップは下記の通りです。

1. コメントしたい場所をクリック
2. 画面下部にあるツールバーの中から吹き出しのアイコンをクリック
3. コメントを入力

コメントを残すことでデザインの意図を詳細に伝えたり、共同作業中にテキストで会話できるのが特徴です。

Figma Slide「ライブインタラクション機能」の使い方

コメント機能の左にある指をタップしているようなアイコンをクリックすることで、ライブインタラクション機能を実行できます。

Figmaより

アイコンをクリックすると上記のように、投稿やスタンプなど票を集めるためのデザインが表示されます。今回はテストとして「投稿」をクリックします。

Figmaより

選んだデザインの入力欄に任意の質問内容と回答を入力できます。

Figmaより

上記のようにアンケートをスライドに配置することで、同じチームの人から意見を募ることが可能です。

Figma Slide「オートレイアウト機能」の使い方

オートレイアウト機能はスライド内にある複数の情報を選択することで利用可能。たとえば同じレイアウトの情報が3つ並んでいる場合、オートレイアウト機能を使うことで各情報の幅を均一に保ちながら操作できます。

Figma Slide「オートレイアウトフレーム機能」の使い方

オートレイアウトフレームは、テキストのトーンを「カジュアル」や「プロフェッショナル」などに調整できる機能です。

Figmaより

上記のようにトーンを変更したいテキストを選択し、画面右の機能一覧から「オートレイアウトフレーム」をクリック。調節したいトーンに指定するとテキストが変わります。

オートレイアウトフレーム機能を使う一連の流れを下記の動画で確認できます。

Figma Slideのツールバーにあるデザインモードを使うことで、にはさまざまなデザイン機能を使用できます。

Figmaより

しかしデザインモードの使用を試みると「デザインモードにはFigmaデザインプランが必要です」と表示されて利用できませんでした。

上記の結果から、Figmaのデザインモードは無料ユーザーだと利用できない機能だということが伺えます。

References

1. ^ PRTimes. 「Config 2024 Figma、プロダクト構築の新時代を作る新たな機能/UIを発表」. https://prtimes.jp/main/html/rd/p/000000013.000097201.html, (参照 2024-07-04).