figma-local 1.3.0 → 1.4.0

package/README.md

@@ -395,7 +395,7 @@ fig-start --safe --here     # launch from your project dir; Claude sees both you
 
 ## Claude Code Plugin (Skills)
 
-figma-local ships as a Claude Code plugin with 6 skills that teach coding agents how to use it automatically:
+figma-local ships as a Claude Code plugin with 8 skills that teach coding agents how to use it automatically:
 
 | Skill | Triggers on |
 |-------|------------|
@@ -405,6 +405,8 @@ figma-local ships as a Claude Code plugin with 6 skills that teach coding agents
 | **figma-styles** | "style guide", "extract colors/fonts", "spacing scale" |
 | **figma-measure** | "measure spacing", "gap between elements" |
 | **figma-document** | "document this component", "full spec sheet", "deep breakdown" |
+| **figma-screenshot** | "take a screenshot", "export as PNG/SVG", "capture this" |
+| **figma-compare** | "compare", "does this match", "visual diff", "check against design" |
 
 ### Install the skills
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-local",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Control Figma Desktop with Claude Code. Smart read, write, and AI-prompt export. No API key required.",
   "author": "elvke",
   "license": "MIT",

package/skills/figma-compare/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: figma-compare
+description: |
+  Use this skill when the user wants to visually compare two things — two Figma elements, a screenshot vs a Figma component, two screenshots, or a design vs coded output. Triggers on: "compare", "diff", "does this match", "check against", "visual comparison", "how close is this", "spot the differences", "compare design to code", "compare these two", "are they the same". Also use when verifying coded UI matches a Figma design. Requires the fig CLI to be connected.
+allowed-tools:
+  - Bash(fig compare *)
+  - Bash(fig compare)
+  - Bash(fig verify *)
+  - Bash(fig verify)
+  - Bash(fig screenshot *)
+  - Bash(fig screenshot)
+  - Read
+---
+
+# Figma Compare
+
+Visually compare any two sources: Figma selections, node IDs, Figma links, or screenshot files. Outputs both images and a structured gap report template for analysis.
+
+## Prerequisites
+
+The `fig` CLI must be connected. Check with `fig daemon status`. If not connected: `fig connect --safe`.
+
+## Usage
+
+### Compare current selection vs a node
+
+```bash
+fig compare --a selection --b "123:456"
+```
+
+### Compare two screenshot files
+
+```bash
+fig compare --a design.png --b coded-output.png
+```
+
+### Compare a screenshot file vs a Figma node
+
+```bash
+fig compare --a screenshot.png --b "123:456"
+```
+
+### Compare two Figma links
+
+```bash
+fig compare --a-link "https://www.figma.com/...?node-id=1-2" --b-link "https://www.figma.com/...?node-id=3-4"
+```
+
+### Compare selection vs a Figma link
+
+```bash
+fig compare --a selection --b-link "https://www.figma.com/...?node-id=123-456"
+```
+
+### Compare two nodes by ID
+
+```bash
+fig compare --a "123:456" --b "789:012"
+```
+
+## Source types
+
+The `--a` and `--b` options accept three source types:
+
+| Source | Example | Description |
+|--------|---------|-------------|
+| `selection` | `--a selection` | Whatever is currently selected in Figma |
+| Node ID | `--a "123:456"` | A specific Figma node by its ID |
+| File path | `--a design.png` | An existing screenshot/image file on disk |
+
+For Figma selection URLs, use `--a-link` / `--b-link` instead.
+
+## Options
+
+```bash
+fig compare --a selection --b "123:456" -s 2         # 2x scale for exports
+fig compare --a selection --b "123:456" --max 3000    # Max dimension 3000px
+fig compare --a selection --b "123:456" --save-dir .  # Save images to current dir
+```
+
+## Output
+
+The command exports both sources as PNG images (saved to `/tmp/` by default) and outputs:
+
+1. **File paths** for both images — use `Read` tool to view them
+2. **Structured JSON** with a gap report template:
+   - `matches` — elements that are the same
+   - `differences` — table of element, property, value in A, value in B, severity
+   - `summary` — overall assessment
+
+## Workflow: Design vs Code Comparison
+
+1. Take a screenshot of the coded output (browser screenshot or `fig screenshot`)
+2. Get the Figma node ID or link for the original design
+3. Run compare:
+   ```bash
+   fig compare --a coded-output.png --b-link "https://www.figma.com/...?node-id=123-456"
+   ```
+4. Read both output images to visually analyze differences
+5. Use `fig inspect` on the Figma node to get exact specs for fixing differences
+
+## Workflow: Before/After Comparison
+
+1. Screenshot the current state: `fig screenshot --node "123:456" -o before.png`
+2. Make changes in Figma
+3. Compare: `fig compare --a before.png --b "123:456"`
+
+## Verify command (simpler alternative)
+
+For quick verification of a single element without a full comparison:
+
+```bash
+fig verify                              # Screenshot selection for AI review
+fig verify --node "123:456"             # Verify specific node
+fig verify --link "https://..."         # Verify from Figma link
+fig verify --compare "https://..."      # Compare against a prototype URL
+```
+
+## Tips
+
+- Use `--save-dir .` to save comparison images in your project directory instead of `/tmp/`
+- For AI-powered analysis, read both output images with the `Read` tool after running compare
+- Combine with `fig inspect --deep` on the Figma source to get exact specs for fixing any differences
+- When comparing design to code, screenshot the browser at the same viewport width as the Figma frame for best results

