figma
Figma design tools for extracting specs and implementing pixel-perfect designs.
Setup
1. Get a Figma API token
- Go to Figma Account Settings
- Generate a new Personal Access Token
- Required scopes:
file_read - Optional scopes:
file_variables:read(needed forget-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.