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

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

公開: 更新:
だーだい
フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile


Figma Slideとは

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

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

Figma Slideで利用できる機能

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

豊富なテンプレート 様々な種類のテンプレートを搭載。利用用途に合わせたデザインやレイアウトのテンプレートを利用できる。
コラボレーション機能 スライドを第三者に共有し、共同で作業できる。
ライブインタラクション機能 アンケートやスタンプなどで意思表示するUIを設定し、複数人にスライドの意見を募ることが可能。
コメント機能 デザインにコメントを追加したり、コラボレーション中にテキストで会話したりできる。
オートレイアウト機能 レイアウトの統一性を補完できる。
オートレイアウトフレーム機能 テキストのトーンを「カジュアル」や「プロフェッショナル」などに調整できる

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

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


Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

Figma Slideを使ったスライドの作り方

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

Figma:https://www.figma.com

Figma Slideを使ったスライドの作り方

Figmaより

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

Figma Slideの使い方

Figmaより

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

Figma Slideの使い方

Figmaより

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

 

Figma Slideの使い方

Figmaより

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

Figma Slideの使い方

Figmaより

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

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

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

Figma Slideの使い方

Figmaより

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

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

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

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

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

Figma Slideの使い方

Figmaより

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

Figma Slideの使い方

Figmaより

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

Figma Slideの使い方

Figmaより

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

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

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

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

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

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

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

Figmaより

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

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

Figma Slideのデザインモードは有料プランのみ?

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).

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア 中途採用者向けのIT・プログラミング研修 - IT・プログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する