Figma MCPを試す｜デザインからコード生成の精度を上げる

これは何？ FigmaのフレームをLovableが直接読めます。スクショを貼るより、構造・色・余白まで正確に再現できます。

これで何ができるようになる？#

• デザインフレームURL→shadcn/uiで忠実実装
• デザイントークン（色・余白）の取り込み
• 複数画面の一括コード化

こんな人にハマります / そうでない人#

• ✅ 向いている：デザイナーとペアで進めるプロダクト開発
• ⚠️ 向いていない：デザインがまだなくチャットで作っていく段階

はじめての接続手順#

1. Figma側でMCPアクセス用のURL/トークンを発行
2. Lovable右上 → Chat connectors → 該当MCPを追加
3. URL/トークンを貼り付け → 接続テスト

そのまま試せるチャット例#

以下をLovableチャットに貼って試してみてください。

Figma のデータを使って、デザインフレームURL→shadcn/uiで忠実実装 を実装してください。

Figma から最新の情報を取得し、要約をダッシュボードに表示するページを /dashboard に作ってください。

よくある失敗とリカバリ#

• 権限不足：管理者でないとMCPアクセスを有効化できないケースが多い。担当者に依頼を。
• トークン期限切れ：定期的に再発行 → Lovable側で更新が必要。
• 公開範囲の絞り込み忘れ：本来見せたくない情報まで見えると事故。最初に対象を絞る。

裏側の仕組み（ざっくり）#

MCP（Model Context Protocol）は『AIに対して安全に外部ツールを使わせる共通の話し方』です。Figma側がMCPサーバーを用意していれば、Lovableチャットがそのツールを呼び出せます。あなた専用のチャット拡張なので、最終アプリのユーザーには公開されません。

次の一歩#

Figma で扱える情報を1つ決めて、まず『取得→チャットで確認』の小さな成功体験から始めるのが定着のコツです。慣れてきたら『取得→実装→完了マーク』まで自動化に広げてください。