jrpease

Sync Figma Tokens — Design skill for Claude Code

Design community

Re-run the Figma-to-code token sync — extract current Figma variables, rebuild code outputs via Style Dictionary, and open a PR with the changes for review.

How to install Sync Figma Tokens

Installs to ~/.claude/skills/jrpease-throughline-sync-figma-tokens/SKILL.md

Terminal

mkdir -p ~/.claude/skills/jrpease-throughline-sync-figma-tokens && curl -fsSL https://raw.githubusercontent.com/jrpease/throughline/HEAD/commands/sync-figma-tokens.md -o ~/.claude/skills/jrpease-throughline-sync-figma-tokens/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Sync Figma Tokens does

description: Re-run the Figma-to-code token sync — extract current Figma variables, rebuild code outputs via Style Dictionary, and open a PR with the changes for review.

Re-run the token sync pipeline to catch any updates made in Figma.

Follow the `token-sync-layer` skill's pipeline using the settings already recorded in `design-system.json` (`sync.platforms`, `figma.mechanism`, `figma.fileKey`) — don't re-ask configuration that's already set. Specifically:

Verify Figma is connecte

Alternatives in Design

Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Design Handoff — Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and produ 309 ★