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

# Figma

> Import frames and components from Figma into your Design System

<Note>
  Looking to import a full Figma library? [Book a
  call](https://cal.com/mp-daniel/30min) and our team will help. We are working
  towards making this self-serve!
</Note>

You can bring your Figma work into Magic Patterns to seed a Design System: import full frames as designs, or import individual Figma components as reusable [components](/documentation/design-systems/editing/components).

## Connect your Figma account

Before importing, connect your Figma account to Magic Patterns. This enables both copy-paste and URL-based imports, and lets us use the **Figma MCP Server** to extract richer design data for higher-quality imports.

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

## Import a component into your Design System

<Steps>
  <Step title="Open your Design System and create a component">
    Go into your [Design System](/documentation/design-systems/overview), open the **Components** page, and click **Create Component**. Choose 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 or component in Figma, right click and choose **Copy as → Copy link to selection** (or press `CMD + L`).
  </Step>

  <Step title="Paste the link and import">
    Paste the link into the import dialog, confirm the preview looks right, choose your library, and click **Import**.
  </Step>
</Steps>

<Note>
  You can import **one frame at a time**. Import from Figma won't always produce
  a pixel-perfect frame, because every Magic Patterns design is code-first and
  interactive, whereas Figma frames are not.
</Note>

## Learn more

<Card title="Import from Figma" icon="figma" href="/documentation/importing/import-from-figma">
  The full guide to importing designs and components from Figma, including
  copy-paste and URL imports.
</Card>