Skip to main content

​
Installation

​
Install the Figma plugin

  1. Visit the Figma Community page
  2. Click Install on the html.tomake.design plugin
  3. Open any Figma file
  4. Go to Plugins → html.tomake.design
The plugin works in both Figma desktop app and browser version.

​
Install the Chrome extension (optional)

For converting private websites and login-protected pages:
  1. Download the Chrome extension
  2. Install it in your Chrome browser
  3. Use it to capture authenticated pages effortlessly

​
Your first conversion

​
Method 1: Convert a Website URL

1

Open the plugin

Launch html.tomake.design from Plugins → html.tomake.design in Figma
2

Enter a website URL

Paste any website URL (e.g., https://www.apple.com) into the input field
3

Select viewports

Choose which viewports to capture:
  • Desktop (1440px)
  • Tablet (768px)
  • Mobile (375px)
  • Or import all three at once
4

Click Import

Click the import button and watch the page convert to Figma layers

​
Method 2: Import HTML/CSS Code

Perfect for AI-generated code or custom HTML:
1

Open the plugin

Launch html.tomake.design in Figma
2

Switch to Code mode

Click the Code tab in the plugin
3

Paste your HTML/CSS

Paste HTML or CSS code directly into the editor. This works great for:
  • AI-generated code from ChatGPT or Claude
  • Custom HTML components
  • Code snippets you want to visualize
4

Convert to Figma

Click import and your code becomes editable Figma layers

​
Method 3: Import Local Files

For HTML files or ZIP archives on your computer:
1

Open the plugin

Launch html.tomake.design in Figma
2

Select File mode

Click the File or Upload option
3

Choose your file

Upload:
  • Individual HTML files
  • ZIP archives containing HTML, CSS, and assets
4

Import

The file converts with all styles and assets preserved

​
Import tips

Use the Chrome extension for private sites:
  1. Install the Chrome extension
  2. Navigate to the login-protected page in your browser
  3. Log in normally
  4. Use the extension to capture the page
  5. Import directly into Figma
Capture all viewports at once:
  • Select multiple checkboxes (Desktop, Tablet, Mobile)
  • One click imports all three responsive views
  • Perfect for documenting responsive designs
  • Compare mobile and desktop layouts side-by-side
Import designs from ChatGPT, Claude, etc.:
  1. Generate HTML/CSS with your AI tool
  2. Copy the generated code
  3. Paste into html.tomake.design’s code editor
  4. Instantly visualize and refine your AI design in Figma
For best results with local files:
  • Include all CSS files and assets in your ZIP
  • Use relative paths for images and stylesheets
  • Ensure fonts are either web-safe or included
  • Test HTML file opens correctly in browser first

​
Common workflows

​
Redesigning an existing website

  1. Enter the current website URL
  2. Import desktop, tablet, and mobile views
  3. Organize layouts in Figma
  4. Start making design improvements
  5. Present variations to stakeholders

​
Competitive analysis

  1. Import competitor websites
  2. Capture all three viewports
  3. Analyze layouts, spacing, typography
  4. Document patterns and components
  5. Create comparison boards in Figma

​
AI code to design

  1. Generate HTML/CSS with ChatGPT or Claude
  2. Copy the code
  3. Paste into html.tomake.design’s code editor
  4. Review the visual result in Figma
  5. Refine and iterate

​
Creating moodboards

  1. Import design elements from inspiring websites
  2. Capture specific components or full pages
  3. Arrange in Figma as reference boards
  4. Extract colors, fonts, and styles
  5. Build your design system

​
Extracting design assets

  1. Import the page with needed assets
  2. Select and copy specific elements
  3. Use extracted icons, images, or components
  4. Organize into your Figma library
  5. Reuse across projects

​
What’s included in free plan

  • Free imports per month: Get started without payment
  • All viewport options: Desktop, tablet, and mobile
  • Full feature access: Website, code, and file imports
  • Chrome extension: Included for private site conversion
  • Community support: Get help from our Discord community

​
Next steps

How it works

Learn the detailed conversion process

Features

Explore all features and capabilities

Troubleshooting

Fix common issues

Join Discord

Get help from the community