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”
ToolPurpose
Figma MCP PluginOfficial Claude Code integration — reads designs, pushes web captures, manages component mappings
html.to.designFigma plugin that captures web pages including Shadow DOM content
HTML MockupsStatic HTML mockups for fast component design iteration without the Umbraco site
Design WorkflowThe 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:

DirectionCapabilityLimitation
Figma → CodeClaude reads any design element (screenshot, metadata, code context)Large frames consume many tokens
Code → FigmaClaude pushes running web pages as editable Figma layersCannot see Shadow DOM (use html.to.design instead)
Edit in FigmaUser only — Claude cannot modify individual Figma elementsNo 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”