Skip to main content

Import screens directly from Figma

Updated Aug 6, 2026

Import screens directly from Figma

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. 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 yetYou have a working product surface at a URL
You want a one-click bulk import of many framesYou need real HTML, live data, or session state
You're prototyping future-state flows for demosYou 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. Native import is faster for pure Figma work; the Sites workflow lets you capture prototype interactions and navigation as HTML.

Was this helpful?