MCPサーバーのご紹介: Figmaをワークフローに統合

これまで、AIツールにデザインのコンテキストを提供する唯一の方法は、デザイン画像やAPIレスポンスをチャットボットに入力することでした。しかし、最近登場したModel Context Protocol (MCP)により状況は変わりました。MCPは、アプリケーションがLLMにコンテキストを提供する方法の標準です。私たちは、この標準をFigmaのMCPサーバーに適用しました。これにより、開発者はFigmaからのコンテキストをVS CodeのCopilot、Cursor、Windsurf、Claude Codeなどのエージェント型コーディングツールに取り込むことができます。適切なバリアブルやスタイリングを用いた新しいアトミックコンポーネントの作成であれ、複数レイヤーのアプリケーションフローの構築であれ、このサーバーがより効率的かつ正確なデザインからコードへのワークフローを実現すると確信しています。

これはベータ版であり、まだ始まりにすぎません。今後数か月にわたり、リモートサーバー機能やコードベースとのさらなる統合といった機能を含む数多くのアップデートをリリースする予定です。皆様からのフィードバックをもとに、私たちはサービスの改善と拡張を続けていきます。フィードバックを直接お寄せいただくには、このフォームをご利用ください。今後さらに多くの取り組みを予定していますが、まずはここに至るまでの経緯を振り返って共有します。

コンテキストがすべて

現在、LLMは実用的なコードを生成することができます。しかし、ツールに対して学習データ以外のコンテキストを与えずにコード生成を依頼した場合、その出力は一応使えるものの、既存のコードベースに見られるパターンとは一致しない可能性が高いです。これは、各チームがコードベースに対して異なる構造、フレームワーク、用語、ワークフローを持ち、それぞれのニーズに基づいてコードベースを進化させる判断を下しているためです。これらの違いが積み重なり、LLMが推測することの難しい独自の指紋のようなものが形成されます。

これらのパターンを認識し理解するには、追加のコンテキストが必要であり、ここでエージェント型コーディングツールが役割を果たします。これらのツールは、既存コードの読み取り、リポジトリ履歴の確認、ドキュメンテーションへのアクセス、データベーススキーマの理解などからコンテキストを収集し、それをLLMに供給します。その結果、LLMは既存システムと整合し、精度が高く情報に基づいたコードをIDE内で生成できるようになります。FigmaのMCPサーバーのようなMCPサーバーは、Figmaなど他のツールから外部コンテキストをそのワークフローに取り込むことでこれを補完します。これにより、コードはコードベースの特徴だけでなく、デザインの特徴にも適合するようになります。

デザインからコードへの移行において、デザインコンテキストは極めて重要です。デザイン意図を理解するにあたっては、LLMに何を求めるかに基づき、有用となり得るさまざまな情報を考慮する必要があります。この情報を正しく把握することは重要です。なぜなら、デザインをコードに変換するプロセスは、単なる詳細なインスペクション以上のものだからです。

LLM向けにデザイン意図をどのように翻訳するか

開発者がFigmaファイルを開いた際、最初に行うのは全体を縮小表示し、全体の秩序や構造を把握することです。次に、一連の画面や推論されたロジックを処理し、異なるファイルにまたがる機能をコードでどのように構成するかを考えます。構築を進めながら監査を行い、パターンが正しいかを確認し、プレースホルダーのコンテンツをバックエンドから取得すべき実データとして解釈します。デザインを実装する過程全体を通じて、開発者はさまざまな種類のコードを生成し、低レベルの詳細から高レベルのパターンまで、異なるレイヤーをまたいで作業を行います。デザイン意図をコードに正しく反映させるためには、LLMもまたこの全体像を把握する必要があります。

Figma MCPサーバーは、デザイン意図に関するより詳細で微妙な情報を補完し、既存のパターンやシステムからも情報を引き出すことで、LLMに対しこの全体像をいくつかの重要な方法で提示します。タスクによって必要とされるコンテキストの組み合わせは異なり、しばしば提供するコンテキストと同様に、除外するコンテキストも重要です。そのため、当社のMCPサーバーのように、特定の種類のコンテキストをLLMに提示するツールが必要となります。当社のサーバーでは、ツールが返す情報を制御できるよう設定を構成することも可能です。ここでは、ご利用の環境や優先事項に応じて、これらのコンテキストを増減させる際に考慮すべき点を解説します。

パターンのメタデータ

すでにデザインシステムに投資し、デザインとコードの両方に整合するコンポーネント、バリアブル、スタイルといったパターンを活用している場合、Figma MCPサーバーはその効果をさらに高めます。そして、LLMもこれらのパターンを活用できるようにすることが重要です。エージェント型の検索手法は、特に大規模なコードベースにおいて、適切なパターンを見つけるのに相当な時間を要することがあります。また、デザインで参照されているものとは異なる有効なパターンを見つけることもあります。特定のバリアブル、コンポーネント、スタイルへの参照を提供することで、Figma MCPサーバーは生成されるコードをより正確かつ効率的にし、LLMのトークン使用量を削減することができます。

