Figma to Code：React・Vue・CSSフレームワーク対応まとめ

デザインの引き継ぎでもっとも時間を取られる判断は、見た目が良いかどうかではなく、生成されたコードをどのスタックの上で動かすかということです。Reactチームには型付きpropsを備えたJSXが必要で、VueチームにはきちんとしたSingle File Componentが必要で、静的なランディングページであればフレームワーク自体が不要なこともあります。MarkupGenはすべてのプロジェクトを1つの出力スタックに固定しません——出力フレームワークは、同じFigmaデザインの上でエクスポートごとに選べる項目です。

変換の仕組み

フレームワークを選ぶ前に、MarkupGenはデザインを次の4つのステップで処理します。

1. Figmaからフレームをエクスポートする。 MarkupGenのFigmaプラグインが、選択したフレームの構造・スタイル・画像をそのままワークスペースに送ります——自分で目視して組み立て直す必要があるスクリーンショットではありません。
2. AIが実際のデザインからHTML/CSSを組み立てる。 レイアウト、スペーシング、カラー、Auto LayoutはFigmaファイルから直接読み取られ、一般的な推測に基づくものではありません。
3. 出力フォーマットを選ぶ。 ここでフレームワークを選択します。Vanilla HTML/CSS、React、Vue、Svelte、Angular、そしてCSSに関してはTailwind、Bootstrap、Bulma、Materialize、Picoです。
4. 調整してからエクスポートする。 最終的なコードを取得する前に、ビジュアルエディタでコンテンツ、フォント、レイアウトを調整できます。エクスポートが本番投入できる状態かどうかがわかる、自動のAI品質スコアも付いています。

構造とスタイルはソースデザインから一度だけ読み取られるため、ステップ3では、そのたびにデザインを一から作り直すことなく出力フォーマットを切り替えられます。

Reactへのエクスポート

Reactを選ぶと、MarkupGenはJSXによる関数コンポーネントを組み立てます。エクスポート時のトグルによって、TypeScript(TSX)か素のJavaScript(JSX)かを選択できます。propsは型付けされ、1つの共有スタイルシートではなくコンポーネントごとにスコープしたい場合は、インラインスタイルの代わりにCSS Modulesとしてスタイルをエクスポートすることもできます。FigmaのAuto Layoutはコンポーネントのスタイルの中で直接Flexboxにマッピングされるため、propsを後付けした静的なHTMLの塊ではなく、レスポンシブな構造が最初から組み込まれたコンポーネントが手に入ります。ワークフロー全体をより詳しく見たい場合は、Figma to React：開発者のための実践的なワークフローを参照してください。

Vueへのエクスポート

Vueを選ぶと、きちんとしたVue 3のSingle File Component(.vue)が得られます。prop宣言にはdefinePropsが使われ、既存の多くのVueコードベースがすでに従っている<template>/<script>/<style>の構造もそのまま維持されます。Reactと同様に、FigmaのAuto Layoutから生成されたレイアウトはコンポーネントのスタイルの中でFlexbox構造を保ち、同じエクスポート画面からコンポーネント名を設定したり、TypeScriptと素のJavaScriptを切り替えたりすることもできます。Vueエクスポートに含まれる内容の詳細はFigma to Vue変換ページをご覧ください。

SvelteとAngularにも対応

ReactとVueだけでなく、MarkupGenはSvelte(4/5)とAngular(17以降、スタンドアロンコンポーネントとして)へのエクスポートにも対応しています。チームがこの2つの主流スタックのどちらでもない場合でも、静的なHTMLではなくコンポーネントが欲しいときに役立ちます。

各コンポーネントに使われるCSSフレームワーク

特定のJSフレームワークのコンポーネントが不要な場合は、HTML/CSSに直接エクスポートし、プロジェクトの設定でCSSフレームワークを選ぶこともできます。Vanilla CSS、Tailwind、Bootstrap、Bulma、Materialize、Picoです。AIは汎用的なクラスを付けて後は自分で直す、という形にはせず、レイアウトをそのフレームワーク本来のグリッド、スペーシング、クラスの規約に合わせて再マッピングします。出力サイズ、デザインの忠実度、学習コストなど、6つすべてのトレードオフを詳しく比較したい場合は、Figma to Code向けCSSフレームワーク6選:メリット・デメリットと使い分けを参照してください。

プロジェクトに合わせた選び方

• 既存のReactやVueのコードベースで作業していますか? チームの規約に合わせて、TailwindまたはCSS Modulesと組み合わせながら、ReactまたはVueのコンポーネントに直接エクスポートしましょう。
• バンドラー不要の静的ページが欲しいだけですか? Vanilla HTML/CSSかPicoなら、ランタイムへの依存がありません。
• あらかじめ用意されたコンポーネント(navbar、モーダル、フォーム)で、動くUIを素早く用意したいですか? BootstrapかMaterializeが向いています。
• チームがSvelteやAngularを使っていますか? どちらもきちんとしたコンポーネントとしてエクスポートされ、HTMLから手作業で変換する必要はありません。

すべてのプロジェクトに当てはまる唯一の正解というものはありません——重要なのは、MarkupGenが1つのスタックに固定するのではなく、同じソースデザインの上でエクスポートごとにフレームワークを選べるという点です。自分のFigmaファイルで無料で試して、実際に使っているスタック向けのコードを確認してみてください。