figma-use

name	figma-use
description	This skill should be used when the user asks to "create a Figma design", "design in Figma", "make a Figma mockup", "create an app icon", "design UI", "render JSX to Figma", "export from Figma", "modify Figma design", or mentions Figma design tasks. Controls Figma desktop via CLI with imperative commands and declarative JSX rendering.

figma-use

CLI tool to control Figma desktop app. Two modes: imperative commands and declarative JSX rendering. Installed at ~/.bun/bin/figma-use.

Connection

Figma must be running with remote debugging enabled.

# Check connection
figma-use me  # More reliable than `figma-use status` (which has a font-loading bug)

# If not connected, quit and relaunch Figma:
osascript -e 'tell application "Figma" to quit'
sleep 2
open -a Figma --args --remote-debugging-port=9222

Figma 126+ blocks the debug port. Run figma-use patch once to fix (click "Always Allow" on the keychain prompt). Re-run after Figma updates.

Alternative: figma-use daemon start --pipe launches Figma with a debug pipe (no patching needed).

Quick Reference

Imperative Commands

figma-use create frame --width 400 --height 300 --fill "#FFF" --layout VERTICAL --gap 16
figma-use create text --text "Hello" --font-size 24 --fill "#000"
figma-use create rect --width 100 --height 50 --fill "#F00" --radius 8
figma-use create icon mdi:home --size 32 --color "#3B82F6"
figma-use set fill <id> "#FF0000"
figma-use node move <id> --x 100 --y 200
figma-use export node <id> --output design.png
figma-use export screenshot --output viewport.png

Declarative JSX

Props go directly on elements, NOT in style={{}}:

echo '<Frame p={24} gap={16} flex="col" bg="#FFF" rounded={12}>
  <Text size={24} weight="bold" color="#000">Title</Text>
  <Text size={14} color="#666">Description</Text>
</Frame>' | figma-use render --stdin --x 100 --y 200

Elements: Frame, Rectangle, Ellipse, Text, Line, Star, Polygon, Vector, Group, Icon, Image, Instance

Icons (150k+ from Iconify)

figma-use create icon lucide:star --size 48 --color "#F59E0B"

In JSX: <Icon name="mdi:home" size={24} color="#3B82F6" />

Key Rules

• Always use --x and --y to position renders. Never stack at (0, 0).
• Always verify visually after creating: figma-use export node <id> --output /tmp/check.png
• Zoom after creating: figma-use viewport zoom-to-fit <id>
• After initial render, use diffs or direct commands — do not re-render full JSX trees.
• Row layouts need explicit width: <Frame w={300} flex="row" gap={8}>
• Prefer human-readable output over --json to save tokens.

macOS App Icon Workflow

To create a macOS app icon in Figma:

1. Create a 1024x1024 frame with squircle corners (Apple uses cornerSmoothing={0.6}):

echo '<Frame w={1024} h={1024} bg="#3B82F6" rounded={220} cornerSmoothing={0.6}>
  <Frame w={1024} h={1024} flex="col" justify="center" items="center">
    <Icon name="lucide:terminal" size={512} color="#FFFFFF" />
  </Frame>
</Frame>' | figma-use render --stdin --x 0 --y 0

2. Export at required sizes and package with macOS tools:

figma-use export node <id> --output icon_1024.png --scale 1
# Then use sips + iconutil to create .icns

MCP Server

figma-use includes a built-in MCP server exposing 90+ tools. Already configured in Claude Code at http://localhost:38451/mcp.

Start before use: figma-use mcp serve

Additional Resources

For the complete command reference, style shorthands, components, variants, diffs, queries, analyze, and lint commands, consult:

• references/commands.md — Full figma-use command reference and style shorthand tables