Builder.io

HTML to Figma — Import Webpages to Figma

Convert any Webpage into fully editable figma design. Requires the figma plugin with the same name. Import websites into Figma to iterate, redesign, benchmark and more, without building each element from scratch. 2000+ components Pixel-perfect capture Light and Dark themes multiple viewport sizes This Chrome extension is a companion to the figma plugin with the same name, and you’ll need to install the Figma plugin first. Install the Webpages to Figma Chrome Extension from Chrome Web Store Go to any website in your Chrome Browser Invoke the extension, and then choose if you want to capture the entire page or a single component Once the extension captures the page, save and download the page/component data Go to Figma and run the plugin Upload the data you just downloaded The plugin automatically converts the data into a figma design.

html.tomake.design (llama)

Convert any website into fully editable Figma designs. Requires the companion Figma plugin! Turn Any Website into Editable Figma Designs with html.tomake.design (llama) Use html.tomake.design (llama) to instantly convert websites, even private pages behind logins, into fully editable Figma layers. Jumpstart your design process by importing existing web structures directly into Figma – no need to build from scratch! Important: This Chrome extension works with the html.tomake.design (llama) Figma plugin. You must install the Figma plugin first. 1. Install this Extension: Click 'Add to Chrome'. 2. Install the Figma Plugin: (Make sure this is done first!) 3. Navigate: Go to the website page you want to capture (and log in if necessary). 4. Capture HTML: Click the extension icon in your Chrome toolbar. It will extract the page's HTML and download a file. (A "debugging" message is normal). 5. Import to Figma: Open Figma, launch the html.tomake.design (llama) plugin, and drag the downloaded file onto the plugin window. 6. Done! The page will be imported as editable Figma layers. Good to Know: - Public Websites? You can import public URLs directly using just the Figma plugin – no extension needed. - Privacy: Your data stays local; nothing is stored or logged by us. - Note: This tool is constantly improving, so perfect pixel accuracy isn't guaranteed yet.

Magic Patterns — Import Website

Import any website into Magic Patterns and edit with AI. Import any website and then edit it with AI on Magic Patterns. Capture your existing styles in one-click. Use cases: - Bring existing designs into Magic Patterns so you can edit them with AI instead of starting from scratch - Use AI to restyle, restructure, or customize the imported design however you want - Export the design to Figma or copy the React code This Chrome Extension is created and supported by Magic Patterns.

Web to Figma

Web to Figma extension to capture pages and components and import them into Figma as editable designs. No more screenshots. Web to Figma lets you import full webpages using the plugin, or import specific components from a website, using our Chrome Extension. Convert any HTML to design file in Figma. Import components or webpages using the Chrome Extension: 1. Download the Web to Figma Chrome Extension 2. Go to any page in your Chrome Browser 3. Invoke the extension, and then choose if you want to capture the entire page or a single component 4. Once the extension captures the page, save the page/component to a Collection 5. Go to Figma and run the plugin 6. Go to the Collections tab of the plugin 7. Find your latest capture and click on Add to Figma Import webpages using the plugin: 1. Install the plugin 2. From within any file, run the plugin by going to Plugins menu and selecting Web to Figma 3. In the Import tab of the plugin, enter the URL of the webpage that you want to import. For example, https://github.com/home 4. Choose the relevant settings 5. Click on Import 1. Create a library of design inspirations using Collections 2. Create a moodboard 3. Collaborate with developers by importing their implementation and comparing against the reference design 4. Learn how some of the more complex websites have been structured 5. Quickly explore various design patterns when solving a new task