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