---
title: From Figma
description: Import a Figma design system from a .fig file, review every token, component, logo and icon, and add only what you keep.
---

> Source: https://www.heyarchetype.com/docs/import/figma

If your design system lives in Figma, you can bring it into Archetype from a `.fig` file: its colors and variables, type, spacing, radius, shadows, components, logos and icons. You review every item before it is added, and the import only adds. Nothing your brand already has is changed or removed.

## Save the file from Figma

In Figma, open the file that holds your design system and choose **File → Save local copy**. That saves a `.fig` file to your computer.

The file is read in your browser and is never uploaded. Only the items you approve are sent to Archetype. Because of that, importing a `.fig` file works on a computer, not on a phone.

## Import a design system

:::steps
### Open the importer
Go to **Settings → Import** and press **Import** on the **Figma file** row. The page is titled **Import design system**. You can also reach it from **Components → Add**, on the **Figma** tab, with **Open Figma importer**.

### Drop the file
Drop the `.fig` file on the box that says **Drop a .fig file here or browse**, or click it to pick the file.

### Choose pages
Archetype shows the file's name and how many pages, frames and components it holds. Pick **Import all pages**, or **Choose what to import** and tick the pages you want. Then press **Extract design system**.

### Review what will be added
Everything found is listed by kind, each with a checkbox. Uncheck anything you don't want. Components are drawn with the real renderer against your brand's tokens, so what you see is what gets added.

### Add it
The button names what it will add, for example "Add 24 tokens, 31 variants, 2 logos". Press it. When it finishes, the page shows **Your design system is in**, with a card for each kind that landed: **Components**, **Foundations**, **Logos**, **Icons** and **Photos**.
:::

## What comes over

| Kind | What Archetype reads |
| --- | --- |
| Colors | Color scales and color tokens from the file's variables and styles. Variables with several modes, such as light and dark, come in as color tokens with a value per mode |
| Gradients | Gradient fills, as gradient tokens |
| Typography | Type families with their text styles, from the file's text styles and the text in its components |
| Spacing and radius | Spacing and radius values from the file's variables and styles |
| Shadows | Shadows from the file's variables and effect styles |
| Components | Component sets, with each variant and the states it has (hover, pressed, disabled and so on). Each is labeled with the name it had in Figma |
| Logos | Logos placed in the file, as SVG where Figma draws them as vectors and as the embedded image otherwise |
| Icons | An icon set Archetype recognizes from the names, or the file's own icon artwork as a custom set |
| Photos | Photographs that the imported components show, added to your asset library |

Components keep their links to your colors. A fill bound to a Figma variable becomes a reference to the matching Archetype token, so changing the token later changes the component.

A component that is only used inside other components (a checkbox inside a table row, say) comes in like the rest but stays out of the library index. You can change that on any of them afterwards.

## How it merges with what you have

The import is strictly additive:

- A token with the same name and the same value as one you have is reused, not duplicated. These are folded into a collapsed list marked **Already in your brand**.
- A token with the same name but a different value comes in under a new name, such as "Primary 2".
- Existing components and variants are never touched.

This makes it safe to import into a brand that already has content: nothing that is there gets changed.

## Limits

One import can bring in up to 120 components, up to 40 variants per component, and up to 100 tokens of each kind. If a file is bigger, import it in parts by choosing pages.

## Templates from Figma frames

Finished layouts, such as social posts, slides or app screens, come in as templates rather than as part of the design system:

1. Go to **Templates**, press **Add template**, and pick the **Import** tab.
2. Choose your `.fig` file.
3. Tick the top-level frames you want, name the template and choose its type.

Each frame becomes a frame of the template, drawn as it is in Figma with its photos and icons. See [Templates](/docs/brand/templates) for how agents use them.

## A live link to Figma

Archetype reads Figma through `.fig` files. A live connection to a Figma library isn't offered for new brands at the moment, so when your library changes, save a new local copy and import it again. Untick what you already have in the review, and tokens that match yours are reused rather than added twice.

## Next steps

:::cards
- [Components](/docs/brand/components): See how imported components are stored and served to agents.
- [Foundations](/docs/brand/foundations): Look over the colors, type and scales the import added.
- [From code](/docs/import/code): Bring components in from your repository instead.
:::