Figmaからコードへ：3つの方法と無料のCSSからTailwindへの変換ツール
Figmaからコードへ
Figmaからコードへ：プラグイン、AI、手書きの比較とCSSからTailwindへの変換ツール | We.Inc
FigmaのデザインをHTML、CSS、Reactに変える方法を解説します。書き出しプラグイン、AIツール、手書きのコーディングを比較し、FigmaとCSSの対応早見表、デザイントークン、FigmaのCSSをTailwindのクラスに変える無料の変換ツールを紹介します。
Figmaのデザインをコードにする方法は3つあります。HTMLやReactを生成する書き出しプラグイン、最初の版を作ってくれてそれを自分で仕上げるAIツール、そしてFigmaのインスペクトパネルにある正確な値を使って手で書く方法です。オートレイアウトはCSSのflexboxに、Figmaの変数はCSS変数に対応します。下にFigmaのCSSを貼り付ければ、Tailwindのクラスが得られます。
方法を選ぶ
- 今日中にクリックできるプロトタイプ
- 書き出しプラグインかAIツール
- 自分で保守していく本番サイト
- 手で書くか、生成されたコードを仕上げる
- コードを書かずに公開するWebサイト
- デザインを参考にしたWebサイトビルダー
Figmaのインスペクトパネルか開発モードからレイヤーのCSSをコピーし、変換ツールに貼り付けて、書き出されたTailwindのクラスをコピーしましょう。よく使うレイアウト、余白、色、文字のプロパティに対応しています。認識できなかったものは一覧に表示されるので、自分で対処できます。
- Figmaでレイヤーを選択し、インスペクトパネルを開きます（プランに含まれていれば開発モード）。
- 表示されたCSSをコピーします。
- このページの変換ツールに貼り付けます。
- クラスの一覧かJSXのスニペットをコンポーネントにコピーします。
- 繰り返し出てくる生の値を、テーマのトークンに置き換えます。
- デザイナーには、あらゆる場所でオートレイアウトを使ってもらいましょう。きれいなflexboxに変換できます。一方、絶対配置のフレームは壊れやすい位置指定に変換されます。
- ページではなくコンポーネントを作りましょう。ボタンとカードを一度コーディングすれば、ほとんどの画面をまかなえます。
- コーディングの前に、スマートフォンの幅でのデザインを確認しましょう。デスクトップ用のフレームしかないファイルはよくあります。
- アクセシビリティと検索のために、文字は画像として書き出さず、コードの中でも本物の文字のままにしましょう。
よくある質問
FigmaはHTMLを直接書き出せますか？
Figmaはインスペクトパネルで各レイヤーのCSSを表示しますが、ページ全体を動くWebサイトとして書き出すことはできません。その隙間を埋めるのがプラグインやAIツールですが、コードの品質はまちまちです。
生成されたコードは本番で使えるレベルですか？
シンプルなページなら使える場合もあります。生成されたコードは、ほかの画面サイズで崩れる固定サイズや絶対位置をよく使うため、構造、レスポンシブ対応、アクセシビリティを整える時間を見込んでおきましょう。
FigmaのオートレイアウトをCSSに変換するには？
オートレイアウトはflexboxそのものです。方向はflex-directionに、間隔はgapに、パディングはそのままpaddingになり、内容に合わせる（hug）や親に合わせる（fill）のサイズ指定はfit-contentやflex: 1になります。
非公開のデザインにこの変換ツールを使っても安全ですか？
はい。処理はすべてブラウザー内で行われ、貼り付けたCSSがどこかに送信されることはありません。
コードを書かずにデザインから公開サイトへ
- 目的がアプリではなくビジネス用のWebサイトなら、Figmaのファイルを参考に開いたままWebサイトビルダーでデザインを作り直すほうが、コーディングするより早いことがよくあります。デザインの色、フォント、余白はそのまま生かし、ホスティングとレスポンシブなレイアウトはビルダーに任せましょう。
プラグイン、AI、手書きの比較
デザインをコードにする3つの方法
- 書き出しプラグイン
- フレームから生成されたHTML/CSSまたはReact
- 手早いプロトタイプ、シンプルな静的レイアウト
- 絶対配置、不自然なクラス名、保守しにくい
- AIツール
- スクリーンショット、フレーム、説明文から作られたコードや動くページ
- すばやく作って仕上げていく最初の版
- 余白やレスポンシブのルールがデザインからずれるので確認が必要
- インスペクトや開発モードを見ながら手で書く
- デザインの正確な値を読み取って自分で書くコード
- 本番サイトとデザインシステム
- 最も時間がかかり、開発者が必要
FigmaとCSSの対応早見表
Figmaの概念とCSSの対応
- オートレイアウト（横）
- display: flex (flex)
- オートレイアウト（縦）
- flex-direction: column (flex-col)
- 項目間の間隔
- gap (gap-4, gap-[18px])
- パディング
- padding (p-6, px-4 py-2)
- 内容に合わせる（hug）
- width: fit-content、または幅を固定しない (w-fit)
- 親に合わせる（fill）
- flex: 1 または width: 100% (flex-1, w-full)
- 角の半径
- border-radius (rounded-xl)
- 変数やスタイル
- CSSカスタムプロパティ、またはTailwindのテーマトークン
- 制約
- レスポンシブのルール：max-width、メディアクエリ、flex wrap
トークンと手作りのカード
Figmaの変数をCSS変数にする
トークンには値ではなく役割で名前を付けましょう。そうすれば、ブランドを刷新しても変更は1行で済みます。Tailwindはテーマを通じてそれらを読み込めます。
カードのフレームを手で作り直す
オートレイアウトはgap付きのflexになり、パディングと角丸はインスペクトパネルの値をそのまま使います。値を編集するとカードが更新されます。
オートレイアウトはflexboxです。こちらで復習しましょう：
flexboxとgridの早見表
FigmaのCSSからTailwindへの変換ツール
FigmaのインスペクトパネルからCSSを貼り付けてください。入力例があらかじめ入っています。
FigmaのCSS
Tailwindのクラス（{n}）
クラスをコピー
（まだ認識されたものはありません）
JSXとして
JSXをコピー
変換されなかったもの（手作業で対応してください）：
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る