WEBソリューション課の田畑です。
現在Figmaというデザインツールを使ってUIデザイン（ウェブサイトの見た目や使い勝手を設計すること）や画面デザインなどを行なっています。 Figmaでデザインを作成後に、それを元にHTMLとCSSでwebページを作成しています。
もっと効率的にページ作成を行いたいと思ったので、Figmaのデザイン画面をHTMLやCSSへ変換する方法について調べてみました。
Figmaとは
Figmaとはウェブ上で使えるデザインツールです。 Figmaには以下のような特徴があります。
- インターネットブラウザ上で動くので、ソフトをインストールしなくても使える。
- 複数人で同時に作業できるため、チームでのデザイン共有やフィードバックがスムーズ。
- 作ったデザインをそのままプロトタイプ（試作品）として動かして試せる。
- デザイナーだけでなく、開発者やクライアントも一緒に見たりコメントしたりできる。
FigmaのデザインからHTML/CSSへ変換する方法
調べてみたところ以下のような方法がありそうでした。
- Figmaの開発モードを使う
- プラグインを使ってデザインをHTML/CSSへ変換する
- AIにFIgmaデザイン画像を読ませてHTML/CSSへ変換する
他にも方法があるかもしれませんが、とりあえずこの３つを調べてみました。
今回はサンプルとしてシナプス・ステーションの紹介ページのFigmaファイルを使っています。
1.Figmaの開発モード(Dev Mode）を使う
Figmaの「開発モード(Dev Mode）」とは、デザイナーが作ったデザインを、エンジニア（開発者）が効率よく確認・活用するための専用モードのことです。 機能の一部を紹介します。
- デザインのCSSコード情報（色のコードやフォントサイズ、余白などのスタイル情報）を簡単に見ることができます。 help.figma.com
- FigmaのVS Code連携拡張機能を使用すると、VS Codeを使ってデザインへのアクセスや調査が出来るため、コード変換がスムーズに行えます。
help.figma.com
実際に連携したVS Codeの画面が以下になります。選んだブロックのデザイン情報がCSSとして下の方に表示されています。色やマージンなどが一眼でわかりそのままCSSをコピーすることができます。HTMLはVS CodeでHTMLへ変換できるプラグインを利用すると書き出せました。
丸ごと変換というより、一箇所ずつデザインを確認しながら置き換えていくのが向いているようです。
- デザインを更新すると、同じファイルを共有しているメンバーのアノテーション（補足やメモ書きのようなもの）と測定値は常に最新の状態に保たれます。 help.figma.com
この開発モード(Dev Mode）の機能を使う場合は有料となります。 有料プランは開発モードの他にも色々と便利な機能がありますのでサイトで確認してください。
また、Figmaにはデザインテンプレートというものがあります。 ワイヤーフレームやUIキット、webサイトなど必要に応じて非常に質の高いものを選べます。デザインも豊富です。 ですが、シナプスのように既にサイトがあり、そこへページを追加していく場合には不向きなので今回は除外しました。
2.プラグインを使ってデザインをHTML/CSSへ変換する
Figmaには多様なプラグインが用意されています。
プラグインはFigmaの基本的な機能を拡張し、デザイン作業をより効率的かつ高度にするための追加機能やツールのことです。 デザイン作業の自動化、コンテンツの挿入、他のツールとの連携、デザインのチェックなど、多岐にわたります。無料のものから有料のものまで様々あります。
今回はHTML/CSSへ変換する機能に着目して調べてみました。
試したプラグイン
Anima ：FigmaファイルをReact、HTML、Vue、Tailwind CSS 、そしてMaterial UI (MUI)、Ant Design、shadcnといった人気のUIライブラリのコンポーネントにシームレスに変換します。 www.animaapp.com
Builder.io ：FigmaデザインをPublish Spaceでカスタマイズ可能なコンテンツに変換したり、Fusion Spaceのプロジェクトやコマンドラインからデザインからコードを生成したりできます。 www.builder.io
Figma to Code：Figmaレイアウトをレスポンシブなウェブページ（HTML、Tailwind、Svelte、styled-components）やモバイルアプリ（Flutter、SwiftUI）に簡単に変換できます。 Figma to Code
プラグインの使い方
プラグインを使うにはFigmaの画面下の「アクション」ボタンをクリックし、タブの「プラグインとウィジェット」を選んだ後、検索してください。タブを選ばず「すべて」のままで検索も可能ですが、絞り込んだほうが見つけやすいかと思います。
今回は無料プランのまま、設定はほとんど触らず変換しました。
プラグインで変換した結果
Anima：結構綺麗に変換されてます。ただヘッダー部分の画面スクリーンショットは画像として処理されていました。バラバラの状態でよければプラグインからコピペすれば見ることができました。丸ごとダウンロードしたい場合は有料プランへのアップデートが必要です。
Builder.io ：こちらもヘッダー部分の画面のスクリーンショットは画像として処理されています。無料枠では大きい範囲はエクスポートできないようでした。ある程度の塊であればHTMLとCSSを出してくれます。CSSのBEM形式の指定は出来なさそうです。（記事作成時に確認したところリニューアルされており、HTMLとCSSを書き出す設定が見つけられず・・・以前と操作が違うようです）
Figma to Code：レスポンシブ対応できていないようです。ヘッダー部分の画面のスクリーンショットはそのまま画像として処理されています。CSSはTailwind CSSで記述してあります。またインラインスタイルで記述されており、CSSとHTMLのファイル分離できなさそうです。
3.AIにFIgmaデザイン画像を読ませてHTML/CSSへ変換する
最後にFigmaから一枚の画像データとして書き出し、「スクリーンショットからHTMLを作成してください。CSSは別ファイルにしてBEM方式で書いてください。」 という指示をAIに入れて変換させてみました。
今回は GPT-4.1 mini、GPT-4.1 nano、Gemini 2.5 Proを使ってみました。AIといっても使うモデルによって得意不得意があるようでした。
- GPT-4.1 mini：だいぶ崩れてしまっています。しょんぼりです。背景色消えてしまっています。
- GPT-4.1 nano：背景色は出ているのでminiより一歩前進？でもちょっと古い雰囲気です。
- Gemini 2.5 Pro：だいぶ良くなりました。レスポンシブにも対応しています！クラスの付け方も文脈ちゃんとわかってるのがすごい。
まとめ
単一ページを手早く簡単にHTML/CSSへ変換したい場合は、AI（Gemini 2.5 Pro）にFIgmaデザイン画像を読み込ませるのが一番早そうでした。 複数ページの時はクラス名の付け方などの共通化が必要になりますので、調整が必要そうです。 まずベースになるページをAIに読ませてから「同じように変換して」と指示すればうまくいくかもしれません。
プラグインを使う場合は、画面のスクリーンショットはテキストデータではなく画像として処理されてしまうので、使わないほうが良さそうです。 また無料プランのままだとHTML/CSSのダウンロードが出来なかったり、変換に回数制限などがあり、思ったように書き出せませんでした。 まずは無料プランで試して、操作感や変換できるコードなどが目的に合いそうであれば有料プランを検討するのが良さそうです。
次々と新しい方法が出てきているため、効率的なやり方について日々調べながら業務に当たりたいと思います。
