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.

✏️ Export settings

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

Select all the assets to be exported. On the right-hand panel, click Export and set the desired scale (1x, 2x, 3x) and file format (e.g., .png, .jpg).
No need to export assets individually.

⚠️ Please export your design one page at a time. FRONT-END.AI analyzes each page individually.
⚠️ 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.
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.