How to Export Magic Patterns Designs to Figma

Steps

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

1

Generate a design and click on the three dots in the menu bar. 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.

Export a Design that Requires Interaction

Similarly to exporting a design for mobile, if you’d like to export a design to Figma during an interaction, you export it to Figma at that given moment.

Magic Patterns designs are based in code, which makes them interactive, unlike Figma.