skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-integration

Synchronize DTCG design tokens with Figma Variables and verify component parity.

Updated Jul 20, 2026
Search Tags:#design system#figma#design tokens#sync#variables#code connect#dtcg
One-click install
npx skills add https://github.com/idy-00/paytrack --skill figma-integration-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-integration
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/figma-integration
Command: npx skills add https://github.com/idy-00/paytrack --skill figma-integration-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design tokens in code and Figma designs drift apart over time, causing inconsistent colors, spacing, and component states. This Skill keeps the 3-tier DTCG token hierarchy and Figma Variables in sync in either direction and checks that Figma component variants match the coded components. ## Core Features & Use Cases - Token-to-Variable Mapping: Maps the 3-tier hierarchy (Primitives, Semantic, Component) to three Figma collections with aliasing, and maps dark/brand/density themes to Figma Modes. - Bidirectional Sync: Supports one authoritative direction — code-to-Figma publishing or Figma-to-code extraction via Tokens Studio or the Variables REST API — with the other side generated. - Figma MCP Support: Uses a connected Figma MCP server to read frames, variables, and screenshots, build Variables from tokens, and wire Code Connect to component files. - Use Case: After updating tokens/theming.json with a new dark mode palette, push the tokens to Figma Variables, then verify every Figma variant set covers all 8 component states. ## Quick Start Ask the AI to sync the design tokens in tokens/*.json to Figma Variables and check that all component variants and states match the code.

Frequently Asked Questions about figma-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync design tokens between code and Figma?▼

Map your 3-tier DTCG token hierarchy to three Figma Variable collections (Primitives, Semantic, Component) with aliasing, then choose one authoritative direction: publish code-to-Figma or extract Figma-to-code via Tokens Studio or the Variables REST API. Never hand-edit both sides.

How do I map dark mode tokens to Figma Variables?▼

Represent dark, brand, and density themes as Figma Modes within your Variable collections, sourced from tokens/theming.json. Each mode value aliases back to the underlying primitive tokens so no raw hex values appear in designs.

Can I use the Figma MCP server for token sync?▼

Yes, if a Figma MCP server is connected, prefer its tools after loading its mandatory prerequisite skill. Use it to read frames, variables, and screenshots into code, build Variables from tokens, or wire Code Connect to component files.

How do I check Figma component parity with code?▼

Verify that Figma variant sets and properties cover all coded variants, sizes, and the 8 component states, and flag any gaps. Code Connect should point each Figma component to the correct components/* file.

Why should only one sync direction be authoritative?▼

Editing both code tokens and Figma Variables by hand causes drift and conflicts that are hard to reconcile. Pick one source of truth — the token JSON — and generate the other side so the generated side has zero hand edits.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
TechCorp25TechCorp25

design-system-patterns

Build design systems with design tokens, theming infrastructure, and component architecture patterns.

Community
Advanced