djalmajrfigma-capture-extension

Public
Watch0Fork0Star1
main
HistoryCode
README

Figma Capture

Chrome extension that serializes a web page's DOM so you can paste it directly into Figma as editable layers.

How it works

  1. Add a Figma file key — open the popup, enter a label and the file key from your Figma file URL
  2. Click the icon — the extension injects Figma's HTML-to-Design capture script, sets the #figmacapture hash, and reloads the page
  3. Paste in Figma — open your Figma file and paste (Ctrl/Cmd+V) to get the page as editable layers

The capture script serializes the DOM into a format Figma understands and copies it to your clipboard. The extension icon shows the Figma logo in color when a capture hash is active, and gray when idle.

Features

  • One-click DOM-to-clipboard capture
  • Multiple Figma file keys with labels
  • Switch active key from settings
  • Visual icon state (color = hash active, gray = idle)
  • Clean hash removal preserving other URL fragments
  • No data collection — everything stays in chrome.storage.local

Getting the file key

From your Figma file URL:

https://www.figma.com/design/aBcDeFgHiJkLmNoPqRsT/My-File
                               ^^^^^^^^^^^^^^^^^^^^^^
                               this is the file key

Install from source

  1. Clone this repo
  2. Run bun build.js
  3. Open chrome://extensions
  4. Enable Developer mode
  5. Click Load unpacked and select the dist/ folder

Privacy

See PRIVACY.md. No data is collected or transmitted.

License

MIT