Synchronize design tokens between Figma and local DTCG JSON files.
npx skills add https://github.com/theodrosyimer/.dotfiles --skill figma-sync
Please help me install this Agent Skill. Skill: figma-sync Source: https://github.com/theodrosyimer/.dotfiles/tree/main/claude/skills/ds__figma-sync Command: npx skills add https://github.com/theodrosyimer/.dotfiles --skill figma-sync
Synchronize design tokens between Figma and local DTCG JSON to prevent drift, reduce manual mapping effort, and maintain a single source of truth for design system values.
Set FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY and run the pull script to fetch variables from Figma and write DTCG JSON tokens into packages/design-system/tokens.
High-intent search queries and answers about installing and using this skill.
You can sync design tokens by pulling variables from the Figma REST API and mapping them to DTCG JSON files in a monorepo. This pull-diff-push workflow prevents drift and maintains a single source of truth for design system values.
DTCG JSON format structures Figma variables into primitive, semantic, and theme groups like light and dark. Mapping collections to these groups allows local design system repositories to consume Figma variables systematically.
To pull variables from the Figma Variables REST API, set the FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY environment variables and run the pull script. This fetches variables and writes DTCG JSON tokens into your local design-system/tokens directory.
Yes, you can push local DTCG JSON changes back to Figma by creating or updating variable collections through the API. This push operation preserves variable descriptions and code scoping while updating the remote Figma file.
Yes, you need a FIGMA_ACCESS_TOKEN and a FIGMA_FILE_KEY to authenticate requests to the Figma Variables REST API. These environment variables are required for both pulling variables from and pushing local tokens back to the Figma file.
You resolve design token conflicts between Figma and a local repository using a pull-diff-push workflow. This process identifies mismatches after pulling variables, allowing you to manually resolve differences before pushing the updated DTCG JSON back to Figma.
phuetzAutomate Figma design workflows via REST API, Plugin API, and MCP server.
johnlindquistManage design tokens and export them to CSS, JSON, and Tailwind config.
mkatoguiSync Figma tokens with design-tokens.json and validate DTCG structure.
ydnikolaevBuild cohesive design systems and token libraries for web and mobile projects.
