{"_id":"@deanimatedmonk/mahoraga","name":"@deanimatedmonk/mahoraga","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@deanimatedmonk/mahoraga","version":"1.2.0","description":"CLI for managing Figma design systems (CDP + Mahoraga bridge). Create variables, components, and more. No API key required.","author":{"name":"Sil Bormüller"},"license":"MIT","type":"module","bin":{"mahoraga":"src/index.js","fig-start":"bin/fig-start"},"keywords":["figma","design-system","design-tokens","cli","variables"],"repository":{"type":"git","url":"git+https://github.com/silships/figma-cli.git"},"homepage":"https://intodesignsystems.com","bugs":{"url":"https://github.com/silships/figma-cli/issues"},"scripts":{"setup-alias":"bash bin/setup-alias.sh","test":"node --test tests/*.test.js","generate-topic-images":"node scripts/generate-topic-images.mjs --target 372x205 --provider openai","generate-topic-images:dry":"node scripts/generate-topic-images.mjs --target 372x205 --provider openai --dry-run","generate-topic-images:gemini":"node scripts/generate-topic-images.mjs --target 372x205 --provider gemini --model nano-banana","generate-topic-images:gemini:dry":"node scripts/generate-topic-images.mjs --target 372x205 --provider gemini --model nano-banana --dry-run","emit-topic-prompts":"node scripts/emit-topic-image-prompts.mjs","generate-topic-svgs":"node scripts/generate-topic-svgs.mjs","rename-topics-lm":"node scripts/build-rename-topics-lm-eval.mjs && node src/index.js eval --file scripts/.generated-rename-topics-lm.js","rename-topics-dm":"node scripts/build-rename-topics-dm-eval.mjs && node src/index.js eval --file scripts/.generated-rename-topics-dm.js","rename-persona-profile-picture":"node scripts/build-rename-persona-profile-picture-eval.mjs && node src/index.js eval --file scripts/.generated-rename-persona-profile-picture.js","rename-persona-bg":"node scripts/build-rename-persona-bg-eval.mjs && node src/index.js eval --file scripts/.generated-rename-persona-bg.js","export-selection":"node src/index.js export selection"},"engines":{"node":">=18"},"dependencies":{"chalk":"^5.3.0","commander":"^12.0.0","ora":"^8.0.0","ws":"^8.16.0"},"devDependencies":{"sharp":"^0.34.5"},"_id":"@deanimatedmonk/mahoraga@1.2.0","gitHead":"a47d65139ad39584d49f0f9a03116da31375d160","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-4vDtdDTs4lkicpj5EHE3KJ4SmWn+oGe1m+A4qGGgmZYMxNbhd+KOWF9FONtnSEokaXFxSrsnPMuFjgXRHkl+xg==","shasum":"e34ae6069fc49a695c4b9a648d0a01dac4cf8b67","tarball":"https://registry.npmjs.org/@deanimatedmonk/mahoraga/-/mahoraga-1.2.0.tgz","fileCount":17,"unpackedSize":892640,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDcJj/CLqYJiUGDwzBXOETmJtQsKvwTaRE8dKjcYHgrAwIgLFRM3440j1idcr8vtYIPZIdfBvfqeLSnt2zkTr4/Niw="}]},"_npmUser":{"name":"deanimatedmonk","email":"isajalkumar247@gmail.com"},"directories":{},"maintainers":[{"name":"deanimatedmonk","email":"isajalkumar247@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mahoraga_1.2.0_1776243662167_0.33406555511098723"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-15T09:01:02.078Z","1.2.0":"2026-04-15T09:01:02.373Z","modified":"2026-04-15T09:01:02.582Z"},"maintainers":[{"name":"deanimatedmonk","email":"isajalkumar247@gmail.com"}],"description":"CLI for managing Figma design systems (CDP + Mahoraga bridge). Create variables, components, and more. No API key required.","homepage":"https://intodesignsystems.com","keywords":["figma","design-system","design-tokens","cli","variables"],"repository":{"type":"git","url":"git+https://github.com/silships/figma-cli.git"},"author":{"name":"Sil Bormüller"},"bugs":{"url":"https://github.com/silships/figma-cli/issues"},"license":"MIT","readme":"# Mahoraga\n\n

