skills-software-development/figma/README.md

figma

Figma design tools for extracting specs and implementing pixel-perfect designs.

Setup

1. Get a Figma API token

1. Go to Figma Account Settings
2. Generate a new Personal Access Token
3. Required scopes: file_read
4. Optional scopes: file_variables:read (needed for get-variable-definitions)

2. Configure the token

Create a .env.tools file in your project root:

FIGMA_ACCESS_TOKEN=your_token_here

Make sure .env.tools is in your .gitignore — never commit tokens.

3. Verify it works

node figma/scripts/whoami.mjs --verbose

You should see your Figma user info if the token is valid.

Available Scripts

Script	Description
whoami.mjs	Verify API token authentication
get-design-context.mjs	Extract layout, spacing, colors, typography
get-metadata.mjs	Get node hierarchy and constraints
get-screenshot.mjs	Generate visual screenshots from designs
get-code-connect-map.mjs	Check which components are linked to code
get-variable-definitions.mjs	Extract design tokens (colors, spacing, typography)

Usage

See SKILL.md for the full workflow on how these tools are used together.