FIG2HTML

About this plugin

🚀 Turn Your Designs Into Code, Instantly

Tired of manually coding your Figma designs? Fig2HTML Pro is a powerful, one-click solution that transforms your static layouts into live, production-ready code. Our advanced rendering engine preserves every detail, exporting clean HTML and CSS that looks exactly like your Figma canvas.

Whether you're building a webpage, a quick prototype, or a complex HTML email, Fig2HTML Pro is built to streamline your workflow and save you hours of work.

✨ Interactive and Email-Ready

Go beyond static exports. Handle interactive elements with ease using our intuitive UI for confirming and editing hyperlinks. Building an email campaign? Simply switch to Email Compatibility Mode to generate robust, table-based layouts that work flawlessly across all major email clients. You can even include animated GIFs with our simple placeholder system.

Fig2HTML Pro is the perfect tool for designers who need to hand off code, marketers building engaging newsletters, and developers who want to accelerate their front-end workflow.

Features

✅ Pixel-Perfect Export: Converts your selection to absolutely positioned HTML elements for a flawless 1:1 match with your design.

✍️ Live Text Rendering: Exports text as real HTML text (<span>), not images. It preserves all fonts, sizes, weights, and even multiple colors within a single text box.

🔗 Interactive Link Editor: Name any layer [link] url and our UI will let you preview the element and confirm or edit the URL before exporting.

📧 Email Compatibility Mode: Generates email-safe, table-based layouts to ensure your design looks great in Gmail, Outlook, and more.

🖼️ Animated GIF Support: In Email Mode, use a [gif] name placeholder to get a prompt to upload your animated GIF files during export.

📦 Automatic Asset Export: Automatically exports shapes, images, and groups as optimized PNG assets.

🗂️ All-in-One ZIP Download: Packages your index.html and all image assets into a single, convenient ZIP file.

How to Use:

1. Select: Select the frames, groups, or layers you want to export on your Figma canvas.

1. Run Plugin: Open Fig2HTML Pro.

1. Set Options: Toggle Email Compatibility if you're building an HTML email.

1. Export: Click the Export Selection button.

1. Confirm Links & GIFs:

If you have any layers named [link]..., the plugin will show a preview and an input field to confirm or change the URL.

If you are in Email Mode and have layers named [gif]..., the plugin will prompt you to upload the corresponding GIF files.

Download: Click Confirm & Download ZIP to get your ready-to-use files!

Pro Tips:

Naming Layers

To unlock the advanced features, use these simple naming conventions on your Figma layers:

To create a link:

Name any layer or group [link] https://www.your-url.com.

To add a GIF (in Email Mode only):

Name a placeholder rectangle or frame [gif] my-animation. The plugin will ask you to upload a file named my-animation.gif.

To export tables (in Email Mode only):

Name a placeholder group or Frame [table]. The plugin will render

the table as HTMLized

Also Requires Credits to Export Table based HTMLS

For any Issues Please contact : [email protected]