How kevicebryan/open-htmltofigma works
Open HTML to Figma is a Figma plugin that turns a local HTML page into editable Figma layers. The user chooses a viewport and supplies a file or pasted HTML; the plugin renders it in an isolated browser, captures measured DOM structure and visual properties, then rebuilds that tree in Figma. Major capabilities include optional page-script execution, asset handling, font substitution, component creation, and reusable color styles. The UI implementation is documented but not excerpted, so UI-internal links rely on README statements; relationships not shown in the sampled main-thread excerpts are omitted.
Main entry points: code.ts Conversion handler · ui.html Plugin UI
Components 18
Input and setup
- Plugin UI
ui.html - Viewport settings
ui.html - HTML and assets
ui.html - Script execution
ui.html
Browser capture
- Isolated browser render
ui.html - DOM measurement
ui.html - Asset rasterizing
ui.html
Figma conversion
- Conversion handler
code.ts - Font resolution
code.ts - Image loading
code.ts - Layer tree builder
code.ts - Rich text layers
code.ts - SVG vectors
code.ts - Paints and effects
code.ts - Color styles
code.ts - Remembered settings
code.ts
Figma document
- Figma document
Other components
- Designer
Connections 21
- Designer → Plugin UI: opens plugin
README.md - Plugin UI → Viewport settings: sets viewport
README.md - Plugin UI → HTML and assets: accepts page
README.md - Plugin UI → Script execution: configures execution
README.md - HTML and assets → Isolated browser render: renders page
README.md - Viewport settings → Isolated browser render: sizes render
README.md - Script execution → Isolated browser render: enables scripts
README.md - Isolated browser render → DOM measurement: measures DOM
README.md - DOM measurement → Asset rasterizing: rasterizes assets
README.md - Plugin UI → Conversion handler: sends captured tree
README.md - Conversion handler → Font resolution: loads fonts
code.ts - Conversion handler → Image loading: loads images
code.ts - Conversion handler → Layer tree builder: builds tree
code.ts - Layer tree builder → Rich text layers: builds text
code.ts - Layer tree builder → SVG vectors: builds vectors
code.ts - Layer tree builder → Paints and effects: applies appearance
code.ts - Paints and effects → Image loading: resolves image fills
code.ts - Conversion handler → Remembered settings: loads and saves
code.ts - Conversion handler → Figma document: creates layers
code.ts - Conversion handler → Color styles: links color styles
code.ts - Color styles → Figma document: creates local styles