Rename use-figma to figma

2026-03-03 16:58:07 +01:00
parent c5bf4b57e4
commit 7cee562c02
8 changed files with 11 additions and 11 deletions
@@ -0,0 +1,45 @@
+# 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.