skills.rest
lucaszhh
lucaszhhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-token-sync

Synchronizes design tokens between Figma and a monorepo's Style Dictionary JSON sources.

Updated Sep 8, 2026
Search Tags:#design system#figma#design tokens#monorepo#sync#json validation#style dictionary
One-click install
npx skills add https://github.com/lucaszhh/agents --skill design-token-sync-lucaszhh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token-sync
Source: https://github.com/lucaszhh/agents/tree/main/skills/design-system/design-token-sync
Command: npx skills add https://github.com/lucaszhh/agents --skill design-token-sync-lucaszhh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-developer-mcp, prettier.

What problem does it solve? Design tokens in a monorepo drift out of sync with the Figma source of truth, causing inconsistent colors, spacing, and typography across components. This Skill automates the comparison, update, validation, and compilation of token JSON files so the design system always reflects the latest design decisions. ## Core Features & Use Cases - Figma-to-Repo Sync: Reads variables from Figma (via the optional figma-developer-mcp MCP server or an exported JSON) and updates packages/tokens/src/*.json files accordingly. - Validation & Compilation: Validates JSON syntax with Prettier and Node.js parsing, then compiles tokens with pnpm build:tokens (Style Dictionary) and verifies the React theme build. - Breaking-Change Detection: Flags deleted or renamed semantic tokens in active use and never removes tokens without explicit human confirmation. - Use Case: A designer changes the primary brand color in Figma. You ask the agent to sync the tokens; it updates colors.json and semantico.json, compiles the tokens, and writes a structured diff report to .agents/tokens/token-sync-report.md. ## Quick Start Ask the agent to sync the design tokens from Figma and update the token JSON files in the design-system monorepo.

Frequently Asked Questions about design-token-sync

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

FAQPage Schema
How do I sync design tokens from Figma to my codebase?▼

Read the Figma variables using the figma-developer-mcp MCP server or an exported JSON file, compare them against the token JSON files in packages/tokens/src, apply the changes, and compile with Style Dictionary via pnpm build:tokens.

How do I set up the Figma MCP server for token reading?▼

Configure figma-developer-mcp with npx and provide a FIGMA_API_KEY environment variable from a Figma personal access token. In OpenCode, add it to .opencode/mcp.json; the skill also works without it using an exported JSON.

Can I use this workflow without the Figma MCP integration?▼

Yes, the MCP server is optional. If it is unavailable, export the variables JSON from Figma manually and the sync flow compares that file against the repository tokens instead.

What happens when a design token is deleted in Figma?▼

Deleted or renamed tokens are flagged as orphaned in the sync report and are never removed automatically. The skill requires explicit confirmation from design or product before deleting any token in active use.

Why does the token build fail after editing JSON files?▼

Build failures usually come from JSON syntax errors or invalid formatting. Run npx prettier --check on the token files and a Node.js JSON.parse validation before running pnpm build:tokens to catch errors early.

Related Skills

Explore More Design & Creative Skills→
reason-machinesreason-machines
4

figma-console-mcp-skills

Automates Figma design token export, WCAG linting, and component documentation via MCP scripts.

Official
Advanced
SpinBoxxSpinBoxx

visual-design-foundations

Establish typography, color, spacing, and iconography rules for consistent UIs.

Community
Intermediate
yonetim258852yonetim258852

generate-ui-from-brand

Convert a URL or DESIGN.md into a structured UI specification with design tokens.

Community
Advanced
elsolalelsolal
1

figma-generate-design

Create or update full-page Figma screens using published design system components.

Community
Advanced