Import local files

Last updated

html.to.design can also import your local files directly into Figma and turn them into editable designs.

The html.to.design plugin's File tab: the list of supported file types and the drop zone to drag and drop or browse for files.

How to import HTML, .zip and email files into Figma

  1. Select the File tab in the html.to.design plugin.

  2. Drag and drop your file, several files or a whole folder into the drop zone, or click the drop zone to select a file from your computer.

  3. Check the import options and click Proceed (skipped if you ticked Don’t show this again).

ℹ️ You can also drop files straight on the Figma canvas while the plugin is open: the same import options come first. Importing several files at once needs a paid plan.

Supported file types

.h2d

.h2d files are generated by the html.to.design browser extension.

ℹ️ This is the recommended file type to use, as it contains all the necessary information to recreate the webpage in Figma.

.html and .htm

These are standard HTML files. The plugin will render these HTML files and import them into Figma.

ℹ️ Your HTML files may contain references to external resources like images, CSS or JavaScript. The plugin will try to import these resources as well, but may not always be successful if they are not present or not available publicly.

We recommend to use the html.to.design browser extension in these cases.

.zip containing webpages

You can also import a .zip file containing all HTML, CSS, images and JavaScript. html.to.design will import all the webpages contained in the zip file.

.zip from Google Stitch

If you’re looking to bring your designs from Google Stitch to Figma, downloading and importing the generated .zip file is the preferred method for high quality results.

⚠️ A zip file must contain at least one .html file and be smaller than 256 MB.

Email files .eml, .emlx and .msg

html.to.design also converts emails into editable Figma designs. Simply drop your email file (.eml, .emlx or .msg) into the File tab to import the email into Figma.

.mhtml and .mht files

If you’re saving your webpages as a single file format (.mhtml and .mht), you can import them into Figma via html.to.design’s File tab.

.make files

Figma Make files don’t go through the plugin: open them in Figma’s file browser.

Other file types

If you drop another file type (a PDF, an image, a .fig file, a spreadsheet…), the plugin tells you which tool imports it, such as pdf.to.design for PDFs.

If you want to import a different file type, please let us know via email!