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

# Import from Figma

> Pick frames or component sets from a Figma file and turn them into a working React project.

Import from Figma turns your Figma frames into React and Tailwind code. Paste a file link, pick up to 10 frames or component sets, and the agent builds them in a new or existing project.

Every plan has it. The import starts a generation, so it uses credits like any prompt.

![The import menu under the generation input on the projects page, with Import from GitHub, Upload a ZIP and Import from Figma](https://mintcdn.com/polymet/TfIzLh80_L4bW9xQ/images/docs/canvas/import-menu.png?fit=max\&auto=format\&n=TfIzLh80_L4bW9xQ\&q=85\&s=959da7df8f110780bf999ed3d4a3a45f)

## Connect Figma once

1. On the projects page, click the import icon in the generation input.
2. Choose **Import from Figma**.
3. The first time, a **Connect Polymet to Figma** dialog opens. Click **Connect**.
4. Sign in to Figma in the popup and approve access. The popup closes and the import dialog opens.

Polymet only reads your Figma files. Nothing in Figma is changed.

If the popup closed before you finished, the dialog says "Figma isn't connected yet. Closed the popup? Connect again."

## Import frames

1. In Figma, copy the file link with Cmd+L (Ctrl+L on Windows), or **Share** then **Copy link**.
2. Paste it into the link field and press Enter. The link looks like `figma.com/design/...`.
3. Pick a page under **Pages**, or open **Published components** under **Library** for the file's component sets.
4. Click the frames you want, up to 10. Your picks show as small thumbnails you can remove, under the page list.
5. Choose where they go:
   * **Import to new project** creates a project from them.
   * **Add to existing** lets you pick one of your organization's projects or design systems.
6. Add a prompt if you like, for example "Make the dashboard responsive and use real chart components". Or pick one of the suggested prompts.
7. Click **Import**.

The project's canvas opens and the agent starts building. You see the frame thumbnails in the chat.

One import holds frames or component sets, not both. Only the picks on the grid you are looking at are imported.

## Import a design system from Figma

On the projects page, switch to design systems, click **New Design System** and choose **Import design system from Figma**. The same dialog opens, and **Import to new design system** creates a design system project instead.

## The Figma plugin

You can also send frames from inside Figma with the Polymet plugin.

1. Go to **Settings** > **Figma Plugin**.
2. Click **Open in Figma** to install **Polymet for Figma** from the Figma Community.
3. Click **Generate key** and copy the key. It is shown only once, and it is tied to your account, so do not share it.
4. Paste the key into the plugin to sign in.
5. Select frames in Figma and send them from the plugin. Polymet opens with them under **Selected in Figma**.
6. Choose a new or existing project and click **Import**.

## Limits and access

* Up to 10 frames, or up to 10 component sets, per import from the dialog.
* **Published components** only lists component sets you have published in Figma. If there are none, it says "This file has no published component sets".
* To remove Polymet's access, open the menu with your Figma name in the dialog and click **Disconnect**.

## Related

* [Export to Figma](https://docs.polymet.ai/publish/export-figma.md) — send a Polymet design back to Figma
* [Design systems](https://docs.polymet.ai/design-systems/overview.md) — what a design system project is
* [Prompt the agent](https://docs.polymet.ai/canvas/prompt.md) — keep refining after the import
* [Import from GitHub or a ZIP](https://docs.polymet.ai/canvas/import-code.md) — start from existing code instead


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