Figma import

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:

Go to Settings → Integrations.
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.

How to import

Just paste the link — no slash command:

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:

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.