{"id":40805265,"url":"https://github.com/dannote/figma-use","last_synced_at":"2026-01-30T17:02:20.498Z","repository":{"id":333139605,"uuid":"1136348782","full_name":"dannote/figma-use","owner":"dannote","description":"Control Figma from the command line. Full read/write access for AI agents — create shapes, text, components, set styles, export images. 100+ commands.","archived":false,"fork":false,"pushed_at":"2026-01-23T05:55:58.000Z","size":1590,"stargazers_count":292,"open_issues_count":2,"forks_count":19,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-23T14:47:44.228Z","etag":null,"topics":["ai-agents","automation","cli","design","figma"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/figma-use","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dannote.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-17T14:29:36.000Z","updated_at":"2026-01-23T14:36:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dannote/figma-use","commit_stats":null,"previous_names":["dannote/figma-use"],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/dannote/figma-use","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dannote%2Ffigma-use","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dannote%2Ffigma-use/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dannote%2Ffigma-use/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dannote%2Ffigma-use/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dannote","download_url":"https://codeload.github.com/dannote/figma-use/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dannote%2Ffigma-use/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28915942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T16:37:38.804Z","status":"ssl_error","status_checked_at":"2026-01-30T16:37:37.878Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agents","automation","cli","design","figma"],"created_at":"2026-01-21T21:00:53.626Z","updated_at":"2026-01-30T17:02:20.488Z","avatar_url":"https://github.com/dannote.png","language":"TypeScript","readme":"# figma-use\n\nCLI for Figma. Control it from the terminal — with commands or JSX.\n\n```bash\n# Create and style\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --layout VERTICAL --gap 16\nfigma-use create icon mdi:home --size 32 --color \"#3B82F6\"\nfigma-use set layout 1:23 --mode GRID --cols \"1fr 1fr 1fr\" --gap 16\n\n# Or render JSX\necho '\u003cFrame style={{display: \"grid\", cols: \"1fr 1fr\", gap: 16}}\u003e\n  \u003cFrame style={{bg: \"#3B82F6\", h: 100}} /\u003e\n  \u003cFrame style={{bg: \"#10B981\", h: 100}} /\u003e\n\u003c/Frame\u003e' | figma-use render --stdin --x 100 --y 100\n```\n\n## Why\n\nFigma's official MCP plugin can read files but can't modify them. This one can.\n\nLLMs know CLI. LLMs know React. This combines both.\n\nCLI commands are compact — easy to read, easy to generate, easy to chain. When a task involves dozens of operations, every saved token matters.\n\nJSX is how LLMs already think about UI. They've seen millions of React components. Describing a Figma layout as `\u003cFrame\u003e\u003cText\u003e` is natural for them — no special training, no verbose schemas.\n\n## Demo\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n\u003ca href=\"https://youtu.be/9eSYVZRle7o\"\u003e\n\u003cimg src=\"https://img.youtube.com/vi/9eSYVZRle7o/maxresdefault.jpg\" alt=\"Button components demo\" width=\"100%\"\u003e\n\u003c/a\u003e\n\u003cp align=\"center\"\u003e\u003cb\u003e▶️ Button components\u003c/b\u003e\u003c/p\u003e\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n\u003ca href=\"https://youtu.be/efJWp2Drzb4\"\u003e\n\u003cimg src=\"https://img.youtube.com/vi/efJWp2Drzb4/maxresdefault.jpg\" alt=\"Calendar demo\" width=\"100%\"\u003e\n\u003c/a\u003e\n\u003cp align=\"center\"\u003e\u003cb\u003e▶️ Tailwind UI calendar\u003c/b\u003e\u003c/p\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Installation\n\n```bash\nnpm install -g figma-use\n```\n\nOr run directly without installing:\n\n```bash\nnpx figma-use status\n```\n\nStart Figma with remote debugging enabled:\n\n```bash\n# macOS\nopen -a Figma --args --remote-debugging-port=9222\n\n# Windows\n\"C:\\Users\\%USERNAME%\\AppData\\Local\\Figma\\Figma.exe\" --remote-debugging-port=9222\n\n# Linux\nfigma --remote-debugging-port=9222\n```\n\nCheck connection:\n\n```bash\nfigma-use status\n```\n\nThat's it. No plugins to install.\n\n## Two Modes\n\nImperative — one command at a time:\n\n```bash\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --radius 12 --layout VERTICAL --gap 16\n```\n\nOr declaratively — describe the structure in JSX and render it:\n\n```bash\necho '\u003cFrame style={{p: 24, gap: 16, flex: \"col\", bg: \"#FFF\", rounded: 12}}\u003e\n  \u003cText style={{size: 24, weight: \"bold\", color: \"#000\"}}\u003eCard Title\u003c/Text\u003e\n  \u003cText style={{size: 14, color: \"#666\"}}\u003eDescription\u003c/Text\u003e\n\u003c/Frame\u003e' | figma-use render --stdin --x 100 --y 200\n```\n\nThe stdin mode accepts pure JSX only — no variables, no logic. For components, variants, and conditions, use `.figma.tsx` files.\n\n**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`, `Icon`, `Image`\n\n## Examples\n\n### Icons\n\nInsert any icon from Iconify by name. No downloading, no importing, no cleanup.\n\n```bash\nfigma-use create icon mdi:home\nfigma-use create icon lucide:star --size 48 --color \"#F59E0B\"\n```\n\nIn JSX:\n\n```tsx\n\u003cFrame style={{ flex: 'row', gap: 8 }}\u003e\n  \u003cIcon icon=\"mdi:home\" size={24} color=\"#3B82F6\" /\u003e\n  \u003cIcon icon=\"lucide:star\" size={32} color=\"#F59E0B\" /\u003e\n\u003c/Frame\u003e\n```\n\nBrowse 150k+ icons: [icon-sets.iconify.design](https://icon-sets.iconify.design/)\n\n### Images\n\nLoad images from URL:\n\n```tsx\n\u003cImage src=\"https://example.com/photo.jpg\" w={200} h={150} /\u003e\n```\n\n### Export to JSX\n\nConvert any Figma node back to JSX:\n\n```bash\nfigma-use export jsx 123:456 --pretty\n```\n\nOutput:\n\n```tsx\nimport { Frame, Icon, Text } from 'figma-use/render'\nexport default function SaveButton() {\n  return (\n    \u003cFrame name=\"SaveButton\" w={120} h={44} bg=\"#1FAFBB\" rounded={8} flex=\"row\" gap={8}\u003e\n      \u003cIcon name=\"lucide:save\" size={18} color=\"#FFFFFF\" /\u003e\n      \u003cText size={16} color=\"#FFFFFF\"\u003e\n        Save\n      \u003c/Text\u003e\n    \u003c/Frame\u003e\n  )\n}\n```\n\nMatch vector shapes to Iconify icons automatically:\n\n```bash\nnpm install whaticon  # Optional dependency\nfigma-use export jsx 123:456 --match-icons --prefer-icons lucide\n```\n\nCompare two nodes as JSX diff:\n\n```bash\nfigma-use diff jsx 123:456 789:012\n```\n\n### Export to Storybook (Experimental)\n\nExport components as Storybook stories:\n\n```bash\nfigma-use export storybook --out ./stories\nfigma-use export storybook --out ./stories --match-icons --prefer-icons lucide\n```\n\nGenerates `.stories.tsx` with typed props from component properties.\n\n### Components\n\nIn a `.figma.tsx` file you can define components. First call creates the master, the rest create instances:\n\n```tsx\nimport { defineComponent, Frame, Text } from 'figma-use/render'\n\nconst Card = defineComponent(\n  'Card',\n  \u003cFrame style={{ p: 24, bg: '#FFF', rounded: 12 }}\u003e\n    \u003cText style={{ size: 18, color: '#000' }}\u003eCard\u003c/Text\u003e\n  \u003c/Frame\u003e\n)\n\nexport default () =\u003e (\n  \u003cFrame style={{ gap: 16, flex: 'row' }}\u003e\n    \u003cCard /\u003e\n    \u003cCard /\u003e\n    \u003cCard /\u003e\n  \u003c/Frame\u003e\n)\n```\n\n### Variants\n\nComponentSet with all combinations:\n\n```tsx\nimport { defineComponentSet, Frame, Text } from 'figma-use/render'\n\nconst Button = defineComponentSet(\n  'Button',\n  {\n    variant: ['Primary', 'Secondary'] as const,\n    size: ['Small', 'Large'] as const\n  },\n  ({ variant, size }) =\u003e (\n    \u003cFrame\n      style={{\n        p: size === 'Large' ? 16 : 8,\n        bg: variant === 'Primary' ? '#3B82F6' : '#E5E7EB',\n        rounded: 8\n      }}\n    \u003e\n      \u003cText style={{ color: variant === 'Primary' ? '#FFF' : '#111' }}\u003e\n        {variant} {size}\n      \u003c/Text\u003e\n    \u003c/Frame\u003e\n  )\n)\n\nexport default () =\u003e (\n  \u003cFrame style={{ gap: 16, flex: 'col' }}\u003e\n    \u003cButton variant=\"Primary\" size=\"Large\" /\u003e\n    \u003cButton variant=\"Secondary\" size=\"Small\" /\u003e\n  \u003c/Frame\u003e\n)\n```\n\nThis creates a real ComponentSet in Figma with all 4 variants, not just 4 separate buttons.\n\n### Grid Layout\n\nCSS Grid for 2D layouts — calendars, dashboards, galleries:\n\n```tsx\n\u003cFrame\n  style={{\n    display: 'grid',\n    cols: '1fr 1fr 1fr', // 3 equal columns\n    rows: 'auto auto', // 2 rows\n    gap: 16\n  }}\n\u003e\n  \u003cFrame style={{ bg: '#FF6B6B' }} /\u003e\n  \u003cFrame style={{ bg: '#4ECDC4' }} /\u003e\n  \u003cFrame style={{ bg: '#45B7D1' }} /\u003e\n  \u003cFrame style={{ bg: '#96CEB4' }} /\u003e\n  \u003cFrame style={{ bg: '#FFEAA7' }} /\u003e\n  \u003cFrame style={{ bg: '#DDA0DD' }} /\u003e\n\u003c/Frame\u003e\n```\n\nSupports `px`, `fr`, and `auto`/`hug`. Separate gaps with `colGap` and `rowGap`.\n\nIn CLI:\n\n```bash\nfigma-use set layout \u003cid\u003e --mode GRID --cols \"100px 1fr 100px\" --rows \"auto\" --gap 16\n```\n\n### Variables as Tokens\n\nBind colors to Figma variables by name. The hex value is a fallback:\n\n```tsx\nimport { defineVars, Frame, Text } from 'figma-use/render'\n\nconst colors = defineVars({\n  bg: { name: 'Colors/Gray/50', value: '#F8FAFC' },\n  text: { name: 'Colors/Gray/900', value: '#0F172A' }\n})\n\nexport default () =\u003e (\n  \u003cFrame style={{ bg: colors.bg }}\u003e\n    \u003cText style={{ color: colors.text }}\u003eBound to variables\u003c/Text\u003e\n  \u003c/Frame\u003e\n)\n```\n\nIn CLI, use `var:Colors/Primary` or `$Colors/Primary` in any color option.\n\n### Diffs\n\nCompare two frames and get a patch:\n\n```bash\nfigma-use diff create --from 123:456 --to 789:012\n```\n\n```diff\n--- /Card/Header #123:457\n+++ /Card/Header #789:013\n@@ -1,5 +1,5 @@\n type: FRAME\n size: 200 50\n pos: 0 0\n-fill: #FFFFFF\n+fill: #F0F0F0\n-opacity: 0.8\n+opacity: 1\n```\n\nApply the patch to the original frame. On apply, current state is validated against expected — if they don't match, it fails.\n\nVisual diff highlights changed pixels in red:\n\n```bash\nfigma-use diff visual --from 49:275096 --to 49:280802 --output diff.png\n```\n\n| Before                            | After                           | Diff                            |\n| --------------------------------- | ------------------------------- | ------------------------------- |\n| ![before](assets/diff-before.png) | ![after](assets/diff-after.png) | ![diff](assets/diff-result.png) |\n\n### Inspection\n\nPage tree in readable form:\n\n```\n$ figma-use node tree\n[0] frame \"Card\" (1:23)\n    400×300 at (0, 0) | fill: #FFFFFF | layout: col gap=16\n  [0] text \"Title\" (1:24)\n      \"Hello World\" | 24px Inter Bold\n```\n\nExport any node or screenshot with one command.\n\n### Vectors\n\nImport SVG or work with paths directly — read, modify, translate, scale, flip:\n\n```bash\nfigma-use path get \u003cid\u003e\nfigma-use path set \u003cid\u003e \"M 0 0 L 100 100 Z\"\nfigma-use path scale \u003cid\u003e --factor 1.5\nfigma-use path flip \u003cid\u003e --axis x\n```\n\n### Query\n\nFind nodes using XPath selectors:\n\n```bash\nfigma-use query \"//FRAME\"                              # All frames\nfigma-use query \"//FRAME[@width \u003c 300]\"                # Narrower than 300px\nfigma-use query \"//COMPONENT[starts-with(@name, 'Button')]\"  # Name starts with\nfigma-use query \"//FRAME[contains(@name, 'Card')]\"     # Name contains\nfigma-use query \"//SECTION/FRAME\"                      # Direct children\nfigma-use query \"//SECTION//TEXT\"                      # All descendants\nfigma-use query \"//*[@cornerRadius \u003e 0]\"               # Any node with radius\n```\n\nFull XPath 3.1 support — predicates, functions, arithmetic, axes.\n\n### Analyze\n\nDiscovery tools for understanding design systems:\n\n```bash\n# Find repeated patterns (potential components)\nfigma-use analyze clusters\n\n# Color palette — usage frequency, variables vs hardcoded\nfigma-use analyze colors\nfigma-use analyze colors --show-similar    # Find colors to merge\n\n# Typography — all font combinations\nfigma-use analyze typography\nfigma-use analyze typography --group-by size\n\n# Spacing — gap/padding values, grid compliance\nfigma-use analyze spacing --grid 8\n\n# Accessibility snapshot — extract interactive elements tree\nfigma-use analyze snapshot                 # Full page\nfigma-use analyze snapshot \u003cid\u003e -i         # Interactive elements only\n```\n\nExample output:\n\n```\n[0] 48× frame \"Header\" pattern (100% match)\n    1280×56 | Frame \u003e [Frame×2, Text]\n    examples: 53171:21628, 53171:21704\n\n#303030  ████████████████████ 1840× (var)\n#E5E5E5  ████████████████████ 1726× (var)\n#000000  ████████ 238×\n```\n\n### Lint (Experimental)\n\nCheck designs for consistency, accessibility, and best practices:\n\n```bash\nfigma-use lint                          # Recommended rules\nfigma-use lint --page \"Components\"      # Lint specific page\nfigma-use lint --preset strict          # Stricter for production\nfigma-use lint --preset accessibility   # A11y checks only\nfigma-use lint -v                       # With fix suggestions\n```\n\nOutput:\n\n```\n✖ Header/Title (1:234)\n    ✖  Contrast ratio 2.1:1 is below AA threshold (4.5:1)    color-contrast\n    ⚠  Touch target 32x32 is below minimum 44x44             touch-target-size\n\n⚠ Card/Body (1:567)\n    ⚠  Hardcoded fill color #1A1A1A                          no-hardcoded-colors\n    ℹ  Frame with 3 children doesn't use Auto Layout         prefer-auto-layout\n\n────────────────────────────────────────────────────────────────\n✖ 1 error  ⚠ 3 warnings  ℹ 1 info\n```\n\n**17 rules** across 6 categories:\n\n| Category      | Rules                                                                                      |\n| ------------- | ------------------------------------------------------------------------------------------ |\n| Design Tokens | `no-hardcoded-colors`, `consistent-spacing`, `consistent-radius`, `effect-style-required`  |\n| Layout        | `prefer-auto-layout`, `pixel-perfect`                                                      |\n| Typography    | `text-style-required`, `min-text-size`, `no-mixed-styles`                                  |\n| Accessibility | `color-contrast`, `touch-target-size`                                                      |\n| Structure     | `no-default-names`, `no-hidden-layers`, `no-deeply-nested`, `no-empty-frames`, `no-groups` |\n| Components    | `no-detached-instances`                                                                    |\n\nJSON output for CI/CD:\n\n```bash\nfigma-use lint --json \u003e report.json\n```\n\n### Comment-Driven Workflow (Experimental)\n\nAI agents can wait for Figma comments and respond:\n\n```bash\nfigma-use comment watch --json   # Blocks until new comment\nfigma-use comment resolve \u003cid\u003e   # Mark as done\n```\n\nReturns comment text, author, and `target_node` — the exact element under the comment pin. Agent processes the request, resolves the comment, then runs `watch` again for the next one.\n\n## Full Command Reference\n\nSee [REFERENCE.md](./REFERENCE.md) for the complete list of 100+ commands.\n\n## MCP Server\n\nFor AI agents that support Model Context Protocol:\n\n```bash\nfigma-use mcp serve\n```\n\nExposes 90+ tools. See [MCP.md](./MCP.md) for setup.\n\n## Configuration\n\nFor Storybook export and linting, create a config file:\n\n```bash\nfigma-use init\n```\n\nCreates `.figma-use.json`:\n\n```json\n{\n  \"storybook\": {\n    \"page\": \"Components\",\n    \"out\": \"./stories\",\n    \"matchIcons\": true,\n    \"preferIcons\": [\"lucide\", \"tabler\"]\n  },\n  \"lint\": {\n    \"preset\": \"recommended\"\n  },\n  \"format\": {\n    \"pretty\": true,\n    \"semi\": false,\n    \"singleQuote\": true\n  }\n}\n```\n\nCLI arguments override config values.\n\n## For AI Agents\n\nIncludes [SKILL.md](./SKILL.md) — a reference for Claude Code, Cursor, and other agents.\n\n## How It Works\n\n```\n┌─────────────┐            ┌─────────────┐\n│   Terminal  │────CDP────▶│   Figma     │\n│  figma-use  │  port 9222 │             │\n└─────────────┘            └─────────────┘\n```\n\nfigma-use communicates directly with Figma via Chrome DevTools Protocol (CDP). Just start Figma with `--remote-debugging-port=9222` and you're ready.\n\nCommands are executed via `Runtime.evaluate` in Figma's JavaScript context, with full access to the Plugin API.\n\n## License\n\nMIT\n","funding_links":[],"categories":["\u003ca name=\"graphics\"\u003e\u003c/a\u003eGraphics","MCP Clients"],"sub_categories":["CLI Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdannote%2Ffigma-use","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdannote%2Ffigma-use","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdannote%2Ffigma-use/lists"}