FigmaがAI関連機能を発表 ビジュアル検索や生成AI、レイヤーの自動リネームなど #Config2024

Figmaは、新製品発表会「Figma Config 2024」で、AI関連機能「Figma AI」を発表しました。AIを活用したビジュアル検索やテキスト生成ツール、レイヤーの自動リネームなどが搭載されます。
目次
検索機能の強化
Figmaは、AIを活用したビジュアル検索とアセット検索を導入することを発表しました。
ビジュアル検索では、画像をアップロードするかキャンバス上の領域を選択することで、その画像に関連する既存のコンポーネントやデザインを検索できます。また、テキストで検索することも可能です。

ビジュアル検索を使うと、Figmaはユーザーがアクセスできるチームのすべてのファイルから検索し、類似したデザインを表示します。
もっとも関連性の高いフレームを現在のファイルに直接挿入することで、たとえば会社内で他のチームが作ったデザインを再利用するといったことが可能になります。
将来的には、Figmaコミュニティのファイルやアセットも検索対象になる予定です。その際には、元の作成者のクレジットが記載されたり、ソースファイルにアクセスしたりできるようになるとのことです。
Figmaは、[アセット]パネルにおけるアセット検索もAIを使って強化しました。検索キーワードが対象の名前に含まれていなくても、もっとも関連性の高いコンポーネントとアセットを表示できるようになります。
たとえば、「プライマリーボタン」と検索すると、「btn_large」という名前のコンポーネントを表示できます。従来の単純なキーワードマッチングよりも、より直感的な検索が可能になります。
作業を効率化するツール
AIを活用したテキストツール
AIを活用したテキストツールの導入も発表されました。クリックするだけで、テキストを翻訳したり、要約したり、書き換えたりできるようになります。

ダミーテキストと画像の生成
Figmaは、関連性の高いダミーテキストや画像をAIで生成する機能も導入します。デザインでは、Lorem Ipsumのようなダミーテキストや、プレースホルダー画像がよく使われます。
今後は、Figmaが自動的に関連性の高いダミーテキストや画像を生成してくれるようになります。
さらに、画像の背景を削除するツールも導入されます。これまでは、サードパーティーのプラグインや、Remove.bgといったWebサイトを使って背景を削除する必要がありました。Figma AIを使えば、サードパーティーのツールに頼らずに背景を透過できるようになります。

クイッククリックプロトタイピング
[プロトタイプを作成]ボタンをクリックすると、静的なモックアップをインタラクティブなプロトタイプに変換できます。プロトタイプをキャンバス上で直接プレビューでき、より効率的にデザインできます。

レイヤー名の自動変更
Figmaは、レイヤー名を自動的に変更する機能も導入します。ワンクリックでレイヤーの名前をコンテキストに応じた名前を自動変更できます。

プロンプトからのデザインの生成
アクションパネルの[デザインの作成]では、AIを使ってテキストプロンプトからUIレイアウトとコンポーネントを生成できるようになります。どのようなデザインが必要かをテキストで説明するだけで、FigmaのAIがドラフトを作成してくれます。


さらに、Figmaは将来的に、GoogleのMaterial 3デザインキットなどのデザインシステムを活用し、UIを生成できるようになる予定としています。最終的には、組織独自のデザインシステムのアセットやパターンを使用してUIを生成できるようになるとのことです。
Figma AIを使う方法
Figma AIは、2024年の間はベータ版として無料で提供されます。場合によっては、ベータ版の使用制限を導入する可能性があるとのことです。また、Figma AIの一般提供が開始されたら、価格などの詳細を発表するとしています。
現在、Figma AIはベータ版として提供されており、利用するにはウェイティングリストに登録する必要があります。
ウェイティングリストに登録するには、Figmaの右下に表示されているクエスチョンマークのボタンから、[UI3とAIのウェイティングリストに参加する]をクリックします。

Config 2024での発表
Config 2024では、Figma AIの他にも、UIデザインの刷新も発表しています。Figmaの新しいUIデザイン「UI3」については、こちらの記事で詳しく紹介しています。

参考
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。





![[新しいXチャットへようこそ]というテキストが画面に大きく表示されており、その下には次の3つの説明が表示されている。[エンドツーエンドの暗号化:メッセージは、端末にかかわらずエンドツーエンドで暗号化されています。][最先端のプライバシー:Xを含め、他の人がメッセージを読むことはできません。][パスコードを設定:メッセージを保護するため、4桁のパスコードを設定してください。]これらの説明の下には、[パスコードを作成]という大きなボタンが配置されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fwelcome-to-new-chat.png&w=1920&q=75)



![Discordの[プロフィールのプライバシー]設定のスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fdiscord-profile-privacy-settings.png&w=3840&q=75)

