# html.to.design
**Category:** Conversion Tool
**Purpose:** Convert HTML prototypes to Figma (fallback method)
**Website:**
---
## What It Is
html.to.design is a web-based tool that converts HTML/CSS to Figma files. In WDS, it serves as a fallback method when MCP server is unavailable for extracting prototypes to Figma.
---
## Why WDS Recommends It
**Fallback Option:**
- When MCP server not configured
- For full-page extraction
- Quick one-off conversions
- Exploring design possibilities
**Conversion Capabilities:**
- HTML structure → Figma frames
- CSS styles → Figma styling
- Layout (Flexbox/Grid) → Auto Layout
- Text content → Text layers
---
## Setup Instructions
### 1. Access
No installation required - web-based tool:
1. Go to
2. No account needed for basic use
3. Premium features available with account
### 2. Prepare Prototype
Before uploading:
```html
Page Title
Title
```
---
## WDS Best Practices
### DO ✅
**1. Clean HTML Before Upload**
- Use semantic HTML elements
- Remove debug code
- Simplify complex nesting
- Use Flexbox/Grid layouts
**2. Include Object IDs for Figma Layer Naming**
```html
```
**Note:** The html.to.design MCP server and browser extension use `aria-label` attributes to name Figma layers. For production code, these should be temporary. See: [Prepare for Figma Export](prepare-for-figma-export.md)
**3. Use Standard CSS**
- Avoid complex positioning
- Use standard properties
- Keep selectors simple
### DON'T ❌
**1. Don't Use When MCP Available**
- MCP server is preferred method
- Better Object ID preservation
- Automated workflow integration
**2. Don't Expect Perfect Conversion**
- Manual cleanup may be needed
- Complex layouts may not convert perfectly
- Review and refine in Figma
---
## Usage Workflow
### 1. Upload HTML
```
1. Go to https://html.to.design
2. Upload HTML file
3. Include associated CSS
4. Select target: Figma
```
### 2. Configure
```
Options:
- Preserve layout structure: Yes
- Convert to components: Yes (if available)
```
### 3. Download and Import
```
1. Download Figma file
2. Open in Figma
3. Verify layer names match Object IDs (from aria-label attributes)
4. Begin refinement
```
**For Multiple Viewport Capture:**
The browser extension method allows capturing mobile, tablet, and desktop simultaneously. See: [Prepare for Figma Export - Browser Extension Method](prepare-for-figma-export.md#variation-b-browser-extension-export-multiple-viewports)
---
## Limitations
### What Works Well
- Standard layouts
- Flexbox and Grid
- Text content
- Basic styling
### What May Need Manual Adjustment
- Complex animations
- JavaScript-driven content
- Custom SVG graphics
- Advanced CSS effects
---
## When to Use
### Use html.to.design when:
- MCP server not configured
- Need full-page extraction
- Quick one-off conversion
- Exploring design possibilities
### Use MCP server instead when:
- MCP server available
- Need component-level precision
- Require Object ID traceability
- Planning iterative refinement
---
## Resources
- Website:
- Documentation: Check website for latest guides
**Related WDS Documentation:**
- [Figma MCP](figma-mcp.md) - Recommended automated method
- Prototype to Figma Workflow: `workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md`
---
[← Back to Tools](wds-tools-guide.md)