Let's vibe Tools

Figma Capture Button · v0.2

Copy your local app into Figma.

Add a small button to your local app. Capture the whole page or pick one component, then paste it into Figma as editable layers. It only appears while you are building, so it stays out of your deployed app.

Prompt for your coding agent

Install figma-capture-button in this app. Run npm install figma-capture-button. Then add this import to the app entry point: import 'figma-capture-button/auto'. The button should appear on localhost and let me capture the full page or select one element to paste into Figma.

Try it here: open the button, choose a capture mode, then paste in a Figma file

localhost:3000 — your work in progress
01

How it works

  1. Add it to your app

    Copy the prompt above into Cursor, Claude Code, or your coding agent. It installs the package and adds a single import. It works with Vite, Next.js, other bundlers, or plain HTML via CDN.

  2. Capture a page or component

    On localhost, a pink Figma button appears. Open it to capture the entire screen, or choose select element and click the exact piece you want.

  3. Paste editable layers

    Paste in any Figma file. Your capture arrives as editable layers and text, not a flat screenshot. The capture button hides itself so it will not show up in your frame.

02

Workflow walkthrough

Watch the full loop: install the package, open the local capture button, choose the right capture mode, then paste the result into Figma as editable layers.

  • Capture from localhost

    The button appears only while you are building, so the capture flow stays close to your real app state.

  • Choose the right scope

    Grab a whole page for review, or select one component when you want to keep refining a specific piece.

  • Keep working in Figma

    Paste turns the app state into editable Figma layers, not a flat screenshot.

03

Built for design review

  • Only runs locally

    The package checks for localhost before it loads Figma's capture script. On deployed builds there is no button, no network request, and nothing to remove later.

  • Capture the right scope

    Use entire screen for a page, flow, or review snapshot. Use select element for a card, modal, navigation state, or any component you want to refine in Figma.

  • Stays out of the way

    Drag the button anywhere on the page. It remembers its position across reloads, stays inside the viewport, and hides itself while capturing.

  • Simple by default

    Most projects only need the one-line auto import. Developers can still customize the selector, hotkey, position, container, and cleanup behavior with initFigmaCapture().

04

Developer setup

Fast path: one line in your app entry
import 'figma-capture-button/auto'
Manual setup: options and cleanup
import { initFigmaCapture } from 'figma-capture-button'

const cleanup = initFigmaCapture({
  selector: '*',
  hotkey: true,
})
Options for initFigmaCapture
OptionDefaultWhat it does
selector '*' CSS selector Figma captures. Narrow it to capture one area instead of the whole page.
hotkey true Enables the Ctrl+C shortcut for full-page capture. Turn it off if your app already uses that shortcut.
zIndex 9999 Controls how high the button sits above your app UI.
storageKey 'figma-capture-button-position' The localStorage key that remembers where the button was placed.
force false Lets the button run outside localhost. Useful for docs or demos; leave it false for product apps. There is also captureNow() for wiring your own trigger.
suppressFigmaUi true Hides Figma's follow-up toolbar so the capture button's own menu is the only capture UI.
container undefined Mounts the button inside a specific element instead of floating over the whole page. The demo window above uses this.