---
title: "Import screens directly from Figma"
slug: "/help/demos/capture/figma-import"
topic: "demos"
last_updated: "2026-08-06T10:59:04.646Z"
---

## **Overview**

Import screens directly from a Figma file into a Walnut demo. Each frame lands as a **fully editable Walnut screen** — ready for guides, sticky notes, annotations, and personalization — with no manual capture and no need to publish a Figma Site first.

Two things to know up front:

- **The connection is workspace-wide.** One member connects Figma via OAuth and everyone in the workspace imports through that account. Any file the connector can open, the workspace can import; anything they can't, no one can.
- **You can import a single frame or bulk-import many at once.** Frames keep the geometry Figma laid out for them.

> If you want the older workflow that publishes designs as a Figma Site and captures with the Walnut Extension, see [Capture Figma designs into a demo](/help/demos/capture/capture-figma). It's still supported.

---

## **1. Connect Figma (Workspace Admin, One Time)**

An admin does this once for the whole workspace.

1. Go to **Company Settings → Integrations**.
2. Find the **Figma** card and click **Connect**.
3. In the modal, open the **Authenticate** tab.
4. Click **Connect** to launch Figma's OAuth consent screen and approve Walnut's access.
5. When it returns, the modal shows a green **Figma connected** state, plus a note identifying **who** connected it.

To sever the connection, open the same modal and click **Disconnect** (header or tab). The workspace loses import access immediately.

---

## **2. Import Frames Into a Demo**

Import happens inside a demo's editor, via **AI Mode**.

1. Open a demo (or create a new one) and open **AI Mode**.
2. Paste the Figma **frame URL** — either a single frame or a URL that covers several frames.
3. Walnut resolves the frames and shows a reviewable list.
4. Pick a **target section** for the imported screens — either an existing section in the demo, or **create a new section** in place.
5. Confirm the import. Walnut converts each frame to a Walnut screen, one at a time, with per-frame progress you can watch.
6. When the first screen is ready, Walnut **opens it in the editor** so you can start working immediately while the rest of the batch finishes in the background.

Frames arrive with the **geometry Figma put them at** — Walnut doesn't re-flow the layout, so what you saw in Figma is what you get on the canvas.

---

## **3. Edit Imported Screens Like Any Other Walnut Screen**

Once imported, a Figma-sourced screen behaves exactly like a captured screen:

- Add **guides** and **annotations** to walk viewers through it.
- Attach **sticky notes** for internal reviewers.
- Personalize with **variables** (text, image, dates).
- Convert images to **interactive elements** where you want click/hover behavior.
- Style, translate, and version-control it alongside product-captured screens.

---

## **When to Use Figma Import vs. Capture**

| Use Figma import when… | Use a live capture when… |
| --- | --- |
| Your designs live in Figma and haven't shipped yet | You have a working product surface at a URL |
| You want a one-click bulk import of many frames | You need real HTML, live data, or session state |
| You're prototyping future-state flows for demos | You want CSS-accurate fidelity of the shipped app |

You can mix and match freely inside a single demo — some sections from Figma, some from live capture.

---

## **FAQs**

### **Who can connect Figma?**
Anyone with permission to edit workspace integrations. Because the connection is workspace-wide, the connector's Figma access defines what anyone in the workspace can import.

### **Can I import from a file the connector doesn't have access to?**
No. The connector's Figma permissions are the ceiling. If a file needs broader access, either the connector gets invited to it, or an admin with the required access reconnects.

### **Does Figma import cost AI credits?**
Import runs through AI Mode. Track your usage in **AI Control Center → Usage**.

### **What if I want to re-import a frame after editing it in Figma?**
Paste the same frame URL again. You can import into a new section to compare, or into the same section to layer the update alongside the previous screen.

### **Can I still use the Figma Sites + Extension workflow?**
Yes — see [Capture Figma designs into a demo](/help/demos/capture/capture-figma). Native import is faster for pure Figma work; the Sites workflow lets you capture prototype interactions and navigation as HTML.