テックラウンジVol.101「開発者視点で読み解く『Figmaデザイン』～AIフレンドリーなデザインデータとは」（11月12日開催）

2025年11月12日（水）、社内ナレッジ共有イベント「テックラウンジvol.101」が開催されました。このイベントは、技術だけでなく、ディレクション・デザイン・チーム運営など幅広いテーマを扱い、部署や職種を超えた学び合いの文化を育むことを目的としています。今回は、X-tech推進本部技術研究開発部のＫさんが登壇し、デザインの美しさだけでなく、AIと開発に伝わるFigmaデザインの作り方について紹介しました。

Figma×AIで何ができる？

まず、Kさんは「MCP（Multi-Channel Protocol）」 について説明しました。MCPは、外部ツールとAIをつなぐためのプロトコルです。近年では、この仕組みを利用してAIエージェントがFigmaのデザインデータを扱えるようにする「Figma Dev Mode MCP」が登場し、AIがFigma上の構造情報やトークン情報を理解してコード生成やレビューを行えるようになりました。

Figma Dev Mode MCPが持つ2つの重要機能

get_design_context

デザインの構造・階層・レイアウト意図の情報をAIに渡すことができます。AIに「このUIをコード化して」と依頼する際の土台となる情報です。

get_variable_defs

色・フォント・間隔・半径などのスタイル情報をAIに渡すことができます。

※ 上記機能はテックラウンジ発表日時点のものです。

これら2つの機能を活用することで、AIがFigmaのデザインデータを正しく理解し、開発に利用できるようになります。

AIフレンドリーなFigmaデザイン6つのポイント

Kさんは、AIが理解しやすい「AIフレンドリーなFigmaのデザイン」の条件として、次の6つを挙げました。

1.再利用される要素はコンポーネント化する

繰り返し使うパーツをコンポーネント化することで、AIが「共通パーツ」と認識しやすくなり、コード生成の一貫性が向上します。

2.Code Connectを介してコードベースとリンクしておく

実際のコードとFigmaのデザインを紐付けることで、AIが実装内容を正しく理解でき、コード生成の精度が向上します。

3.色・間隔・半径・書体などのスタイルは変数（バリアブル）で管理する

ブランドカラーや余白のルールなどを変数で管理すると、AIがデザインの意図を構造的に理解しやすくなり、より精度の高いコード生成につながります。

4.レイヤー名に意味のある名前を付ける

「Group5」のような抽象的な名前ではなく、「CardContainer」など役割がわかる名前を付けると、AIによるデザインデータ解釈の精度が向上します。

5.自動レイアウトを活用し、レスポンシブ意図を伝える

自動レイアウトを使うことで、AIがレイアウト意図を解釈しやすくなります。

6.アノテーションと開発リソースを使用して、ビジュアルだけでは捉えにくいデザインの意図を伝える

デザインだけでは伝えきれない「マウスオーバー時の挙動」「ローディング動作」などをアノテーションで補足することで、AIが仕様を理解しやすくなり、コード生成の精度が高まります。

このように、AIに渡すプロンプトを作成する以前に、AIが理解しやすいFigmaのデザインデータを整えておくことが成果を大きく左右すると強調しました。

まとめ

今回のテックラウンジでは、AIと開発に正しく伝わるFigmaデザインの作り方が紹介されました。構造、変数、命名、アノテーションなど、細部への配慮がコード生成の精度を左右することがわかる、実践的な内容でした。デザインと実装をつなぐ工夫や考え方は、日々の制作や開発に役立つ内容だったのではないでしょうか。
次回のテックラウンジもお楽しみに！