Skip to main content

​
How to Import

Our Import to Figma feature lets you bring designs from your project into Magic Patterns to make them interactive.
You can import one frame at a time. If you need to import multiple frames, repeat the import process for each frame. Import from Figma won’t always generate a pixel-perfect frame. That’s because every Magic Patterns design is code-first and interactive, whereas Figma frames are not.
1

Create a new design from the dashboard and click on the 'Import from Figma' button.

You can also import Figma components as Magic Patterns components by choosing the “Component Tab”.
2

Connect your Figma account and allow access to your files.

3

Within Figma, copy the link to a desired section or frame in your Figma file.

Select a frame/component in Figma, right click and select ‘Copy as’ and then ‘Copy link to selection’.Select a frame/component in Figma and use “CMD + L” to get the URL.
4

Paste the link into the Magic Patterns import dialog and click 'Next'

5

Ensure the preview is correct and you have chosen your desired preset (and library if importing a component). Click 'Import' to start the process.

To provide more precise imports, we recommend connecting to the Figma Desktop App.
Important: The Figma MCP Server is not enabled on free Figma accounts. You need a paid Figma plan to use this feature.
We use the Figma MCP Server to talk to the Figma Desktop App. MCP stands for Model Context Protocol. It allows AI tools to talk to each other through a common interface. In this case, we use it to talk to the Figma Desktop App. To enable the Figma MCP Server in the Figma desktop app, you need to follow the steps below:
1

Open the Figma Desktop App

Ordownload Figma Desktop Appif you don’t have it installed.
2

Open any design file

3

Go to Figma icon (top left) → Preferences → Enable local MCP server

4

Download our Chrome Extension: we use it to talk to the Figma MCP Server.

Download Chrome Extension
5

Go back to the our app and click Import from Figma

6

That's it! You should now see `MCP Server Connected` above the Figma URL input.

​
Troubleshooting Figma MCP Connection

If you’re having trouble connecting to the Figma MCP Server you can try the following:
1

Open or restart Figma Desktop

2

Disable and then re-enable the MCP Server in Figma Desktop

⌘I