skills.rest
aziontech
aziontechOFFICIAL
Explore all skills by this author →
Website𝕏@aziontechGitHub

token-map

Map Figma token JSON variables to DESIGN.md semantic tokens and classes.

2|5|Updated Oct 24, 2023
Search Tags:#design system#markdown generation#token mapping#ui documentation#spec creation#figma tokens#semantic theming
One-click install
npx skills add https://github.com/aziontech/webkit --skill token-map
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-map
Source: https://github.com/aziontech/webkit/tree/main/.claude/skills/token-map
Command: npx skills add https://github.com/aziontech/webkit --skill token-map

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the manual, error-prone work of translating a Figma token JSON export into the exact DESIGN.md token classes and var(--*) semantic tokens your spec process expects.

Core Features & Use Cases

  • Deterministic token mapping: Converts each Figma variable into an exact DESIGN.md destination (either a semantic var like var(--bg-surface) or a generated class like .text-heading-md), without fuzzy matching.
  • Theme gap detection: Flags any Figma variable that has no exact equivalent in DESIGN.md as a theme gap and suggests the closest primitive placeholder for follow-up tokenization.
  • Workflow-ready outputs: Produces two stdout Markdown tables for token mapping and theme gaps to be directly consumed during component/spec creation.

Quick Start

Use the token-map skill with the JSON blob from figma-discover and the canonical .claude/docs/DESIGN.md to generate the token mapping and theme gaps tables.

Frequently Asked Questions about token-map

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

FAQPage Schema
How do I map Figma token JSON variables to semantic CSS tokens?▼

You map Figma token JSON variables to semantic CSS tokens by resolving each variable into an exact var(--*) destination or .text-* class without fuzzy matching. This deterministic token mapping process eliminates manual translation errors when populating your spec's Tokens table.

What happens to unmapped Figma variables during semantic token generation?▼

Unmapped Figma variables during semantic token generation are flagged as theme gaps. The process suggests the closest primitive placeholder for follow-up tokenization, ensuring no variable is silently ignored while producing the token mapping tables.

Can I use this token mapping process with Tailwind fallbacks for missing colors?▼

No, you cannot use Tailwind fallbacks for missing colors with this token mapping process. It produces no HEX, RGB, or Tailwind fallbacks, requiring exact var(--*) matches or flagging the variables as unmapped theme gaps in the output tables.

Do I need a DESIGN.md catalog to generate Figma token mappings?▼

Yes, you need a canonical DESIGN.md catalog to generate Figma token mappings. The process verifies against this authoritative document to resolve variables into exact semantic tokens or .text-* classes, rejecting invalid inputs with missing variables.

What is the best way to convert Figma tokens into UI documentation?▼

The best way to convert Figma tokens into UI documentation is using a deterministic mapper that outputs two stdout Markdown tables for token mapping and theme gaps. This workflow-ready output is directly consumed during component spec creation.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
jacob-balslevjacob-balslev
1

theme-system-design

Design three-tier theme token contracts with CSS custom properties for runtime theming.

Community
Advanced
giruclawbotgiruclawbot

tailwind-4

Codify Tailwind CSS className usage with cn() and semantic classes.

Community
Intermediate
CenturyLinkCenturyLink
17

chi-search

Search Chi Design System elements using natural language and synonym matching.

Official
Intermediate