Skip to main content

​
How to Import

Our Import from 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.
When you connect your Figma account, we automatically use the Figma MCP Server to provide more precise imports by extracting detailed design information from your files. MCP (Model Context Protocol) allows AI tools to communicate through a common interface. With MCP, we can access richer design data from Figma, resulting in better import quality. Important: The Figma MCP Server is only available for Dev and Full Figma accounts. Free and Collab accounts will still work but may have less precise imports.
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’. CMD + L allows you highlight the link to the selection directly.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.