\n \"Figma\n \"No\n \"Claude\n \"Cursor\"\n

\n\n

\n The Adaptive Bridge between AI and Figma.
\n Mahoraga adapts to your workflow — use Claude Code or Cursor, Yolo or Safe Mode.
\n Full read/write access. No API key required. Just talk to your AI about your designs.\n

\n\n```\n'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@@@@@@@+ #@@@@@@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@@@@@@@+ #@@@@@@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@ :@@@@@@@:@@@@@@@: =@@@@@@@@@@@',\n'@@@@@@@@@@@ :@@@* .%@@@ @@@@@@@@@@@',\n'@@@@@@@@@@@@@@@- :@@@@ @@@@=.=@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@=-@.@@@@ @@@@-@ #@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@+:@@@%:@@ @@:@@@@.@@@@@@@@@@@@@@',\n'@@@@@@@ =@@ %@@@@@* #@@@@@+.@@ :@@@@@@@',\n'@@@@@@% %% +%@%%%= +#%@@@=.@# .@@@@@@@',\n'@@@@@@@@@@@@@-:@@@@:+@:@==@@@@.%@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@:+@++@@@ @@@+*@=+@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@@= %@@@@ @@@@* *@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@. :@@%:.-+ =-.-@@@. #@@@@@@@@@@@',\n'@@@@@@@@@@@ @@@@@@@.@@@@@@@ @@@@@@@@@@@',\n'@@@@@@@@@@@@@@@@@@@@@: -@@@@@@@*%@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@@@@@@@: *@@@@@@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@@@@@@@@#=%@@@@@@@@@@@@@@@@@@@@@',\n'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',\n```\n\n## What is This?\n\nA CLI that connects directly to Figma Desktop and gives you complete control:\n\n- **shadcn/ui Components** — Generate all 30 official shadcn components with real Lucide icons and variable binding\n- **Design Tokens** — Create variables, collections, modes (Light/Dark), bind to nodes\n- **Create Anything** — Frames, text, shapes, icons (150k+ from Iconify), components\n- **Slots** — Create and manage Figma's new Slots feature for flexible component content\n- **Team Libraries** — Import and use components, styles, variables from any library\n- **Analyze Designs** — Colors, typography, spacing, find repeated patterns\n- **Lint & Accessibility** — Contrast checker, touch targets, design rules\n- **Export** — PNG, SVG, JSX, Storybook stories, CSS variables, Tailwind config\n- **Batch Operations** — Rename layers, find/replace text, create 100 variables at once\n- **Works with Claude Code & Cursor** — Just ask in natural language, the AI knows all commands\n\n---\n\n## shadcn/ui Component Package\n\nGenerate production-ready shadcn/ui components directly in Figma. All 30 components with 58 variants, matching the official shadcn/ui specs.\n\n### Quick Start\n\n```bash\n# 1. Add shadcn design tokens (Light/Dark mode)\nnode src/index.js tokens preset shadcn\n\n# 2. Generate all components\nnode src/index.js shadcn add --all\n\n# Or pick specific ones\nnode src/index.js shadcn add button card input tabs\n\n# List available components\nnode src/index.js shadcn list\n```\n\n### What You Get\n\n**30 components, 58 variants:**\n\n| Component | Variants |\n|-----------|----------|\n| Button | Default, Secondary, Destructive, Outline, Ghost, Link, Small, Large, Icon |\n| Badge | Default, Secondary, Destructive, Outline |\n| Card | Full card with Header, Content, Footer |\n| Input | Default, Filled, With Label |\n| Textarea | Default |\n| Label | Default |\n| Alert | Default (info icon), Destructive (alert icon) |\n| Avatar | Default, Small |\n| Switch | On, Off |\n| Separator | Horizontal, Vertical |\n| Skeleton | Text, Circle, Card |\n| Progress | 60%, 30% |\n| Toggle | Default, Active |\n| Checkbox | Unchecked, Checked (with check icon) |\n| Tabs | Full tabs with content panel |\n| Table | Header + 3 rows |\n| Radio Group | Unchecked, Checked, Full group |\n| Select | Closed, Filled, Open (with dropdown + check icon) |\n| Slider | With thumb |\n| Breadcrumb | With chevron separators |\n| Pagination | With chevron + ellipsis icons |\n| Kbd | Single key, Key combo |\n| Spinner | Small, Medium |\n| Tooltip | Tooltip + trigger |\n| Dialog | With close button, form fields |\n| Dropdown Menu | With items + separator |\n| Accordion | Open + collapsed items |\n| Navigation Menu | Active + inactive items |\n| Sheet | Side panel with form |\n| Hover Card | Profile card |\n\n### Real Lucide Icons\n\nComponents use actual Lucide SVG icons (not placeholder shapes), fetched from the Iconify API and rendered as vector nodes in Figma:\n\n- **Pagination**: chevron-left, chevron-right, ellipsis\n- **Select**: chevron-down, chevron-up, check\n- **Accordion**: chevron-down, chevron-right\n- **Checkbox**: check\n- **Dialog/Sheet**: x (close button)\n- **Alert**: info, alert-circle\n- **Button/Icon**: plus\n- **Toggle**: bold\n- **Breadcrumb**: chevron-right\n- **Navigation Menu**: chevron-down\n\n### Design Token Integration\n\nAll components use `var:` syntax to bind directly to shadcn variables. When you add tokens with `tokens preset shadcn`, components automatically use your Light/Dark mode colors:\n\n- `background`, `foreground` — page background/text\n- `card`, `card-foreground` — card backgrounds\n- `primary`, `primary-foreground` — buttons, accents\n- `secondary`, `secondary-foreground` — secondary actions\n- `muted`, `muted-foreground` — subtle text, disabled states\n- `accent`, `accent-foreground` — hover states\n- `destructive`, `destructive-foreground` — error states\n- `border`, `input`, `ring` — borders, inputs, focus rings\n\n---\n\n## Why This CLI?\n\nThis project includes instruction files that teach AI tools how to use every command:\n\n- **`CLAUDE.md`** — Claude Code reads this automatically\n- **`.cursor/rules/figma-cli.mdc`** — Cursor reads this automatically\n\nBoth contain:\n- All available commands and their syntax\n- Best practices (e.g., \"use `render` for text-heavy designs\")\n- Common requests mapped to solutions\n\n**Want to teach the AI new tricks?** Just update these files. No code changes needed.\n\n**Example:** You type \"Create Tailwind colors\" -> the AI already knows to run `node src/index.js tokens tailwind` because it's documented in the instruction files.\n\n---\n\n## What You Need\n\n- **Node.js 18+** — `brew install node` (or [download](https://nodejs.org/))\n- **Figma Desktop** (free account works)\n- **Claude Code** ([get it here](https://www.anthropic.com/claude-code)) and/or **Cursor** ([get it here](https://cursor.com/))\n- **macOS or Windows** (macOS recommended, Windows supported)\n- **macOS Full Disk Access** for Terminal (Yolo Mode only -- not needed for [Safe Mode](#-safe-mode--for-restricted-environments))\n\n---\n\n## Cursor Setup (IDE-based)\n\nUse Mahoraga directly from Cursor instead of the terminal. Uses **Safe Mode** (plugin-based) — the AI runs the same CLI commands via Cursor's built-in shell.\n\n### Why Cursor?\n\n| | Cursor (IDE) | Claude Code (Terminal) |\n|---|---|---|\n| Interface | Full IDE with file browser, tabs, images | Terminal only |\n| Connection | Safe Mode (plugin) | Yolo Mode (CDP) or Safe Mode |\n| How it works | Cursor reads `.cursor/rules/figma-cli.mdc` | Claude reads `CLAUDE.md` |\n| Interaction | Chat in IDE sidebar | Chat in terminal |\n| Security | Safe Mode only — ideal for company devices where you don't want to give CLI full driver access | Yolo Mode requires Full Disk Access |\n\nBoth run the exact same CLI commands under the hood.\n\n### Setup Steps\n\n**1. Clone and install**\n\n```bash\ngit clone https://github.com/theanimatedmonk/Mahoraga.git\ncd Mahoraga\nnpm install\n```\n\n**2. Open the project in Cursor**\n\n```bash\ncursor .\n```\n\nThe project includes a `.cursor/rules/figma-cli.mdc` file that automatically teaches Cursor's AI all available commands — the same role `CLAUDE.md` plays for Claude Code.\n\n**3. Import the FigIDE plugin into Figma (one-time)**\n\n1. Open Figma Desktop\n2. Go to **Plugins → Development → Import plugin from manifest**\n3. Navigate to `Mahoraga/plugin/manifest.json`\n4. Click **Open**\n\n> **Tip:** Right-click the plugin → **Add to toolbar** for one-click access.\n\n**4. Start the connection**\n\nEach session, do these two things:\n\n**In Cursor's terminal:**\n```bash\nnode src/index.js connect --safe\n```\n\n**In Figma:**\n1. Open a design file\n2. Run the plugin: **Plugins → Development → FigIDE**\n3. You should see a green \"Connected\" dot in the plugin window\n\n**5. Start designing**\n\nNow just chat with Cursor's AI in the sidebar:\n\n> \"Create a button with rounded corners\"\n\n> \"Add shadcn colors to my project\"\n\n> \"Design a card with a title and description\"\n\nThe AI translates your requests into CLI commands and executes them. Keep the FigIDE plugin window open in Figma while working.\n\n### Quick Reference for Cursor\n\n| You say | What happens |\n|---------|-------------|\n| \"Create a blue button\" | AI runs `node src/index.js render ''` |\n| \"Add shadcn colors\" | AI runs `node src/index.js tokens preset shadcn` |\n| \"What's on the canvas?\" | AI runs `node src/index.js eval \"figma.currentPage.children...\"` |\n| \"Export as PNG\" | AI runs `node src/index.js export png` |\n\nYou never need to type commands manually — just talk naturally.\n\n---\n\n## Setup (Claude Code)\n\n```bash\ngit clone https://github.com/theanimatedmonk/Mahoraga.git\ncd Mahoraga\nnpm install\nnpm run setup-alias\nsource ~/.zshrc\n```\n\nThat's it. Now open a **new terminal** and type:\n\n```bash\nfig-start\n```\n\nThis will:\n1. Start Figma (if not running)\n2. Connect to Figma (Yolo Mode: patches Figma once for direct access)\n3. Show your open Figma files: pick one with arrow keys\n4. Launch Claude Code with all commands pre-loaded\n\n**Done.** Talk to Claude about your Figma file.\n\n> **Note:** `fig-start` works from any directory. The setup script saves the repo location to `~/.figma-cli/config.json`.\n\n### fig-start Options\n\n| Command | Description |\n|---------|-------------|\n| `fig-start` | Yolo Mode (default), interactive file picker |\n| `fig-start --safe` | Safe Mode (plugin-based, no patching) |\n| `fig-start --setup` | Change the figma-cli repo path |\n\n### Safe Mode (no patching)\n\nIf you can't grant Full Disk Access or prefer not to patch Figma:\n\n```bash\nfig-start --safe\n```\n\nThis uses a Figma plugin instead of patching. See [Safe Mode](#-safe-mode--for-restricted-environments) for details.\n\n### Manual Setup (without fig-start)\n\n```bash\ncd Mahoraga\nclaude\n```\n\nThen tell Claude: `Connect to Figma`\n\n---\n\n## Using It\n\nOnce connected (via Claude Code or Cursor), just talk to your AI:\n\n> \"Add shadcn colors to my project\"\n\n> \"Add all shadcn components\"\n\n> \"Add a card component with button and input\"\n\n> \"Save the selected frame as login-card\"\n\n> \"Drop login-card into my canvas\"\n\n> \"Check accessibility\"\n\n> \"Export variables as CSS\"\n\nThe included `CLAUDE.md` teaches Claude Code all commands automatically. Cursor uses `.cursor/rules/figma-cli.mdc` for the same purpose. No manual required.\n\n**Safe Mode users (including all Cursor users):** Start the FigIDE plugin each time you open Figma.\n\n---\n\n## JSX Rendering with Icons\n\nThe CLI includes a JSX-like syntax for creating complex layouts. Icons are rendered as real SVG vectors:\n\n```jsx\n// Real Lucide icons in JSX\n\n \n Home\n \n \n\n```\n\nIcons support:\n- Any icon from [Lucide](https://lucide.dev/icons) (2000+ icons)\n- Any icon set on [Iconify](https://iconify.design/) (150,000+ icons): `mdi:home`, `heroicons:star`, etc.\n- Variable color binding with `var:` syntax\n- Custom sizes\n\n---\n\n## Two Connection Modes\n\n### 🚀 Yolo Mode (Recommended)\n\n**What it does:** Patches Figma once to enable a debug port, then connects directly.\n\n**Pros:**\n- Fully automatic (no manual steps after setup)\n- Slightly faster execution\n- Secure: random port, token auth, localhost only, auto-shutdown on idle\n\n**Cons:**\n- Requires one-time Figma patch\n- Needs Full Disk Access on macOS (one-time)\n\n```\n┌─────────────┐ WebSocket (CDP) ┌─────────────┐\n│ CLI │ <------------------------> │ Figma │\n└─────────────┘ localhost:random port └─────────────┘\n```\n\n```bash\nnode src/index.js connect\n```\n\n---\n\n### 🔒 Safe Mode -- For Restricted Environments\n\n**What it does:** Uses a Figma plugin to communicate. No Figma modification needed.\n\n**Pros:**\n- No patching, no app modification\n- Works everywhere (corporate, personal, any environment)\n- No Full Disk Access needed\n- **Full feature parity** with Yolo Mode (all commands work)\n\n**Cons:**\n- Start plugin manually each session (2 clicks)\n- Slightly slower than Yolo Mode\n\n```\n┌─────────────┐ WebSocket ┌─────────────┐ Plugin API ┌─────────────┐\n│ CLI │ <---------------> │ Mahoraga │ <----------------> │ Plugin │\n└─────────────┘ localhost:3456 └─────────────┘ └─────────────┘\n```\n\n**Step 1:** Start Safe Mode\n```bash\nfig-start --safe\n```\nOr manually: `node src/index.js connect --safe`\n\n**Step 2:** Import plugin (one-time only)\n1. In Figma: **Plugins -> Development -> Import plugin from manifest**\n2. Select `plugin/manifest.json` from this project\n3. Click **Open**\n\n**Step 3:** Start the plugin (each session)\n1. In Figma: **Plugins -> Development -> FigIDE**\n2. Terminal shows: `Plugin connected!`\n\n**Tip:** Right-click the plugin -> **Add to toolbar** for quick access.\n\n---\n\n### Which Mode Should I Use?\n\n| Situation | Command |\n|---|---|\n| First time user (Claude Code) | `fig-start` (Yolo Mode) |\n| Personal Mac (Claude Code) | `fig-start` (Yolo Mode) |\n| Corporate laptop | `fig-start --safe` |\n| Permission errors with Yolo | `fig-start --safe` |\n| Can't modify apps | `fig-start --safe` |\n| **Using Cursor IDE** | `node src/index.js connect --safe` |\n\nBoth modes have **full feature parity**. Safe Mode uses native Figma Plugin API implementations instead of figma-use, so all commands work identically.\n\n---\n\n## Troubleshooting\n\n### Permission Error When Patching (macOS)\n\nIf you see `EPERM: operation not permitted, open '.../app.asar'`:\n\n**1. Grant Full Disk Access to Terminal**\n\nmacOS blocks file access without this permission, even with sudo.\n\n1. Open **System Settings** -> **Privacy & Security** -> **Full Disk Access**\n2. Click the **+** button\n3. Add **Terminal** (or iTerm, VS Code, Warp, etc.)\n4. **Restart Terminal completely** (quit and reopen)\n\n**2. Make sure Figma is completely closed**\n```bash\n# Check if Figma is still running\nps aux | grep -i figma\n\n# Force quit if needed\nkillall Figma\n```\n\n**3. Run connect again**\n```bash\nnode src/index.js connect\n```\n\nIf still failing, try with sudo: `sudo node src/index.js connect`\n\n**4. Manual patch (last resort)**\n\nIf nothing works, you can patch manually:\n\n```bash\n# Backup original\nsudo cp /Applications/Figma.app/Contents/Resources/app.asar ~/app.asar.backup\n\n# The patch changes one string in the file\n# From: removeSwitch(\"remote-debugging-port\")\n# To: removeSwitch(\"remote-debugXing-port\")\n\n# Use a hex editor or this command:\nsudo sed -i '' 's/remote-debugging-port/remote-debugXing-port/g' /Applications/Figma.app/Contents/Resources/app.asar\n\n# Re-sign the app\nsudo codesign --force --deep --sign - /Applications/Figma.app\n```\n\n### Windows\n\nWindows is supported but less tested than macOS.\n\n**Permission Error:** Run Command Prompt or PowerShell as Administrator, then run `node src/index.js connect`.\n\n**Figma Location:** The CLI expects Figma at `%LOCALAPPDATA%\\Figma\\Figma.exe` (default install location).\n\n**Safe Mode:** If Yolo Mode doesn't work, use Safe Mode: `node src/index.js connect --safe`\n\n### Figma Not Connecting\n\n1. Make sure Figma Desktop is running (not the web version)\n2. Open a design file in Figma (not just the home screen)\n3. Restart connection: `node src/index.js connect`\n\n---\n\n## Updating\n\n```bash\ncd ~/path/to/figma-cli\ngit pull\nnpm install\n```\n\n## How It Works\n\nConnects to Figma Desktop via Chrome DevTools Protocol (CDP). No API key needed because it uses your existing Figma session.\n\n```\n┌─────────────┐ WebSocket (CDP) ┌─────────────┐\n│ Mahoraga │ <------------------------> │ Figma │\n│ (CLI) │ localhost:9222-9322 │ Desktop │\n└─────────────┘ (random port) └─────────────┘\n```\n\n### Security\n\nThe CLI runs a local bridge server called **Mahoraga** for faster command execution. Security features:\n\n- **Session token authentication**: Random 32-byte token required for all requests\n- **No CORS headers**: Blocks cross-origin browser requests\n- **Host header validation**: Only accepts localhost/127.0.0.1\n- **Idle timeout**: Auto-shutdown after 10 minutes of inactivity (configurable)\n- **Random port**: CDP uses a random port between 9222-9322 per session\n\nToken is stored at `~/.Mahoraga/.mahoraga-token` with owner-only permissions (0600).\n\n---\n\n## Full Feature List\n\n### shadcn/ui Components\n\n- **30 components, 58 variants** matching official shadcn/ui specs\n- Real **Lucide SVG icons** (chevrons, check, x, plus, info, alert-circle, bold, ellipsis)\n- **Design token binding** via `var:` syntax (auto-binds to shadcn Light/Dark mode variables)\n- Components: Button (9), Badge (4), Card, Input (3), Textarea, Label, Alert (2), Avatar (2), Switch (2), Separator (2), Skeleton (3), Progress (2), Toggle (2), Checkbox (2), Tabs, Table, Radio Group (3), Select (3), Slider, Breadcrumb, Pagination, Kbd (2), Spinner (2), Tooltip, Dialog, Dropdown Menu, Accordion, Navigation Menu, Sheet, Hover Card\n\n### Design Tokens & Variables\n\n- **Color presets** -- shadcn (276 vars with Light/Dark mode), Radix UI (156 vars)\n- Create Tailwind CSS color palettes (all 22 color families, 50-950 shades)\n- Create and manage variable collections\n- **Variable modes** (Light/Dark/Mobile) with per-mode values\n- **Batch create** up to 100 variables at once\n- **Batch update** variable values across modes\n- Bind variables to node properties (fill, stroke, gap, padding, radius)\n- Export variables as CSS custom properties\n- Export variables as Tailwind config\n\n### Create Elements\n\n- Frames with auto-layout\n- Rectangles, circles, ellipses\n- Text with custom fonts, sizes, weights\n- Lines\n- Icons (150,000+ from Iconify: Lucide, Material Design, Heroicons, etc.)\n- Groups\n- Components from frames\n- Component instances\n- **Component sets with variants**\n\n### Drop System (Save & Reuse)\n\n- **Save any frame** from canvas as a reusable drop (`drop save `)\n- **Drop saved frames** back onto canvas anytime (`drop in `)\n- **List all drops** — built-in templates + your saved frames (`drop list`)\n- **Variable bindings preserved** — color variables are captured alongside the frame\n- **Rebind variables** on drop — clone a frame with a different variable set (e.g. persona cards)\n- **SVG-faithful serialization** — vector shapes, icons, and polygons are saved as SVG data for pixel-perfect recreation\n- **Icon drops** — insert any Iconify icon directly (`drop icon mdi:star --size 32`)\n- Built-in Android templates: Bottom Sheet, FAB, Top App Bar\n\n### JSX Rendering\n\n- **JSX-like syntax** for complex layouts (``, ``, ``, ``)\n- **Real Lucide/Iconify icons** rendered as SVG vectors (not placeholders)\n- **Variable binding** with `var:name` syntax for fills, strokes, text colors, icon colors\n- Auto-layout props: `flex`, `gap`, `p`/`px`/`py`, `justify`, `items`, `grow`, `wrap`\n- Sizing: `w`/`h` (fixed), `w=\"fill\"` (stretch), auto-hug\n- Appearance: `bg`, `stroke`, `strokeWidth`, `strokeAlign`, `rounded`, `shadow`, `opacity`, `overflow`\n- **Slots** for component content areas\n\n### Modify Elements\n\n- Change fill and stroke colors\n- Set corner radius\n- Resize and move\n- Apply auto-layout (row/column, gap, padding)\n- Set sizing mode (hug/fill/fixed)\n- Rename nodes\n- Duplicate nodes\n- Delete nodes\n- **Flip nodes** (horizontal/vertical)\n- **Scale vectors**\n\n### Find & Select\n\n- Find nodes by name\n- Find nodes by type (FRAME, COMPONENT, TEXT, etc.)\n- **XPath-like queries** (`//FRAME[@width > 300]`)\n- Select nodes by ID\n- Get node properties\n- Get node tree structure\n\n### Canvas Operations\n\n- List all nodes on canvas\n- Arrange frames in grid or column\n- Delete all nodes\n- Zoom to fit content\n- Smart positioning (auto-place without overlaps)\n\n### Export\n\n- **Export node by ID** (`export node \"1:234\" -s 2 -f png`)\n- Export nodes as PNG (with scale factor)\n- Export nodes as SVG\n- **Export multiple sizes** (@1x, @2x, @3x)\n- Take screenshots\n- **Export to JSX** (React code)\n- **Export to Storybook** stories\n- Export variables as CSS\n- Export variables as Tailwind config\n\n### FigJam Support\n\n- Create sticky notes\n- Create shapes with text\n- Connect elements with arrows\n- List FigJam elements\n- Run JavaScript in FigJam context\n\n### Team Libraries\n\n- List available library variable collections\n- Import variables from libraries\n- Import components from libraries\n- Create instances of library components\n- Import and apply library styles (color, text, effect)\n- Bind library variables to node properties\n- Swap component instances to different library components\n- List all enabled libraries\n\n### Designer Utilities\n\n- **Batch rename layers** (with patterns: {n}, {name}, {type})\n- **Case conversion** (camelCase, PascalCase, snake_case, kebab-case)\n- **Lorem ipsum generator** (words, sentences, paragraphs)\n- **Fill text with placeholder content**\n- **Insert images from URL**\n- **Unsplash integration** (random stock photos by keyword)\n- **Contrast checker** (WCAG AA/AAA compliance)\n- **Check text contrast** against background\n- **Find and replace text** across all layers\n- **Select same** (fill, stroke, font, size)\n- **Color blindness simulation** (deuteranopia, protanopia, tritanopia)\n\n### Query & Analysis\n\n- **Analyze colors** -- usage frequency, variable bindings\n- **Analyze typography** -- all font combinations used\n- **Analyze spacing** -- gap/padding values, grid compliance\n- **Find clusters** -- detect repeated patterns (potential components)\n- **Visual diff** -- compare two nodes\n- **Create diff patch** -- structural patches between versions\n\n### Lint & Accessibility\n\n- **Design linting** with 8+ rules:\n - `no-default-names` -- detect unnamed layers\n - `no-deeply-nested` -- flag excessive nesting\n - `no-empty-frames` -- find empty frames\n - `prefer-auto-layout` -- suggest auto-layout\n - `no-hardcoded-colors` -- check variable usage\n - `color-contrast` -- WCAG AA/AAA compliance\n - `touch-target-size` -- minimum 44x44 check\n - `min-text-size` -- minimum 12px text\n- **Accessibility snapshot** -- extract interactive elements tree\n\n### Component Variants\n\n- Create component sets with variants\n- Add variant properties\n- Combine frames into component sets\n- **Organize variants** into grid with labels\n- **Auto-generate component sets** from similar frames\n\n### Component Documentation\n\n- **Add descriptions** to components (supports markdown)\n- **Document with template** (usage, props, notes)\n- Read component descriptions\n\n### CSS Grid Layout\n\n- Set up grid layout with columns and rows\n- Configure column/row gaps\n- Auto-reorganize children into grid\n\n### Console & Debugging\n\n- **List open Figma files** (`files` command, used by fig-start)\n- **Capture console logs** from Figma\n- **Execute code with log capture**\n- **Reload page**\n- **Navigate to files**\n\n### Advanced\n\n- Execute any Figma Plugin API code directly\n- Render complex UI from JSX-like syntax\n- Full programmatic control over Figma\n- Match vectors to Iconify icons\n\n### Not Supported (requires REST API)\n\n- Comments (read/write/delete) -- requires Figma API key\n- Version history\n- Team/project management\n\n---\n\n## Authors\n\n**[Sil Bormueller](https://www.linkedin.com/in/silbormueller/)** -- [intodesignsystems.com](https://intodesignsystems.com)\nOriginal creator of figma-cli.\n\n**[Sajal Kumar](https://www.linkedin.com/in/sajalkumar247/)** -- [@deanimatedmonk](https://x.com/deanimatedmonk)\nAdded Cursor IDE support (Safe Mode integration, `.cursor/rules`). Inspired by Sil's work on the original CLI.\n\n## Powered By\n\nThis CLI is built on top of **[figma-use](https://github.com/dannote/figma-use)** by [dannote](https://github.com/dannote) -- an excellent Figma CLI with JSX rendering, XPath queries, design linting, and much more.\n\nIn **Yolo Mode**, we use figma-use for:\n- JSX rendering (`render` command)\n- Node operations (`node tree`, `node to-component`, etc.)\n- Design analysis (`analyze colors`, `analyze typography`)\n- Design linting (`lint`)\n- And many other features\n\nIn **Safe Mode**, all commands use native Figma Plugin API implementations, so figma-use is not required.\n\n**Big thanks to dannote for figma-use!**\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-1aa32d54b4a655bf5889b8fe4bd79c04"}