dannote/figma-use

Overview

This skill provides a CLI to control Figma programmatically — create shapes, frames, text and components, set styles and layout, run analyses, and export assets or JSX. It supports both imperative single-command operations and declarative JSX rendering for complex trees. Use it to automate repetitive design tasks, extract components, run audits, or integrate Figma into CI and tooling.

How this skill works

The CLI connects to a running Figma desktop instance (requires remote debugging) and exposes 100+ commands for read/write operations. You can run single commands (create, set, node move, export) or pipe JSX/module code into a renderer to generate Figma nodes and components. Extra features include icon/image import, variable/token references, XPath queries, diffs/patches, analysis tools, and Storybook export.

When to use it

• Automate bulk creation or updates of design elements (icons, buttons, frames).
• Convert Figma nodes to editable JSX and round-trip edits back into Figma.
• Extract components, create variants, or mass-generate component instances.
• Run design audits, color/typography analysis, or accessibility linting across a file.
• Integrate Figma workflows into CI pipelines or developer tooling (exports, diffs, JSON outputs).

Best practices

• Always start by running figma-use status to ensure the connection is active and Figma launched with --remote-debugging-port.
• When rendering JSX, provide --x and --y to position the output and avoid stacking at (0,0).
• Prefer diffs or targeted commands after initial render to avoid overwriting rendered trees. Use diff apply with --dry-run before forcing changes.
• Use variable/token syntax ($Name or var:Name) to keep styles consistent and reference Figma variables.
• Use human-readable output by default; add --json only when you need machine-readable fields for automation.

Example use cases

• Generate a grid of card components from a .figma.tsx module and render them into a page for review.
• Export a UI component as JSX, edit props in code, then re-render updated instances in Figma.
• Export current page components to Storybook stories to speed up frontend development handoff.