Agent skill · design visual · jeremylongshore
figma-core-workflow-a
Extract design tokens, colors, typography, and spacing from Figma files
Why this skill is useful
Provides specific commands and workflows for extracting design tokens from Figma files that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. Requires figma account access. About 3k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Figma Core Workflow A -- Design Token Extraction Overview The primary workflow for Figma API integrations: extracting design tokens (colors, typography, spacing) from a Figma file and converting them to CSS custom properties, JSON tokens, or Tailwind config. Prerequisites Completed figma-install-auth setup A Figma file with published styles or variables FIGMAPAT and FIGMAFILEKEY env vars set Instructions Step 1: Fetch Styles from a File Step 2: Resolve Style Values from Nodes Step 3: Extract Typography Tokens Step 4: Generate CSS Custom Properties Step 5: Use Variables API (Enterprise) Output Design tokens extracted from Figma styles or variables CSS custom properties file generated Color values converted from Figma's 0-1 float format to hex/rgba Typography properties mapped to CSS-compatible values Error Handling Error Cause Solution ------- ------- ---------- Empty styles map File has no published styles Publish styles in Figma first null node in response Node was deleted Filter nulls before processing 403 on variables endpoint Not Enterprise plan Use styles endpoint instead Color looks wrong Forgot 0-1 to 0-255 conversion Multiply by 255 before hex Examples Extract every fill color used by published styles and emit CSS custom properties: Feed those node IDs to /v1/files/:key/nodes?ids=... and run the Step 4 generator to produce: Full token-extraction walkthrough: references/extract-typography-tokens.md and references/generate-css-custom-properties.md. Resources Figma File Endpoints Figma Variables API Design Tokens Format Next Steps For asset export, see figma-core-workflow-b.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/figma-core-workflow-a--507d4e