> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tomake.design/llms.txt
> Use this file to discover all available pages before exploring further.

# What is html.tomake.design?

> Transform Websites & HTML into Editable Figma Designs

**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

<CardGroup cols={2}>
  <Card title="Website to Figma Conversion" icon="globe">
    Convert entire live websites into editable Figma files with all layers, text, and styles preserved.
  </Card>

  <Card title="Direct HTML/CSS Code Import" icon="code">
    Paste HTML or CSS code directly into our editor and turn it into design elements instantly.
  </Card>

  <Card title="AI-Generated Code Support" icon="robot">
    Seamlessly import designs generated by AI tools like ChatGPT, Claude, or GitHub Copilot.
  </Card>

  <Card title="Multi-Viewport Import" icon="devices">
    Capture desktop, tablet, and mobile views simultaneously in one import.
  </Card>

  <Card title="Editable Layers" icon="layer-group">
    All imported elements are organized, layered, and fully editable in Figma.
  </Card>

  <Card title="Preserves Styles" icon="paintbrush">
    Maintains typography, colors, spacing, and other CSS styles from the original.
  </Card>

  <Card title="Private & Login-Protected Sites" icon="lock">
    Easily import secure websites using our browser extension.
  </Card>

  <Card title="Local File Import" icon="folder-open">
    Convert local HTML files or ZIP archives directly from your computer.
  </Card>
</CardGroup>

## How to Convert a Website to Figma

Getting started is simple:

<Steps>
  <Step title="Open the plugin">
    Launch html.tomake.design from the plugin menu in Figma
  </Step>

  <Step title="Enter your source">
    Paste a website URL, HTML/CSS code, or upload a local file
  </Step>

  <Step title="Select viewports">
    Choose which viewports you need: desktop, mobile, tablet (or all at once!)
  </Step>

  <Step title="Click Import">
    Watch your website or code appear as editable Figma layers
  </Step>
</Steps>

## Convert Private Websites & Local Files

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

<CardGroup cols={2}>
  <Card title="Chrome Extension" icon="chrome" href="https://chromewebstore.google.com/detail/htmltofigdesign/ijoegnplinjhfdnhgakjgfejieiclppi">
    Download our Chrome extension for effortless conversion of private websites and login-protected pages.
  </Card>

  <Card title="Local File Import" icon="file-code">
    Use the file import option for local HTML or ZIP files stored on your computer.
  </Card>
</CardGroup>

## Use Cases

<AccordionGroup>
  <Accordion title="Website Redesigns" icon="rotate">
    Start your redesign with the existing website already in Figma. No need to manually recreate every element — just import and start improving.
  </Accordion>

  <Accordion title="Competitive Analysis" icon="chart-line">
    Study competitor websites directly in Figma. Compare layouts, analyze component structures, and document design patterns.
  </Accordion>

  <Accordion title="AI Code to Design" icon="wand-sparkles">
    Generated HTML/CSS with ChatGPT or Claude? Import it instantly to visualize and refine your AI-generated designs in Figma.
  </Accordion>

  <Accordion title="Moodboards & Benchmarks" icon="images">
    Build design references using real website elements. Capture multiple sites and create comprehensive style guides.
  </Accordion>

  <Accordion title="Rapid Prototyping" icon="bolt">
    Test design variations quickly by importing existing pages and experimenting with different approaches.
  </Accordion>

  <Accordion title="Asset Extraction" icon="download">
    Grab specific design elements, icons, or components from any website for use in your projects.
  </Accordion>
</AccordionGroup>

## Get Started

<Card title="Install html.tomake.design" icon="figma" href="https://www.figma.com/community/plugin/1557932447766289380" horizontal>
  Install the Figma plugin to start converting websites and code for free
</Card>

Try html.tomake.design with free imports each month. No credit card required.