FigmaのデザインをHTMLに書き出す方法は、Dev Mode・プラグイン・AI変換の3手法があります。標準機能のみではHTML出力はできず、プラグインや外部サービスの活用が前提です。この記事では、フリーランス案件で実際に使える選択基準と運用ノウハウを解説します。
▶ 3日で初案件PR
この記事でわかること
FigmaからHTMLを書き出す3手法の違いと選び方、変換前のFigma整備で修正工数を削減する4つのポイント、案件タイプ別に最適ツールを3分で判断できる診断フローの3点を整理しています。
今の仕事について、一番近いものは？
この記事の結論
FigmaからHTMLを書き出すには、Dev Mode（コード参照のみ）・Animaなどのプラグイン（自動変換）・AI変換（初稿補助）の3手法を案件規模に応じて使い分けることが前提です。変換後のコードは必ず手修正が必要であり、自動変換＝納品品質ではありません。フリーランス案件では、静的LP・複数ページ・CMS連携の3パターンで最適ツールが変わるため、受注前の確認項目を固定化しておくことが工数削減の最短ルートです。
今日やるべき1つ
自分が現在受けている案件がLP（1ページ）なのか複数ページなのかを確認し、下の状況別ショートカットから該当セクションを読んでください（3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| そもそも何ができるか知りたい | Figma HTML書き出しは3手法が基本 | 3分 |
| ツールをどれにするか迷っている | Figmaプラグインは目的で選ぶ3分岐 | 4分 |
| 変換前にFigmaの整え方を知りたい | 変換前のFigma整備は4項目が基本 | 3分 |
| 自分の案件に合うか判断したい | Figma書き出し適用を3分で診断 | 3分 |
| 変換後の修正工数を最小化したい | Figma HTML書き出しは5つの仕組みで効率化 | 5分 |
| 納品品質を上げる運用を知りたい | Figma HTML変換の実例は2パターンで比較 | 4分 |
Figma HTML書き出しは3手法が基本
FigmaでHTMLを書き出したいとき、「どこかにエクスポートボタンがあるはず」と探す方が多いです。実際にはFigmaの標準機能にHTML直接書き出しは存在しないため、手法を正しく把握しておくことが出発点になります。
Figma標準機能でHTMLは出力できない
Figmaが標準で提供するエクスポート機能は、PNG・SVG・PDFなどの画像・ベクター形式のみです。HTMLやCSSのコードを直接生成するボタンは存在しません。これは仕様上の制限であり、バージョンアップによって変わるものではなく、現時点では「Figma単体でHTML書き出しは不可」と理解しておく必要があります。HTML書き出しを前提とした案件では、最初からプラグインや外部ツールの導入を計画に含めてください。
Dev Modeはコード参照専用として使う
FigmaのDev Modeは、デザインのCSS値・カラーコード・フォントサイズ・余白などをパネルで確認できる機能です（Figma Dev Mode公式）。コーダーがデザインを見ながら手打ちでコーディングする際の参照ツールとして機能します。Dev ModeはHTML構造そのものを出力するわけではなく、あくまで「このデザインの数値を確認する場所」です。Dev Modeを活用するとコーディング精度が上がる反面、HTML出力の代替にはならないため、2つの役割を明確に分けて使うことで作業効率が最大化します。
なお、Dev Modeは2023年以降に有料化されており、現時点ではProfessionalプラン以上が必要です（Figma Dev Mode公式）。無料プランでは利用できないため、プランの確認を先に行ってください。
3手法の特徴を1表で整理
FigmaからHTMLを得る方法は、実務では以下の3系統に整理できます。
| 手法 | 代表ツール | 出力品質 | 修正工数 | 向いているケース |
| Dev Mode（参照） | Figma標準 | 参照のみ | 高（全手打ち） | 高品質・カスタム案件 |
| プラグイン変換 | Anima、Locofy | 中〜高 | 中 | LP・複数ページ案件 |
| AI・画像変換 | GPT-4o、各種AI | 低〜中 | 高 | プロトタイプ・初稿確認 |
Dev Modeはコードの正確性は高いものの、すべて手打ちになるため工数は最大です。プラグイン変換は自動出力されるコードをベースに修正する形で、案件規模に応じた工数削減が見込めます。AI変換は初稿の叩き台として機能しますが、納品品質に仕上げるには大幅な手直しが必要です。案件の規模・品質要求・予算の3軸で手法を選ぶのが現実的な判断基準です。
「Dev Modeでコード確認しながら手打ちしていたが、プラグインに切り替えてから初稿完成までの時間が半分になった」という声もあります（FigmaからHTML/CSSコードを生成する方法）。
また、フリーランスのHTMLコーダーとしてFigmaを活用する方は、ツール選定とあわせてポートフォリオや案件獲得の仕組みも整えておくとスムーズです。
CHECK
▶ 今すぐやること: FigmaのDev Modeを開き、任意のFrameを選択してCSSパネルを確認する（5分）
Q: Figmaの無料プランでもDev Modeは使えますか？
A： いいえ。Dev Modeは2023年以降に有料化されており、現時点ではProfessionalプラン以上が必要です。無料プランでは利用できないため、プランの確認が先決です。
Q： Dev ModeのCSSをコピーするだけでHTMLは完成しますか？
A： いいえ。CSS値のみのコピーであり、HTML構造（タグの入れ子・クラス名設計など）は別途自分で設計する必要があります。Dev Modeはあくまで数値参照ツールです。
Figmaプラグインは目的で選ぶ3分岐
プラグインを何となく選ぶと、案件に合わないツールを導入して後から差し替える二度手間が発生します。目的・案件規模・予算の3軸で最初に絞り込む習慣をつけておくと、選定ミスによる損失を大幅に減らせます。
AnimaはLP・省力化案件の第一選択肢
Animaは、Figmaのプラグインとして動作し、選択したFrameをそのままHTML/CSSに変換できるツールです（AnimaによるFigma HTMLエクスポート手順）。Figmaプラグインから「Anima」を起動し、変換したいFrameを選択してHTML出力を実行するだけで、CSS込みのコードが生成されます。無料プランでも基本的な変換が可能であり、静的LP案件での省力化ツールとして実績が多い点が特徴です。出力コードの命名規則が自動生成のため、そのまま納品せずクラス名の整理を前提に運用することで品質を確保できます。なお、無料プランは出力ページ数に制限があり、商用案件では有料プランの条件を事前にAnima公式サイトで確認してください。
Locofyは高品質・React対応案件向け
Locofyは、FigmaデザインをReact・Next.js・Vue.jsなどのコンポーネント形式にまで変換できるツールです（Locofyを使ったFigma変換解説）。HTML/CSSのみでなく、JSXやコンポーネント構造まで出力できるため、フロントエンド案件や継続開発が前提のプロジェクトで優位性があります。無料枠は限定的であり、商用案件では有料プランが現実的です。純粋な静的コーディング案件にはAnimaの方がシンプルで使いやすく、Locofyは「Reactベースの継続開発案件」という条件に絞って選択するのが費用対効果の観点から合理的です。
フロントエンドエンジニアとして案件を受ける場合、LocofyのReact出力機能を活かしたポートフォリオ設計も効果的です。
Figma to HTMLプラグインは無料試作用
Figmaコミュニティで公開されているFigma to HTMLプラグインは無料で利用できます。出力品質はAnimaやLocofyと比較すると限定的であり、本番案件向けというよりはデザインのHTML化を素早く確認するための試作ツールとして機能します。クライアントへのプレビュー提示や、実装前の構造確認用途では十分な実用性があります。
ツール選択チャートで判断
案件特性に応じた選択フローを整理します。静的LP（1〜3ページ程度）であればAnimaを第一候補として、React・コンポーネント構造が必要な場合はLocofyを、試作・プレビュー用途であれば無料プラグインを選択する形が実務的な判断軸になります。予算上限が月5,000円以内の場合はAnimaの無料〜Basicプランを、それ以上の品質投資が可能であればLocofyの有料プランを検討するという費用軸も加えると、選択の迷いがなくなります。各ツールの最新料金はそれぞれの公式サイトで確認してください。
CHECK
▶ 今すぐやること: Figmaプラグインパネルから「Anima」を検索してインストールし、試作Frameで変換テストを実行する（10分）
Q: AnimaとLocofyを同時に使うことはできますか？
A： 技術的には両方インストール可能ですが、案件ごとに使い分ける運用が現実的です。1案件で複数ツールを切り替えると、コードの書き方が混在して修正工数が増えるため、案件単位でツールを固定する方が効率的です。
Q： Animaの無料プランと有料プランの違いは何ですか？
A： 無料プランは出力ページ数に制限があり、商用利用の条件が異なります。大量ページ・商用案件では有料プランの導入を検討してください。最新の料金体系はAnima公式サイトで確認してください。
変換前のFigma整備は4項目が基本
変換ツールを使う前にFigma側のデータを整えておくかどうかで、出力後の修正工数に差が生じます。変換の品質はツールの性能よりもFigmaデータの整備状況に依存する部分が大きく、見落としがちなポイントです。
Frame構造は変換単位で設計する
Figma上でデザインを作成する際、変換単位（セクション・カード・ヘッダーなど）がそれぞれ独立したFrameになっていると、プラグインが構造を正確に読み取れます。グループのみで構成されたデザインや、絶対座標配置が多用されたデザインは、変換後にfloatやabsolute positioningが乱発され、CSS整理に余分な時間がかかります。Auto Layoutを活用してFlexboxベースの構造を作っておくことで、変換後のCSS構造がより整った状態になります。Auto Layoutが適用されているFrameは、変換ツールがflex関連のCSSを正しく生成しやすくなり、レスポンシブ対応の修正工数を削減できます。
コンポーネント化で変換効率を上げる
ボタン・ナビゲーション・カードなど、繰り返し使用する要素はFigmaのコンポーネント機能を使って共通化しておきます。コンポーネント化されていない場合、同じデザインが各所にバラバラなオブジェクトとして存在し、変換後に重複したCSSクラスが大量に生成されます。コンポーネントとして整理されていれば、出力されるCSS量が削減され、修正箇所も限定できます。Animaのような変換ツールはコンポーネントの繰り返しを認識して効率的なコード出力を行うため、事前のコンポーネント整理は変換品質に直結します。
不要レイヤーと過剰ネストを整理する
Figmaのデザイン過程で積み重なった非表示レイヤー・複数の空グループ・過剰なネスト構造は、変換後のHTMLに不要なdivや空要素として反映されます。変換前にレイヤーパネルを確認し、非表示・空・重複レイヤーを削除することで、出力HTMLのクリーンさが向上します。非表示オブジェクトが多数存在するデータは変換前に整理することを基本ルールにしておくと、後工程の修正時間を削減できます。
フォント・カラーはスタイルとして登録する
使用フォントとカラーをFigmaのローカルスタイルとして登録しておくと、変換ツールがCSS変数として出力できる場合があります。スタイル未登録の状態では、各要素に個別のfont-familyやcolorプロパティが都度付与され、CSS修正時の一括変更が困難になります。スタイルとして登録するだけで変換後のCSS保守性が向上するため、受注後のデータ確認ステップとして固定化しておくことをおすすめします。
クライアントから受け取ったFigmaデータ整備にかかる工数は、個人事業主の見積書作成時に「準備工数」として明記しておくとトラブルを防げます。
CHECK
▶ 今すぐやること: 現在開いているFigmaファイルのレイヤーパネルを開き、非表示レイヤーの数を確認する（5分）
Q: Auto Layoutを全セクションに適用するのは大変ですが、最低限どこに使えばいいですか？
A： ヘッダー・フッター・繰り返しカード系の要素を優先してAuto Layoutに変換するだけで、変換後のCSS崩れを大きく防げます。全体への適用が理想ですが、工数が限られる場合は「横並びや縦並びになる要素」から優先的に対応してください。
Q： クライアントから受け取ったFigmaファイルが整理されていない場合はどうすればよいですか？
A： 変換前の整備工数を見積もりに含めるか、クライアントに事前整備の依頼をするかを受注前に判断します。整備なしで変換した場合の修正工数と、整備にかける工数を比較して判断してください。
PR提供: 日本デザインスクール（デザスク）
Figma書き出し適用を3分で診断
自分の案件にFigmaのHTML変換を適用すべきかどうかを判断する際、「なんとなくやってみる」は工数ロスの原因になります。案件特性に合わせて3分で判断できます。
Q1: 案件のHTML成果物は静的ファイル（LP・コーポレートサイト等）ですか？
Yesの場合はQ2へ進みます。Noの場合（CMS・Reactアプリ等）はQ3へ進みます。
Q2: 対象ページ数は5ページ以内ですか？
Yesの場合はResult A: Animaプラグインで変換が最適です。静的・小規模案件では変換後の修正工数を含めてもDev Mode手打ちより短時間で完成します。Noの場合（6ページ以上）はResult B: Animaの有料プランまたはLocofyを検討してください。ページ数が多いほど変換の自動化メリットが大きくなりますが、ツールの制限に注意が必要です。
Q3: FigmaデータをReact/Vueコンポーネントとして納品しますか？
Yesの場合はResult C: Locofyを第一候補に選択してください。コンポーネント出力に強みがあり、フロントエンド案件の工数削減に貢献します。Noの場合はResult D: Dev Mode参照＋手打ちが品質面で優位です。HTML単体の高品質な仕上がりが求められる場合、プラグイン変換よりもDev Modeで正確な数値を確認しながら手実装する方が、後工程の修正が少なくなる傾向があります。
案件診断の結果は、フリーランスのポートフォリオ作成で得意領域を整理する際にも活用できます。Result Aが多ければ「静的LP制作特化」としての差別化が可能です。
CHECK
▶ 今すぐやること: 今受けている案件のページ数とHTML成果物の形式（静的・React等）を書き出す（3分）
Q: 診断でResult Aになりましたが、クライアントがレスポンシブ対応を求めています。Animaで対応できますか？
A： はい。ただし、Figmaデータ側でブレークポイントごとのFrameが設計されていることが前提です。Figma側の設計が不十分な場合、変換後のレスポンシブ対応は手修正が必要になります。
Q： HTMLではなくCSSのみ欲しい場合はDev Modeで十分ですか？
A： はい。CSS値の参照であればDev Modeで対応できます。クラス単位のCSSを体系的に出力したい場合はAnimaが有効ですが、Dev Modeのコピー機能だけでも多くのケースで要件を満たせます。
Figma HTML書き出しは5つの仕組みで効率化
変換ツールを「入れたら終わり」と考えると、後工程で想定外の修正工数が発生します。運用上の仕組みを5つ固定化することで、案件ごとの手戻りを最小化できます。
ハック1: 受注前チェックリストでデータ受け渡しを固定化
【対象】: Figmaデータを初めてクライアントから受け取るフリーランスコーダー
【手順】: 受注前に「Figmaデータ確認リスト」を用意し、共有形式・権限・レスポンシブ要件・フォント情報の4項目を確認します（5分）。クライアントに「Figmaの閲覧権限」「自動レイアウト使用有無」「フォント購入要否」を事前メールで確認します（10分）。回答をもとに変換ツールの選定と概算工数の見積もりを更新し、受注条件として明示します（15分）。
【ポイントと理由】: 変換後の崩れの原因の多くがFigmaデータの非Auto Layout・未コンポーネント・購入フォントの欠落に起因します。受注前に問題を排除することで後工程の手戻りを減らせます。「受け取ったデータで何とかする」より「受注前に確認を固定化してデータ品質を担保する」方が修正工数の削減につながります。
【注意点】: クライアントに詳細確認を求めすぎると受注率が下がることがあります。「Figmaの閲覧権限」と「フォント情報」の2項目のみを最低限確認事項として固定化し、他は受け取り後に対応するという割り切りでも十分です。
ハック2: 変換後CSS整理は3ステップで完結
【対象】: Animaなどで変換後のCSSが読みにくくて困っているコーダー
【手順】: 変換直後のCSSをVS Codeで開き、未使用クラス（.anima-xxx等の自動命名）を検索して一覧化します（15分）。BEMやプロジェクトルールに従ってクラス名を置換し、一括リネームを実行します（20分）。background-color・font-family・font-sizeをCSS変数（–color-primary等）に置き換えてカスタムプロパティ化します（15分）。
【ポイントと理由】: 未使用クラスを最初に削除してから命名置換→変数化の順序で進めると総工数を削減できます。未使用クラスが残ったまま命名作業をすると後から不要コードが残り、作業量が増えます。削除を先行させることで命名対象が絞り込まれ、作業効率が向上します。
【注意点】: !importantが多用された変換出力の場合、クラス名変更より先にカスケード整理が必要になります。「クラス名から触り始める」より「!importantの有無を最初に確認する」ことを最初の一手にしてください。
ハック3: Figmaのビューポート別Frameで変換後のレスポンシブ修正を最小化
【対象】: 変換後にレスポンシブ対応で大量の手修正が発生しているコーダー
【手順】: FigmaでPC（1440px）とSP（375px）の2つのFrameを並べて作成します（デザインがある場合は既存を活用）（10分）。Animaでプラグインを起動し、両方のFrameを選択した状態でHTML変換を実行します（5分）。出力されたCSSのメディアクエリ部分を確認し、ブレークポイントをプロジェクト標準（768pxなど）に調整します（15分）。
【ポイントと理由】: Animaはビューポート別Frameを認識してメディアクエリ付きCSSを出力します。PC版のみで変換してから後でSP対応するより、変換時に一括出力した方が手修正箇所を削減できます。「SP対応は後からCSSで追加」というアプローチより、「Figmaのレスポンシブ設計を先行させて変換と同時に出力」するアプローチが工数削減につながります。
【注意点】: SPとPCのFrameでコンポーネントが共通化されていない場合、2つのFrameを変換しても重複したCSS定義が生成されます。「2Frameあれば解決する」ではなく、「コンポーネント共通化が前提」という点を先に確認してください。
ハック4: AI変換は初稿構造確認のみに使い、本番実装には使わない
【対象】: ChatGPTなどのAI変換でそのまま納品できるか試しているフリーランス
【手順】: FigmaのフレームをPNG書き出しし、GPT-4oなどのマルチモーダルAIに「このデザインをHTML/CSSに変換してください」と入力します（5分）。出力されたコードを確認し、「セクション構造・タグの入れ子・クラス設計の骨格」のみを参照します（10分）。骨格を手打ちベースで再構築し、CSS値はDev Modeから正確な数値を取得して上書きします（案件規模による）。
【ポイントと理由】: AIが生成するCSS値（色・フォントサイズ・余白）は視覚的推定であり誤差が生じるため、そのまま納品すると実装精度が低下します。AIの出力はHTML構造の叩き台として使い、CSS値は必ずDev Modeで正確な値に差し替えることで品質が安定します。AI＋Dev Modeの組み合わせで構造速度と数値精度の両方を確保できます。
【注意点】: AI変換結果をクライアントへのプレビュー提示に使うことは問題ありませんが、本番ファイルとしてそのまま納品することは避けてください。品質リスクに加え、クライアントとのトラブルの原因になります。
ハック5: 変換ツール別の「修正チェックリスト」を案件ごとに使い回す
【対象】: 毎回変換後の修正内容が変わって工数が読めないフリーランス
【手順】: 最初のAnima変換案件が終わった直後に「変換後に修正した箇所リスト」をNotionやスプレッドシートに書き出します（15分）。次のAnima案件開始時に、前回リストを「変換後修正チェックリスト」として使い回します（5分）。案件ごとに新規発生した修正パターンをリストに追記し、ツールごとのチェックリストとして育てていきます（5分/案件）。
【ポイントと理由】: 変換ツールの出力パターンは案件のFigmaデータ品質に依存するため、自分の受注傾向に合ったリストが最も精度の高い修正ガイドになります。公式ドキュメントの修正ガイドより、自分の案件履歴から作ったチェックリストの方が実際のトラブルを先回りできます。案件データが蓄積されると、修正工数の見積もり精度が向上します。
【注意点】: チェックリストは網羅性を高めすぎると確認工数が増えます。修正頻度が低い項目は削除するか別リストに移し、常用リストは15項目以内に保ってください。高頻度パターンのみを常用リストに残す方が実務では機能します。
修正チェックリストはNotionなどのツールで管理すると便利です。作業効率を上げる方法の記事も参考に、ツール選定と合わせて整備してみてください。
CHECK
▶ 今すぐやること: Notionまたはスプレッドシートに「変換後修正チェックリスト」のテンプレートを作り、ハック1〜5から自分に必要な項目を書き出す（15分）
Q: Animaの変換で日本語フォントが正しく表示されない場合はどうすればよいですか？
A： Animaの出力HTMLではfont-familyがWeb安全フォントに置き換わる場合があります。変換後のCSSでfont-familyをGoogle FontsのURLまたはシステムフォントスタックに手動で書き換えてください。Noto Sans JPなどのWebフォントを指定するケースが多いです。
Figma HTML変換の実例は2パターンで比較
変換ツールの活用事例を2つのパターンで整理します。成功・失敗の分岐点を把握することで、自分の案件設計に反映できます。
ケース1（成功パターン）: 静的LP案件でAnima＋事後CSS整理で工数を削減
受注したのはコーポレートサイトのLP（3ページ）の案件で、Figmaデータはクライアント側のデザイナーが作成済みでした。受注前にAuto Layout適用状況とフォント情報を確認し、未適用セクションを整備してからAnima変換を実行しました。変換後のCSS整理にクラス名置換とレスポンシブ修正を加えて納品しています。
「変換前にデータ整備をしっかりやっておいたら、プラグインの出力が予想以上にきれいで修正が少なかった」という声があります（FigmaからHTML/CSSコードを生成する方法）。
データ整備なしでそのまま変換した場合、崩れた出力コードの修正に追加の時間がかかります。
ケース2（失敗パターン）: 変換後コードをそのまま納品してトラブル
複数ページの案件でAnimaを使い、変換後のコードをほぼ手直しなしで納品したケースです。変換直後の見た目はほぼ正確でしたが、クライアントの本番環境でフォントが崩れ、SPでのレイアウトが一部breakしていました。修正依頼対応に元の実装工数と同等の時間を追加で費やしています。
「変換したコードをそのまま出したら後から修正依頼がたくさん来て、結局手打ちより時間がかかった」という経験談があります（Figma to HTML変換サービス比較レポート）。
変換後にフォント・レスポンシブ・クラス名の3点を確認してから納品することで、修正依頼の大半を防げます。
納品後にトラブルが発生した際の対応フローや、外注契約書で作業範囲を明確にしておく方法も合わせて確認しておくと安心です。
CHECK
▶ 今すぐやること: 自分の直近案件でAnima変換を使う場合、「フォント確認・レスポンシブ確認・クラス名整理」の3点を納品前チェック項目として追加する（5分）
Q: 変換後コードをクライアントに確認してもらう前に、最低限チェックすべき点はどこですか？
A： フォントの表示確認・SPでのレイアウト崩れ確認・代表的なブラウザ（Chrome・Safari）での表示確認の3点を最低限のチェック項目にしてください。この3点で発見できるトラブルが変換起因の修正依頼の大半を占めます。
Q： 納品後に変換起因の修正が発生した場合、追加費用を請求できますか？
A： 受注前の仕様確認と、変換ツールを使う旨の共有が明示されていれば、変換起因の修正は作業範囲に含まれると判断されることが多いです。受注前の要件確認を明文化することが、後のトラブル防止につながります。
Figma書き出しは3手法を使い分ける：修正工数を最小化する運用設計
FigmaからHTMLを書き出すには、Dev Mode・プラグイン変換・AI変換の3手法を案件特性に応じて選択することが前提です。Animaは静的LP案件での省力化に実績があり、Locofyはコンポーネント・React案件向け、AI変換は初稿構造確認のみに用途を限定することが、修正工数を最小化する設計です。
Figma変換を「ツールを入れれば終わり」ではなく「変換前の整備・変換後の修正をセットで設計する運用」として捉えることで、案件ごとの品質と工数の両方をコントロールできます。フリーランスとして継続的にFigma案件を受けるのであれば、変換後の修正チェックリストを1案件ごとに育てていくことが、長期的な効率化への最短ルートです。
| 状況 | 次の一歩 | 所要時間 |
| 初めてAnimaを使う | Figmaにプラグインをインストールして試作Frameで変換テスト | 15分 |
| 受注前のデータ確認を標準化したい | 受注前チェックリストをNotionに作成 | 20分 |
| 変換後のCSS整理を効率化したい | 未使用クラス削除→命名置換→変数化の3ステップを初案件で実施 | 1〜2時間 |
| レスポンシブ修正を最小化したい | FigmaにPC・SP両方のFrameを作成してから変換を実行 | 30分〜 |
Figma HTML書き出しに関するよくある質問
Q: Figmaの標準機能でHTMLを書き出す方法はありますか？
A： いいえ。現時点では、Figmaの標準エクスポート機能にHTMLは含まれていません。HTML出力にはAnimaなどのプラグインか外部サービスを使う必要があります。
Q： 変換後のコードは本番環境でそのまま使えますか？
A： いいえ。そのまま使える品質にはならないことがほとんどです。クラス名・フォント・レスポンシブ対応・不要コードの削除を最低限行った上で納品することを前提にした工数見積もりが必要です。
Q： フリーランスがFigma変換ツールを使う場合、クライアントへの説明は必要ですか？
A： 必須ではありませんが、「変換ツールを使用する旨」と「変換後の手修正を含む作業範囲」を受注前に共有しておくと、納品後の認識齟齬を防げます。品質要求が高い案件ではツール使用の可否を受注前に確認してください。
Q： Locofyは日本語のUIに対応していますか？
A： Locofyの管理画面は英語が基本です。日本語フォントの扱いや日本語テキストのコンポーネント化については、事前に試作案件でテストしてください。
【出典・参照元】
FigmaからHTML/CSSコードを生成する方法 – Figmaプラグインを使ったHTML/CSS生成の実体験レポート
Figma to HTML変換サービス比較レポート – Animaほか変換サービスの案件規模別比較
AnimaによるFigma HTMLエクスポート手順 – Anima公式によるFigma→HTML変換の操作解説
Locofyを使ったFigma変換解説 – LocofyによるFigmaデザインのコンポーネント変換解説
Figma to HTMLプラグイン – Figmaコミュニティ公開の無料変換プラグイン
Figma Dev Mode公式 – Figma Dev Modeの機能概要