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.
|
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.
|
||||||
@@ -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
|
||||||
Reference in New Issue
Block a user