
Token Map
FreeAutomate Figma and code token mapping to design systems.
Free · Opens the source repo
What Token Map does
Token Map is a specialized tool designed for developers and designers who need to streamline the process of mapping tokens from Figma or source code into an active design system. This skill generates a deterministic mapping that can be consumed during the design generation stage, ensuring that every token is accounted for in a structured manner. By leveraging this tool, teams can reduce the manual effort involved in token migration, thereby increasing efficiency and consistency across design projects.
The skill requires input tokens from either Figma or code, specifically formatted as JSON files. It reads from the active design system's context and produces several output files, including mappings for colors, typography, and spacing. Importantly, it also generates an unmatched tokens list, allowing for human review of any tokens that could not be mapped. This transparency is crucial for maintaining design integrity and ensuring that no tokens are silently discarded or incorrectly mapped.
One of the key features of Token Map is its semantic inference capability. It intelligently analyzes the context in which tokens are used, inferring their roles based on evidence from the design. This means that anonymous tokens, which typically lack clear identifiers, can be accurately associated with their intended design functions. For example, a token named color-3 may be mapped to a primary color if sufficient contextual evidence supports that role. This reduces ambiguity and enhances the quality of the mapping process.
The tool is particularly beneficial in environments where Figma and design systems are frequently updated, as it automates the tedious aspects of token management. By ensuring that every token is either mapped or documented as unmatched, it provides a clear audit trail for designers and developers alike. This skill is essential for teams looking to maintain a robust design system while minimizing the overhead associated with token migrations.
When to use it
Use this skill when migrating design tokens from Figma or code to ensure accurate and efficient mapping to your design system.
When not to use it
This tool may not be suitable for projects that do not utilize Figma or have a very different token structure that does not align with the expected input format.
What you can build with it
Migrating Figma Tokens to Design System
When transitioning design assets from Figma to a design system, Token Map automates the token mapping process, ensuring consistency.
Handling Anonymous Tokens
In cases where Figma exports anonymous tokens, this skill infers their roles based on contextual evidence, improving mapping accuracy.
Auditing Token Migrations
The unmatched tokens output allows teams to review and make informed decisions on any tokens that could not be mapped, enhancing oversight.
How to install Token Map
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/token-map --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioToken map
Spec §10 / §21.3.1: every figma-migration / code-migration run crosses the same boundary — "the source has its own tokens; the target uses the active OD design system; we need a deterministic mapping". This atom produces that mapping.
Inputs
figma/tokens.jsonfromfigma-extract(figma-migration), ORcode/tokens.jsonfromdesign-extract(code-migration).- The active design system DESIGN.md (already injected into the prompt; the atom reads from the staged design-system context).
Output
project-cwd/
└── token-map/
├── colors.json # { source: '#hex' | 'tokenName', target: '--ds-token' }[]
├── typography.json # font + size + weight pairings
├── spacing.json # spacing scale crosswalk
├── unmatched.json # { source: ..., reason: 'no-target-equivalent' }[]
└── meta.json # { sourceKind: 'figma' | 'code', generatedAt, atomDigest }
unmatched.json is the audit list a human reviews; the agent must
not invent target tokens silently.
Semantic token inference
Figma often exports anonymous source names such as color-3,
paint/17, or raw #5B8DEF. Do not ask the user to rename those
before mapping. First infer the semantic role from usage evidence:
- Node path, component name, instance overrides, variant/state labels,
frame name, layer name, and nearby text such as
Primary,Selected,Link,Error,Focus,Nav,Button, orCTA. - CSS-like position in the rendered tree: background fill, foreground text/icon, border, divider, overlay, shadow tint, focus ring, status badge, chart series, or brand/accent treatment.
- Contrast relationships: a color paired repeatedly with the main canvas is likely foreground; one paired with foreground inside CTA components is likely primary/accent background; a thin outline around interactive elements is likely border or focus-ring.
- Reuse topology: a value that appears across primary buttons,
selected tabs, and active nav items is stronger evidence for
--ds-color-primarythan a value that appears once in an illustration.
Use that role evidence to choose among existing active design-system
tokens and to decide whether an anonymous token should be renamed or
left unmatched before the executable mapping pass. Keep the on-disk
token-map contract unchanged: the atom still writes the existing bucket
files, unmatched.json, and meta.json only.
For example, this is a useful reasoning note for deciding whether
color-3 should map to the active primary token:
{
"source": "color-3",
"value": "#5B8DEF",
"role": "primary",
"targetCandidates": ["--ds-color-primary", "--ds-color-link"],
"evidence": [
"Button/Primary fill",
"Selected tab indicator",
"Link text in Settings frame"
]
}
Then map to an active design-system token only when the evidence is
role-based, not value-only. If the top candidates are too close to
call, or if the evidence points to conflicting roles (primary vs
link vs focus-ring), leave the source token unmatched using the
existing no-target-equivalent reason and include the competing
candidates in the hint. This keeps automation useful for common
anonymous-token cases while preserving human review for ambiguous
brand decisions.
Before / after expectation
Without semantic inference, an anonymous Figma token can only produce an uncertain value-level mapping:
{
"source": "color-3",
"value": "#5B8DEF",
"target": null,
"reason": "no-target-equivalent"
}
With semantic inference, the same token should carry role evidence before it is accepted:
{
"source": "color-3",
"value": "#5B8DEF",
"target": "--ds-color-primary",
"via": "name"
}
This deterministic v1 atom does not claim a measured accuracy lift by
itself. Treat the expected improvement as coverage of previously
manual anonymous-token cases when the Figma tree contains enough role
evidence. Real accuracy numbers require a fixture suite with known
source tokens, expected semantic roles, and a before/after agent run.
See examples/semantic-inference-before-after.json for a deterministic
same-token-batch simulation that compares the old value-level output
with the semantic inference output.
Convergence
The atom completes when every input token is either mapped or
explicitly recorded under unmatched.json with a non-empty
reason. The until evaluator reads tokens.unmatched.length === 0
on strict mode; default is "soft converge" (proceed with
unmatched.json populated).
Anti-patterns the prompt fragment forbids
- Injecting a new token into DESIGN.md without explicit user
approval (use a
confirmationGenUI surface for that). - Mapping hex colours by visual proximity alone; perceptual ΔE thresholds belong in the visual-diff evaluator (Phase 7).
- Collapsing distinct source tokens onto the same target token
silently; record collisions in
unmatched.jsonwith reasontarget-collision.
Status
Implemented by the daemon runner in
apps/daemon/src/plugins/atoms/token-map.ts. It parses design-system tokens,
performs deterministic mapping, and writes the mapped and unmatched outputs.
Frequently asked questions about Token Map
Similar skills
Design System
Streamline design token management and presentation generation.
Visual Style
Create and apply portable visual design systems effortlessly.
Paperclip Design Guide
Build consistent, reusable UI components with ease.
Design Brief
Transform vague design requests into structured specs.
Kami Landing
Create professional single-page documents effortlessly.
Design System Starter
Build scalable and accessible design systems efficiently.
