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

# How It Works

> Understanding the website to Figma conversion process

## The conversion process

html.tomake.design uses advanced technology to convert websites into editable Figma designs. Here's what happens behind the scenes:

### 1. Page analysis

When you enter a URL, the plugin:

* Fetches the webpage HTML structure
* Analyzes CSS stylesheets
* Identifies fonts and typography
* Detects images and media assets
* Maps layout and positioning

### 2. Browser rendering

The page opens in your browser to:

* Render the live version with all styles applied
* Handle JavaScript-driven content
* Allow interaction before capture
* Support authenticated sessions
* Capture dynamic elements

<Tip>
  This step is crucial for pages with dynamic content or that require login.
</Tip>

### 3. Element capture

During capture, the system:

* Screenshots visual elements
* Extracts text content
* Identifies component boundaries
* Captures color values
* Measures spacing and dimensions
* Detects responsive breakpoints

### 4. Figma conversion

The captured data is transformed into:

* **Frames**: Page sections and containers
* **Text layers**: All text as editable Figma text
* **Shapes**: Backgrounds, dividers, and UI elements
* **Images**: All visual assets
* **Auto Layout**: Spacing and structure (where applicable)

### 5. Layer organization

The final Figma file includes:

* Semantic layer names (e.g., "Navigation", "Hero Section", "Footer")
* Logical grouping and hierarchy
* Preserved z-index ordering
* Component-like structures for repeated elements

## What gets converted

### ✅ Fully supported

<AccordionGroup>
  <Accordion title="Text content" icon="font">
    * All text preserved as editable Figma text
    * Font families and weights
    * Font sizes and line heights
    * Text colors and effects
    * Letter spacing and alignment
  </Accordion>

  <Accordion title="Layout & spacing" icon="table-cells">
    * Element positioning
    * Margins and padding
    * Flexbox layouts
    * Grid structures
    * Responsive breakpoints
  </Accordion>

  <Accordion title="Colors & backgrounds" icon="palette">
    * Background colors
    * Gradients
    * Background images
    * Border colors
    * Shadow effects
  </Accordion>

  <Accordion title="Images & media" icon="image">
    * All images (JPG, PNG, WebP, SVG)
    * Background images
    * Icons
    * Logos
    * Optimized for Figma
  </Accordion>
</AccordionGroup>

### ⚠️ Partially supported

* **Animations**: Captured in their current state only
* **Videos**: Captured as thumbnail images
* **Hover states**: Captured in default state
* **Complex interactions**: Static representation

### ❌ Not supported

* Active animations or transitions
* Embedded videos (converted to thumbnails)
* iframes from external domains
* Canvas-based elements (captured as images)

## Quality optimization

### High-fidelity conversion

We optimize for:

* **Pixel-perfect accuracy**: Layouts match the original within 1-2px
* **Font matching**: Uses the same fonts when available in Figma
* **Color precision**: Exact HEX/RGB values preserved
* **Image quality**: High-resolution asset extraction

### Performance considerations

* **File size**: Complex pages create larger Figma files
* **Layer count**: Detailed pages may have 1000+ layers
* **Processing time**: Typical conversion takes 10-30 seconds

<Note>
  For very complex pages, consider capturing specific sections instead of the entire page.
</Note>

## Best practices

<CardGroup cols={2}>
  <Card title="Capture at the right moment" icon="camera">
    Wait for page load, trigger hover states, and ensure dynamic content is visible before capturing.
  </Card>

  <Card title="Choose appropriate viewport" icon="display">
    Select the viewport that matches your design goals (mobile, tablet, or desktop).
  </Card>

  <Card title="Handle authentication" icon="key">
    Use the browser extension for better handling of logged-in pages and sessions.
  </Card>

  <Card title="Organize after import" icon="folder-tree">
    Clean up and organize layers in Figma after conversion for better workflow.
  </Card>
</CardGroup>

## Technical details

### Browser compatibility

* Chrome/Edge (recommended) - full support with extension
* Safari (limited support)

### Supported websites

* Static websites
* Dynamic web applications
* Single-page apps (SPAs)
* Authenticated pages (with browser extension)
* Responsive websites

### Limitations

* Some websites block automated capture
* Very complex animations may not convert perfectly
* Third-party embedded content may have restrictions

## Next steps

<Card title="Explore features" icon="star" href="/html-to-design/features" horizontal>
  Learn about all available features and capabilities
</Card>