Rename use-figma to figma

This commit is contained in:
2026-03-03 16:58:07 +01:00
parent c5bf4b57e4
commit 7cee562c02
8 changed files with 11 additions and 11 deletions
+2 -2
View File
@@ -1,4 +1,4 @@
# use-figma # figma
Figma design tools for extracting specs and implementing pixel-perfect designs. Figma design tools for extracting specs and implementing pixel-perfect designs.
@@ -24,7 +24,7 @@ Make sure `.env.tools` is in your `.gitignore` — never commit tokens.
### 3. Verify it works ### 3. Verify it works
```bash ```bash
node use-figma/scripts/whoami.mjs --verbose node figma/scripts/whoami.mjs --verbose
``` ```
You should see your Figma user info if the token is valid. You should see your Figma user info if the token is valid.
+9 -9
View File
@@ -1,5 +1,5 @@
--- ---
name: use-figma name: figma
description: > description: >
Fetch Figma design specs for pixel-perfect implementation. Triggers - Figma URL provided, Fetch Figma design specs for pixel-perfect implementation. Triggers - Figma URL provided,
match the design, implement this Figma, from the mockup, design specs, pixel-perfect, match the design, implement this Figma, from the mockup, design specs, pixel-perfect,
@@ -8,11 +8,11 @@ description: >
# Figma Design Tools # Figma Design Tools
This skill ships with Figma helper scripts under `use-figma/scripts/`. This skill ships with Figma helper scripts under `figma/scripts/`.
## Prerequisites ## Prerequisites
- Set `FIGMA_ACCESS_TOKEN` in a `.env.tools` file at the project root (see `use-figma/README.md`). - Set `FIGMA_ACCESS_TOKEN` in a `.env.tools` file at the project root (see `figma/README.md`).
- Use the scripts from this skill directory (do not assume a `js/bin` folder). - Use the scripts from this skill directory (do not assume a `js/bin` folder).
## When to use this skill ## When to use this skill
@@ -33,21 +33,21 @@ Use when:
```bash ```bash
# 1. Verify token works # 1. Verify token works
node use-figma/scripts/whoami.mjs --verbose node figma/scripts/whoami.mjs --verbose
# 2. Get layout, spacing, colors, typography # 2. Get layout, spacing, colors, typography
node use-figma/scripts/get-design-context.mjs \ node figma/scripts/get-design-context.mjs \
--url "https://www.figma.com/design/..." \ --url "https://www.figma.com/design/..." \
--include-images \ --include-images \
--verbose --verbose
# 3. Get node hierarchy and constraints # 3. Get node hierarchy and constraints
node use-figma/scripts/get-metadata.mjs \ node figma/scripts/get-metadata.mjs \
--url "https://www.figma.com/design/..." \ --url "https://www.figma.com/design/..." \
--verbose --verbose
# 4. Get a visual screenshot for reference # 4. Get a visual screenshot for reference
node use-figma/scripts/get-screenshot.mjs \ node figma/scripts/get-screenshot.mjs \
--url "https://www.figma.com/design/..." \ --url "https://www.figma.com/design/..." \
--format png \ --format png \
--scale 2 \ --scale 2 \
@@ -80,7 +80,7 @@ Use when:
```bash ```bash
# Check which Figma components are already linked to code # Check which Figma components are already linked to code
node use-figma/scripts/get-code-connect-map.mjs \ node figma/scripts/get-code-connect-map.mjs \
--file-key <FILE_KEY> \ --file-key <FILE_KEY> \
--verbose --verbose
``` ```
@@ -104,7 +104,7 @@ Use when:
```bash ```bash
# Get design tokens (colors, spacing, typography variables) # Get design tokens (colors, spacing, typography variables)
node use-figma/scripts/get-variable-definitions.mjs \ node figma/scripts/get-variable-definitions.mjs \
--file-key <FILE_KEY> \ --file-key <FILE_KEY> \
--include-styles true \ --include-styles true \
--verbose --verbose