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

# Features

> Explore all capabilities of html.tomake.design

## Core features

### Multiple viewport sizes

Capture websites at different screen sizes to design for all devices.

<CardGroup cols={3}>
  <Card title="Mobile" icon="mobile">
    **375px width**

    iPhone and mobile designs
  </Card>

  <Card title="Tablet" icon="tablet">
    **768px width**

    iPad and tablet layouts
  </Card>

  <Card title="Desktop" icon="desktop">
    **1440px width**

    Standard desktop views
  </Card>
</CardGroup>

### Theme selection

Capture websites in light or dark mode (when supported by the site).

* Automatically detect theme support
* Switch between light and dark modes
* Preview before capturing
* Compare designs side-by-side in Figma

### Full page capture

Capture entire scrollable pages, not just the visible viewport.

* Automatically scrolls and captures
* Stitches sections seamlessly
* Preserves all content from top to bottom
* Ideal for landing pages and article pages

### Browser extension

Enhanced capabilities with our browser extension:

<AccordionGroup>
  <Accordion title="Authenticated pages" icon="lock">
    Capture pages that require login:

    * Dashboard views
    * User account pages
    * Members-only content
    * Authenticated web apps
  </Accordion>

  <Accordion title="Interactive elements" icon="hand-pointer">
    Interact before capturing:

    * Click dropdowns and modals
    * Hover to reveal content
    * Scroll to lazy-loaded sections
    * Fill forms and see states
  </Accordion>

  <Accordion title="One-click capture" icon="bolt">
    Capture any page instantly:

    * Browse normally
    * Click extension icon
    * Instant capture to Figma
    * No copy-pasting URLs
  </Accordion>
</AccordionGroup>

## Conversion features

### Editable text layers

All text converts to native Figma text:

* Fully editable in Figma
* Preserves font families
* Maintains font sizes and weights
* Keeps line heights and spacing
* Retains text colors and effects

<Tip>
  If a font isn't available in Figma, we substitute with a similar font. You can easily change it to your preferred font.
</Tip>

### Image extraction

All images are extracted and imported:

* High-resolution quality
* Maintained aspect ratios
* Background images included
* SVG support
* Organized in layers

### Color styles

Colors are accurately captured:

* Exact HEX/RGB values
* Gradient support
* Transparency preserved
* Shadow effects
* Border colors

### Layout structure

Websites convert to well-structured Figma frames:

* Semantic naming (Header, Navigation, Footer, etc.)
* Logical hierarchy
* Grouped related elements
* Preserved z-index layering
* Auto Layout compatible (where applicable)

## Workflow features

### Batch imports

Import multiple pages from the same website:

1. Save time on multi-page projects
2. Maintain consistency across pages
3. Build complete design systems
4. Compare page variations

### History & versions

Track your conversions:

* View import history
* Re-import updated pages
* Compare versions
* Track changes over time

### Quick actions

Speed up your workflow:

* Recent URLs for quick re-import
* Favorite configurations
* Preset viewport combinations
* Custom templates

## Collaboration features

### Team sharing

Share converted designs with your team:

* Collaborate in Figma
* Comment and review
* Version control
* Real-time editing

### Design handoff

Use conversions for:

* Developer handoff
* Design specs
* Asset extraction
* Component documentation

## Advanced features

### Custom viewport sizes

Beyond standard presets:

* Set custom width and height
* Test responsive breakpoints
* Match specific device dimensions
* Test edge cases

### Element selection

Capture specific parts of a page:

* Select individual sections
* Capture components only
* Exclude unwanted areas
* Focus on relevant content

### Export options

Multiple export formats:

* Figma frames
* PDF documents (see [pdf.tomake.design](/pdf-to-design/what-is-pdf-to-design))
* PNG images
* SVG elements

## Integration features

### Figma plugin API

The plugin integrates seamlessly with Figma:

* Native Figma components
* Compatible with plugins
* Works with Figma libraries
* Supports variants and instances

### Browser extension

Available for Chrome and Edge:

* Chrome and Edge (Chromium-based browsers)
* Automatic updates
* Synced settings
* [Download from Chrome Web Store](https://chromewebstore.google.com/detail/htmltofigdesign/ijoegnplinjhfdnhgakjgfejieiclppi)

## Limitations and what's coming

### Current limitations

<Warning>
  * Some websites block automated capture
  * Complex animations capture as static images
  * Some third-party iframes may not capture
  * Very large pages may take longer to process
</Warning>

### Coming soon

* Component auto-detection
* Responsive variant generation
* Design token extraction
* Improved animation support
* AI-powered layout optimization

## Plans and pricing

### Free plan

* Limited imports per month
* All core features
* Community support
* Browser extension included

### Pro plan

* Unlimited imports
* Priority support
* Advanced features
* Team collaboration
* Early access to new features

<Card title="View pricing" icon="credit-card" href="https://html.tomake.design" horizontal>
  See all plan options and pricing
</Card>

## Get help

<CardGroup cols={2}>
  <Card title="Troubleshooting" icon="wrench" href="/html-to-design/troubleshooting">
    Fix common issues
  </Card>

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

  <Card title="Email support" icon="envelope" href="mailto:support@tomake.design">
    Contact our support team
  </Card>

  <Card title="Twitter" icon="x-twitter" href="https://x.com/tomakedesign">
    Follow for updates
  </Card>
</CardGroup>