何をやったか
お疲れ様です。みんみんです。
今回はFigma Config 2025で発表されたグリッド機能と、FigmaとClaudeを繋ぐMCPを使って、デザインから実装まで自動化できるか試してみました。
友たちの猫のお写真使って適当にグリッドレイアウト作って、それをReactとHTMLに変換するお試しです。
実際の作業手順は以下の通りです。
1. Figmaでグリッド作成
新しいグリッド機能、確かに使いやすいです！2×2から3×3への変更もサクサク行えます。
ただし、画像選びに30分くらいかかりました（どうでもいいですが）。
2. MCP設定
① FigmaのAPIキー取得 → 簡単
② Claude Desktop設定 → JSONファイルをいじるのは簡単
③ React設定してサーバー起動 → Node.jsバージョンアップ必須
④ tailwindもダウンロード必須
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "実際のFigma MCP token",
"PATH": "実際のパス"
}
}
}
}Compiled successfully!
You can now view my-figma-project in the browser.
Local: http://localhost:実際のポート
On Your Network: http://実際のIPアドレス
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully3. 実際の変換作業
プロンプト試行：
レイアウト調整で細かい指示 → 「もうちょっと間隔を空けて」とか結構手間がかかります。
実際のサイトと構成はこんな感じです。
良かったところ
① グリッド機能は本当に使える
② MCP設定は一度できれば楽
ダメだったところ（正直に）
① デザインがショボい → 猫の写真置いただけ
② プロンプト10回以上やり直した
③ レスポンシブが微妙
課題点
① 結局手直し必須
② デザインシステムとの整合性取れない
感想
確かにすごい技術ですし、将来性は感じます！でも正直なところ、結果が不安定ですし、デザインクオリティがそれほど高くないかなーと思いました。
プロンプトの書き方によって出力結果がかなり変わってしまいますし、期待していたレイアウトと違うものが出てくることも多々ありました。
ただ、繰り返し作業の自動化効果は確実にあると思います。
例えば、同じようなカードレイアウトを大量に作る必要がある場合とか、プロトタイプを素早く作りたい時には威力を発揮しそうです。完璧を求めなければ、作業時間の短縮には少し貢献してくれます。
あと、Figmaの新しいグリッド機能自体はめちゃくちゃ使いやすかったです。
これまでのオートレイアウトよりも直感的で、CSS Gridとの親和性も高いので、デザインと実装の橋渡しという意味では一つの進歩だと感じました。
今後はまずちゃんとしたデザイン作る練習をします。
今回は機能検証が目的だったので、次はもっと実用的なWebサイトデザインに挑戦してみたいです！
また、もうちょっと複雑なサイトで検証、コーポレートサイトレベルで実際に使えるかテストしていきたいと思います。
とりあえず猫の写真選びに時間をかけすぎたのは反省していますmm
