design-lazyyy-cli

Control Figma Desktop from your terminal. No API key needed.

Create design tokens, render UI with JSX, manage variables, export CSS/Tailwind all through a single CLI connected to Figma Desktop via Chrome DevTools Protocol.

Why design-lazyyy-cli?

| Pain Point | Solution | |:---|:---| | Figma REST API requires tokens & has rate limits | Direct desktop connection, zero config | | Manually creating 200+ color variables | tokens tailwind generates 242 variables instantly | | Switching between Figma and code for tokens | export css / export tailwind in one command | | Building complex layouts click-by-click | JSX-like render command creates nested auto-layouts | | Repetitive design system setup | tokens ds creates a Tailwind + shadcn/ui ready system in seconds |

Quick Start

Prerequisites

• Node.js >= 24
• Figma Desktop (free account works)

Installation

# Install globally via npm
npm install -g design-lazyyy-cli

# One-time setup: patch Figma for CLI access
design-lazyyy-cli init

# Connect to Figma Desktop
design-lazyyy-cli connect

Tip: Run design-lazyyy-cli status to verify the connection is active.

Usage with Claude Code

design-lazyyy-cli ships with a CLAUDE.md that teaches Claude every command. No /init needed.

cd design-lazyyy-cli
claude

Then just talk naturally:

"Create a complete design system with Tailwind colors" "Render a card component with title and description" "Export all variables as CSS custom properties"

Claude handles the rest.

Core Commands

Connect & Status

node src/index.js connect          # Connect to Figma Desktop
node src/index.js status           # Check connection status

Design Tokens (Tailwind CSS + shadcn/ui)

# Tailwind + shadcn/ui design system (colors, spacing, typography, radii)
node src/index.js tokens ds

# Tailwind CSS palette (22 families x 11 shades = 242 variables)
node src/index.js tokens tailwind

# Spacing scale (4px base system)
node src/index.js tokens spacing

Create Elements

All create commands auto-position to avoid overlaps.

node src/index.js create rect "Card" -w 320 -h 200 --fill "#fff" --radius 12
node src/index.js create circle "Avatar" -w 48 --fill "#3b82f6"
node src/index.js create text "Hello" -s 24 -c "#000" -w bold
node src/index.js create autolayout "Stack" -d col -g 16 -p 24
node src/index.js create icon lucide:star -s 24 -c "#f59e0b"
node src/index.js create component "Button"

Render with JSX

Build complex nested layouts in a single command:

node src/index.js render '<Frame name="Card" w={320} bg="#fff" rounded={16} flex="col" gap={8} p={24}>
  <Text size={20} weight="bold" color="#111">Card Title</Text>
  <Text size={14} color="#666" w="fill">Description goes here</Text>
</Frame>'

| Prop | Description | Example | |:-----|:-----------|:--------| | w | Width (px or "fill") | w={320} | | h | Height | h={200} | | bg | Background color | bg="#fff" | | rounded | Corner radius | rounded={16} | | flex | Auto-layout direction | flex="col" or flex="row" | | gap | Spacing between children | gap={8} | | p | Padding (all sides) | p={24} | | x, y | Canvas position | x={100} y={0} | | size | Font size (Text only) | size={20} | | weight | Font weight (Text only) | weight="bold" | | color | Text color (Text only) | color="#111" |

Modify Elements

Works on current selection or a specific node with -n "1:234".

node src/index.js set fill "#3b82f6"
node src/index.js set stroke "#e4e4e7" -w 1
node src/index.js set radius 12
node src/index.js set size 320 200
node src/index.js set pos 100 100
node src/index.js set opacity 0.5
node src/index.js set autolayout row -g 8 -p 16
node src/index.js set name "Header"

Variable Binding

Bind design tokens to elements for theme-responsive designs:

node src/index.js bind fill "primary/500"
node src/index.js bind stroke "border/default"
node src/index.js bind radius "radius/md"
node src/index.js bind gap "spacing/md"
node src/index.js bind padding "spacing/lg"
node src/index.js bind list                      # Show all bindable variables
node src/index.js bind list -t COLOR             # Filter by type

Sizing & Layout

node src/index.js sizing hug                     # Hug contents
node src/index.js sizing fill                    # Fill container
node src/index.js sizing fixed 320 200           # Fixed dimensions
node src/index.js padding 16 24                  # Vertical, horizontal
node src/index.js gap 16
node src/index.js align center

Find, Select & Inspect

node src/index.js find "Button"                  # Search by name
node src/index.js find "Card" -t FRAME           # Filter by type
node src/index.js select "1:234"                 # Select by node ID
node src/index.js get                            # Inspect selection
node src/index.js canvas info                    # Overview of canvas

Duplicate, Delete & Arrange

node src/index.js duplicate                      # Duplicate selection
node src/index.js delete "1:234"                 # Delete node
node src/index.js arrange -g 100 -c 3            # Arrange in 3-column grid

Export

node src/index.js export css                     # CSS custom properties
node src/index.js export tailwind                # Tailwind config
node src/index.js export screenshot -o shot.png  # Screenshot

Variables & Collections

node src/index.js var list                       # List all variables
node src/index.js var create "primary/500" -c "CollectionId" -t COLOR -v "#3b82f6"
node src/index.js col list                       # List collections
node src/index.js col create "Semantic Colors"   # Create collection

FigJam

node src/index.js fj list                        # List pages
node src/index.js fj sticky "Note" -x 100 -y 100
node src/index.js fj shape "Box" -x 200 -y 100 -w 200 -h 100
node src/index.js fj connect "NODE_1" "NODE_2"
node src/index.js fj nodes                       # List elements
node src/index.js fj eval "figma.currentPage.children.length"

Advanced: Run Figma Plugin API

node src/index.js eval "figma.currentPage.name"
node src/index.js raw query "//COMPONENT"
node src/index.js raw query "//*[contains(@name, 'Button')]"

How It Works

┌──────────────────┐                        ┌──────────────────┐
│                  │   Chrome DevTools       │                  │
│  design-lazyyy   │ ◄────Protocol──────►    │  Figma Desktop   │
│  CLI             │   (localhost:9222)      │                  │
└──────────────────┘                        └──────────────────┘

The CLI connects to Figma Desktop through the Chrome DevTools Protocol on port 9222. This means:

• No API key required
• No rate limits
• Full Plugin API access (same as writing a Figma plugin)
• Works with free Figma accounts

Recommended Workflow

init  ➜  connect  ➜  tokens ds  ➜  tokens tailwind  ➜  create / render  ➜  bind variables  ➜  export

1. Setup once with init (patches Figma, installs dependencies)
2. Connect to Figma Desktop
3. Generate tokens with tokens ds for a Tailwind + shadcn/ui design system
4. Add Tailwind colors with tokens tailwind (242 color variables)
5. Build UI using create commands or render JSX
6. Bind variables to elements for theme support
7. Export as CSS or Tailwind config

Tips

• Use render instead of eval for anything with text the render command handles font loading automatically
• Node IDs look like 1:234 get them from find, canvas info, or raw query
• Every create command auto-positions so elements never overlap
• Use rescale() not resize() in eval scripts to preserve layer integrity
• Target specific nodes with -n "1:234" on any set or bind command

Author

plugin87

License

MIT