FigmaにAI検索を組み込んだ方法
オートコンプリートからAI検索への移行。デザイナーが既存のファイルを検索して使用できる新しい方法を採用した経緯をご紹介します。
FigmaにAI検索を組み込んだ方法を共有
イラスト: Structure Bâtons
企業によっては、既存のデザインを見つけるための専用のSlackチャンネルを用意しているケースもあります。
多くのデザイナーは、インターフェースのデザインというやりがいのある作業以外に、既存のデザインファイルを見つけるという単純なことに、驚くほど多くの時間を費やしています。Figmaでは、デザイナーがスクリーンショットのみをヒントに元ファイルを探し出すため、たくさんの時間を無駄にしていることに気づきました。Slackには、デザイナーが同僚に助けを求めるメッセージが山のように残っていました。これが、Config 2024でAIを活用した検索を発表した理由です。
ビジュアル検索では、スクリーンショット、選択したフレーム、簡単なスケッチを使って検索することができます。セマンティック検索では、コンポーネントやファイルの名前や正確な内容がわからなくても、AIが文章ベースのクエリの背後にあるコンテキストを理解します。
振り返ってみると、ビジュアル検索とセマンティック検索は、構築して当然の機能だったと思います。しかし、AI機能を正しく実現する、つまり誇大広告ではなく、真に付加価値をもたらす機能を実現するには、時間がかかります。Figmaの場合は、スコープ作成とテストに数カ月を要しましたた。
さらに詳しく知りたい方は、これらのアップデートを支えるインフラの構築方法を紹介した記事をご覧ください。
オートコンプリートからAI検索への転換
デザインのオートコンプリートなどの機能を使うと、次に使うコンポーネントのおすすめが表示されるため、スムーズに制作できます。
私たちは、仕事の定型的な部分はAIが担い、ユーザーはより高度な思考やニーズに集中できるようにすべきと考えています。これを念頭に置いて、2023年6月に3日間のAIハッカソンを開始しました。スプリントの期間中に20のプロジェクトが完了し、その中には、実用的なプロトタイプを備えた野心的なプロジェクト、デザインオートコンプリートも含まれていました。このAIアシスタントは、たとえばオンボーディングフローの「はじめに」ボタンなど、必要なコンポーネントを作業中に提案します。非常に勢いがあったため、すぐにこれを製品ロードマップに追加し、構築に着手しました。
検索拡張生成(RAG)は、LLMの精度を向上させるためのフレームワークです。
最初のステップは、実用的なプロトタイプを社内のチームと共有し、ユーザー調査セッションでそれを使用したデザイナーの意見を聞くことでした。そして、デザイナーたちのフィードバックに基づいて機能を改良していく作業と並行して、AI検索を強化するための基盤の構築も始めました。検索拡張生成(RAG)に基づいて、検索からの例を使ってAIアウトプットを改善できることはわかっていました。デザインオートコンプリートが、デザイナーが制作しているものと似たデザインを見つけることができれば、次に使用するコンポーネントをより適切に提案できるはずです。
社内のフィードバックとテストに基づいてオートコンプリートを繰り返し適用していくうちに、一貫したパターンが浮かび上がってきました。たとえば、プロジェクトを開始するとき、デザイナーはゼロから作り始めるのではなく、既存のファイルに改良を加えていきます。過去の制作を振り返り、古いアイデアを掘り起こし、それらを使って作品を作っていくのです。実際に、Figmaのキャンバスに追加されたオブジェクトの75%は他のファイルから取得されています。問題は、使用するデザインを見つけるためは、社内の構造や誰が何を制作したかを知る必要がある場合が多いため、時間がかかり作業フローが乱れてしまうことでした。はたしてオートコンプリートに注力するのが適切なのか、それとも検索機能を最初にリリースすべきなのかと、私たちは考えました。
その答えを出す前に、デザイナーのワークフローと行動に基づいて、検索をどのように改善できるかに注目しました。そこで、解決すべき主なワークフローが2つあることがわかりました。1つは、デザイナーがユーザーの問題の解決策をブレインストーミングする探索モードで、もう1つは、キャンバスに何かをすばやく取り込もうとする実行モードです。
デザイナーはこれらのモードを行き来することが多いため、次の2つの主要な問題に取り組む必要がありました。
- デザイン要素は、必ずしも適切なレベルで見つけられるとは限りません。以前は、デザイナーはデザインシステムライブラリの下層コンポーネントを検索するか、特定画面のすべてのファイルを開くかを選ばなければなりませんでした。その中間にあるのもの(複数のコンポーネントを組み合わせたフレームなど)を見つけるのは時間がかかり、制作フローに支障をきたします。
- サムネイルだけでは、検索結果が関連性のあるものかどうかを見分けるのは困難です。検索結果に表示されたデザインが目的のものか、最新バージョンなのかがわからない場合、サムネイルを見るだけではなく、ファイルを開いて確認する必要があります。
この調査により、検索が重要な問題であることが明らかになりました。オートコンプリートは後にして、検索とナビゲーションの改善を急ぐ必要がありました。
検索アプローチの範囲を決定
オートコンプリートなどの将来的な機能に備えながら、価値をもたらすような焦点を絞ったアプローチが必要であることはわかっていました。そこで調査を行ったところ、主に3つの使用例が指摘されました。
- フレームの検索。デザイナーは、編集や再利用するために使う、特定のデザインを検索します。
- フレームのバリエーション。デザイナーは、特定のUIをデザインする方法を模索するため、過去に検討や承認されたアセットを利用した既存のパターンを検索します。
- 幅広いインスピレーション。デザイナーは、制作のヒントを探るため、テーマ的に似ているコンセプトやさまざまなアプローチを検索します。
私たちは、プロジェクトの開始時にヒントを探すといった、あまり頻度の高くないアイデア創出の使用例に取り組む前に、適切なデザインを見つけるなどの、制作に関連する一般的な検索ニーズから始めることにしました。これにより、既存のユーザーの習慣に基づいて、より速く学習できるようになります。また、逆画像検索などの確立されたAI研究を活用して、ユーザーに迅速に価値を提供したいと考えました。このビジョンをデザインチームのメンバーと共有するために、改善された検索機能を紹介するエンドツーエンドのプロトタイプを構築しました。
無限のキャンバスの課題
すぐに、すべてをインデックス化して検索するのは無理だとわかりました。コストがかかりすぎるためです。デザイナーは新しいデザインを作るときに過去の作品を参考にすることが多いため、UIデザインのように見えるトップレベルのフレームを表示することに重点を置きました。私たちが想定していなかったのは、デザイナーは作品をセクションやその他のフレームで整理することが多いため、UIデザインを見抜くのが難しいことでした。そこで、一般的なUIフレームのサイズを調べたり、適切な条件を満たせばトップレベル以外のフレームも考慮するといったヒューリスティックを使ったりしてこれを解決しました。
しかし、ファイル内のUIデザインを識別するのは依然として手に余るものでした。デザイナーは、作品を複製や微調整して繰り返し使うことがあるため、同じようなデザインのページがたくさん存在します。重複するデザインをすべて検索するのではなく、そのうちの1つだけを検索可能にすることで、膨大な量を削減できました。ファイルについても同じで、デザイナーは頻繁にファイルをコピーするので、変更されていないコピーのインデックス作成も省略しました。
今はまだ、異なるアプローチを試しているところです。ひとつの方向性として、フレームが開発準備完了とマークされているかどうかなどの「品質シグナル」を作成することをテストしています。
最後に、ファイル内のUIデザインの階層を作成する必要がありました。デザイナーが制作したファイルには、完成したデザインもあれば、「お蔵入り」のエリアに属するデザインもあることがわかりました。アーカイブされたデザインを掘り起こさなくても、完成したデザインが見つけられるようにする必要があります。手っ取り早い解決策の1つは、デザイナーが手直しを終えたことがわかるまで、デザインのインデックス作成を延期することでした。つまり、ファイルが4時間編集されなかったときにのみインデックスを作成しました。このアプローチにより、未完成の作業が検索結果に表示されなくなり、完成したデザインが表示される可能性が高まりました。また、システムの負荷も軽減されました。
Figma流のAI品質評価
AIモデルの性能を最大限に引き出すには、「評価」でパフォーマンスを測定します。評価とは、さまざまな状況でモデルが特定のタスクでどの程度うまく機能するかを調べるテストです。私たちにとって、それは典型的なクエリの検索結果の品質をチェックすることを意味しました。評価クエリを選んだのは、社内デザイナーの話を聞いて、Figmaのファイルブラウザをどのように使用しているかを分析したためです。デザイナーは、「チェックアウト画面」のようなシンプルなもの、「緑の波線のある赤いウェブサイト」のようなわかりやすいもの、「プロジェクト [コードネーム] テーマピッカー」のような具体的なものを検索するかもしれません。
デザイナーのあらゆるニーズに応えるため、完全に一致するもから非常に類似したもの、ある程度異なるものまで、全体的に適切な結果を提供するソリューションを用意する必要がありました。さまざまな類似性レベルで高品質の結果を提供できなければ、この機能は役に立ちません。私たちの調査によると、最終的に多様な結果を求める場合でも、ユーザーはより近いもの、より類似したものから始めることを好むことがわかりました。言い換えると、干し草の山から針を見つけることができると証明できなければ、デザイナーは広範囲の検索に使える機能だと信頼しないでしょう。
私たちは、公開プラグインAPIを使用して、無限のキャンバスで検索結果を採点するツールを構築しました。また、ラベル付けを簡単にするためにキーボードショートカットも追加しました。
デザインの細部にこだわる
予期せぬ課題に取り組み、品質重視のアプローチを決定した後は、デザインに焦点を絞りました。デザイナーが探索から実行までスムーズに移行するような直線的なワークフローを構築する方が簡単ですが、現実はもっと複雑です。デザイナーは、スタートから完成までの作業中に、モード間を行き来します。デザイナーがいつどのモードにあるかを推測するのではなく、Figmaでさまざまな結果を提示し、各自のニーズに最も合ったものを選択できるようにすることにしました。そこで、入力タイプに関係なく、検索結果を絞り込むための統一されたインターフェースを作成することに重点を置きました。「作成者」フィルターやメタデータ(どのファイルを誰が作成したか、最後にいつ編集したかなど)などの機能を追加しました。
デザインプロセス全体を通じて、数多くのコンセプトを検討しました。そのうちのひとつで、私たちが「深掘り」と呼んでいるものは、デザイナーがクリックするだけで結果タイプを深く掘り下げることができるというものです。最終的には、アクションの検索エクスペリエンスをわかりやすくするために、この機能を廃止しました。
Figmaの他のチームがAI機能のホーム画面となる新しいアクションパネルを検討していたところ、私たちはそれが検索機能の改善に最適な場所であることに気付きました。しかし、この決定は、ある設計上の課題をもたらしました。たとえば、アクションパネルでは、ファイルブラウザよりも検索結果を表示するスペースが少なくなります。そこで、すばやくプレビューできるように「ピーク」などのデザインの詳細を追加し、デザイナーがCMD+Enterキーを押して結果をフルスクリーンで確認できるようにしました。
AI検索のリリース
クローズドベータ版や評価プラグインを使った改良を繰り返すなど、何ヶ月にもわたる開発を経て、より広範なリリースの準備が整いました。振り返ってみると、この作品のリリースは4つの主要な原則に従って行われました。
- 既存のワークフロー向けAI: ファイルの閲覧や現在のファイルへのフレームのコピーなど、ユーザーがすでに実行しているタスクを合理化するためにAIを適用しました。
- 迅速な反復: 社内ベータテストで得たインサイトを活用して機能を改良し、継続的にステージング環境に向けたアップデートを行いました。
- 体系的な品質チェック: 検索結果の精度をモニタリングし、改善するためのカスタム評価ツールを開発しました。
- 分野を超えたチームワーク: 製品、コンテンツ、エンジニアリング、研究の各分野における緊密な協力関係により成功を収めることができました。
将来を見据えて、これらの検索機能をさらに発展させていく可能性に期待しています。私たちのロードマップには、ビジュアル検索とセマンティック検索をFigmaコミュニティにもたらす計画が含まれています。実際のユーザーの問題に焦点を当て、フィードバックとデータに基づいて微調整することで、クリエイティブプロセスを改善するAI搭載デザインツールの強固な基盤を築くことができました。ぜひお試しいただき、お探しのものをより簡単に見つけるお役に立てていただければ幸いです。
これらの機能を実現するために協力してくれたFigmaの多くのチームと、この記事に貢献してくれたSpencer de Mars、Augustus Griffin、Rohun Golkarに感謝します。