element-to-figma icon indicating copy to clipboard operation
element-to-figma copied to clipboard

extension to download page elements and import to figma

Element to Figma

Element to Figma - Browser extension (beta)

Extension to select the page UI elements and download them to later import it to Figma, based on the great job from https://github.com/BuilderIO/html-figma this browser extension allow you to download the selected pieces on the page instead of all the content so you can later import those to Figma.

Element to Figma video

Quick start

Usage

  • Go to the page you want to capture elements
  • Click the extension icon and Enable Selector
  • Click on the elements you wish to copy to figma

Manual install

  • Download zip in dist-zip and manually load on your chrome extension tab or Firefox addons. (developer mode need to be enabled)

Run locally

yarn install

Development

yarn run watch:dev

Generate zip

yarn build-zip

HTML <-> Figma

In Figma open HTML <-> Figma plugin and click upload here then select the json file you want to import.

html to figma