非エンジニアが管理画面のモックアップをFigmaMCPを使って作ってみた
Figma MCP とは
まだオープンベータ版ですが、Figma にも MCP が登場しました。
例えば、Figma と Cluade を連携させると、以下のようなことができると聞きました。
- Figma のリンクを貼るだけで、コードが自動生成される
- Claude でデザインレビューができる
これが本当にできるのであれば、以下のような形でなるべくエンジニアチームに共有する前に考慮もれを考えておけるし、エンジニアチームと実際のモックアップを組んだ状態で検討に入れるなと思ったので、実用レベルに達しているかを確認してみようと思います。
① WF・仕様書を作る
② 実際に画面を作って検証をする
③ 考慮不足だったところを仕様書に反映
実際に試してみる
WF を用意する
今回は、shadn/ui を使った管理画面ページを作ろうと思います。
Cluade と Figma を繋げてみる
すでに試している方がたくさんいらっしゃったのですが、この記事を拝借してやってみました。
僕の環境だと異なる MCP をすでに導入してみていた関係か最初エラーが起きていたこともあり、それも Claude に投げて解決しました。ありがとう。
Claude でコードを生成してみる
Next.js 環境は事前に用意しておきました。
実際にコードを生成してみます。このプロンプトを打ち込むだけで果たして本当にコードが生成されるのか。
この管理画面をnext.jsで作りたいです。
コードを教えてください。shadn/uiを使っています。
すごい勢いでコードが生成されていますが、これが果たしてちゃんと成り立つのか・・・
VScode に貼り付けてみます。npm run dev してみます。
思ったよりもすごい再現度ですね。どこまでできるか試してみます。
Customer detailsの入力フィールドを入力し終えたら、このポップアップが出るようにしたい。1つでも入力フィールドが入力されてない場合は該当する入力フィールドに「入力されていません」というエラーが出るようにしたい
きちんと生成されました。この時、エラー表示の時に左と右で左右の高さが異なるのでがたついた表示になるのがわかりますので修正したいですね。
まとめ
ソースコードを見ると、エンジニア視点だと冗長的なコードになっているところも多々あると思いますが、これまで Figma 内でワークフローを組みながら試していたことをこのように Figma で作成 => 実際に試してみるというのを繰り返しながら仕様を組んでいくハードルがかなり下がりました。
プロトタイプ時点である程度組むだけで、解像度がかなり上がるので共有しやすいかなと思います。
今回は、shadn/ui を使用するという前提で組んだこともあり、ある程度意図を汲み取った実装になっていた（Save ボタンをホバーするとちゃんと Hover 状態になっていた）ので、既存の ui ライブラリを使うか・使わない場合でもどれだけコンポーネントのルール化を Figma で組んでおけるかが鍵かなと思います。
とはいえ、それぞれの専門領域が溶けていく感じがしてすごいなと思いました。まだ Figma MCP もオープンベータ版ということや読み取りのみなのでより快適になればいいですね。
Discussion