ijoegnplinjhfdnhgakjgfejieiclppi
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.
Figmorph
1.Full-page Capture: Automatically grabs the current page’s HTML/CSS, pixel-perfectly preserving layout, fonts, colors, and spacing. 2.Batch Import: Auto-detects multi-level linked pages and imports them in one click, while generating prototype navigation links. 3.Modal Capture: Supports clicking on page modals to record their interactions automatically and generate corresponding prototype interactions. 4.Auto-import Hover Interactions: Automatically identifies on-page hover interactions and generates matching prototype hover behaviors.
RocketPen Website to Figma
RocketPen Website to Figma Converter is a free Chrome extension that helps you capture any website, webpage, or selected HTML element and convert it into fully editable Figma designs. It also supports private pages, dashboards, and web apps that require login, so you can import real product screens into Figma for redesign, inspiration, UI reference, and rapid prototyping. Core Value: Turn existing websites into editable Figma files instead of rebuilding every layout, component, image, and text layer from scratch. Use it as a free website to Figma, HTML to Figma, webpage to Figma, and UI reference capture tool to speed up design workflows. Please note before operating: This Chrome extension is a free companion tool for the RocketPen Figma plugin and requires the Figma plugin to be installed first. RocketPen is an AI Figma plugin that helps users create, import, and edit UI designs faster. RocketPen is an AI-powered Figma plugin designed for rapid creation of high-quality UI designs. 1. Launch Extension: Click the RocketPen extension icon in the Chrome toolbar 2. Select Content: Choose the webpage, section, or HTML element you want to convert 3. Start Conversion: Press `Enter` or click the "Download" button 4. Import to Figma: After download completion, open Figma and launch the `RocketPen plugin` 5. Load File: Select or drag the generated `.pen` file into the plugin to get an editable Figma design
HTML to Figma Capture
Capture any web page and export it as an .h2f file for import into the HTML to Figma plugin. HTML to Figma — Capture any website and convert it into editable Figma designs. This browser extension works as a companion to the HTML to Figma plugin for Figma. It captures the current web page — including all styles, images, fonts, and layout information — and exports it as an .h2f file that can be imported directly into Figma. Key Features: • Capture full pages with a single click • Capture specific selections on the page • Multi-viewport support — capture at Desktop, Tablet, and Mobile sizes simultaneously • Custom viewport widths (200px – 3840px) • Preserves CSS layouts, typography, colors, gradients, borders, and shadows • Exports lightweight .h2f files optimized for the Figma plugin • Works on any public website How to Use: 1. Navigate to any web page 2. Click the extension icon 3. Select your viewports and click "Capture Page" 4. The .h2f file downloads automatically 5. Open the HTML to Figma plugin in Figma and import the file Free to use. No account or login required.
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
