はじめに
前回までで Figma MCP x Cursor でダッシュボードを実装しました。
今回は他の実装手段として Figma make を使ってやってみたいと思います。
Figma make とは？
プロンプトから実際に動作するフロントエンドのコード（React + TypeScript）を生成する Figma の AI 機能です。
生成したアプリはそのまま公開することもできます。
実装プロセス
Figma make では自然言語だけでなく Figma デザインをプロンプトで渡すことができるため、デザインを渡して実装するように指示をします。
すると、実装してくださいと指示をしただけですが、ほぼデザインと同じものを作成してくれました。
ただ、Cursor に指示をした時にはボタンのホバー時の実装もやってくれましたが、Figma make については作っていたデザインの通り、ホバー時の挙動までは実装してくれませんでした。（ホバーした時の実装まで指示をすれば実装してくれました）
感想
Figma make で実装したとしても Figma MCP x Cursor で実装しても、変わらず言語化・デザインの構造化をしっかりやっているほど AI の出力の精度は高いことを実感しました。
より効率的にフロントエンドの実装できる方法を探索していきたいと思います。