​
Steps

You can export your Magic Patterns design to Figma within seconds.

1

Generate a design and click on export in the top right corner. Then 'Export to Figma'.

2

Copy the 'layerId'.

3

Within Figma, go to the actions button at the bottom, then 'Plugins & widgets' > then search for 'Magic Patterns' and run the Plugin.

If you prefer, you can also install the plugin here.

4

Copy paste in the 'layerId' and click 'import.' In the center of the file, you should see your design within Figma.

Tip: You can also use the hotkey “Option + F” to export to Figma.

​
Export a Design for Mobile

Magic Patterns designs are generally responsive by default. To export the mobile view to Figma, first click on the mobile icon in top bar. Then, export to Figma as normal by going to the menu bar and clicking “Export to Figma”.

Our Export to Figma feature takes a “snapshot” of the code at that time and converts it to Figma’s data model.

​
Exporting Multiple Designs into Figma

Behind the scenes, Magic Patterns is taking a “snapshot” of what you see on the page at a time. So if you want multiple pages, you will need to click the Export to Figma button (or use option + f hotkey) for each view you want.

Also, you will lose the interactivity of the design because Figma is a vector-based design tool, and Magic Patterns is a code-based design tool.

You can export multiple designs at once by bringing them into the canvas. Example video.