--- title: "Capture Figma designs into a demo" slug: "/help/demos/capture/capture-figma" last_updated: "2026-02-12T18:32:08Z" zendesk_id: 42079321416979 zendesk_url: "https://help.walnut.io/hc/en-us/articles/42079321416979-Capture-Figma-Designs-Into-a-Fully-Editable-Walnut-Demo" locale: "en-us" category: "Getting Started" section: "Capturing & Importing Content" product: "demos" topic: "capture" displayed_sidebar: "demosSidebar" sidebar_position: 2 tags: ["figma","extension","chrome extension","capture figma"] --- ## **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**](https://www.figma.com/sites/), capture the live HTML experience using the [**Walnut Extension**](/help/demos/getting-started/chrome-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. :::note Figma Sites converts Figma designs into real HTML pages — ready to capture with the Walnut Extension. ::: --- ## **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**](https://wlnt.io/s/mhBEvo) --- ## **Workflow At-A-Glance** Follow these steps to turn a Figma prototype into a capture-ready demo experience. :::note 1. Copy your prototype frames from Figma 2. Create a new **Figma Site** 3. Paste each screen into its own placeholder in Sites 4. Confirm navigation functions as expected 5. Click **Publish** and open the Site URL 6. Capture the Site using the **Walnut Extension** 7. Edit and personalize screens inside the Walnut Editor ::: --- ### **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. :::note [**Guide to Creating Interactive Product Experiences in Walnut**](https://help.walnut.io/hc/en-us/articles/XXXXXXXXXXXX)  Learn about the different experience types you can create — guided demos, sandbox environments, hybrid flows, playlists, and more. ::: ---