Sync Figma designs and tokens with code
figma-integrationskillsetup L3★211
plugin87/ux-ui-agent-skills ↗What it does
Sync DTCG tokens with Figma Variables and wire Code Connect
Best for
Maintaining design-code sync in teams where designers use Figma and engineers build in code.
Inputs
- · tokens/*.json (source truth)
- · Figma Variables collections
- · components/* files
Outputs
- · Figma Variables synced from tokens
- · Code Connect references in Figma
Requires
- · Figma MCP server (optional)
- · Tokens Studio or Variables REST API
Preconditions
Figma file with Variables collections and repo with DTCG tokens
Failure modes
Figma MCP offline, Variables have orphan hex values, one direction edited manually breaking sync
Trust signals
- · One authoritative sync direction declared
- · validate_tokens.py confirms no orphan hex