Skip to main content

figma-query - Figma Design Extraction

figma-query extracts complete design libraries from Figma with adversarial quality verification, enabling design-to-code workflows.

Why figma-query?​

Design to Code Pipeline

Extract Figma designs and generate implementation-ready HTML/CSS with automatic verification of asset accuracy and documentation completeness.

Key Features​

  • 🎨 Design Extraction: Extract complete design libraries from Figma
  • 📝 Documentation: Generate comprehensive component documentation
  • ✅ Asset Verification: Adversarial verification of extracted assets
  • 🌐 HTML Generation: Create implementation-ready HTML mockups

Installation​

# Install from marketplace
claude mcp add-dir https://github.com/standardbeagle/standardbeagle-tools
claude mcp add figma-query --source ./plugins/figma-query

Prerequisites​

  • Figma Access Token: Required for API access
  • Figma File Key: The file to extract from

Setup​

# Set up figma-query MCP
/setup-figma

Available Skills​

SkillDescription
setup-figmaConfigure figma-query MCP with SLOP and access token

Agents​

library-extractor​

Main agent for extracting complete design libraries from Figma with adversarial quality verification.

Workflow:

  1. Connect to Figma API
  2. Extract component definitions
  3. Extract design tokens
  4. Verify completeness
  5. Generate structured output

component-documenter​

Generate comprehensive documentation for extracted Figma components.

Output includes:

  • README with usage examples
  • API reference
  • Props/variants documentation
  • Accessibility notes

asset-verifier​

Adversarial verification agent that validates:

  • Extracted asset accuracy
  • CSS correctness
  • Documentation completeness
  • Cross-references

html-generator​

Generate implementation-ready HTML mockups from extracted Figma components and pages.

Features:

  • Responsive layouts
  • CSS extraction
  • Component composition
  • Page-level templates

Hooks​

figma-query includes tracking hooks:

HookScriptPurpose
SubagentStop (library-extractor)track-extraction.jsTrack extraction completion
SubagentStop (component-documenter)track-documentation.jsTrack doc generation
SubagentStop (asset-verifier)track-verification.jsTrack verification
SubagentStop (html-generator)track-html-gen.jsTrack HTML generation
PostToolUse (Task)track-subagent-spawn.jsTrack subagent spawns

Usage Examples​

Extract Design Library​

# In Claude Code session, use the library-extractor agent
# Provide Figma file key and output directory

Generate Documentation​

# After extraction, use component-documenter
# Generates README, usage examples, API reference

Verify Assets​

# Run asset-verifier for quality check
# Validates CSS accuracy, completeness, documentation

Generate HTML​

# Use html-generator for implementation-ready mockups
# Creates responsive HTML with extracted styles

Output Structure​

extracted-design/
├── components/
│   ├── Button/
│   │   ├── component.json
│   │   ├── styles.css
│   │   └── README.md
│   ├── Card/
│   └── Modal/
├── tokens/
│   ├── colors.json
│   ├── typography.json
│   └── spacing.json
├── pages/
│   ├── Homepage.html
│   └── Dashboard.html
└── README.md

Configuration​

Environment Variables​

# Figma access token
export FIGMA_ACCESS_TOKEN="your-token"

# Default output directory
export FIGMA_OUTPUT_DIR="./design-system"

MCP Configuration​

{
  "mcpServers": {
    "figma-query": {
      "command": "npx",
      "args": ["-y", "figma-query-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}

State Tracking​

Extraction state is tracked in .claude/figma-extraction-state.json:

{
  "extraction_iterations": 2,
  "documentation_iterations": 1,
  "verification_iterations": 1,
  "html_gen_iterations": 1,
  "status": "complete",
  "subagent_spawns": 4
}

Quality Verification​

The adversarial verification process checks:

  1. Component Completeness

    • All variants extracted
    • Props documented
    • States covered

  2. CSS Accuracy

    • Colors match design tokens
    • Typography correct
    • Spacing consistent

  3. Documentation Quality

    • Usage examples provided
    • Edge cases documented
    • Accessibility noted

  4. HTML Accuracy

    • Responsive behavior
    • Component composition
    • Cross-browser compatibility

Troubleshooting​

Figma API Errors​

# Verify token is valid
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" https://api.figma.com/v1/me

# Check file access
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" https://api.figma.com/v1/files/FILE_KEY

Incomplete Extraction​

  1. Check file permissions in Figma
  2. Verify all pages are accessible
  3. Ensure components are properly named

CSS Discrepancies​

  1. Review design token mapping
  2. Check for auto-layout vs. absolute positioning
  3. Verify responsive breakpoint settings

Version History​

VersionChanges
0.1.0Initial release with extraction, documentation, verification, and HTML generation