FRONT-END.AI — From Figma to semantic HTML with the power of Generative AI

About this plugin

日本語訳は下にあります。

This extension is a plugin for users of FRONT-END.AI, a developer-focused low-code platform.

🎉 Try FRONT-END.AI for free! Sign up here: https://front-end.ai

🚀 What is FRONT-END.AI?

FRONT-END.AI is a low-code tool built for front-end developers.

Our patented "AI that understands design" (patents granted in the US, Japan, and China) ,combined with the latest large language model (LLM), enables highly advanced design interpretation.　　

FRONT-END.AI for Visual Studio Code instantly generates clean, editable code directly in your VS Code environment based on complete design data uploaded from Figma.

✨ Features

🔹 Excellent Design Adaptability

1. Powered by “AI that understands design”, it automatically detects structure in both template-based and highly original design comps
2. just upload your design and assets, no need to tidy up your layer structures.

🔹 Faster Code Generation

1. Get production-ready code for your VS Code environment in as little as 1 minute.

🔹 Readable HTML

1. Generates clean, structured HTML that’s easy for engineers to read and maintain.

📚 Workflow Overview

1. Open the Figma plugin and export your design data. Save all files locally.
2. In VS Code, launch the FRONT-END.AI extension. Upload the design comp, asset images, and output.json file that you saved locally. Then click the “Analyze” button.
3. HTML code is automatically generated, completing the initial implementation phase.　You can now focus on more creative and meaningful development work.

🗒️ What You Need to Upload

You'll need the following to generate HTML code:

🖼️ Design comp (.png / .jpg, up to 20 MB)

🧩 Asset images (.png / .jpg / .gif / .svg / .webp, total with design comp: up to 100 MB)

📄 output.json file

⚠️Notes

1. If you have both PC and mobile designs, please upload them one at a time — not together.
2. Assets can be exported at 1x, 2x, and 3x resolutions.
3. If you upload assets and output.json without using the plugin, you may encounter errors due to data mismatches.
4. The plugin cannot extract text or images from external image elements, as it is designed to work with the structure created within Figma.

✏️How to Export from Figma

Please refer to the video above along with these steps.

1. In Figma, set up export settings for each layer in your design.

1. Select all the assets to be exported. There is no need to export each asset manually.
2. On the right-hand panel, click Export and set the desired scale (1x, 2x, 3x) and file format (e.g.,png,jpg).
3. Note: For more details, please refer to Figma’s official guide.
4. Note: Even if you select PDF as the file format, it will not be exported by the plugin.

2. Select the entire page to export.

3. Select Main Menu > Plugins > FRONT-END.AI.

4. Once the modal opens, click the "Export" button to download the ZIP file, then extract it.

Please upload the exported files to your VS Code environment without modifying them.

For further information, please visit our Help Center.

---

（以下、日本語訳です）

本拡張機能はFRONT-END.AI利用者向けプラグインです。

🎉 今すぐお試し！FRONT-END.AIでは、無料でトライアルをご利用いただけます。アカウントのサインアップはこちらからお願いします。

🚀FRONT-END.AIとは

FRONT-END.AIはWebエンジニア向けのローコードサービスです。

当サービスに搭載された「デザインを理解するAI」は、アメリカ・日本・中国で特許を取得しており、高精度なデザイン解析を実現しています。

さらに、最新の生成AI技術（LLM）を導入することで、よりセマンティックで高精度なHTMLコードの生成が可能になりました。

FRONT-END.AI for VS Codeは、Figmaからアップロードしたデザインデータ一式をもとに、VS Code上にコードを自動生成します。

✨特徴

🔹 優れた適応能力

テンプレートのようなデザインから、完全オリジナルなデザインまで対応できます。

デザインデータを読み込むと、FRONT-END.AIが構造を判断するため、デザインデータのレイヤー構造を整理する必要はありません。

🔹 素早いコード出力

VS Code用のコードは、わずか1分で自動生成されます。

🔹 理解しやすいコード出力

構造化されたコードは、エンジニアにとって読みやすく、SEOにも適した形で記述されます。

📚 ご利用の流れ

HTMLコードの出力に必要なものは以下です。

🖼️デザインカンプ (.png / .jpg、上限容量：20MB)

🧩 アセット画像(.png / .jpg / .gif / .svg / .webp、上限容量：デザインカンプと併せて100MBまで)

📄 output.jsonファイル

⚠️注意事項

1. レスポンシブなどPC/SP用それぞれデザインがある場合は、同時にアップロードせず一方のみをアップロードしてください。
2. アセットの書き出しは1x,2x,3xの解像度に対応しています。
3. プラグインを通さずに書き出したアセットとoutput.jsonを最初にアップロードした場合、output.jsonの内容と整合性が取れずエラーとなります。
4. Figma内にて作られた構造ではなく、外部からもってきた画像要素に関しては、本プラグインでは文字/画像を抽出することが出来ない仕様となっております。

✏️ Figmaでの書き出し手順

こちらの手順については上記の動画と合わせてご確認ください。

1. 各レイヤーでアセットの書き出しを設定します。

1. 書き出したいアセットを全て選択し、右のExportをクリックして、倍率・拡張子を設定します。 アセットごとの個別書き出しは不要です。
2. 拡張子をPDFに選択しても、プラグインでは書き出しされません。
3. 詳細はFigmaにおけるエクスポートのガイドを確認してください。

2. 書き出すページ全体を選択してください。

3. メインメニュー>プラグイン>FRONT-END.AIを選択してください。

4. モーダルが開いたら、書き出すボタンを押下し、zipファイルをダウンロードして解凍してください。

書き出したファイルは手を加えずに、そのままVS Code上にアップロードしてみましょう。

ヘルプセンターにて、詳しい情報をご覧いただけます。