6月26日、Figmaによる大規模なカンファレンスイベントであるConfig 2024が開催されました。イベント冒頭のキーノートでは、同社CEOのDylan Field氏が複数の大きなプロダクトアップデートを発表。今回は、そんなキーノートの様子を発表された新機能と一緒にレポートします。
Dylan氏によると、今回のアップデート内容は、主に以下の3つのトピックに集約されるとのこと。特に、AIを活用した新機能はデザイナーの毎日の業務上の細かい悩みを解決するような素晴らしいものとなっています。
複雑さの緩和
より良い開発者体験
AI関連機能の導入
Figma自体がリデザインされた『UI3』
近年多くの機能が追加されるにつれてUIが複雑になり、ツールとしてのラーニングコストがかかるとの声が挙がっていたFigma。同社もこの問題を重要なものとして捉え、メイン画面のリデザインという形で複雑化したUIの最適化に取り組んできたとのことです。
このリデザインでは、コンポーネント関連情報をプロパティパネルの上部に表示するなど、多くのデザイナーが使用する主要な機能に目を向けて機能の優先度付けがおこなわれているように見えます。
キーノートで紹介されたFigmaの新しいUI『UI3』
先日、AdobeのVP of DesignであるEric Snowden氏が『Design Better』ポッドキャストに登場した際に、「Adobeのツールはデザイナーにとって楽器のようなもので、1px何かを動かすことがワークフローに大きな影響を与える可能性がある」と述べていましたが、今回のリデザインにおいてもFigmaチームのデザイナーたちは大きなプレッシャーを感じたのではないでしょうか？
ワンクリックでデザイン全体にオートレイアウトを反映することができるように
「Suggest auto layout」は、配置されたレイヤーの位置を元にコンポーネント内の要素のオートレイアウト方向をそれぞれ予測して、ワンクリックでデザイン要素全体に適切なオートレイアウトを反映してくれる機能です。
また、オートレイアウトが反映されたコンポーネントの上にドラッグ & ドロップでオブジェクトを追加する際に、「Control」キーを押しながら行うことで、絶対位置に配置することも可能になりました。
アセットパネル内での主要なUIKitの表示
iOSとMaterial Design 3、そしてFigmaのSimple Design SystemのUI Kitがアセットパネルから使用できるようになりました。
そのほかにも、2025年にはクライアントワークを行うフリーランスや制作会社向けに、クライアント企業への納品やFigmaファイル上での連携などを簡単にする機能の提供を予定しているとのことです。
開発モードでデザインの変更内容を時系列で確認できるように
開発モードには、新たにステータス変更時にコメントを残せる機能が追加されました。これによって、一度「開発準備完了」ステータスになったデザインに追加の変更があった時にも、変更内容を開発者に伝えやすくなります。
また、開発準備完了ビューが追加され、画面上に「開発準備完了」ステータスになっているデザインのみを表示することが可能になっています。そのほか、開発者がデザインの変更内容をタイムライン形式で確認することができる「フォーカスビュー」も登場。
ステート変更時のコメントとデザインの視覚的な変更を時系列で確認することで、デザインにどのような変更があったのかを開発者が把握しやすくなっています。
プロトタイプがレスポンシブレイアウトに対応し、横幅を可変させることが可能に
これまで、Figmaのプロトタイプ機能では画面全体の拡大・縮小にしか対応しておらず、画面幅の変化によるレスポンシブなレイアウト変更を確認することができませんでした。
今回のアップデートでは、プロトタイプに「レスポンシブ」という設定項目が登場。画面幅の変化によるレイアウトの動きをプロトタイプ画面で確認することができるようになりました。
そのほか、Code Connect機能のベータ版終了が発表されました。
Figma AIによるプロンプトからのデザイン生成
プロンプトによるデザイン生成機能が追加され、テキストでFigmaに対するデザイン指示を行うことができるようになっています。
建築家のポートフォリオサイトの作成をプロンプトで指示
Figma AIによって生成されたポートフォリオサイト
アプリのUIやWebサイトのデザインパターンを多く学習させているのか、かなりクオリティの高いデザインが生成されているようです。
Figma AIによって生成されたデザインの例
Figma AIによって生成されたデザインの例
また、現在はまだサポートされていないものの、既存のデザインシステムを利用したAIによるデザイン生成についても今後提供を検討しているとのことで、この辺りが実現されると単なるプロトタイプイングの領域を超えて、プロダクトデザインの現場に広くAIが取り入れられそうです。
スクリーンショット画像や手書きの図に基づいたデザイン検索
キーノートでは、Slack上でよくある「この画面のデザインファイルってどこ？」というやりとりを例に、スクリーンショット画像に基づいて類似するデザインやコ ンポーネントを探す機能が紹介されました。
この辺りは、かなりリアルなプロダクトデザイン現場の悩みをAIで解決する良い事例ですね。また、画像以外にも、テキストやペンツールによるラフな手書きからもデザインを検索ができるとのことです。
テキストなどのダミーコンテンツの自動生成
デザインファイル内に表示するダミーの画像やテキストを一つずつ準備するのは、これまでデザイナーにとってなかなか面倒な作業でした。Figmaでは、これらの作業をAIに行わせることができます。
コピーしたリストコンポーネントのテキストをAIで自動生成
リストUIのダミーテキストがすべて同じになってしまう場合などに、この機能を使うとよりリアルなテキストを表示することができます。そのほか、画面全体の翻訳にも対応。別の言語でのテキストの長さを確認したり、使用言語が異なるチームメンバーがデザインの内容を把握するのにも役立ちそうです。
AIによるレイヤーの自動命名
Figma AIの「Rename layers」機能では、「Frame」「Rectangle」などのレイヤー名をデザインの文脈に合わせて「Header」や「Wrapper」などと自動で命名してくれます。この機能の登場により、「レイヤーを命名しないデザイナーは悪いデザイナーなのか？」という議論はもう存在しないものとなりそうですね。
AIによる画面遷移プロトタイプの自動作成
Figma AIはさらに、画面ごとの役割を自動で判断してフレーム間の画面遷移プロトタイプを自動で作成することが可能。
これらのAI関連機能は順次ベータ版としてユーザーにロールアウトされていくとのことです。また、8月15日からチーム内のデザインファイルを使ったFigmaによるAIモデルのトレーニングが開始されるとのこと。このAIモデルのトレーニングへのデータ提供を行うかどうかは設定画面から変更することが可能になります。
Figma Slides
多くのデザイナーがおそらくすでにやったことがある、Figmaのプロトタイプ機能を使ったプレゼンテーションスライドの作成。Figmaに慣れているので、スライドを作るのには便利ですが、画面遷移の設定などはなかなか大変でした。
Figmaはこのようなユースケースに対応する「Figma Slides」を発表。オートレイアウトをはじめとしたFigmaのデザイン機能をフルに活用しながらも、プレゼンテーションスライドの作成に特化した画面構成と機能で、これまで以上にFigmaを使ったプレゼン準備が行いやすくなります。
また、AIを使った文章の変更にも対応しており、マトリックスUIによる文章のトーン調整ができるというユニークな機能もあります。
マトリックスUIによる文章のトーン調整
プレゼンテーションスライドの中にインタラクティブなFigmaプロトタイプを埋め込むことも可能。
その他、Figmaの共同作業機能を活かして複数人でのプレゼンテーション操作やリアルタイムでの投票機能も提供。
Figma Slidesは2025年はじめに月$3 - $5/ユーザーで提供開始予定。それまではすべてのユーザーが無料でベータ版を利用できるとのことです。
まとめ
今回のConfigでは、Figmaのリデザインをはじめ、AI関連機能などデザイナーのワークフローを大きく変えることに繋がるような新機能が多く発表されました。レイヤーの自動命名や画像によるデザイン検索、プレースホルダーテキストの生成など、FigmaによるAIの活用方法はどれもリアルなプロダクトデザインの現場の悩みに応えるものとなっており、Figmaならではのユーザーコミュニティを活かしたプロダクト開発の様子が伺えます。
また、Figmaチームが現在模索しているという「既存のデザインシステムを使ったAIデザイン生成」など、Figmaが目指す方向性から、デザイナーの仕事の未来像が垣間見れたように思います。
参考資料
