Skip to content
UpDoc

Figma

Figma is used in UpDoc development for UI design iteration — capturing the current Umbraco backoffice state, making visual changes in Figma, and having Claude implement those changes in code.

This workflow is necessary because Umbraco’s backoffice uses Shadow DOM extensively, which makes traditional screenshot-based design tools unreliable. A specialised capture plugin (html.to.design) is required.

Tools

Section titled “Tools”
Tool Purpose
Figma MCP Plugin Official Claude Code integration — reads designs, pushes web captures, manages component mappings
html.to.design Figma plugin that captures web pages including Shadow DOM content
HTML Mockups Static HTML mockups for fast component design iteration without the Umbraco site
Design Workflow The end-to-end capture → edit → read → implement workflow and token management strategies

How It Works

Section titled “How It Works”

The integration is bidirectional but with different capabilities in each direction:

Direction Capability Limitation
Figma → Code Claude reads any design element (screenshot, metadata, code context) Large frames consume many tokens
Code → Figma Claude pushes running web pages as editable Figma layers Cannot see Shadow DOM (use html.to.design instead)
Edit in Figma User only — Claude cannot modify individual Figma elements No element-level editing via MCP

The practical workflow for Umbraco projects:

  1. User captures the backoffice UI with html.to.design
  2. User edits the design in Figma (move, add, remove elements)
  3. User selects the modified area and copies the link (Ctrl+L)
  4. Claude reads the targeted node via get_screenshot
  5. Claude implements the changes in Lit/UUI code

For component-level design iteration without the Umbraco site running, see HTML Mockups.

Figma File

Section titled “Figma File”

The UpDoc design work uses a single Figma file:

  • File: “Back-office-work”
  • File key: ZE8800trGvmQldnKeDq1Hy
  • Key node: 12:2 (main captured frame “1920w default”)

References

Section titled “References”