Open3
Figma × MCP × Clineでコーディングさせる
おだしゅんやりたいこと
Figmaの内容をMCP経由でAIエージェントに読み込ませて、HTML/CSSコーディングをさせたい。
技術要素
MCPサーバ
Figma公式のMCPがオープンベータ版で公開されているものの、無料プランのユーザでは利用できないため、Figmaの個人用アクセストークンで使えるOSSのMCPサーバを選択。
AIエージェントツール
VS codeやCursorのプラグインで使えるClineを使う。
おだしゅんタスク
- Figmaの個人用アクセストークンの発行
- Figma-Context-MCPの設定
- Clineを使ってコーディングさせる
おだしゅんFigmaの個人用アクセストークンの発行
1.アカウント設定を開く
左上のプロフィールアイコン＞設定を押下する
2.個人アクセストークンの発行画面を開く
セキュリティ>個人アクセストークンにある「新規トークンを発行」を押下
3.発行するトークンに関する設定を実施
以下を設定する。
- トークン名
- 有効期限
- スコープ毎のアクセス権限（アクセスなし/READのみ/WRITEのみ/READとWRITE可）
4.個人アクセストークンが払い出される
コピーしておく。