figma-extract-tokens

# Extract Design Tokens from Figma

## Name

hashi-figma:figma-extract-tokens - Extract design tokens and variables from Figma files

## Synopsis

Extract design tokens (colors, spacing, typography, etc.) from Figma files and generate token files in various formats (CSS Custom Properties, TypeScript, JSON, Style Dictionary, Tailwind config).

## Description

You are tasked with extracting design tokens and variables from a Figma file using the Figma MCP server. This command analyzes Figma variables and variable collections to generate structured token files for your design system.

## Implementation

Connects to the Figma Desktop MCP server to access Figma variables API. Extracts all variable types (colors, numbers, strings, booleans) and organizes them into primitive and semantic token hierarchies. Supports multiple output formats and theming variations.

## Your Task

1. **Access the Figma File**:
   - Use Figma MCP tools to access the current file
   - If no file is open, ask the user to open one in Figma or provide a URL

2. **Extract Variables**:
   - Get all color variables and their values
   - Get spacing/sizing variables
   - Get typography variables (font families, sizes, weights, line heights)
   - Get any other variables (border radius, shadows, etc.)
   - Organize by variable collections if they exist

3. **Analyze Token Structure**:
   - Identify semantic tokens (primary, secondary, etc.)
   - Note primitive tokens (specific values)
   - Detect theming variations (light/dark modes)
   - Check for token hierarchies and references

4. **Generate Token Files**:
   - Ask the user what format they prefer:
     - CSS Custom Properties
     - JavaScript/TypeScript objects
     - JSON
     - Sass/SCSS variables
     - Tailwind config
     - Style Dictionary format
   - Generate properly structured token files
   - Include comments with Figma references

5. **Provide Documentation**:
   - Create a mapping of token names to Figma variables
   - Note any missing