# Figma import

> Paste a Figma link in chat and Genesis rebuilds that frame as real, faithful site UI — exact layout, colors, fonts, and your real images.

Source: https://knowledge.estage.com/capabilities/figma-import/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

---
Paste a **Figma link** in chat and Genesis ports the design into your site — a faithful
**transplant**, not a "looks similar." It reads the actual frame, reproduces the layout,
colors, typography, and **your real images**, and rebuilds it as live React/Tailwind UI you
can then edit like anything else.

## Connect Figma first

Faithful import needs read access to your Figma file, so connect your account once:

1. Go to **Settings → Integrations**.
2. Click **Connect Figma** and authorize (read-only — Genesis only requests `file content
   read`).

Your tokens are stored **server-side** (the browser never sees them) and refresh
automatically. Disconnect any time from the same place, or from Figma's *Settings → Connected
apps*.

:::note
**Not connected yet?** You can still paste a Figma link — Genesis will use it as visual
*inspiration* (palette + feel) and nudge you to connect for a faithful import. See
[Design inspiration](/capabilities/design-inspiration/).
:::

## How to import

Just paste the link — no slash command:

```text
https://www.figma.com/design/AbC123/My-Project?node-id=42-17
https://figma.com/file/XyZ789/Landing
```

- A link **with a frame selected** (`?node-id=…` — copy it from Figma's *Copy link to
  selection*) imports that exact frame.
- A link **without one** imports the first top-level frame in the file.

Make sure the link points at a frame **you can open** in your own Figma account.

## What gets ported

- **Layout & structure** — the frame's real geometry and arrangement.
- **Colors** — exact hex values pulled from the design.
- **Typography** — font family, size, and weight per text layer.
- **Your real images** — bitmaps in the design are downloaded and re-hosted on your site (not
  AI-substituted), so the result uses the actual artwork.
- **Text** — copied verbatim from the frame.

Genesis hands the builder a high-res render of your frame *plus* the exact tokens, so it
**sees** the design and reproduces it 1:1.

## Where it lands

On a project with content, Genesis asks where to put it (chips):

- **Replace the current page**
- **Add as a new page**
- **Rebuild the whole project from the design**

Say it in the same message ("add as a new page") and it skips the question. A brand-new empty
project rebuilds from the design directly.

## Adding instructions (e.g. make it responsive)

Any text you put next to the link is passed to the builder as **notes applied on top of the
transplant** — they layer over the faithful port without fighting it. So this works:

```text
https://figma.com/design/… make it responsive for mobile
```

The site is React + Tailwind (responsive-first), so it'll add breakpoints, stack columns, and
scale type down for small screens.

**Honest nuance:** a Figma frame has **one width** (usually a 1440px desktop). If that's all
you give it, the mobile layout is the AI's *interpretation*, not something from your design —
reasonable, but inferred.

For a cleaner result:

- **Two steps** — import first (exact desktop), then a separate message: *"adapt this for
  mobile."* On the follow-up the builder isn't bound by the strict transplant rules, so it has
  more freedom to do proper responsive work. More reliable than mixing "port 1:1" and "redo
  for mobile" in one prompt.
- **Best of all** — if your Figma has a **mobile frame**, import it too (paste a link to that
  frame). Then the mobile layout comes from *your* design, not a guess.

## What you'll see

A short progress run — *Fetching Figma design* → the frame name with how many images, colors,
and fonts it found → then the page builds section by section. From there it's a normal Genesis
page: edit visually, refine in chat, publish.

## Limits

- **One frame per link** — import frames one at a time.
- **Static design only** — Figma prototyping, interactions, and animations aren't ported
  (Genesis builds the visuals; wire up behavior in chat afterwards).
- **Auto-layout** is reproduced visually, not as a live Figma constraint system.
- **Fonts** match by name/size/weight; make sure the font is available (or ask Genesis to use
  a close one).
- **Private files** need *your* connected account — Genesis can only read files you can open.
- Very large frames are capped (image count and node budget) to keep imports fast.

:::tip
Designers: hand off a finished frame, not a rough sketch. Genesis copies what's there exactly
— the cleaner the Figma, the cleaner the site.
:::