Skip to main content
html.tomake.design instantly converts any live website, HTML code, CSS, or even AI-generated code into fully editable Figma designs. Stop wasting time manually recreating web elements — our powerful tool imports webpages and code directly into Figma with all layers, text, and styles preserved and ready for customization.

​
Accelerate Your Design Workflow

Why build from scratch? html.tomake.design lets you kickstart your design process by starting with existing websites or codebases. It’s the perfect solution for:
  • Redesigning existing websites without starting from zero
  • Creating benchmarks or moodboards in Figma using real website elements
  • Performing competitive analysis directly within your design environment
  • Prototyping and testing variations based on live web content
  • Quickly grabbing needed design assets from any website

​
Key Features to Boost Your Productivity

Website to Figma Conversion

Convert entire live websites into editable Figma files with all layers, text, and styles preserved.

Direct HTML/CSS Code Import

Paste HTML or CSS code directly into our editor and turn it into design elements instantly.

AI-Generated Code Support

Seamlessly import designs generated by AI tools like ChatGPT, Claude, or GitHub Copilot.

Multi-Viewport Import

Capture desktop, tablet, and mobile views simultaneously in one import.

Editable Layers

All imported elements are organized, layered, and fully editable in Figma.

Preserves Styles

Maintains typography, colors, spacing, and other CSS styles from the original.

Private & Login-Protected Sites

Easily import secure websites using our browser extension.

Local File Import

Convert local HTML files or ZIP archives directly from your computer.

​
How to Convert a Website to Figma

Getting started is simple:
1

Open the plugin

Launch html.tomake.design from the plugin menu in Figma
2

Enter your source

Paste a website URL, HTML/CSS code, or upload a local file
3

Select viewports

Choose which viewports you need: desktop, mobile, tablet (or all at once!)
4

Click Import

Watch your website or code appear as editable Figma layers

​
Convert Private Websites & Local Files

Need to import a site behind a login or work with files on your computer?

Chrome Extension

Download our Chrome extension for effortless conversion of private websites and login-protected pages.

Local File Import

Use the file import option for local HTML or ZIP files stored on your computer.

​
Use Cases

Start your redesign with the existing website already in Figma. No need to manually recreate every element — just import and start improving.
Study competitor websites directly in Figma. Compare layouts, analyze component structures, and document design patterns.
Generated HTML/CSS with ChatGPT or Claude? Import it instantly to visualize and refine your AI-generated designs in Figma.
Build design references using real website elements. Capture multiple sites and create comprehensive style guides.
Test design variations quickly by importing existing pages and experimenting with different approaches.
Grab specific design elements, icons, or components from any website for use in your projects.

​
Get Started

Install html.tomake.design

Install the Figma plugin to start converting websites and code for free
 Try html.tomake.design with free imports each month. No credit card required.