デザインコンテキストを重視すべき理由

明確なデザインの方向性を確立するには、時間と細部へのこだわりが必要ですが、それは全体像の一部に過ぎません。その同じレベルの配慮は、引き継ぎのプロセスにも及ぶべきです。現在、FigmaのDev Mode MCPサーバーを利用してデザインコンテキストをエージェント型コーディングツールに取り入れる開発者が増えるにつれ、そのプロセスを円滑にする上でデザイナーの役割はますます重要になっています。ファイルが明確であればあるほど、これらのツールはあなたの作品を正確に解釈し、正確なコードに変換することができます。ここでは、開発者、そして開発者が使用するAIエージェントに、デザインから生産へ移行するために必要なコンテキストを提供するための3つのベストプラクティスを紹介します。

1. 基盤に投資する

私たちはかねてより、デザインシステムの構築の重要性について語ってきました。色、サイズ、余白、タイポグラフィーに関するコンポーネントやバリアブルは、繰り返し利用可能なパターンを生み出し、時間を節約するとともに、大規模なプロジェクトでも一貫性を確保します。しかし、さらなる効率化を実現するには、これらの基盤をコードに直接リンクさせる必要があります。Code Connectやコード構文といったFigmaのドキュメント機能は、コードベースのコンテキストをFigmaに取り込むのに役立ちます。Code Connectはコンポーネントを対応するコードとリンクさせ、Dev Modeで正確なスニペットを表示します。一方、コード構文は、Webおよびネイティブのコードベース全体でバリアブルをどのように記述すべきかを定義します。

成功するデザインシステムの構築、拡大、維持について詳しくはこちらをご覧ください。

FigmaのDev Mode MCPサーバーを使用することで、AIエージェントはFigma内のこの追加コンテキストにアクセスし、より正確なコードを生成できるようになります。例えば、デザインシステム内のカードコンポーネントがコードと連携し、余白、色、タイポグラフィーの共有バリアブルを使用している場合、MCPサーバーはAIエージェントに、そのカードを生産準備の整ったコードで生成するために必要な、正確なコンテキストを提供できます。AIエージェントは、適切なコードを探すためにコードベース全体を検索する代わりに、それらを直接取得してコードをより迅速に生成できるため、開発者の時間を節約し、精度を向上させることができます。また、コンテキストがFigmaライブラリに組み込まれているため、そのメリットは組織全体に拡大され、新しいUIを作成する誰もが自動的に適切なコードコンテキストを取得できるようになります。

2. 開発者が利用しやすいファイル構成にする

ページ階層を設定し、各フレームやレイヤーに名前を付ける作業は面倒に感じることがありますが、ファイル構造を正しく整えることは、その労力を十分に報われる価値があります。レイアウト、命名、階層構造を意図的に設計することは、デザイン作業中に役立つだけでなく、MCPや開発者にとっても有益な背景情報となります。

ファイルの構造を設計する際に留意すべき重要なヒントをいくつか紹介します。

• 異なるブレークポイントごとにフレームを作成する。異なるブレークポイントごとにフレームを作成します。ナビゲーションバーをメニューアイコンに折りたたむ場合など、視覚的な大きな違いを強調するためにフレームを追加することで、レスポンシブな動作を明確に表現できます。
• オートレイアウトを活用する。オートレイアウトは、デザインが異なる画面幅、ブレークポイント、追加テキストにどのように対応するかを定義するのに役立ちます。可能な限り、縦方向のリスト、横方向の行、グリッドレイアウトにオートレイアウトを適用してください。フローを中断する必要があるアイテムについては、レイヤーがオートレイアウトを無視するように設定して、サイズ変更の制約を適用することができます。
• レイヤー構造を常に整理しておく。レイヤーハイジーンは明確な階層を維持するのに役立ち、不要なグループやフレームを避けることで、ファイルのナビゲートが容易になります。
• レイヤーに名前を付ける。レイヤー名は、AIおよび開発者がそれぞれの要素が何を表すのかを理解するのに役立ちます。レイヤー名が不明確な場合、AIはデザインを誤解する可能性が高くなり、開発者にとって問題を引き起こすことがあります。明確な命名により、AIエージェントはより正確にコードを生成できるようになります。例えば、「Frame 1337」という名前よりも、「カード」、「行」、「アバター」といった名称の方が有用です。時間がない場合は、FigmaのAIレイヤー名変更機能を使用することで、数秒でレイヤーの名前を変更できます。

上の画像で、「poor」とラベル付けされたファイルは、意味のある名前や要素の明確な階層構造が欠けているため、AIエージェントがコードを生成する際に混乱を招く可能性が最も高いです。中央の画像は改善された例であり、わかりやすいレイヤー名と、空間的な関係を定義するためのオートレイアウトが採用されているため、AIエージェントが高品質なコードを生成しやすくなっています。とはいえ、この構造では出力にばらつきが生じます。「best」の例は、明確な命名規則、論理的な構造、再利用可能なパターンを備えた、よく整理されたファイルを示しています。この構成であれば、AIエージェントはコードベースのコンポーネントや変数を直接参照して高品質なコードを生成するため、より正確な出力が得られます。

3. インタラクションの意図を共有する

デザインのインタラクティブな要素を伝えることは、静的な要素を伝えることと同様に重要です。望ましい機能をキャプチャするためにアノテーションを追加することで、AIエージェントは、要素がどのように見えるべきかだけでなく、どのように動作すべきかについても理解するための文脈を得ることができます。状態、遷移、動的コンテンツに関する明確なメモは、推測の余地を減らし、最初の試作で出力を意図に近づけることができます。

デザインで以下の要素を活用する場合は、アノテーションを記述することを検討してください。

• インタラクティブな要素: クリック時やホバー時の動作、または特定のカーソルを使用すべきかどうかについて記述します。
• 条件付きの状態: ユーザーの操作や特定の条件によって状態が変化する場合のシナリオを明記します。例えば、[送信]ボタンは、必須項目が検証されるまで無効になっています。
• 動的コンテンツ: デザインに動的なコンテンツとなる予定の静的なプレースホルダーが含まれている場合は、データソースから取得するための指示を記載します。

機能をビジュアルと同じくらい明確に文書化することで、MCPが設計意図を完全に反映したコードを生成できるようになります。

結局のところ、デザインシステムの文脈、構造、命名規則、そして明確なアノテーションを追加するための措置を講じることは、開発者の理解を深めるだけでなく、エージェント型コーディングツールに適切な文脈を提供するという点でも、極めて重要です。こうしたエージェント型コーディングツールを使用する場合であっても、デザイナーと開発者の間で明確なコミュニケーションを図ることが、双方の認識を一致させ、明確さを保つために不可欠です。