Figma MakeでFigmaコードを生成する方法など

Date2026/02/21
Last Modified2026/02/21

概要

バックエンドはずいぶんエージェントで補助できるようになったけれど、デザインのコーディングはまだ不慣れという印象があった。
デザイン生成はNano Bananaなどが強いみたいだけど、肝心の実務で使うFigma->Codeはいまいち微妙で……。
というところで、少し前にFigma Makeというのが出たらしいので使ってみた。

フレームを理解しているのが強い！

Figma MakeとはFigma公式で出しているAIデザイン支援ツールであり、Figma特有の構造に強いのが嬉しいところ。
特にフレームという単位で解析してくれるので、一つ一つのブロックが持っているCSS情報を取得できて正確性が高い。

従来の外部サービスや通常のエージェントに画像を読ませても、かなりトンチンカンな生成になることが多く、Agent-Skillsで画像解析スキルを作成するよりなかった。
(画像は1xのpngで、横幅は～、フォントは～、h1要素は36pxが基準で～、など細かい補足がたくさん必要だった。もっと良い公式Skillとかあったのかな？)

生成してみよう

フレームを貼って、「デザインに忠実にコーディングしてください」と指示しただけでドカーっとファイルが出力される。
ものの5分程度で生成完了。レンダリングされたそのページは、デザインそのもの……かと思いきやちょっとズレてる。

ちょっとズレてるのは、gridとmarginの絶対値がかみ合わないという部分がいくつかあった模様。
そのあたりはちょちょいと直せばよく、慣れた人ならおそらく30分程度でコードへの落とし込みが完了すると思われる。
仕事の制作物なので詳細はお見せできないが、デザイナーいわく15~20h程度かかる見込みとのところが30分で終わったとなれば、それは偉大な功績である。

従来のFigma MCPだったりDevモードによる要素解析だと、ブロックを複数選択できなくて実用的ではなかった。(できても精度が落ちる)
それが一斉に生成できちゃうというのは驚きだった。たった5分くらいで。

ちなみに、LP一枚あたり50クレジット程度の消費。
無料版だと1日の上限クレジットが150で、月の上限が500。リテイクも50クレジットくらい使うので、月あたり10回くらい生成が可能。

現実の課題と解決策

これが個人開発であれば、丸投げしてあとはちょっと頑張るだけなのだが、チーム開発だといくつか課題がある。

  • 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を書いて修正したりできるようになった。
完全に実用レベルにはなっているものの、現場の体制に合わせるには一工夫といった感じだろうか。