The VS Code plugin automatically generates code simply by uploading the required files into your VS Code environment.

🧰 Preparation Checklist

Make sure you have these ready:

✅ Sign up for a FRONT-END.AI account

✅ Install Figma Plugin：

✅ Install VS Code Plugin：

Please refer to Introduction for more details.

🗒️ Upload requirements

Here's what you need to upload using the Figma plugin.

🖼️ 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

⚠️Please make sure to extract the ZIP file that was previously exported via the Figma plugin.

💡 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 you experience low detection accuracy, please try the following:

If assets are not uploaded, add the necessary assets.
Do not use GIF animation images.
Do not include unnecessary assets. (Example: Do not mix assets from the mobile design comp into the PC design comp.)

Click the FRONT-END.AI icon in the sidebar.
Log in
If you haven't signed up yet, please complete the sign-up process first, then click Log in.

Click "Open" to proceed.

You will be redirected to the browser login page. Enter your registered email address and password.
Click "Upload your design" and select all the files exported from the Figma plugin.　Make sure that the design comp, assets, and output.json file are included.
Click "Specify download destination" and choose the directory where the generated files will be downloaded.
Please make sure the design comp, assets, and output.json file are checked, then click “Analyze.”
Analyzing...
Analysis complete!

You can now review, edit, and use the auto-generated code freely!

Make sure you're using the latest version of the VS Code plugin to take advantage of new features, performance improvements, and bug fixes.

🔍 Latest version of VS Code:

You can check the latest version here.

🔄 If an update for the VS Code plugin is available:

Open the Extensions view by clicking the Extensions icon, or by pressing Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).
In the Extensions view, search for FRONT-END.AI.
If an update is available, click the Update button next to the extension.