たとえば、デザインとコードをうまく連携させたとしましょう。コンポーネントインスタンスのスクリーンショットだけを提供した場合、AIツールは適切なコンポーネントを特定するために、アイコンやコンポーネントライブラリなどコードベースを長時間検索することになります。一致するものが見つからない場合、スクリーンショットに基づいて新しいコンポーネントを作成する可能性があります。一方、Figmaが使用しているコンポーネントを把握していれば、Code Connectを通じて、エージェントが必要とするコードファイルへの正確なパスを共有できます。

同様に、赤い長方形のスクリーンショットを取得してエージェント型ツールにトークンを使用させる場合、同じ赤の値を持つ多数の異なるトークンが存在する可能性があります。Figmaは、どの特定のトークンが使用されているかを把握しており、MCPを介してそのトークンの名前をLLMに提供できます。さらに便利なのは、そのバリアブルに対応するコード構文をFigmaに設定していれば、Figma MCPサーバーがその正確なコードをLLMに提供できることです。

スクリーンショット

チームは複雑かつ魅力的なあらゆる種類のデザインを構築しますが、詳細に入る前にデザイン全体を俯瞰し、高レベルな視点で捉えることが有益な場合が多くあります。例えば、画面のシーケンス、セクション、モバイルおよびデスクトップのレスポンシブなコンテキストといった全体像を把握しようとする際、高レベルのスクリーンショットは、LLMに対してセクションやノード間の関係を示し、スタイルの詳細だけでは捉えられない全体的なフローを把握させることができます。

この種のビジュアル情報の価値は、LLMが仕様をそのまま一対一で再現することよりも、むしろデザイン意図について何を伝えるかにあります。正しいコードはデザインの意図に沿っており、単なるピクセルではありません。私たちは、スクリーンショットをコードレスポンスの補足情報と捉えています。スクリーンショットとFigmaのコード出力を組み合わせることで、単独の場合よりも優れた成果が得られます。

インタラクティブ性

コード例は、すでにFigmaで定義されているデザインの挙動や、すでにコードベースに接続されている挙動を記述することができます。コードプロトタイプと捉えられる疑似コードは、単にプロパティを記述するだけよりも効果的にLLMにコンテキストを与える優れた方法です。特に、バリアブルのコード構文やコンポーネントのCode Connectなど、コードベースに基づく情報が組み込まれている場合にその効果は高まります。

このサンプルコードは、完全にカプセル化された機能の一部を記述したい場合など、いくつかのシナリオで有用です。ステートフルコンポーネントの疑似表現は、Figmaのメタデータツリーでは提供できない形でLLMに有用です。また、UIを個別にメタデータとして検証するのではなく、そのシーケンスを表現することで、相違点に焦点を当てるのにも有効です。

コンテンツ

私たちは、Figmaからデザインが示唆する内容も確実に反映されるようにしたいと考えています。Figma内のプレースホルダーコンテンツでさえ、デザインコンテキストを示す要素となり、LLMにとって有用な情報源となり得ます。テキスト、SVG画像、レイヤー名、注釈といったコンテンツは、コード側のデータモデルでインターフェースをどのように埋めるかをLLMが導き出すのに役立ちます。

デザイン情報に基づくコード生成

多くの開発者がすでにIDEでの作業効率化にAIを活用しており、私たちは、出力の一貫性と高精度を維持しながら、これらのワークフローをさらに加速できることを楽しみにしています。現在では、MCPサーバーにある3つのツールから始まります。これにより、Figmaの現在の選択や特定のノードIDからコンテキストを取得できます。1つはコード用、もう1つは画像用、そして3つ目はバリアブル定義用です。サーバー設定内でコードツールが返すレスポンスの種類を変更でき、これにより目の前のタスクに応じた細かな調整が可能になります。ReactとTailwindを用いた、よりインタラクティブなコード表現を有効化でき、今後さらに多くのオプションが追加される予定です。Code Connectは、生成されたコードがコードベースと整合することを保証し、コンポーネントのマッピングを確認できるとともに、バリアブルに追加したコード構文も反映されます。

Figma MCPサーバーをベータ版としてリリースするにあたり、現在の機能に関するフィードバックを募集しています。皆さまのご意見を今後の開発に役立てます。初期テストに基づき、すでにいくつかの改善に取り組んでいます。まずはFigmaデスクトップアプリを必要とせずにMCPを利用できるようにし、チームがどこからでもより簡単に導入・コラボレーションできるようにします。さらに、より直感的なセットアップを可能にすることで、コードベースとの統合を深め、Code Connectの操作性を簡素化する取り組みも進めています。将来のバージョンでは、アノテーションやグリッドなどをサポートする機能を探求します。

これは、より迅速なハンドオフ、よりスマートな出力、そして効率的なワークフローを備えた、優れたデザインからコードへの体験を実現するための、私たちの取り組みの第一歩にすぎません。FigmaのMCPサーバーには、Devまたはフルシートのいずれかでアクセス可能です。今後もこの分野への投資を継続していく中で、さらなるアップデートにご期待ください。皆さまからのご意見を伺えることを楽しみにしています。