Figma Desktop Skill

Figma Desktop Skill

Extract and process Figma design data for design-to-code implementation in the IRIS project.

Capabilities

REST API Scripts

Node.js scripts that extract Figma data (requires FIGMA_TOKEN):

• extract-frames.js - Extract all frames from a Figma page
• get-metadata.js - Get node structure and hierarchy
• get-screenshot.js - Capture node screenshots
• get-variable-defs.js - Extract design tokens (colors, text styles, variables)
• get-annotations.js - Get dev mode annotations and handoff notes
• get-code-connect-map.js - Get Figma component metadata for code mapping
• get-figjam.js - Extract FigJam board content (sticky notes, shapes, text)
• compare-frames.js - Compare current vs documented frames

Setup

Figma Token

1. Go to https://www.figma.com/settings
2. Generate Personal Access Token
3. Set environment variable:

   # Windows (PowerShell)
   $env:FIGMA_TOKEN="your-token"
   
   # Windows (CMD)
   set FIGMA_TOKEN=your-token
   
   # Mac/​Linux
   export FIGMA_TOKEN="your-token"
   

IRIS Project File Key

xFC8eCJcSwB9EyicTmDJ7w

Usage

Extract Frames

node .claude/​skills/​figma-desktop/​scripts/​extract-frames.js xFC8eCJcSwB9EyicTmDJ7w 2501:2715

Get Metadata

node .claude/​skills/​figma-desktop/​scripts/​get-metadata.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742

Get Screenshot

node .claude/​skills/​figma-desktop/​scripts/​get-screenshot.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742

Get Design Tokens

node .claude/​skills/​figma-desktop/​scripts/​get-variable-defs.js xFC8eCJcSwB9EyicTmDJ7w

Get Annotations

node .claude/​skills/​figma-desktop/​scripts/​get-annotations.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742

Get Code Connect Mapping

node .claude/​skills/​figma-desktop/​scripts/​get-code-connect-map.js xFC8eCJcSwB9EyicTmDJ7w

Get FigJam Content

node .claude/​skills/​figma-desktop/​scripts/​get-figjam.js xFC8eCJcSwB9EyicTmDJ7w 123:456

Compare Frames

# First extract current frames
node .claude/​skills/​figma-desktop/​scripts/​extract-frames.js xFC8eCJcSwB9EyicTmDJ7w 2501:2715

# Then compare with documented frames
node .claude/​skills/​figma-desktop/​scripts/​compare-frames.js

Output Files

Scripts create temporary files in project root:

• temp-frames-list.json - Frame list
• temp-metadata-*.json - Node metadata
• temp-design-tokens-*.json - Design tokens
• temp-annotations-*.json - Annotations data
• temp-code-connect-*.json - Component mappings
• temp-figjam-*.json - FigJam content
• temp-comparison-report.json - Frame comparison
• screenshot-*.png - Screenshots

Clean up with:

rm temp-*.json screenshot-*.png

Integration

This skill integrates with IRIS documentation:

• Frame mapping: docs/​figma/​frame-node-mapping.json
• Screenshots: docs/​figma/​screenshots/
• Design tokens: docs/​figma/​design-system-mapping.json

When to Use This Skill

Use this skill when:

• Implementing UI components from Figma designs
• Extracting design tokens for the design system
• Updating frame mappings after Figma changes
• Generating screenshots for documentation
• Extracting FigJam brainstorming content
• Getting dev handoff notes and annotations
• Automating batch operations on Figma data
• Running in CI/​CD pipelines

Node ID Format

Node IDs can be in either format:

• Colon format: 2501:2715 (API format)
• Dash format: 2501-2715 (URL format)

Scripts automatically convert between formats as needed.

File Keys

Find the file key in any Figma URL:

https://figma.com/​design/<FILE_KEY>/​...

Figma API Key

Use environment variable FIGMA_TOKEN or claude.env.FIGMA_KEY