> ## Documentation Index
> Fetch the complete documentation index at: https://www.magicpatterns.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Import from Figma

> Import designs from Figma to Magic Patterns

Import your Figma designs into Magic Patterns to turn them into interactive, code-first prototypes. Watch the video below to see how it works:

[Import from Figma](https://www.youtube.com/embed/LA8PNAckYh0)

### Connect Your Figma Account

Before importing, you'll need to connect your Figma account to Magic Patterns. This connection enables both copy-paste imports and URL-based imports.

![](https://cdn.magicpatterns.com/uploads/h6yCNMciM47gbYzH6ZqKWy/Figma-Login.png)

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.

> [!NOTE]
>
> 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.

### Copy and Paste Import

The fastest way to import from Figma is to simply copy a frame or component in Figma and paste it directly into Magic Patterns. Once your Figma account is connected, Magic Patterns will automatically detect the pasted design and import it.

### Import via URL

You can also import by pasting a Figma URL. This method works well when you want to share a specific frame link or import from a file you're not actively working in.

### Seed a Design System from a .fig file

Importing a single frame is great for one design, but if you want to seed a whole [Design System](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md) from Figma — colors, typography, variables, and components at once — upload a `.fig` file instead. See [Import a .fig file](https://www.magicpatterns.com/docs/documentation/design-systems/importing/figma.md#import-a-fig-file).

> [!NOTE]
>
> 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.**

![](https://cdn.magicpatterns.com/static/docs/import-from-figma-design.png)

You can also import Figma components as Magic Patterns [components](https://www.magicpatterns.com/docs/documentation/design-systems/editing/components.md) by going into a [Design System](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md), clicking **Create Component**, and choosing the **Import from Figma** tab.

![](https://cdn.magicpatterns.com/static/docs/component-import-from-figma.png)

**2. Copy the link to a frame in Figma.**

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.

![](https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/importing/images/figma-frame-url.png?fit=max\&auto=format\&n=dyhr1UMzzXl3NtrZ\&q=85\&s=1c860fc6c9d764951021fd9ba17f4b8e)

Select a frame/component in Figma and use "CMD + L" to get the URL.

![](https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/importing/images/figma-frame-url-shortcut.png?fit=max\&auto=format\&n=dyhr1UMzzXl3NtrZ\&q=85\&s=a62e3d7a8b71e30bb4780ea7bca501da)

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

![](https://mintcdn.com/magicpatterns/oOL4DTirAmu4iVXf/documentation/importing/images/import-from-figma-url.png?fit=max\&auto=format\&n=oOL4DTirAmu4iVXf\&q=85\&s=6f43e466c06e345e2e14a02cfab42150)

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

## Video Guide

This topic is covered in our video lesson [Figma Imports](https://www.magicpatterns.com/docs/documentation/guide/figma-imports.md).

[Figma Imports](https://www.youtube.com/embed/v1lg-WHYwAc?si=NEFmEeCEyo5rhUEL)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.