Rename use-figma to figma
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# use-figma
|
||||
# figma
|
||||
|
||||
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
|
||||
|
||||
```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.
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: use-figma
|
||||
name: figma
|
||||
description: >
|
||||
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,
|
||||
@@ -8,11 +8,11 @@ description: >
|
||||
|
||||
# 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
|
||||
|
||||
- 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).
|
||||
|
||||
## When to use this skill
|
||||
@@ -33,21 +33,21 @@ Use when:
|
||||
|
||||
```bash
|
||||
# 1. Verify token works
|
||||
node use-figma/scripts/whoami.mjs --verbose
|
||||
node figma/scripts/whoami.mjs --verbose
|
||||
|
||||
# 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/..." \
|
||||
--include-images \
|
||||
--verbose
|
||||
|
||||
# 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/..." \
|
||||
--verbose
|
||||
|
||||
# 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/..." \
|
||||
--format png \
|
||||
--scale 2 \
|
||||
@@ -80,7 +80,7 @@ Use when:
|
||||
|
||||
```bash
|
||||
# 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> \
|
||||
--verbose
|
||||
```
|
||||
@@ -104,7 +104,7 @@ Use when:
|
||||
|
||||
```bash
|
||||
# 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> \
|
||||
--include-styles true \
|
||||
--verbose
|
||||
Reference in New Issue
Block a user