> ## 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.

# Getting Started

> Install and start using html.tomake.design in minutes

## Installation

### Install the Figma plugin

1. Visit the [Figma Community page](https://www.figma.com/community/plugin/1557932447766289380)
2. Click **Install** on the html.tomake.design plugin
3. Open any Figma file
4. Go to **Plugins** → **html.tomake.design**

<Tip>
  The plugin works in both Figma desktop app and browser version.
</Tip>

### Install the Chrome extension (optional)

For converting private websites and login-protected pages:

1. Download the [Chrome extension](https://chromewebstore.google.com/detail/htmltofigdesign/ijoegnplinjhfdnhgakjgfejieiclppi)
2. Install it in your Chrome browser
3. Use it to capture authenticated pages effortlessly

## Your first conversion

### Method 1: Convert a Website URL

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

  <Step title="Enter a website URL">
    Paste any website URL (e.g., [https://www.apple.com](https://www.apple.com)) into the input field
  </Step>

  <Step title="Select viewports">
    Choose which viewports to capture:

    * **Desktop** (1440px)
    * **Tablet** (768px)
    * **Mobile** (375px)
    * Or import **all three at once**
  </Step>

  <Step title="Click Import">
    Click the import button and watch the page convert to Figma layers
  </Step>
</Steps>

### Method 2: Import HTML/CSS Code

Perfect for AI-generated code or custom HTML:

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

  <Step title="Switch to Code mode">
    Click the **Code** tab in the plugin
  </Step>

  <Step title="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
  </Step>

  <Step title="Convert to Figma">
    Click import and your code becomes editable Figma layers
  </Step>
</Steps>

### Method 3: Import Local Files

For HTML files or ZIP archives on your computer:

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

  <Step title="Select File mode">
    Click the **File** or **Upload** option
  </Step>

  <Step title="Choose your file">
    Upload:

    * Individual HTML files
    * ZIP archives containing HTML, CSS, and assets
  </Step>

  <Step title="Import">
    The file converts with all styles and assets preserved
  </Step>
</Steps>

## Import tips

<AccordionGroup>
  <Accordion title="Capturing login-protected pages" icon="lock">
    **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
  </Accordion>

  <Accordion title="Multi-viewport imports" icon="devices">
    **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
  </Accordion>

  <Accordion title="Working with AI-generated code" icon="robot">
    **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
  </Accordion>

  <Accordion title="Local file best practices" icon="folder">
    **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
  </Accordion>
</AccordionGroup>

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

<CardGroup cols={2}>
  <Card title="How it works" icon="gears" href="/html-to-design/how-it-works">
    Learn the detailed conversion process
  </Card>

  <Card title="Features" icon="star" href="/html-to-design/features">
    Explore all features and capabilities
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/html-to-design/troubleshooting">
    Fix common issues
  </Card>

  <Card title="Join Discord" icon="discord" href="https://discord.com/invite/VVArNqBGjB">
    Get help from the community
  </Card>
</CardGroup>