Convert Figma & HTML

Before you start

• The connected Mica plugin and a selected project.
• Figma frames to export, or an HTML/ZIP file to import.
• The relevant font files when you need a particular typeface.

Export Figma frames to HTML

1. 01

   Select frames and open Convert

   Select one or more frames in your Figma Design file. Choose Figma → HTML. Check the selected names and dimensions under Frames, fonts & export options.
2. 02

   Choose text and layout options

   Keep Editable text for live lettering. Add the appropriate fonts and read any substitution warnings. Choose Original lettering (outlines) when preserving lettering appearance matters more than editing that text. Use Original size or Fit to width as appropriate.
3. 03

   Convert and download

   Use Convert & download. When ready, use Download HTML or Copy HTML in the bottom bar. For several exports, use Download all exports (.zip) when available.
4. 04

   Open the actual downloaded file

   Check the browser’s downloads, then open the HTML and inspect the design. Review missing fonts, image fallbacks, and visual findings. A “download started” message does not confirm that your browser saved the file.

Bring HTML into Figma

1. 01

   Choose HTML → Figma

   Upload an HTML or ZIP file, or paste HTML in the provided field. For a ZIP with several HTML entries, choose the design you want. Keep uploads within the displayed file limit.
2. 02

   Set fonts and dimensions

   Use the authored size unless you need a custom canvas. Supply fonts to preserve typography. Review the selected entry and preparation messages.
3. 03

   Insert and inspect

   Choose Insert into Figma. Inspect the inserted frame and comparison results. Supported parts remain editable; complex artwork can use image or vector fallbacks. Resolve reported differences before treating the result as ready.

Import an animation as a storyboard

For animated HTML or a ZIP, Convert prepares a small selection of important frames. If prompted, choose Find important frames. Review the timestamped thumbnails, adjust the selection, and choose Insert frames.

The selected frames are placed in chronological order at the native canvas size. They are static snapshots for editing and comparison; matching a few frames does not verify the complete animation. Use Studio’s animation workflow to relayout or localize playback.

Fix missing fonts and retain your export

If fonts are missing, use the font drop zone above the preview to supply the named families and styles. Choose Update HTML to rebuild the export with those fonts, then download the updated HTML or ZIP. Updating does not start another download automatically. Expand Conversion details for layer-specific warnings.

Figma-to-HTML downloads remain available while a copy saves in the background. If saving fails, keep the local export and use Retry saving. Activity can reopen retained work; an older saved export may ask you to select its original frames again before updating fonts.

Keep going