Skip to main content

Import screens directly from Figma

Updated Sep 30, 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.

4. Update Screens from Figma​

When a design changes in Figma, refresh the imported screen without losing the edits, guides, and annotations you added on top of it. Walnut re-reads the frame and stages it as a pending update on the screen — the same update-screen review you get after a recapture, where you decide edit-by-edit what still matches.

Update a single screen​

  1. In the editor sidebar, open the three-dot menu on a Figma-imported screen and pick Update screen.
  2. The Update from Figma modal opens. By default it re-reads the same frame the screen was imported from.
  3. (Optional) Paste a link into Optional: link to a different Figma frame if the designer duplicated the frame as a new version beside the old one. Use Figma's Copy link to selection on the frame — a link that points at a whole file or a prototype start isn't a frame link.
  4. Click Update. The screen enters the update-screen review, where each edit is matched against the new document; unmatched edits are surfaced so you can reassign or drop them. Commit to apply, or revert to keep the screen as it was.

When you update from a different frame, Walnut pairs its layers with the tracked frame's by name and type, so edits anchored to a layer follow it across the rename. From then on, the screen follows the new frame — the next update re-reads it directly, no link needed.

Update several screens at once​

  1. In the flows sidebar, select the screens you want to refresh.
  2. In the selection toolbar, click Update N screens from Figma (the refresh icon). Only Figma-imported screens in the selection are included; anything else in the selection is left alone.
  3. Confirm Update. Each screen refreshes from its own frame — a bulk update can't take a link, since one link can only name one frame.
  4. Screens that update land in the update-screen review together. Any that failed are named in a notification with the reason.

What can and can't be updated​

  • Only screens whose origin is Figma import can be updated from Figma. A captured screen or a template screen is not eligible.
  • A screen made from a prototype state (an overlay or variant composed onto a base frame) can't be updated from Figma, since it isn't a single frame to re-read.
  • The linked frame must live in the same Figma file as the original import — node ids are only unique within a file.
  • A screen that already has an update waiting for review must be committed or reverted before it can be updated again.
  • Screens imported before update support was added may ask you to paste a link to the Figma frame the first time you update them.

Updating a Figma screen happens inside the editor. If you open a Figma screen from the storyline page's flows view and pick Update screen, Walnut points you back to the editor to run the update there.

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 refresh a screen after editing it in Figma?​

Use Update screen on the Figma-imported screen (or Update N screens from Figma on a multi-select) to re-read its frame in place and keep the edits you've layered on top — see Update Screens from Figma. If you'd rather bring the design in as a separate screen for a side-by-side comparison, paste the frame URL through AI Mode again and target a different section.

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?