![見出し画像](https://assets.st-note.com/production/uploads/images/149785926/rectangle_large_type_2_bc18790119a434e3b6f25a58cf845110.png?width=1200)
Figma Slidesのインタラクティブな機能を触ってみた
待望のFigma Slides
こんにちは。and factoryデザイナーのみなみです。
Config 2024にてUI3やFigma AIなどが発表され大きく盛り上がっていますね。僕はその中でも特にFigma Slidesに注目してます。
この記事では実際にFigma Slidesを触ってみて発見したインタラクティブな機能を紹介していきます。
Figmaでスライドを作る意味
僕がスライド資料作りをFigmaに移行してから、丸2年が経ちました。
Figmaを選んだ理由は、Figmaの強みである「コラボレーション」と「インタラクティブさ」がスライドデザインにとてもマッチしているからです。そして、その強みはFigma Slidesにも継承されています。
![](https://assets.st-note.com/img/1722908321443-rQEw22XY4u.png?width=1200)
▲2年前に作ったスライドは色の決め方と命名についてのものでした。2年前のファイルをUI3で開くというタイムトラベル。
僕はスライドを使ってプレゼンする時にプレゼンモード(プロトタイプ再生)は使いません。
Figma Designファイルをそのまま共有し、スライドが置かれてるページを自由に移動してもらえるようにしています。これにより、カーソルチャットやコメントでリアルタイムのリアクションを得られるだけでなく、ワークショップ形式で参加者に手を動かしてもらうときもスムーズに作業に移行できます。また、見返したいページを自分の好きなタイミングで確認できるのも利点です。
さらに、編集権限も付与しています。これにより、知らない言葉を検索するためにテキストをコピーしたり、レイヤーの中を見ることでスライド資料作成の参考にすることもできます。
![](https://assets.st-note.com/img/1722908359446-Krwz2pjmaH.png?width=1200)
▲スライドの周りにはワークショップ参加者の制作物やコメントが散らかってます。スライド資料が一方的な共有のためのものではなく、コラボレーションを生む要素の一つになっているということです。
Figma Slidesは作る側のハードルを下げた
Figma Designでのスライド資料作りは、デザイナー以外の方にとってはハードルが高いです。社内の方々にFigmaを普及させようと数年間取り組んできましたが、Figmaでスライド資料を作っている人はほとんどいません。
Figmaは頻繁に大規模なアップデートが行われるため、デザイナーであっても新機能を覚えきれない方も少なくありません。そのため、デザイナー以外の方にFigmaを使いこなしてスライド資料を作成してもらうのは難しい話です。
Figma Slidesはこのような状況を改善するため、複雑な機能は隠され、シンプルで使いやすいインターフェースになっています。もちろん、Figmaらしい操作感もそのままですし、高度なデザインモードにも変更可能なので、Figmaに使い慣れたデザイナーにもとても使いやすいです。
これにより、誰でもFigmaでスライド作成を楽しめるようになりました。
Figma Slidesの可能性
基本操作
簡単に主な機能をまとめると、以下の通りです。
他のスライド作成ツールにある基本的な機能はほとんど備わっている
Figma AIを使って文章を調整したり、画像を生成したりできる
バリアブル、コンポーネント、オートレイアウト、プロトタイプなど、Figma特有の機能を活用できる
ライブラリやテンプレートを自作できる
コメントやカーソルチャットを使って、円滑に共同作業ができる
長くなるので詳細な使い方は割愛します。
Figma Slidesは直感的に操作できるので、実際に使ってみるのが一番早いと思います。詳しく知りたい方は、公式ドキュメントや公式紹介動画をご覧ください。日本語での解説が必要な方は、noteや各種SNSで多くの方が使い方を解説しているので、そちらを参照してください。
こんなこともできる!可能性は無限大!
![](https://assets.st-note.com/img/1722908452298-924OMrAdoi.png?width=1200)
Figma Slidesの一番の強みは、Figma Designと同様に「コラボレーション」と「インタラクティブさ」です。これまでのプレゼン資料の常識を覆し、聞き手全員が資料を「楽しむ」ことができるようなデザインを実現できるツールになっています。
作り手同士のコラボレーションはもちろん、作り手と聞き手とのコラボレーションもスムーズに行うことができます。リアルタイムでのフィードバックやインタラクティブな要素を取り入れることで、プレゼンテーションがより魅力的になります。
動画やGIFの配置
動画やGIFももちろん配置できます。
画面共有の場合、動画やGIFの共有はラグが発生して見づらくなることがありますが、Figma Slidesでは各自がプレゼンテーションのリンクを開くため、動きを滑らかに伝えることができます。
![](https://assets.st-note.com/production/uploads/images/149999967/picture_pc_f6e85ad72e981af913f86b49956e1fa3.gif?width=1200)
インタラクティブな要素
Figma Designで作成したデザインをそのまま貼り付けることができるため、プレゼン中にフレーム内をスクロールしたり、モードを切り替えたりする操作が可能です。
![](https://assets.st-note.com/production/uploads/images/151233232/picture_pc_4cceda05f975b4e746f6a9ad5570800c.gif?width=1200)
面白い仕掛けを取り入れることで、印象的なプレゼンテーションが実現します。Figma Designでバリアブルやプロトタイプを駆使して作成し、Figma Slidesにフレームをコピペするだけで完了です。
![](https://assets.st-note.com/production/uploads/images/150000304/picture_pc_82186b2f0bf7915aa331063d75549414.gif?width=1200)
Live interaction
投票機能やプロトタイプをスライドに埋め込むことができます。
これにより、スライドをただ見せるだけでなく、実際にプロトタイプを操作してもらったり、その場で意思決定やアンケートに参加してもらったりすることができます。
発表者と聞き手とのコラボレーションがスムーズに行え、参加型のプレゼンテーションが実現します。
![](https://assets.st-note.com/img/1723085998657-uRcAqL5uYA.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/150001486/picture_pc_beef457e4fba97ef1c2124620f926693.gif?width=1200)
Grid viewとSlide View
各スライドを大項目ごとにグルーピングでき、Grid viewとSlide Viewの両方でグループ単位での編集が行えます。スライドの整理や編集が効率的に行えるため、プレゼンテーション全体の流れをスムーズに管理できます。
![](https://assets.st-note.com/production/uploads/images/150000737/picture_pc_f09b1e2d0994e322a4ab81a3be1742f5.gif?width=1200)
![](https://assets.st-note.com/img/1723086219915-SKNrfFm7nQ.png?width=1200)
まとめ
Figma Slidesは現在ベータ版で提供されており、Figma AIの日本語での精度など、まだ改善の余地がある機能も見受けられます。しかし、秘めたる可能性は大きく、プレゼンテーションツールとしての未来が非常に期待できます。
これからのアップデートでさらに多くの機能が実現され、より使いやすくなることを楽しみにしています。
この記事を読んで良かったと思った方は、是非スキ&フォローをお願いします✨
![](https://assets.st-note.com/img/1724119047297-8w1fTYEX6k.png?width=1200)
はじめまして📣
— and factory Designer (@andfactory_des) August 17, 2023
and factoryデザイナーチームのマスコットキャラクター「アンドリュー」です🧢
ボクがXを通して、様々なデザインtipsやand factoryのデザイナーの事を紹介するよ🎨💻是非フォローしてね! pic.twitter.com/z5lt3MMF3E