CustomHTML2Figma

Production-ready Figma plugin that converts any HTML/CSS/JS website or code snippet into fully editable Figma designs.

---

Features

• HTML → Figma: Convert any HTML/CSS into native, editable Figma nodes
• Auto Layout Detection: CSS Flexbox and Grid → Figma Auto Layout
• CSS Variables → Figma Variables: :root custom properties become Figma variables
• PlantUML Integration: Render sequence, class, and architecture diagrams
• Multi-Theme: Auto-generate Light + Dark theme variants
• SVG Support: Inline SVGs converted to native Figma vectors
• Image Embedding: Base64 images embedded as Figma image fills
• Font Matching: CSS fonts mapped to Figma-available alternatives
• Export Figma → HTML: Convert Figma frames to HTML/CSS, React, or Vue
• Neural Network Diagrams: Built-in VGG16 and custom architecture templates

Quick Start

# Clone or download
cd custom-html2figma

# Install dependencies
npm install

# Build the plugin
npm run build

# Dev mode (watch for changes)
npm run dev

Import into Figma

1. Open Figma Desktop
2. Go to Plugins → Development → Import plugin from manifest...
3. Select the manifest.json file from this directory
4. Right-click canvas → Plugins → CustomHTML2Figma

Usage

Convert HTML Code

<!-- Paste this in the HTML Code tab -->
<div style="display: flex; gap: 16px; padding: 24px; background: #f5f5f5;">
  <button style="background: #007bff; color: white; padding: 12px 24px; border-radius: 8px;">
    Primary
  </button>
  <button style="background: white; border: 1px solid #ddd; padding: 12px 24px; border-radius: 8px;">
    Secondary
  </button>
</div>

Convert PlantUML Diagram

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Data Request
Bob --> Alice: Data Response
@enduml

Convert URL

Enter any website URL and the plugin will attempt to fetch and convert the page.

Architecture

custom-html2figma/
├── manifest.json          # Figma plugin manifest
├── package.json           # Dependencies
├── tsconfig.json          # TypeScript config
├── vite.config.ts         # Build config (UI + code.ts)
├── src/
│   ├── code.ts            # Plugin sandbox entry point
│   ├── ui/
│   │   ├── ui.html        # Plugin UI (dark theme)
│   │   └── ui.ts          # UI controller
│   ├── parser/
│   │   ├── dom-parser.ts  # HTML → VNode tree parser
│   │   ├── style-engine.ts # CSS cascade & specificity resolver
│   │   └── figment.ts     # VNode → Figma node generator
│   └── utils/
│       ├── asset-loader.ts # Image/font/CSS handling
│       └── plantuml.ts     # PlantUML encoding & rendering
├── docs/
│   ├── REVISION-LOG.md    # Versioned change documentation
│   ├── ARCHITECTURE.md    # System architecture (Mermaid diagrams)
│   ├── API-REFERENCE.md   # Complete API documentation
│   └── USER-GUIDE.md      # End-user guide
└── README.md              # This file

Conversion Pipeline

HTML Input → DOM Parser → Style Engine → Figment Generator → Figma Canvas
                ↓              ↓               ↓
          VNode Tree    Computed Styles   Figma Nodes

1. DOM Parser: Tokenizes HTML into a VNode tree (custom regex parser, no jsdom dependency)
2. Style Engine: Resolves CSS cascade, specificity, inheritance, shorthands, and CSS variables
3. Figment Generator: Creates Figma nodes with correct styles, Auto Layout, fills, strokes, effects

Node Mapping

HTML Element	Figma Node	Features
<div>, <section>, etc.	Frame	Auto Layout, fills, borders
Text content	Text	Font, size, color, decoration
<img>	Rectangle	Image fill (base64 embed)
<svg>	Vector/Frame	Native SVG or placeholder
<input>, <button>	Frame	Placeholder text, styling
<hr>	Rectangle	1px line

Scripts

Command	Description
npm run build	Production build
npm run dev	Watch mode (dev)
npm run typecheck	TypeScript check
npm run clean	Remove dist/

Requirements

• Node.js ≥ 18.0
• Figma Desktop (plugin development mode)
• TypeScript 5.3+

Documentation

• Revision Log - Complete change history
• Architecture - System design with Mermaid diagrams
• API Reference - All modules, classes, and functions
• User Guide - How to use the plugin

License

MIT

---

Built for ML researchers and design professionals.