> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/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:

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/LA8PNAckYh0" title="Import from Figma" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

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

<img height="200" src="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.
</Note>

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

<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.
</Note>

<Steps>
  <Step title="Create a new design from the dashboard and click on the 'Import from Figma' button.">
    <img height="200" src="https://cdn.magicpatterns.com/static/docs/import-from-figma-design.png" />

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

    <img height="200" src="https://cdn.magicpatterns.com/static/docs/component-import-from-figma.png" />
  </Step>

  <Step title="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.

    <img height="200" src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/importing/images/figma-frame-url.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=1c860fc6c9d764951021fd9ba17f4b8e" data-path="documentation/importing/images/figma-frame-url.png" />

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

    <img height="200" src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/importing/images/figma-frame-url-shortcut.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=a62e3d7a8b71e30bb4780ea7bca501da" data-path="documentation/importing/images/figma-frame-url-shortcut.png" />
  </Step>

  <Step title="Paste the link into the Magic Patterns import dialog and click 'Next'">
    <img height="200" src="https://mintcdn.com/magicpatterns/oOL4DTirAmu4iVXf/documentation/importing/images/import-from-figma-url.png?fit=max&auto=format&n=oOL4DTirAmu4iVXf&q=85&s=6f43e466c06e345e2e14a02cfab42150" data-path="documentation/importing/images/import-from-figma-url.png" />
  </Step>

  <Step title="Ensure the preview is correct and you have chosen your desired preset (and library if importing a component). Click 'Import' to start the process." />
</Steps>

## Video Guide

This topic is covered in our video lesson [Figma Imports](/documentation/guide/figma-imports).

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/v1lg-WHYwAc?si=NEFmEeCEyo5rhUEL" title="Figma Imports" alt="Figma Imports" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />