HTML Figma Figma Plugin

Easily convert any webpage to Figma layers by URL, or turn a Figma design into code!

* How does it work *

1) Install the plugin

2) In Figma hit cmd+/ and search “html to figma” and hit enter

3) Enter a URL you want to import

* New – Turn designs into code *

Now you can also download Figma layers and turn them into code using JSX Lite https://jsx-lite.builder.io/?inputTab=figma

You can turn your design into HTML+CSS, React, Vue, Liquid, Solid, and more!

* Why? *

– Easily import real live site styles for a starting point for designs and prototypes

– Quickly turn real site components into design components

– Easy import from storybook, etc

* Limitations *

Importing HTML layers to Figma is a best-effort process. Even getting 90% there can save you a ton of time, only having to clean up a few things.

A few known limitations:

– not all element types are supported (e.g. iframe, pseudoelements)

– not all CSS properties are supported or fully supported

– not all types of media are supported (video, animated gifs, etc)

– all fonts have to be uploaded to Figma or a best effort fallback will be used

If you find any issues or have feedback at all please make an issue or send a pull request for an improvement!

* Chrome extension *

Want to capture a page that you need to navigate to or is behind an auth wall? Then the Chrome Extension is for you!

https://chrome.google.com/webstore/detail/html-to-figma/efjcmgblfpkhbjpkpopkgeomfkokpaim

* Open Source *

This plugin is open source at https://github.com/builderio/html-to-figma

Feedback and contributions welcome!