package/skills/figma-screenshot/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: figma-screenshot
+description: |
+  Use this skill when the user wants to take a screenshot or export an image from Figma — current selection, a specific node, or from a Figma link. Triggers on: "screenshot", "take a screenshot", "export as PNG", "export as SVG", "capture this", "save as image", "export this frame", "get an image of". Requires the fig CLI to be connected.
+allowed-tools:
+  - Bash(fig screenshot *)
+  - Bash(fig screenshot)
+---
+
+# Figma Screenshot
+
+Export any Figma element as an image (PNG, JPG, SVG, or PDF).
+
+## Prerequisites
+
+The `fig` CLI must be connected. Check with `fig daemon status`. If not connected: `fig connect --safe`.
+
+## Usage
+
+### Screenshot current selection
+
+The user must select an element in Figma first, then:
+
+```bash
+fig screenshot
+```
+
+Saves to `screenshot.png` in the current directory by default.
+
+### Screenshot from a Figma link
+
+```bash
+fig screenshot --link "https://www.figma.com/design/FILEID/Name?node-id=123-456"
+```
+
+### Screenshot a specific node by ID
+
+```bash
+fig screenshot --node "123:456"
+```
+
+### Options
+
+```bash
+fig screenshot -o design.png          # Custom output file name
+fig screenshot -s 2                   # 2x scale (default is 2)
+fig screenshot -s 4                   # 4x scale for high-res
+fig screenshot -f svg                 # SVG format
+fig screenshot -f jpg                 # JPG format
+fig screenshot -f pdf                 # PDF format
+```
+
+### Combine options
+
+```bash
+fig screenshot --link "https://..." -o hero-section.png -s 3
+fig screenshot --node "123:456" -f svg -o icon.svg
+```
+
+## Export a specific node by ID (alternative)
+
+```bash
+fig export node "123:456"                    # PNG at 2x
+fig export node "123:456" -f svg -o out.svg  # SVG
+```
+
+## Tips
+
+- Default scale is 2x which gives crisp images on retina displays
+- Use `-s 1` for pixel-accurate exports (1:1 with Figma dimensions)
+- SVG format is best for icons and vector graphics
+- For AI verification of created components, use `fig verify` instead (optimized for smaller file size)
+- Screenshots can be used with `fig compare` to visually diff against other screenshots or Figma nodes