Capture Figma Designs Into a Fully Editable Walnut Demo

Overview

This guide walks you through how to capture Figma designs and turn them into a fully editable Walnut demo.

The workflow is simple: publish your designs as a Figma Site, capture the live HTML experience using the Walnut Extension, then edit and personalize everything inside the Walnut Editor.

This makes it easy to turn prototypes or future-state designs into interactive, demo-ready experiences — and combine them seamlessly with live product captures.

In This Guide:

• See the Workflow In Action ⚡️
• Workflow At-A-Glance
• When to Use This Workflow
• Why Figma Sites Are Required
• Quick Start Guide

See the Workflow In Action ⚡️

Prefer to see the workflow in action? 

Explore the interactive demo below to follow the full Figma → Site → Capture process step by step.

Open demo in a new tab

Workflow At-A-Glance

Follow these steps to turn a Figma prototype into a capture-ready demo experience.

When to Use This Workflow

This approach is ideal when you want to:

• Demo future-state or in-development product experiences
• Show roadmap features that don’t exist in a live environment yet
• Blend prototype screens with real product flows
• Create interactive, editable demos instead of using static image exports
• Maintain full editability after capture

Why Figma Sites Are Required

Standard Figma prototypes run inside a proprietary viewer and don’t generate traditional HTML pages. Because of this, they can’t be captured like normal websites.

Capturing directly from the prototype viewer typically results in static or incomplete captures, since the viewer does not expose the full page structure, navigation, or interactive behavior as real HTML.

Figma Sites solve this by publishing your designs as a real, browser-based experience that behaves like a website. Once published, Walnut can capture the experience just like any other web app.

Quick Start Guide

1. Prepare your Figma design

Start with a Figma file where screens are already connected using prototype interactions (Navigate To actions).

2. Copy your prototype frames

Select the frames you want to include, right-click, and choose Copy, or use the keyboard shortcut.

3. Create a Figma Site

• From the top menu, select Site
• A new Site workspace will open with empty placeholders

A Figma Site lets you arrange multiple frames into a structured, website-like experience that can be published and captured.

4. Paste and organize your screens

• Click a placeholder
• Paste your first design
• Add additional screens as needed to build your flow

Your designs automatically adapt to the frame, and a mobile layout is generated as well.

5. Publish the Site

• Click Publish
• Open the generated Site URL
• Confirm navigation and visuals display correctly

6. Capture with the Walnut Extension

• Open the published Site in Chrome
• Launch the Walnut Extension
• Capture the experience as you would any website

After capture, the Site opens in the Walnut Editor with screens and links automatically created.

You can now edit and personalize your screens — update text, replace images, apply variables, adjust layouts, and tailor the experience your way.

Related Resources

Once your Figma designs are captured, you can turn them into different types of interactive product experiences inside Walnut.