Skip to main content
For the best results, we recommend using a Dev or Full Figma accounts. See Figma Remote MCP Server for more information.

​
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.

Important: The Figma MCP Server is only available for Dev and Full Seats on Figma. Free and Collab Seats do not have access to the MCP Server.

See Figma Pricing for more information.

We automatically connect to the Figma Remote MCP Server when you import a design or component. 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 get extra information about your figma design for more precise imports. There are no additional steps required to connect to the Figma Remote MCP Server.

​
Figma Local MCP Server (Legacy - Deprecated)

The Figma Local MCP Server is deprecated and will may be removed in the future. We recommend using the Figma Remote MCP Server instead.

Important: The Figma MCP Server is only available for Dev and Full Seats on Figma. Free and Collab Seats do not have access to the MCP Server.

See Figma Pricing for more information.

To provide more precise imports, we recommend connecting to the Figma Local MCP Server.We use the Figma Local 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 Local 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