With one batch, the Figma plugin exports everything required for HTML code generation.

🗒️ File Requirements

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)

💡 Notes

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

🔍 Tips to improve accuracy

If the design comp contains a background that spans multiple content areas, hide the background before generating the HTML.
Do not include unnecessary assets. (Example: Do not mix assets from the mobile design comp into the PC design comp.)

✏️ Export settings

In Figma, set up export settings for each layer in your design. On the right-hand panel, click Export and set the desired scale (1x, 2x, 3x) and file format (e.g., .png, .jpg).

⚠️ If you select PDF as the file format, the plugin will not export it.
⚠️ For more information, please refer to Figma's Official Guide.
Select the entire page to export. No need to export assets individually.
⚠️ Please export your design one page at a time. FRONT-END.AI analyzes each page individually.
Select Main Menu > Plugins > FRONT-END.AI.
When the modal appears, 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.