New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Figma Use

by dannote in dannote/figma-use

Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images.

MITAuto-check passedFrontend & Design

Install Figma Use

skills CLI
$ npx skills add dannote/figma-use --skill figma-use -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dannote/figma-use figma-use --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
figma-use
GitHub stars
607
Token cost
~4.6k tokens
SKILL.md length
870 words
Files
336 (incl. scripts, assets)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images.

  • Works in 6 steps: figma-use comment watch --json — blocks… → Parse the JSON, get message and… → Process the request (modify design, etc.) → …
  • Asked to create/modify Figma designs
  • SKILL.md covers Before You Start, Two Modes, Icons and Images, plus 15 more sections
  • Runs JavaScript scripts from its folder; calls jq

What it does

Figma Use is an agent skill from dannote/figma-use. Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.

Its SKILL.md is about 4.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 338 other files, including scripts and assets (for example `.oxfmtrc.json`, `.oxlintrc.json` and `AGENTS.md`).

It sits in Frontend & Design, covering React components. It works with Figma. The repository describes itself as: Control Figma from the command line. Full read/write access for AI agents — create shapes, text, components, set styles, export images. 100+ commands. The licence is MIT.

When your agent uses it

  • Asked to create/modify Figma designs
  • Automate design tasks

Example prompts

  • “/figma-use”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. figma-use comment watch --json — blocks until new comment
  2. Parse the JSON, get message and target_node (exact element under comment)
  3. Process the request (modify design, etc.)
  4. Reply: figma-use comment add "Done!" --reply
  5. Resolve: figma-use comment resolve
  6. Exit. External runner restarts for next comment.

What it can do on your machine

Read from SKILL.md and the folder at commit 7bfa9ba. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • jq

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma Use loads about 4.6k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 870 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~4.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from dannote/figma-use at commit 7bfa9ba, republished under its MIT licence (© dannote). 870 words, ~4,646 tokens.

