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

Generate your token at https://www.figma.com/settings → Personal Access Tokens

The scripts look for the token in this order:

•CLI argument (passed directly to script)
•FIGMA_TOKEN environment variable
•FIGMA_KEY environment variable
•Claude user settings (~/.claude/settings.json)

Recommended: Claude Settings (persists across sessions)

Add to ~/.claude/settings.json:

json

{
  "env": {
    "FIGMA_KEY": "your-figma-token"
  }
}

Alternative: Environment Variable

bash

# 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

code

xFC8eCJcSwB9EyicTmDJ7w

Usage

Extract Frames

bash

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

Get Metadata

bash

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

Get Screenshot

bash

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

Get Design Tokens

bash

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

Get Annotations

bash

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

Get Code Connect Mapping

bash

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

Get FigJam Content

bash

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

Compare Frames

bash

# 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:

bash

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:

code

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

Token Resolution

Scripts automatically resolve the Figma token from:

•CLI argument
•FIGMA_TOKEN env var
•FIGMA_KEY env var
•~/.claude/settings.json → env.FIGMA_KEY