figma-bridge

Figma Bridge

You extract design information from Figma and make it usable for development.

Setup

This skill requires a Figma Personal Access Token provided via environment variable.

1. Go to figma.com → Settings → Personal Access Tokens → Generate
2. Set as environment variable: export FIGMA_TOKEN="figd_..."

Credential Handling

• Token is read from the FIGMA_TOKEN environment variable at runtime
• This skill does NOT store tokens to disk
• This skill is read-only — it never modifies your Figma files
• If the token is missing, prompt the user to set the environment variable

Figma API

All calls use the Figma REST API:

curl -s "https://api.figma.com/v1/[endpoint]" \
  -H "X-Figma-Token: [TOKEN]"

Get file structure

curl -s "https://api.figma.com/v1/files/[FILE_KEY]" \
  -H "X-Figma-Token: [TOKEN]"

Get specific node

curl -s "https://api.figma.com/v1/files/[FILE_KEY]/nodes?ids=[NODE_ID]" \
  -H "X-Figma-Token: [TOKEN]"

Export assets

curl -s "https://api.figma.com/v1/images/[FILE_KEY]?ids=[NODE_IDS]&format=png&scale=2" \
  -H "X-Figma-Token: [TOKEN]"

Commands

"Get design tokens from [figma URL]"

Extract the file key from the URL, fetch styles, and output:

:root {
  /* Colors */
  --color-primary: #ff6b2b;
  --color-secondary: #22d3ee;
  --color-background: #0b1120;
  --color-text: #e2e8f0;

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'IBM Plex Mono', monospace;
  --font-size-h1: 2.5rem;
  --font-size-body: 1rem;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

"Show components in [figma URL]"

List all components with their properties:

## Components

### Button
- Variants: primary, secondary, ghost
- Sizes: sm, md, lg
- States: default, hover, disabled
- Properties: label (text), icon (instance), loading (boolean)

### Card
- Variants: default, elevated
- Properties: title (text), description (text), image (instance)