はじめに
Figma MCPが使えるようになったので、実際のプロダクトコードを起点にしてどこまでデザイン作業を自動化できるか試してみた。題材にはデジタル庁のOSSデザインシステム（design-system-example-components-react）を使い、最終的にFigma Makeで画面を生成するところまで一気通貫でやってみた。
想定されるワークフロー（一気通貫）
今回試した流れを箇条書きにすると次のとおり。
- コードベースを用意する — 題材のリポジトリをクローンして Cursor で開く（既存プロダクトのコードでも同様）。
- Cursor に Figma MCP を接続する — エディタから Figma を操作できる状態にする。
- Figma にキャンバスを用意する —
/figma-create-new-fileで新規ファイル／フレームの土台を作る。 - コード起点で Figma にデザインを生成する —
/figma-generate-designで「何を作るか」と対象キャンバスを指定し、画面上にデザインを起こす。 - Figma Make に渡してモック化する — 生成したデザインを Attach などで取り込み、ブラウザ上で動く画面として確認・検証する。
やったこと
ワークフローは大きく4ステップです。
初めに母体となるコードをクローンします。（題材はデジタル庁）※既存のプロダクトコードでも可能
CursorでFigma MCPを設定して、チャット上で新しいファイルを作成して作りたいものを指示します。
作成されたFigma Designを使って、Figma Makeに落とし込むというフローで行いました。
Figma Makeの役割としては、動くモックを作ることが目的になります。既存製品をベーステンプレートとして使って、そこからUIUXの改善利用に使うことが良いと自分は考えています。
1. リポジトリをローカルに落とす
デジタル庁のReactコンポーネントサンプルをクローンして、そのディレクトリをCursorで開いた。
2. Figma MCPをCursorに設定する
Cursor上でFigma MCPを設定し、エディタからFigmaを直接操作できる状態にした。
3. /figma-create-new-file → /figma-generate-design でデザインを生成する
まず /figma-create-new-file で新規キャンバスを作成。次に /figma-generate-design で「何を作るか」と「対象のFigmaキャンバス」を指定して、デザインを生成した。今回はデジタル庁のトップページを題材にした。
4. Figma Makeで画面として書き出す
生成されたFigmaデザインをFigma Makeに渡し、実際の画面に落とし込んだ。
やってみての印象
再現度については調整が必要
デジタル庁のコードベースを使った今回の実験では、FigmaデザインもFigma Makeの出力もそれぞれ再現度が100%というわけではなかった。特にFigma MakeはFigmaデザインの完全な再現が難しく、全体のレイアウトの組み方など、Figma Make側にどうskillを持たせるかを工夫する必要がありそうだと感じた。
逆方向のワークフローとして面白い
とはいえ、このフローの一番の価値は「コードからデザインを起こせる」という方向性にあると思う。通常は「デザイン → 実装」が前提だが、今回試したのは**「実装済みのコード → Figmaデザイン → Figma Make → モック」**という逆方向の流れだ。
新規プロダクトで一から試すというより、既存プロダクトのコンポーネントやレイアウトをFigmaに展開して、モックや検証用のたたき台を素早く作るという使い方がいちばん現実的なユースケースに感じた。具体的には、
- 既存コンポーネントをFigmaに展開し、デザイナーが参照・改変できる状態にする
- Figma Makeと組み合わせてモックを素早く作り、要件の早期検証に使う
- デザインシステムにおけるコードとFigmaの乖離を縮める起点にする
といったシナリオが考えられる。
次にやりたいこと
- 自分たちのプロダクトのコンポーネントで同じフローを試す
- Design Tokenの設定を読み込めるか
- Figma Make側のskillの設定を工夫してレイアウト再現度を上げる
- Figma Makeからエクスポートされたコードのクオリティを実装観点で評価する