Responsive Magic Logo Responsive Magic BETA

Design to Code that works.

Export your Figma designs to human-readable code.
Ship to production with a few tweaks.

Figma HTML 5
Screenshot

Create components with minor tweaks to the generated code!

TRY OUR PUBLIC BETA

Transform a Figma file into code

Responsive Magic is a Figma plugin under development, but you can try the public Beta online:

1

Create a new Figma API Token in a few seconds

Inside Figma, click the top-left hamburguer menu, then Help and Account and go to Account Settings. Look for Personal Access Tokens. Click here if you've never done it before.

2

Copy and paste the URL from a Figma file

Open a Figma file and just copy the full URL from the browser navigation bar. Prototype links also work.

3

Select the page and frame you want to code

You can only transform 1 frame at once, but breakpoints are coming soon.

4

Generate and tweak the human-readable code

The output is made so you can quickly adapt them into components for Vue, React or Angular.

COMING SOON

Vue, React and Angular components

The upcoming release will break a design down into components for your chosen framework automatically.
We're also adding breakpoints support through media queries.

React Vue Angular
Responsive Magic Logo