domains / families / design / figma-integration

figma-integration

separate

Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.

When to use

• push tokens/components to Figma
• pull a design into code
• set up token↔Variable sync
• check design-code drift
• map 3-tier DTCG tokens to Figma Variables
• use the Figma MCP when connected
• verify component parity

When not to use

• hand-edit both sides of the sync

Skill page

Source