Figma MCPでデザインからコードを自動生成

はじめに

ClaudeのFigma MCPを使って、FigmaのデザインファイルからLP用のHTML/CSSを自動生成する実験をしました。この記事はその忘備録です。

出来たもの: https://celebrated-truffle-4b2009.netlify.app

やったこと

1. テキストスタイルの登録

まず、タイポグラフィをFigmaのテキストスタイルとして登録しました。

モバイルとデスクトップで別々に定義しています。

• Mobile/Heading/H1〜H4、Mobile/Body/Large・Small
• Desktop/Heading/H1〜H4、Desktop/Body/Large・Small

スタイルを登録しておくことで、コンポーネントとスタイルが紐づき、コード生成時に一貫したデザインになります。

2. Buttonコンポーネントの作成

Chakra UIのように、Variant × Size × State の組み合わせでButtonを作りました。

• Variant：Primary / Secondary / Ghost / Danger
• Size：SM / MD / LG
• State：Default / Hover / Disabled

合計36バリエーションをFigmaのComponent Variantsで管理します。

3. ProblemCardコンポーネントの作成

ポイントはComponent Propertiesの活用です。

• heading、body → テキストプロパティ
• icon → Instance Swapプロパティ

Instance Swapを使うと、配置後にアイコンを右パネルから1クリックで差し替えられます。アイコンはIconifyプラグインでインポートしました（SVG形式推奨）。

4. LPのセクション構成

セクションはコンポーネントにしないのがポイントです。

再利用しないものをComponentsに入れると管理が煩雑になります。セクションはLPページに直接フレームとして配置しました。

構成はこちらです。

• StickyHeader（island style、floating）
• Hero
• ProblemSection
• SolutionSection（2カラム）
• TestimonialSection（カルーセル）
• CTASection
• Footer

5. Figma MCPでコード生成

LPフレームのURLをClaudeに渡すだけで、HTML/CSSが生成されました。

https://www.figma.com/design/xxx?node-id=45-2

コード生成時に一緒に指示したこと：

• レスポンシブ対応（768px / 1024px ブレークポイント）
• モバイルは1カラム
• TestimonialはJavaScriptでカルーセル実装

テキストスタイルやコンポーネントが整理されていると、生成されるコードの品質が上がります。

調整

一発では思い通りのものには出来ないため、様々な調整と修正が別途必要でした。

レイアウト

• Solutionセクションがデスクトップで溢れた → flex: 1 + min-width: 0 で修正
• 3カラムが折り返した → flex-wrap: nowrap に変更
• Problem / Solutionにmax-width内部ラッパーが必要だった

カルーセル

• カード幅をcalc((100% - 48px) / 3)で指定したが100%がcontainer幅を参照しなかった
• getBoundingClientRect()でも途中から止まった → JSでcontainer幅から動的計算に書き直し

画像

• Unsplashがブロックされた → picsum.photosに変更

Hero

• p5.jsのcanvasが表示されなかった → canvas.parent()の参照方法を修正、CSSに#hero-canvas canvasを追加

モバイルメニュー

• 全画面にならなかった → z-index不足、inset: 0だけでは効かずwidth: 100vw; height: 100vhに変更

まとめ

デザインファイルの構造が整っているほど、生成されるコードもきれいになる印象でした。引き続き改善していきます。