Figma MakeでFigmaコードを生成する方法など
Date2026/02/21
Last Modified2026/02/26
概要
バックエンドはずいぶんエージェントで補助できるようになったけれど、デザインのコーディングはまだ不慣れという印象があった。
デザイン生成はNano Bananaなどが強いみたいだけど、肝心の実務で使うFigma->Codeはいまいち微妙で……。
というところで、少し前にFigma Makeというのが出たらしいので使ってみた。
フレームを理解しているのが強い！
Figma MakeとはFigma公式で出しているAIデザイン支援ツールであり、Figma特有の構造に強いのが嬉しいところ。
特にフレームという単位で解析してくれるので、一つ一つのブロックが持っているCSS情報を取得できて正確性が高い。
従来の外部サービスや通常のエージェントに画像を読ませても、かなりトンチンカンな生成になることが多く、Agent-Skillsで画像解析スキルを作成するよりなかった。
(画像は1xのpngで、横幅は～、フォントは～、h1要素は36pxが基準で～、など細かい補足がたくさん必要だった。もっと良い公式Skillとかあったのかな？)
生成してみよう
フレームを貼って、「デザインに忠実にコーディングしてください」と指示しただけでドカーっとファイルが出力される。
ものの5分程度で生成完了。レンダリングされたそのページは、デザインそのもの……かと思いきやちょっとズレてる。
※4度同じようなプロンプトで実行したが、ほぼ同じ生成結果になっ。レスポンシブでPCとSPを作らせるのと、個別に出力するのでも、同じ出力になった(2/26追記)
ちょっとズレてるのは、gridとmarginの絶対値がかみ合わないという部分がいくつかあった模様。
そのあたりはちょちょいと直せばよく、慣れた人ならおそらく30分程度でコードへの落とし込みが完了すると思われる。
仕事の制作物なので詳細はお見せできないが、デザイナーいわく15~20h程度かかる見込みとのところが30分で終わったとなれば、それは偉大な功績である。
従来のFigma MCPだったりDevモードによる要素解析だと、ブロックを複数選択できなくて実用的ではなかった。(できても精度が落ちる)
それが一斉に生成できちゃうというのは驚きだった。たった5分くらいで。
ちなみに、LP一枚あたり50クレジット程度の消費。
無料版だと1日の上限クレジットが150で、月の上限が500。リテイクも50クレジットくらい使うので、月あたり10回くらい生成が可能。
※モデルはデフォルトで行いました。Gemini 3 Proは無料だと過負荷（クレジット不足？）で使えませんでした。
現実の課題と解決策
これが個人開発であれば、丸投げしてあとはちょっと頑張るだけなのだが、チーム開発だといくつか課題がある。
- React/TypeScript/Tailwind CSSで出力されるため、手直しできるスキルを持った人が必要
- 構造にものすごくAI臭が残る(連番のクラス名、細かすぎるレイアウト、部分的なminifyで認知コスト増…など)
- 既存のシステムにページ追加するときはそのまま使えない
とにかく修正を入れるときに手間がかかってしまうのが課題。
あと私のチームメンバーは、HTML/CSS/JSのスキルセットが多く、まるっきり作り直す必要があるというのは結構重たいところである。
HTML/CSSで生成してほしいと依頼してみたが、仕様上Reactじゃないとダメなんだとのことで。
感動のクオリティではあったのだが、こうも課題が山積している状態ではなかなか提案するのが難しい……。
それから+1日かけてみて、チームのルールになるべく合わせたコードに再編成してみた。
以下のような作業をやった。
-
準備
Gitを入れる！差分大事！エージェントも差分があるとデザインの差異なく進んでくれるので、必須中の必須。
あとはPlaywright MCPもかなりお役立ち。実際に画面をブラウザで見ながらスクショを取るので、崩れてしまったデザインを復元してくれる。 -
React/TypeScript/Tailwindをすべて除去して静的ページへ
Codexに依頼して、置き換え作業をやってもらった。最近は「Plan mode」というのがあるので大規模作業では世話になっている。
ついでにレスポンシブ対応もしてくれるとのことだったので、PCデザインには絶対に触れないようにしながらスマホ版も作ってもらった。 -
静的解析エラーの修正
ReactやFigma独自の参照パスが大量に残っていたので、置き換え作業のあとに一斉入れ替え。
インデントなども一気にフォーマッターで直して大量の差分。気持ちいい。 -
画像やsvgの整理
Figma Makeの時点だったかは不明だが、HTMLに戻した時点で、インラインsvgとpng拡張子の画像があふれていたので修正。
画像ファイルは「文脈に従って再命名して」としたところ、altからいい感じに命名してくれた。あとはwebp変換を忘れずに。
インラインsvgは全て外部化してHTMLをスリムに。コンテキストも爆発するので早めに解消。 -
TailwindからBEM記法へ
Tailwindはそもそもビルド前提なので静的配信に向いてないのだが、変換時に無理やりTailwindのクラス名を模倣したファイルを生成していた模様。
これにより余計なCSSファイルが誕生していたので、BEM記法にしてスタイルを分離するようにした。
ただし、この時に命名規則等を用意していないので完全に連番になってしまった。(element0001みたいな)
個人的には連番方式は修正がしやすいので好きなのだが、チームで嫌悪されることもあるのでここは課題……。
※いい感じでクラス名を圧縮してくれと指示してみたら普通に大破したので、ちゃんとルール作らないとだめっぽい
このあたりの作業をやって、ようやく静的に配信できるようになったので普通にCSSを書いて修正したりできるようになった。
完全に実用レベルにはなっているものの、現場の体制に合わせるには一工夫といった感じだろうか。
レスポンシブ対応に懸念(2.25追記)
レスポンシブ対応(スマホ用~400pxあたりの対応)において、プロンプトベースでも難しそうな部分があったので追記。
現状のレスポンシブ対応は、PC版をそのまま縮小する形になっているので、レイアウトは維持されているものの文字が小さすぎて読めない。
ということで、デザインに指定があろうとなかろうとも、生成後のレスポンシブ対応は必須である。
この時点で、一応Figma MCPの方も試してみたのだが、トークンの上限に達してしまうらしく一括生成は無理だった。
なので、プロンプトを投げつつ修正していくか……とのことだったのだが、困った返答が。
「PC用の一枚レイアウトとして絶対値で生成されているので、破壊的変更になる可能性があります」
たしかに！paddingなど使わず、ブロック内でpositionをちまちまいじってることを思い出した。
これではレスポンシブどころか今後の修正にも影響が出てしまうということで、もう少し構想を練ってみる。
- 絶対配置から相対配置へ置き換えてみる
position: absolute;ばかりのレイアウトから、padding/marginを使った相対的なレイアウトへの移行を試みた。
Planモードを使い、「セクションで大別し、まずはその内部のレイアウトから相対化する」といった流れのプロンプトを試行。
しかし、結果から述べると、全然うまくいかないどころか悪化してしまった。
これは、AIによる構造の理解が人間の標準的な認識とかなり乖離していたことにありそうだった。
例えば、「上から下」にコードを書くとき、それをrowに直したら「左から右」になるように構造化するものだが、時々「右から左」になるように書かれていたりする。
単純な構造では一般的な出力をするが、背景/SVGアイコン/画像/テキストのどこまでが1つのブロックと判断するのかを丸投げすると、思いもよらぬ発想でレイアウトを組み始めてしまう。
「一歩進んで二歩下がって、もう一歩進んでみた」みたいな感じで、見た目の整合性を取るためにかなり無理な設計をしているのがわかる。
もともと、読みやすいコードに書き換えようという意図だったので、頑張って相対化されたブロックになったところで無茶な設計だと無意味である。
もっとコーディングのルールを縛って細かい指示を出せばよいと思うが、自力でスキルを整備するには時間がかかりそうだと感じた。
身も蓋もない結論になってしまったが、認知負荷の高いデザインコーディングというものは最初にクラスを書いた人の思想で全部やってもらった方が良いのかなと思う。
それがデザイナーでも、AIでも。