3.9 KiB

Raw Blame History

html.to.design

Category: Conversion Tool
Purpose: Convert HTML prototypes to Figma (fallback method)
Website: https://html.to.design

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:

Go to https://html.to.design
No account needed for basic use
Premium features available with account

2. Prepare Prototype

Before uploading:

<!-- Ensure clean HTML structure -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <style>
    /* Include all CSS inline or in <style> tag */
  </style>
</head>
<body>
  <!-- Semantic HTML -->
  <header data-object-id="header-main">
    <h1 data-object-id="heading-title">Title</h1>
  </header>
  <!-- Use Flexbox/Grid for layouts -->
</body>
</html>

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

<!-- For Figma layer naming, use aria-label attributes -->
<button aria-label="btn-login-submit" class="btn-primary">Log In</button>

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

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

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: https://html.to.design
Documentation: Check website for latest guides

Related WDS Documentation:

Figma MCP - Recommended automated method
Prototype to Figma Workflow: workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md

← Back to Tools

3.9 KiB Raw Blame History