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

1. 1

   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.

2. 2

   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.

3. 3

   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.

4. 4

   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.

5. 5

   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#

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