# Code To Figma

> Syncs implemented UI to Figma as editable layers, Code Connect mappings, components, tokens, and handoff.

- Skill: `mesteriis/code-to-figma` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add mesteriis/code-to-figma`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mesteriis/code-to-figma/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Mesteriis (https://skillmd.com/u/mesteriis)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/mesteriis/code-to-figma

---


# Code To Figma

Bridge implemented UI back into Figma.

## Workflow

1. Read `ui-figma`.
2. Use `figma-code-connect` for component mappings when available.
3. Use `figma-generate-design` or Figma API workflow for editable screen output.
4. Preserve component names, variants, tokens, and source file references.
5. Return changed node IDs, mapping files, and validation gaps.

## Rules

- Do not create disconnected Figma art when Code Connect is the requested
  outcome.
- Do not inspect secret-bearing app state to generate design artifacts.