46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
# 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](https://www.figma.com/developers/api#access-tokens)
|
|
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
|
|
|
|
```bash
|
|
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.
|