Download SKILL.mdSave it as .claude/skills/figma-use/SKILL.md (or your agent's skills folder). This skill also uses 335 other files; get the full folder from GitHub.
name
figma-use
description
Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.

figma-use

CLI for Figma. Two modes: commands and JSX.

bash
# Commands
figma-use create frame --width 400 --height 300 --fill "#FFF" --layout VERTICAL --gap 16
figma-use create icon mdi:home --size 32 --color "#3B82F6"
figma-use set fill 1:23 "$Colors/Primary"

# JSX (props directly on elements, NOT style={{}})
echo '<Frame p={24} bg="#3B82F6" rounded={12}>
  <Text size={18} color="#FFF">Hello</Text>
</Frame>' | figma-use render --stdin --x 100 --y 100

Before You Start

bash
figma-use status  # Check connection

If not connected — start Figma with remote debugging:

bash
# macOS
open -a Figma --args --remote-debugging-port=9222

# Windows
"%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222

# Linux
figma --remote-debugging-port=9222

Figma 126+ blocks remote debugging. Run figma-use patch once to fix, then restart Figma. Click Always Allow on the keychain prompt. Re-run after Figma updates.

Can't patch? Use figma-use daemon start --pipe — launches Figma with debug pipe, no patching needed.

Start Figma with --remote-debugging-port=9222 and you're ready.

Non-default port? If Figma is on another port, pass --port <N> to any command (or set the FIGMA_PORT env var). Errors will show the correct port.

bash
open -a Figma --args --remote-debugging-port=9333
figma-use get components --port 9333

Two Modes

Imperative — single operations:

bash
figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12
figma-use set fill <id> "#FF0000"
figma-use node move <id> --x 100 --y 200

Declarative — render JSX trees:

bash
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

stdin supports both pure JSX and full module syntax with imports:

tsx
import { Frame, Text, defineComponent } from 'figma-use/render'

const Button = defineComponent(
  'Button',
  <Frame bg="#3B82F6" p={12} rounded={6}>
    <Text color="#FFF">Click</Text>
  </Frame>
)

export default () => (
  <Frame flex="row" gap={8}>
    <Button />
    <Button />
  </Frame>
)

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

Use <Instance> to create component instances:

tsx
<Frame flex="row" gap={8}>
  <Instance component="59763:10626" />
  <Instance component="59763:10629" />
</Frame>

⚠️ Always use --x and --y to position renders. Don't stack everything at (0, 0).

Icons

150k+ icons from Iconify by name:

bash
figma-use create icon mdi:home
figma-use create icon lucide:star --size 48 --color "#F59E0B"
figma-use create icon heroicons:bell-solid --component  # as Figma component

In JSX:

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

Images

Load images from URL:

tsx
<Image src="https://example.com/photo.jpg" w={200} h={150} />

Export JSX

Convert Figma nodes back to JSX code:

bash
figma-use export jsx <id>           # Minified
figma-use export jsx <id> --pretty  # Formatted

# Format options
figma-use export jsx <id> --pretty --semi --tabs

# Match vector shapes to Iconify icons (requires: npm i whaticon)
figma-use export jsx <id> --match-icons
figma-use export jsx <id> --match-icons --icon-threshold 0.85 --prefer-icons lucide,tabler

Round-trip workflow:

bash
# Export → edit → re-render
figma-use export jsx <id> --pretty > component.tsx
# ... edit the file ...
figma-use render component.tsx --x 500 --y 0

Compare two nodes as JSX:

bash
figma-use diff jsx <from-id> <to-id>

Export Storybook (Experimental)

Export all components on current page as Storybook stories:

bash
figma-use export storybook                      # Output to ./stories/
figma-use export storybook --out ./src/stories  # Custom output dir
figma-use export storybook --match-icons        # Match vectors to Iconify icons
figma-use export storybook --no-semantic-html   # Disable semantic HTML conversion

Semantic HTML: By default, components are converted to semantic HTML elements based on their names:

  • Input/*, TextField/* → <input type="text">
  • Textarea/* → <textarea>
  • Checkbox/* → <input type="checkbox">
  • Radio/* → <input type="radio">
  • Button/* → <button>
  • Select/*, Dropdown/* → <select>

Use --no-semantic-html to disable this and keep <Frame> elements.

Generates .stories.tsx files:

  • ComponentSets → React component with props + stories with args
  • VARIANT properties → Union type props (variant?: 'Primary' | 'Secondary')
  • TEXT properties → Editable string props (label?: string)
  • Components grouped by / prefix → Button/Primary, Button/Secondary → Button.stories.tsx

Example output for Button with variant and label:

tsx
// Button.tsx
export interface ButtonProps {
  label?: string
  variant?: 'Primary' | 'Secondary'
}
export function Button({ label, variant }: ButtonProps) {
  if (variant === 'Primary')
    return (
      <Frame>
        <Text>{label}</Text>
      </Frame>
    )
  // ...
}

// Button.stories.tsx
export const Primary: StoryObj<typeof Button> = {
  args: { label: 'Click', variant: 'Primary' }
}

Variables as Tokens

Reference Figma variables in any color option with var:Name or $Name:

bash
figma-use create rect --width 100 --height 100 --fill 'var:Colors/Primary'
figma-use set fill <id> '$Brand/Accent'

In JSX:

tsx
<Frame bg="$Colors/Primary" />
<Text color="var:Text/Primary">Hello</Text>

Style Shorthands

Size & Position:

ShortFullValues
w, hwidth, heightnumber or "fill"
minW, maxWminWidth, maxWidthnumber
minH, maxHminHeight, maxHeightnumber
x, ypositionnumber

Layout:

ShortFullValues
flexflexDirection"row", "col"
gapspacingnumber
wraplayoutWraptrue
justifyjustifyContent"start", "center", "end", "between"
itemsalignItems"start", "center", "end"
p, px, pypaddingnumber
pt, pr, pb, plpadding sidesnumber
positionlayoutPositioning"absolute"
growlayoutGrownumber
stretchlayoutAligntrue → STRETCH

Appearance:

ShortFullValues
bgfillhex or $Variable
strokestrokeColorhex
strokeWidthstrokeWeightnumber
strokeAlignstrokeAlign"inside", "outside"
opacityopacity0..1
blendModeblendMode"multiply", etc.

Corners:

ShortFullValues
roundedcornerRadiusnumber
roundedTL/TR/BL/BRindividual cornersnumber
cornerSmoothingsquircle smoothing0..1 (iOS style)

Effects:

ShortFullValues
shadowdropShadow"0px 4px 8px rgba(0,0,0,0.25)"
blurlayerBlurnumber
overflowclipsContent"hidden"
rotaterotationdegrees

Text:

ShortFullValues
sizefontSizenumber
weightfontWeight"bold", number
fontfontFamilystring
colortextColorhex

Grid (CSS Grid layout):

ShortFullValues
displaylayoutMode"grid"
colsgridTemplateColumns"100px 1fr auto"
rowsgridTemplateRows"auto auto"
colGapcolumnGapnumber
rowGaprowGapnumber

Components (via .figma.tsx)

First call creates master, rest create instances:

tsx
import { defineComponent, Frame, Text } from 'figma-use/render'

const Card = defineComponent(
  'Card',
  <Frame p={24} bg="#FFF" rounded={12}>
    <Text size={18} color="#000">
      Card
    </Text>
  </Frame>
)

export default () => (
  <Frame gap={16} flex="row">
    <Card />
    <Card />
  </Frame>
)
bash
figma-use render ./Card.figma.tsx --x 100 --y 200
figma-use render --examples  # Full API reference

Variants (ComponentSet)

tsx
import { defineComponentSet, Frame, Text } from 'figma-use/render'

const Button = defineComponentSet(
  'Button',
  {
    variant: ['Primary', 'Secondary'] as const,
    size: ['Small', 'Large'] as const
  },
  ({ variant, size }) => (
    <Frame
      p={size === 'Large' ? 16 : 8}
      bg={variant === 'Primary' ? '#3B82F6' : '#E5E7EB'}
      rounded={8}
    >
      <Text color={variant === 'Primary' ? '#FFF' : '#111'}>
        {variant} {size}
      </Text>
    </Frame>
  )
)

Creates real ComponentSet with all combinations.

Diffs

Compare frames and generate patch:

bash
figma-use diff create --from <id1> --to <id2>
diff
--- /Card/Header #123:457
+++ /Card/Header #789:013
 type: FRAME
 size: 200 50
-fill: #FFFFFF
+fill: #F0F0F0

⚠️ Context lines need space prefix: size: 200 50 not size: 200 50

Apply with validation:

bash
figma-use diff apply patch.diff            # Fails if old values don't match
figma-use diff apply patch.diff --dry-run  # Preview
figma-use diff apply patch.diff --force    # Skip validation

Visual diff (red = changed pixels):

bash
figma-use diff visual --from <id1> --to <id2> --output diff.png

⚠️ After initial render, use diffs or direct commands. Don't re-render full JSX trees.

Show full SKILL.md (337 more words)Show less

Query (XPath)

Find nodes using XPath selectors:

bash
figma-use query "//FRAME"                              # All frames
figma-use query "//FRAME[@width < 300]"                # Frames narrower than 300px
figma-use query "//COMPONENT[starts-with(@name, 'Button')]"  # Name starts with
figma-use query "//FRAME[contains(@name, 'Card')]"     # Name contains
figma-use query "//SECTION/FRAME"                      # Direct children
figma-use query "//SECTION//TEXT"                      # All descendants
figma-use query "//*[@cornerRadius > 0]"               # Any node with radius
figma-use query "//FRAME[@width > 100 and @width < 500]"  # Range

Attributes: name, width, height, x, y, cornerRadius, opacity, visible, characters, fontSize, layoutMode, itemSpacing

XPath functions: contains(), starts-with(), string-length(), not(), and, or

Common Commands

bash
# Create
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

# Find
figma-use query "//FRAME[@name = 'Header']"
figma-use find --name "Button"
figma-use find --type FRAME
figma-use selection get

# Explore
figma-use node ancestors <id>              # Get parent chain (useful for navigation)
figma-use node bindings <id>               # Get variable bindings for fills/strokes
figma-use page bounds                      # Find free space for new objects
figma-use variable find "Text/Neutral"     # Search variables by name

# Modify
figma-use set fill <id> "#FF0000"
figma-use set radius <id> 12
figma-use set text <id> "New text"
figma-use set text-resize <id> height   # Wrap text (height auto, fixed width)
figma-use set layout <id> --mode VERTICAL --gap 12 --padding 16
figma-use set layout <id> --mode GRID --cols "1fr 1fr 1fr" --rows "auto" --gap 16
figma-use node move <id> --x 100 --y 200
figma-use node resize <id> --width 300 --height 200
figma-use node delete <id> [id2...]
figma-use arrange                              # Tidy up overlapping frames on canvas
figma-use node to-component <id>

# Export
figma-use export node <id> --output design.png
figma-use export screenshot --output viewport.png

# Navigate
figma-use page list
figma-use page set "Page Name"
figma-use viewport zoom-to-fit <id>

# Daemon (faster sequential commands)
figma-use daemon start                     # Background daemon
figma-use daemon start --pipe              # Launch Figma with debug pipe (no patching)
figma-use daemon stop
figma-use daemon status

Full reference: REFERENCE.md

Analyze

Discovery tools for understanding design systems:

bash
# Repeated patterns — potential components
figma-use analyze clusters
figma-use analyze clusters --min-count 5

# Color palette
figma-use analyze colors                   # Usage frequency
figma-use analyze colors --show-similar    # Find similar colors to merge

# Typography
figma-use analyze typography               # All font combinations
figma-use analyze typography --group-by size

# Spacing
figma-use analyze spacing --grid 8         # Check 8px grid compliance

# Accessibility snapshot — extract interactive elements
figma-use analyze snapshot                 # Full page
figma-use analyze snapshot <id> -i         # Interactive only (buttons, inputs, etc.)
figma-use analyze snapshot --depth 6       # Limit depth

Use cases:

  • Component extraction — find copy-pasted elements that should be components
  • Design audit — identify inconsistencies, similar-but-different elements
  • Design system creation — discover existing colors, typography, spacing patterns
  • Onboarding — understand structure of unfamiliar design files

Output shows counts, examples, and warnings (e.g., off-grid spacing, hardcoded colors).

Lint (Experimental)

Check designs for consistency and accessibility issues:

bash
figma-use lint                          # Recommended preset
figma-use lint --page "Components"      # Lint specific page
figma-use lint --preset strict          # Stricter rules
figma-use lint --preset accessibility   # A11y only (contrast, touch targets)
figma-use lint --rule color-contrast    # Single rule
figma-use lint -v                       # With fix suggestions
figma-use lint --json                   # For CI/CD
figma-use lint --list-rules             # Show all rules

Presets: recommended, strict, accessibility, design-system

17 rules:

  • Design tokens: no-hardcoded-colors, consistent-spacing, consistent-radius, effect-style-required
  • Layout: prefer-auto-layout, pixel-perfect
  • Typography: text-style-required, min-text-size, no-mixed-styles
  • Accessibility: color-contrast, touch-target-size
  • Structure: no-default-names, no-hidden-layers, no-deeply-nested, no-empty-frames, no-groups
  • Components: no-detached-instances

Exit code 1 if errors found — use in CI pipelines.

Output

Human-readable by default — prefer this to save tokens. Use --json only when you need to parse specific fields programmatically.

Node IDs

Format: session:local (e.g., 1:23). Inside instances: I<instance-id>;<internal-id>.

Get IDs from figma-use selection get or figma-use node tree.

Colors

Hex: #RGB, #RRGGBB, #RRGGBBAA Variables: var:Colors/Primary or $Colors/Primary

Best Practices

Always verify visually
bash
figma-use export node <id> --output /tmp/check.png
Always zoom after creating
bash
figma-use viewport zoom-to-fit <id>
Position multiple renders separately
bash
echo '...' | figma-use render --stdin --x 0 --y 0
echo '...' | figma-use render --stdin --x 500 --y 0    # Not at same position!
Arrange after batch creation

After creating multiple frames/sections, run arrange to spread them out:

bash
figma-use arrange --mode grid --gap 60       # Grid layout (default)
figma-use arrange --mode squarify --gap 60   # Smart packing for mixed sizes
Copy between pages
bash
figma-use node clone <id> [id2...] --json | jq -r '.[].id'
figma-use node set-parent <new-id> --parent <target-page-id>
figma-use node move <new-id> --x 50 --y 50
Replace node
bash
# Replace with component (creates instance)
figma-use node replace-with <id> --target <component-id>

# Replace with JSX from stdin
echo '<Icon name="lucide:x" size={16} />' | figma-use node replace-with <id> --stdin
Convert to component
bash
figma-use node to-component <id>
figma-use node to-component "1:2 1:3 1:4"  # Multiple
Instance internal IDs
bash
figma-use set text "I123:456;789:10" "New text"  # I<instance>;<internal>
Row layout needs width
bash
# ❌ Collapses to 1×1
<Frame flex="row" gap={8}>

# ✅ Explicit width
<Frame w={300} flex="row" gap={8}>
Sections
bash
figma-use create section --name "Buttons" --x 0 --y 0 --width 600 --height 200
figma-use node set-parent <id> --parent <section-id>

⚠️ Deleting section deletes all children!

Comment-driven workflow

Wait for designer feedback and react:

bash
figma-use comment watch --json

Output when comment arrives:

json
{
  "id": "123456",
  "message": "Make this button bigger",
  "user": { "handle": "designer" },
  "client_meta": { "node_id": "1:23" }
}

Agent workflow — run once per comment, then restart:

  1. figma-use comment watch --json — blocks until new comment
  2. Parse the JSON, get message and target_node (exact element under comment)
  3. Process the request (modify design, etc.)
  4. Reply: figma-use comment add "Done!" --reply <comment-id>
  5. Resolve: figma-use comment resolve <comment-id>
  6. Exit. External runner restarts for next comment.

Options:

  • --timeout 60 — exit after 60s if no comment (returns {"timeout":true})
  • --interval 5 — poll every 5s (default: 3s)
Vector paths — iterative workflow

Draw, screenshot, adjust, repeat — like a designer tweaking Bezier curves:

bash
# 1. Draw initial shape
figma-use create vector --path "M 50 0 L 100 100 L 0 100 Z" --fill "#F00"

# 2. Check result
figma-use export node <id> --output /tmp/shape.png

# 3. Adjust: scale, move, flip
figma-use path scale <id> --factor 0.8
figma-use path move <id> --dx 20 --dy -10
figma-use path flip <id> --axis x

# 4. Or replace path entirely
figma-use path set <id> "M 50 0 C 80 30 80 70 50 100 C 20 70 20 30 50 0 Z"

# 5. Screenshot again, repeat until good
figma-use export node <id> --output /tmp/shape.png

For complex illustrations, import SVG:

bash
figma-use import --svg "$(cat icon.svg)"

© dannote, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 335 other files (scripts, assets) in the repository root of dannote/figma-use.

  • SKILL.md
  • .gitignore
  • .oxfmtrc.json
  • .oxlintrc.json
  • AGENTS.md
  • CHANGELOG.md
  • CONTRIBUTING.md
  • LICENSE
  • MCP.md
  • README.md
  • REFERENCE.md
  • assets/diff-after.png
  • assets/diff-before.png
  • assets/diff-result.png
  • bin/figma-use.js
  • bun.lock
  • examples/Card.figma.tsx
  • package.json
  • … and 318 more

Open the folder on GitHubat commit 7bfa9ba

Compare with similar skills

Figma Use next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma Use compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Figma Use this skilldannote/figma-use607—~4.6kAutomated safety check: PassMIT
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
Connect Component To Figmadequelabs/cauldron129—~2kAutomated safety check: PassMPL-2.0
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT
Loora Design Guidelassejlv/loora140—~2.4kAutomated safety check: PassAGPL-3.0
Create React Modletbitovi/ai-enablement-prompts121—~2.1kAutomated safety check: PassMIT

Similar skills

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Connect Component To Figma

    dequelabs/cauldron

    Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.

    129 GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Loora Design Guide

    lassejlv/loora

    Build, edit, refine, troubleshoot, and review polished responsive product interfaces through the Loora MCP server and its structured Canvas schemas.

    140 GitHub stars~2.4k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed

  • Create React Modlet

    bitovi/ai-enablement-prompts

    Create React components, hooks, or utilities following the modlet pattern.

    121 GitHub stars~2.1k tokensUpdated 27 days ago
    Frontend & DesignAuto-check passed

  • Figma Use

    shepherdjerred/monorepo

    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"…

    112 GitHub stars~946 tokensUpdated today
    Frontend & DesignAuto-check passed

Works with

Categories

Questions about Figma Use

What does Figma Use do?

Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Figma Use is an agent skill from dannote/figma-use. Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images.

When should I use Figma Use?

Figma Use fits situations like: asked to create/modify Figma designs; automate design tasks.

How do I install Figma Use in Claude Code?

Run `npx skills add dannote/figma-use --skill figma-use -a claude-code`. Or copy the skill folder (the dannote/figma-use repository) into .claude/skills/figma-use in your project. Claude Code loads it when a task matches its description.

How do I install Figma Use in Codex?

Run `npx skills add dannote/figma-use --skill figma-use -a codex`. Or copy the skill folder (the dannote/figma-use repository) into .agents/skills/figma-use in your project. Codex loads it when a task matches its description.

Can I use Figma Use in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dannote/figma-use --skill figma-use -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-use, .gemini/skills/figma-use, .github/skills/figma-use and .opencode/skills/figma-use in your project.

What does Figma Use need to run?

Going by SKILL.md and its folder, Figma Use needs JavaScript for the scripts in its folder and the command-line tools its instructions call (jq). Our summary lists: Node.js.

Does Figma Use access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Figma Use safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Figma Use use?

Figma Use is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma Use use?

About 4.6k tokens (SKILL.md is roughly 19k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma Use?

Skills that share tags, products or a category with Figma Use: Wonder Blocks (Khan/wonder-blocks, 163 stars), Connect Component To Figma (dequelabs/cauldron, 129 stars), Daleui (DaleStudy/daleui, 119 stars) and Loora Design Guide (lassejlv/loora, 140 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma Use?

dannote (a GitHub user) maintains it in dannote/figma-use, which has 607 GitHub stars. The repository was last updated on July 3, 2026.

Source: dannote/figma-use on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.