Figma Make と MCP を利用した開発方法

このリポジトリは、Figma Make から取得した UI 情報をもとに、frontend/ に実装を書き出して検証するためのサンプルです。

• frontend/: Figma Make / Figma MCP をもとにしたフロントエンド実装
• backend/: 必要になった場合に使うバックエンド領域

開発の考え方

基本の流れは次のとおりです。

1. Figma Make で画面や UI を作る
2. Codex から Figma MCP に接続する
3. Figma URL または Figma Make URL を Codex に渡す
4. 取得した構造やコードを frontend/ に反映する

MCP との接続方法

Codex から Figma の情報を読むには、Figma MCP の接続設定と Figma アカウントの認証が必要です。README では詳細手順は持たず、公式ドキュメントを参照する方針にします。

• Figma MCP セットアップガイド: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
• Figma MCP Catalog: https://www.figma.com/mcp-catalog/

Codex での接続方法や対応クライアント、リモート / ローカルサーバーの違いは、上記の公式ドキュメントを参照してください。

実際の使い方

接続後は、Figma URL または Figma Make URL を Codex に渡して実装を進めます。

例:

この Figma Make URL をもとに、frontend/ に React + Vite で実装を書き出してください

Figma Make の場合は、通常のデザイン参照よりも生成済みコードに近い情報が取れることがあります。

ローカル確認

• yarn dev: 開発サーバーを起動して、画面を確認しながら実装を調整します。
• yarn build: TypeScript のチェックと本番用ビルドを実行し、成果物を確認します。
• yarn preview: ビルド済みの成果物をローカルでプレビューします。

参考リンク

• GitHub Repository: TheDesignium/figma-make-demo
• Demo Site