# kevicebryan/open-htmltofigma architecture

> Architecture diagram of the GitHub repository kevicebryan/open-htmltofigma, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kevicebryan/open-htmltofigma
- Repository: https://github.com/kevicebryan/open-htmltofigma

## Overview

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`](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts) (Conversion handler), [`ui.html`](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html) (Plugin UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_input["Input and setup"]
  node_plugin_ui["Plugin UI<br/>[ui.html]"]
  node_viewport["Viewport settings<br/>[ui.html]"]
  node_html_input["HTML and assets<br/>[ui.html]"]
  node_script_option["Script execution<br/>[ui.html]"]
end

subgraph group_capture["Browser capture"]
  node_browser["Isolated browser render<br/>[ui.html]"]
  node_dom_capture["DOM measurement<br/>[ui.html]"]
  node_capture_assets["Asset rasterizing<br/>[ui.html]"]
end

subgraph group_convert["Figma conversion"]
  node_main_handler["Conversion handler<br/>[code.ts]"]
  node_font_resolver["Font resolution<br/>[code.ts]"]
  node_image_loader["Image loading<br/>[code.ts]"]
  node_tree_builder["Layer tree builder<br/>[code.ts]"]
  node_text_builder["Rich text layers<br/>[code.ts]"]
  node_svg_builder["SVG vectors<br/>[code.ts]"]
  node_paint_effects["Paints and effects<br/>[code.ts]"]
  node_color_styles["Color styles<br/>[code.ts]"]
  node_settings_store[("Remembered settings<br/>[code.ts]")]
end

subgraph group_output["Figma document"]
  node_figma_canvas["Figma document"]
end

node_user(("Designer"))

node_user -->|"opens plugin"| node_plugin_ui
node_plugin_ui -->|"sets viewport"| node_viewport
node_plugin_ui -->|"accepts page"| node_html_input
node_plugin_ui -->|"configures execution"| node_script_option
node_html_input -->|"renders page"| node_browser
node_viewport -->|"sizes render"| node_browser
node_script_option -->|"enables scripts"| node_browser
node_browser -->|"measures DOM"| node_dom_capture
node_dom_capture -->|"rasterizes assets"| node_capture_assets
node_plugin_ui -->|"sends captured tree"| node_main_handler
node_main_handler -->|"loads fonts"| node_font_resolver
node_main_handler -->|"loads images"| node_image_loader
node_main_handler -->|"builds tree"| node_tree_builder
node_tree_builder -->|"builds text"| node_text_builder
node_tree_builder -->|"builds vectors"| node_svg_builder
node_tree_builder -->|"applies appearance"| node_paint_effects
node_paint_effects -->|"resolves image fills"| node_image_loader
node_main_handler -->|"loads and saves"| node_settings_store
node_main_handler -->|"creates layers"| node_figma_canvas
node_main_handler -.->|"links color styles"| node_color_styles
node_color_styles -.->|"creates local styles"| node_figma_canvas

click node_plugin_ui "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_viewport "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_html_input "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_script_option "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_browser "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_dom_capture "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_capture_assets "https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html"
click node_main_handler "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_font_resolver "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_image_loader "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_tree_builder "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_text_builder "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_svg_builder "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_paint_effects "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_color_styles "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"
click node_settings_store "https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_plugin_ui,node_viewport,node_html_input,node_script_option toneBlue
class node_browser,node_dom_capture,node_capture_assets toneAmber
class node_main_handler,node_font_resolver,node_image_loader,node_tree_builder,node_text_builder,node_svg_builder,node_paint_effects,node_color_styles,node_settings_store toneMint
class node_figma_canvas toneRose
class node_user toneIndigo
```

## Components

### Input and setup

- [Plugin UI](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`
- [Viewport settings](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`
- [HTML and assets](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`
- [Script execution](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`

### Browser capture

- [Isolated browser render](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`
- [DOM measurement](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`
- [Asset rasterizing](https://github.com/kevicebryan/open-htmltofigma/blob/main/ui.html): `ui.html`

### Figma conversion

- [Conversion handler](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Font resolution](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Image loading](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Layer tree builder](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Rich text layers](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [SVG vectors](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Paints and effects](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Color styles](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`
- [Remembered settings](https://github.com/kevicebryan/open-htmltofigma/blob/main/code.ts): `code.ts`

### Figma document

- **Figma document**

### Other components

- **Designer**

## Connections

- Designer → Plugin UI: opens plugin (evidence: `README.md`)
- Plugin UI → Viewport settings: sets viewport (evidence: `README.md`)
- Plugin UI → HTML and assets: accepts page (evidence: `README.md`)
- Plugin UI → Script execution: configures execution (evidence: `README.md`)
- HTML and assets → Isolated browser render: renders page (evidence: `README.md`)
- Viewport settings → Isolated browser render: sizes render (evidence: `README.md`)
- Script execution → Isolated browser render: enables scripts (evidence: `README.md`)
- Isolated browser render → DOM measurement: measures DOM (evidence: `README.md`)
- DOM measurement → Asset rasterizing: rasterizes assets (evidence: `README.md`)
- Plugin UI → Conversion handler: sends captured tree (evidence: `README.md`)
- Conversion handler → Font resolution: loads fonts (evidence: `code.ts`)
- Conversion handler → Image loading: loads images (evidence: `code.ts`)
- Conversion handler → Layer tree builder: builds tree (evidence: `code.ts`)
- Layer tree builder → Rich text layers: builds text (evidence: `code.ts`)
- Layer tree builder → SVG vectors: builds vectors (evidence: `code.ts`)
- Layer tree builder → Paints and effects: applies appearance (evidence: `code.ts`)
- Paints and effects → Image loading: resolves image fills (evidence: `code.ts`)
- Conversion handler → Remembered settings: loads and saves (evidence: `code.ts`)
- Conversion handler → Figma document: creates layers (evidence: `code.ts`)
- Conversion handler → Color styles: links color styles (evidence: `code.ts`)
- Color styles → Figma document: creates local styles