# HTML to Figma — Design System [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/miapre/html-to-figma-design-system  
**GitHub Stars:** 15  
**npm Downloads (last month):** 202  
**Views:** 7  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/html-to-figma-design-system

## Description
Translate HTML prototypes into Figma using your design system's real components and tokens.

## Tools
Capabilities this server exposes over MCP:

- **mimic_status** — Returns plugin connection status, current build phase, enforcement profile, knowledge store summary, and a contextual hint for what to do next.
- **mimic_discover_ds** — Complete DS discovery in two steps. Step 1: call with fileKey — discovers variables, text styles, components via plugin API, caches everything, stays at Phase 1. Step 2: call again with communitySearchResults (library names from Figma MCP search_design_system) — verifies no community libraries were missed, then advances to Phase 2 (build-ready). Build tools are BLOCKED until Step 2 completes. If a community library's variables are not discoverable via the plugin API (communityVariablesRequired response), fetch them via Figma MCP search_design_system and pass as externalVariables.
- **figma_preload_styles** — Sends text style keys to the plugin for caching. Call during DS setup phase.
- **figma_preload_variables** — Stores DS variables in the local cache for enforcement and resolution.
- **figma_set_session_defaults** — Computes the enforcement profile from cached DS data and sends it to the plugin. Advances to Phase 2 (inventory ready).
- **figma_list_text_styles** — Returns all cached text styles from the DS.
- **figma_preload_fill_styles** — Preloads fill (color) styles into the DS cache from a library file key. Call when discovery missed fill styles (e.g. library variables not enumerable but fill styles exist in the REST API).
- **figma_list_fill_styles** — Returns all cached fill (color) styles from the DS. Use the style key as fillStyleId in create_frame, create_text, create_rectangle, create_ellipse, or set_node_fill.
- **figma_discover_library_styles** — Discovers and caches text styles from a Figma library file.
- **figma_discover_library_variables** — Discovers and caches variables from a Figma library file.
- **figma_discover_library_components** — Scans existing component instances on the current page to discover available DS library components, their keys, and variant properties. Call during DS discovery phase.
- **mimic_map_components** — Maps HTML element types to DS component keys. Call once to get initial mapping. If FIGMA_TOKEN is configured (REST API discovery), all library components are already cached — missing types after the first call are confirmed gaps, proceed to build. If REST API is not available (no token), search the library via Figma MCP search_design_system for missing types, then call AGAIN with librarySearchResults to confirm gaps.
- **figma_read_variable_values** — Returns cached variable values, optionally filtered by category.
- **figma_create_frame** — Creates an auto-layout frame in Figma. All sizing uses DS variables when available. The name parameter should describe the HTML section or element role (e.g., "Header Section", "Metrics Row", "Card: Revenue"). Meaningful names enable iteration. IMPORTANT: Before creating frames for section-level elements (header, footer, sidebar), first check if the DS has a component for it via mimic_map_components or Figma MCP search_design_system.
- **figma_create_text** — Creates a text node in Figma with DS text style and color variable. The name parameter should describe the HTML element role (e.g., "Page Title", "Card: Revenue Label", "Subtitle"). Meaningful names enable iteration.
- **figma_create_rectangle** — Creates a rectangle node in Figma.
- **figma_create_ellipse** — Creates an ellipse node in Figma. Supports arcData for donut charts.
- **figma_create_svg** — Creates a node from an SVG string in Figma. Useful for icons and custom graphics. Returns unboundChildren — a list of child nodes that need DS variable bindings. You MUST apply figma_set_node_fill to every unbound vector and figma_set_text_style + figma_set_node_fill to every unbound text. Leaving unbound children breaks DS compliance and light/dark mode.
- **figma_insert_component** — Imports and inserts a DS component instance. Returns component info and configuration hints from the knowledge store.
- **figma_set_component_text** — Sets text on a component instance by finding a text node with the given name. Prefer figma_set_component_text_by_id when configurationHints include text node IDs, because many components contain repeated text node names.
- **figma_set_component_text_by_id** — Sets text on a component instance using an exact text node ID from configurationHints.textNodes. Use this instead of name-based text overrides when available.
- **figma_batch_set_component_text** — Sets ALL text overrides on a component instance in a single call. Pass an array of {textNodeName, content} overrides. Saves 1 tool call per text node vs. individual figma_set_component_text calls. Use after figma_insert_component — configurationHints.textNodes tells you which nodes to override.
- **figma_set_variant** — Sets variant properties on a component instance.
- **figma_swap_main_component** — Swaps the main component of an instance to a different component.
- **figma_replace_component** — Replaces an instance node with a new component instance at the same position.
- **figma_fill_slot** — Inserts a DS component instance into a SLOT-type component property on an existing instance (Figma Slots, GA June 2026). Use configurationHints.slotProperties from figma_insert_component to find the slotName.
- **figma_reset_slot** — Resets a SLOT-type component property back to its default content (Figma Slots, GA June 2026).
- **figma_set_text** — Sets the text content of a text node.
- **figma_set_node_fill** — Sets the fill of a node to a DS fill style, color variable, or raw color. Priority: fillStyleId (DS color style) → fillVariable (DS variable) → fill (raw hex/RGB).
- **figma_set_layout_sizing** — Updates layout sizing, padding, gap, and max width on a frame node.
- **figma_set_visibility** — Shows or hides a node.
- **figma_set_variable_mode** — Sets the explicit variable mode on a node for a given collection. Required on every new artboard to render DS variables correctly.
- **figma_set_all_variable_modes** — Sets the default variable mode on ALL variable collections for a node at once. Use this on every new artboard instead of figma_set_variable_mode — it eliminates collection name guessing.
- **figma_set_text_style** — Applies a DS text style to a text node.
- **figma_set_node_position** — Sets the absolute x/y position of a node. Use to correct top-level artboard placement after inspecting page nodes.
- **figma_move_node** — Moves a node to a new parent at the specified index.
- **figma_delete_node** — Deletes a node from the Figma document. NEVER deletes artboards (top-level frames) — only child nodes within an artboard. To rebuild a screen, create a NEW artboard alongside the existing one.
- **figma_restyle_artboard** — Updates styling properties on an existing artboard or frame.
- **figma_get_node_props** — Returns comprehensive properties of a Figma node: type, size, layout, fills, strokes, text styles, variable bindings, and children count.
- **figma_get_node_children** — Returns the children of a node up to the specified depth.
- **figma_get_node_parent** — Returns the parent node info for a given node.
- **figma_get_pages** — Returns all pages in the current Figma file.
- **figma_change_page** — Switches to a different page in the Figma file.
- **figma_get_page_nodes** — Returns top-level nodes (artboards, frames) on the current page.
- **figma_get_component_variants** — Returns all variants for a component set.
- **figma_get_text_info** — Returns detailed text information: content, style, font, color, variable bindings.
- **figma_get_selection** — Returns the currently selected nodes in Figma.
- **figma_select_node** — Selects a node in Figma and scrolls it into view.
- **mimic_find_node** — Find a Figma node by its HTML section name from the last build. Returns the node ID and metadata if found, or lists available sections.
- **figma_batch** — Executes up to 6 operations sequentially via the Figma plugin bridge. Each operation specifies a type (bridge handler name) and payload. Returns an array of results in order.
- **mimic_ai_knowledge_read** — Loads and returns the full knowledge store contents: components, patterns, gaps, and meta.
- **mimic_ai_knowledge_write** — Saves a pattern, component recipe, or DS gap to the knowledge store.
- **mimic_generate_build_report** — Compiles build session data into a structured report (markdown or HTML). Advances phase to 5.
- **mimic_generate_design_md** — Compiles current DS knowledge into DESIGN.md format. Returns the content as a string.
- **mimic_compute_chart** — Takes chart data and returns pre-computed geometry for building in Figma. Supports bar, donut, line, radar, scatter, and heatmap.
- **figma_validate_ds_compliance** — Validates a Figma node against the current DS enforcement profile. Returns compliance results from the plugin.
- **mimic_pipeline_resolve** — Classifies input as a URL, file path, or raw HTML and returns the resolved content.
- **mimic_render_url** — Placeholder for Puppeteer-based URL rendering. Currently returns instructions to provide HTML directly.
- **mimic_build_table** — Builds an entire data table in one call. Creates column frames with DS Table header cell and Table cell components, configures all variants, text, and sizing. Requires table cell components in the DS — if missing, returns guidance on creating them. Reduces table builds from 200+ tool calls to 1.
- **mimic_build_chart** — Builds an entire chart in one tool call. Creates chart container, visualization (SVG or native rectangles), axis labels, grid lines, and legend — all bound to DS variables. Supports line, bar, donut, and radar charts. Reduces chart builds from 30-50 tool calls to 1.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "html-to-figma-design-system": {
    "command": "npx",
    "args": ["-y","@miapre/mimic-ai"]
  }
}
```

## Documentation

## What HTML to Figma — Design System does

HTML to Figma — Design System MCP server turns HTML prototypes, written screen descriptions, and existing prototype concepts into editable Figma layers. It is designed for teams that need the resulting file to use their actual design-system assets rather than approximate colors, typography, or manually recreated controls.

The server discovers the design system available in the Figma file and maps incoming interface elements to published components, variables, and text styles. Generated frames use auto-layout, and matching elements become component instances where the library provides a suitable component. When no equivalent exists, the build report identifies the resulting primitive and the design-system coverage gap.

## How it works

A build can start from an HTML document, a description such as a dashboard with cards and a table, or another prototype that needs to be rebuilt with library components. The system scans the file’s design system, matches available components and tokens, and writes the result into Figma through the local plugin workflow.

The plugin applies checks while writing. It can block raw color values when a matching color variable exists, reject raw font sizes when a text style is available, prevent unsupported fonts, detect variable-category errors, and discourage primitive frames where the library already contains a matching control. The result includes a compliance report covering used components, component keys, primitives, stored rules, and remaining gaps.

Confirmed corrections can become reusable component recipes, variant defaults, and design rules. Stored knowledge is scoped to the design-system library. The system also detects component additions, removals, and variant changes at the beginning of later builds; deeper variable-level change detection is not yet available.

## Setup and configuration

Run the server locally with Node.js 20.6 or later. The repository provides an installer that clones the project into `~/mimic-ai`, installs dependencies, asks for a Figma personal access token, and can register the server in Claude Code’s settings.

Use the Figma desktop application; browser-based Figma is not supported. Publishing and using team libraries requires a Figma Professional plan or higher. The project is open source under the MIT license, and its documentation states that design data remains on the local machine.

## Tools and capabilities

The HTML to Figma — Design System MCP server supports these documented capabilities:

- Translate HTML and textual screen descriptions into Figma designs.
- Discover and use components from a Figma design-system library.
- Bind generated nodes to design-system variables and text styles.
- Create structured frames with auto-layout.
- Enforce component, token, font, and variable-category rules at write time.
- Learn confirmed mappings and defaults across builds.
- Produce compliance reports and identify missing design-system coverage.

## Limitations and notes

The workflow depends on the Figma desktop app and a compatible published library. It does not support browser Figma. A first build starts without learned recipes and may use primitives where the design system has no matching component. Later builds can reuse confirmed decisions, but stored recipes can become stale when the library changes.

The system reports gaps rather than silently inventing a component. Deeper detection of renamed or otherwise changed variables is described as a future feature, so variable-level library changes may require attention. The documented platform badges cover macOS and Windows.

_Full upstream README: https://allmcps.com/mcp/html-to-figma-design-system/readme_