HTML to Figma - by Builder.io
Item logo image for HTML to Figma - by Builder.io

HTML to Figma - by Builder.io

builder.io
Featured
4.4(

45 ratings

)
ExtensionWorkflow & Planning100,000 users
Item media 1 screenshot

Overview

Import a web page to Figma layers

Use this extension to capture your current page and import it as editable Figma layers! What it's useful for - Easily import real live site styles for a starting point for designs and prototypes - Quickly turn real site components into design components - Easy import components from storybook, etc - Import a great live web design as a starting point for inspiration for your mockups View and contribute to the source code here: https://github.com/builderio/html-to-figma/issues

4.4 out of 545 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Liz LucasFeb 12, 2024

This is super useful! You do have to use their figma plugin, which is not really noted here. If you go to the github for it (https://github.com/builderio/html-to-figma) and scroll down, it will show you which plugins to install to Figma (I used this one that was linked there - https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more) in order to upload the JSON file. Saved me a lot of time since I'm just now learning figma!

5 out of 5 people found this helpful
Review's profile picture

Bongani MadunaDec 20, 2023

How does it work?

3 out of 5 people found this helpful
Review's profile picture

Seth PrattDec 13, 2023

This is literally the best thing since sliced bread.

1 person found this review to be helpful

Details

  • Version
    0.0.7
  • Updated
    August 31, 2022
  • Size
    343KiB
  • Languages
    English (United States)
  • Developer
    Builder.io, Inc.
    95 3rd Street, 2nd Floor San Francisco, CA 94103 US
    Website
    Email
    steve@builder.io
  • Trader
    This developer has identified itself as a trader per the definition from the European Union.

Privacy

The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Web to Figma

5.0(4)

Web to Figma extension to capture pages and components and import them into Figma as editable designs. No more screenshots.

Muzli - Design inspiration hub

4.5(665)

Your daily dose of design with industry news, tools, and inspiration - all in one place.

Builder.io

5.0(4)

Builder.io chrome extension

UX Principles

4.9(9)

A UX principle explained every time you open a new tab.

Element to Figma

5.0(1)

Copy page elements to figma

Page to wireframe

5.0(4)

Click an icon and turn the page you're on into a wireframe.

Figma

4.7(27)

Figma

html.to.design

4.5(47)

Convert any website into fully editable Figma designs. Requires the associated Figma plugin!

Heurio - UX Check & Visual Feedback Tool

4.7(78)

Perfect for UX check, design & development review, heuristic evaluation, user testing and more.

CSS Peeper

4.6(343)

Extract CSS and build beautiful styleguides.

Jinno: code any React component with AI

4.6(30)

Develop html or react components with AI and chat GPT4. We can modify the React, HTML and CSS code for you.

Site Palette

3.7(223)

Site Palette generates a color palette from any website, allowing designers to use it as a reference in their work.

Web to Figma

5.0(4)

Web to Figma extension to capture pages and components and import them into Figma as editable designs. No more screenshots.

Muzli - Design inspiration hub

4.5(665)

Your daily dose of design with industry news, tools, and inspiration - all in one place.

Builder.io

5.0(4)

Builder.io chrome extension

UX Principles

4.9(9)

A UX principle explained every time you open a new tab.

Element to Figma

5.0(1)

Copy page elements to figma

Page to wireframe

5.0(4)

Click an icon and turn the page you're on into a wireframe.

Figma

4.7(27)

Figma

html.to.design

4.5(47)

Convert any website into fully editable Figma designs. Requires the associated Figma plugin!

Google apps