MCPInstall

figma-use-cli

by reason-machinesFrontend & Design

Control Figma from command line with 100+ commands for AI agents to create shapes, text, components, set styles, and export designs

Installs
140
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill figma-use-cli
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads figma-use-cli automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Figma Use CLI

Skill by ara.so — Design Skills collection.

Control Figma from the command line with full read/write access. Create shapes, text, components, set styles, export images, and render JSX declaratively. Designed for AI agents to automate design workflows.

Installation

npm install -g figma-use

Start Figma with remote debugging:

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

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

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

Verify connection:

figma-use status

Note: Figma 126+ blocks remote debugging. Use figma-use daemon start --pipe as alternative.

Two Approaches

Imperative Commands

Execute individual operations:

# Create styled frame
figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12 --layout VERTICAL --gap 16

# Add text
figma-use create text --content "Hello World" --size 24 --weight bold --color "#000"

# Create icon from Iconify
figma-use create icon lucide:star --size 48 --color "#F59E0B"

Declarative JSX

Describe structure and render:

echo '<Frame style={{p: 24, gap: 16, flex: "col", bg: "#FFF", rounded: 12}}>
  <Text style={{size: 24, weight: "bold", color: "#000"}}>Card Title</Text>
  <Text style={{size: 14, color: "#666"}}>Description</Text>
</Frame>' | figma-use render --stdin --x 100 --y 200

Core Commands

Creating Elements

# Shapes
figma-use create frame --width 200 --height 100 --fill "#3B82F6"
figma-use create rectangle --width 100 --height 100 --fill "#10B981" --radius 8
figma-use create ellipse --width 50 --height 50 --fill "#F59E0B"
figma-use create text --content "Button" --size 16 --color "#FFF"

# Icons (150k+ from Iconify)
figma-use create icon mdi:home --size 32 --color "#3B82F6"
figma-use create icon lucide:settings --size 24

# Images
figma-use create image --url "https://example.com/photo.jpg" --width 200 --height 150

Modifying Nodes

# Set properties
figma-use set fill <node-id> --color "#FF6B6B"
figma-use set size <node-id> --width 300 --height 200
figma-use set position <node-id> --x 100 --y 150
figma-use set radius <node-id> --value 16
figma-use set opacity <node-id> --value 0.8

# Layout
figma-use set layout <node-id> --mode VERTICAL --gap 16 --padding 24
figma-use set layout <node-id> --mode GRID --cols "1fr 1fr 1fr" --gap 16

Inspection

# View hierarchy
figma-use node tree

# Get node details
figma-use node get <node-id>

# Query with XPath
figma-use query "//FRAME[@width < 300]"
figma-use query "//COMPONENT[starts-with(@name, 'Button')]"
figma-use query "//FRAME[contains(@name, 'Card')]"

Export

# Export images
figma-use export png <node-id> --output design.png --scale 2
figma-use export svg <node-id> --output icon.svg

# Export to JSX
figma-use export jsx <node-id> --pretty
figma-use export jsx <node-id> --match-icons --prefer-icons lucide

# Export to Storybook
figma-use export storybook --out ./stories

JSX Rendering

Basic Elements

Available elements: Frame, Rectangle, Ellipse, Text, Line, Star, Polygon, Vector, Group, Icon, Image

import { Frame, Text, Icon, Image } from 'figma-use/render'

export default () => (
  <Frame style={{ w: 400, h: 300, bg: '#FFF', rounded: 12, p: 24, gap: 16, flex: 'col' }}>
    <Frame style={{ flex: 'row', gap: 8 }}>
      <Icon icon="lucide:star" size={24} color="#F59E0B" />
      <Text style={{ size: 18, weight: 'bold', color: '#000' }}>Card Title</Text>
    </Frame>
    <Text style={{ size: 14, color: '#666', lineHeight: 1.5 }}>
      This is a description with multiple lines of text.
    </Text>
    <Image src="https://example.com/image.jpg" w={352} h={200} />
  </Frame>
)

Style Properties

// Size
w: 200, h: 100
minW: 100, maxW: 400
minH: 50, maxH: 300

// Colors
bg: '#3B82F6'
fill: 'var:Colors/Primary'  // Bind to Figma variable
stroke: '#000'
strokeWidth: 2

// Layout
flex: 'row' | 'col'
gap: 16
p: 24  // padding all sides
px: 16, py: 24  // horizontal/vertical
pt: 8, pr: 8, pb: 8, pl: 8  // individual sides

// Display
display: 'grid'
cols: '1fr 1fr 1fr'
rows: 'auto auto'
colGap: 16, rowGap: 16

// Shape
rounded: 12  // all corners
roundedTL: 12, roundedTR: 12, roundedBR: 12, roundedBL: 12

// Text
size: 16
weight: 'normal' | 'bold' | 'medium' | 'semibold'
align: 'left' | 'center' | 'right'
color: '#000'
lineHeight: 1.5
letterSpacing: 0.5

// Effects
opacity: 0.8
blur: 4
shadow: '0 4px 6px rgba(0,0,0,0.1)'

Components

Create reusable component definitions:

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

const Button = defineComponent(
  'Button',
  <Frame style={{ px: 16, py: 12, bg: '#3B82F6', rounded: 8, flex: 'row', gap: 8 }}>
    <Icon icon="lucide:save" size={18} color="#FFF" />
    <Text style={{ size: 16, weight: 'medium', color: '#FFF' }}>Save</Text>
  </Frame>
)

export default () => (
  <Frame style={{ gap: 16, flex: 'col' }}>
    <Button />
    <Button />
    <Button />
  </Frame>
)

Render the file:

figma-use render button.figma.tsx --x 100 --y 100

Component Variants

Define component sets with all variant combinations:

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

const Button = defineComponentSet(
  'Button',
  {
    variant: ['Primary', 'Secondary', 'Outline'] as const,
    size: ['Small', 'Medium', 'Large'] as const,
    state: ['Default', 'Hover', 'Disabled'] as const
  },
  ({ variant, size, state }) => {
    const bgColors = {
      Primary: state === 'Disabled' ? '#9CA3AF' : '#3B82F6',
      Secondary: state === 'Disabled' ? '#E5E7EB' : '#10B981',
      Outline: 'transparent'
    }
    
    const padding = size === 'Large' ? 16 : size === 'Medium' ? 12 : 8
    
    return (
      <Frame
        style={{
          px: padding * 2,
          py: padding,
          bg: bgColors[variant],
          rounded: 8,
          stroke: variant === 'Outline' ? '#3B82F6' : undefined,
          strokeWidth: variant === 'Outline' ? 2 : 0
        }}
      >
        <Text
          style={{
            size: size === 'Large' ? 18 : size === 'Medium' ? 16 : 14,
            color: variant === 'Primary' ? '#FFF' : '#111'
          }}
        >
          {variant} {size}
        </Text>
      </Frame>
    )
  }
)

export default () => (
  <Frame style={{ gap: 16, flex: 'col' }}>
    <Button variant="Primary" size="Large" state="Default" />
    <Button variant="Secondary" size="Medium" state="Hover" />
    <Button variant="Outline" size="Small" state="Default" />
  </Frame>
)

Grid Layouts

CSS Grid for 2D layouts:

<Frame
  style={{
    display: 'grid',
    cols: '100px 1fr 100px',
    rows: 'auto auto',
    gap: 16,
    w: 600,
    h: 400
  }}
>
  <Frame style={{ bg: '#FF6B6B' }} />
  <Frame style={{ bg: '#4ECDC4' }} />
  <Frame style={{ bg: '#45B7D1' }} />
  <Frame style={{ bg: '#96CEB4' }} />
  <Frame style={{ bg: '#FFEAA7' }} />
  <Frame style={{ bg: '#DDA0DD' }} />
</Frame>

Calendar example:

<Frame
  style={{
    display: 'grid',
    cols: 'repeat(7, 1fr)',
    rows: 'repeat(5, 1fr)',
    gap: 8,
    w: 400,
    h: 300
  }}
>
  {Array.from({ length: 35 }, (_, i) => (
    <Frame
      key={i}
      style={{
        bg: i % 7 === 0 || i % 7 === 6 ? '#F3F4F6' : '#FFF',
        rounded: 8,
        p: 8
      }}
    >
      <Text style={{ size: 14, color: '#000' }}>{i + 1}</Text>
    </Frame>
  ))}
</Frame>

Design Tokens with Variables

Bind colors to Figma variables:

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

const colors = defineVars({
  bg: { name: 'Colors/Gray/50', value: '#F8FAFC' },
  text: { name: 'Colors/Gray/900', value: '#0F172A' },
  primary: { name: 'Colors/Blue/500', value: '#3B82F6' },
  secondary: { name: 'Colors/Green/500', value: '#10B981' }
})

export default () => (
  <Frame style={{ bg: colors.bg, p: 24, gap: 16, flex: 'col' }}>
    <Text style={{ color: colors.text, size: 24 }}>Bound to variables</Text>
    <Frame style={{ bg: colors.primary, p: 16, rounded: 8 }}>
      <Text style={{ color: '#FFF', size: 16 }}>Primary Button</Text>
    </Frame>
  </Frame>
)

Advanced Features

Icons from Iconify

150,000+ icons available without downloads:

# Browse at https://icon-sets.iconify.design/

figma-use create icon mdi:home
figma-use create icon lucide:star --size 48 --color "#F59E0B"
figma-use create icon heroicons:check-circle --size 32

In JSX:

<Frame style={{ flex: 'row', gap: 12 }}>
  <Icon icon="mdi:home" size={24} color="#3B82F6" />
  <Icon icon="lucide:star" size={24} color="#F59E0B" />
  <Icon icon="heroicons:check-circle" size={24} color="#10B981" />
</Frame>

Diffs and Patches

Compare nodes and generate patches:

# Create diff
figma-use diff create --from 123:456 --to 789:012

# Visual diff (highlights changes in red)
figma-use diff visual --from 49:275096 --to 49:280802 --output diff.png

# Compare as JSX
figma-use diff jsx 123:456 789:012

Analysis Tools

Discover patterns and inconsistencies:

# Find repeated patterns (potential components)
figma-use analyze clusters

# Color usage analysis
figma-use analyze colors
figma-use analyze colors --show-similar

# Typography audit
figma-use analyze typography
figma-use analyze typography --group-by size

# Spacing consistency
figma-use analyze spacing --grid 8

# Accessibility tree
figma-use analyze snapshot
figma-use analyze snapshot <node-id> -i

Linting

Check design consistency:

figma-use lint
figma-use lint --page "Components"
figma-use lint --preset strict
figma-use lint --preset accessibility
figma-use lint -v  # verbose with fix suggestions

Canvas Organization

Arrange nodes automatically:

# Grid layout (default)
figma-use arrange

# Horizontal row
figma-use arrange --mode row --gap 60

# Smart packing for mixed sizes
figma-use arrange --mode squarify --gap 60

# Binary tree packing
figma-use arrange --mode binary --gap 40

Vector Path Manipulation

Work with SVG paths:

# Get path data
figma-use path get <node-id>

# Set path
figma-use path set <node-id> "M 0 0 L 100 100 Z"

# Transform
figma-use path scale <node-id> --factor 1.5
figma-use path translate <node-id> --x 10 --y 20
figma-use path flip <node-id> --axis x
figma-use path rotate <node-id> --angle 45

Practical Examples

Design System Button Variants

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

const Button = defineComponentSet(
  'Button',
  {
    variant: ['Primary', 'Secondary', 'Ghost'] as const,
    size: ['SM', 'MD', 'LG'] as const,
    icon: ['None', 'Left', 'Right'] as const
  },
  ({ variant, size, icon }) => {
    const sizeMap = { SM: { px: 12, py: 6, text: 14 }, MD: { px: 16, py: 10, text: 16 }, LG: { px: 20, py: 14, text: 18 } }
    const colorMap = {
      Primary: { bg: '#3B82F6', text: '#FFF' },
      Secondary: { bg: '#E5E7EB', text: '#111' },
      Ghost: { bg: 'transparent', text: '#3B82F6' }
    }
    
    const s = sizeMap[size]
    const c = colorMap[variant]
    
    return (
      <Frame style={{ px: s.px, py: s.py, bg: c.bg, rounded: 8, flex: 'row', gap: 8 }}>
        {icon === 'Left' && <Icon icon="lucide:arrow-left" size={s.text} color={c.text} />}
        <Text style={{ size: s.text, weight: 'medium', color: c.text }}>Button</Text>
        {icon === 'Right' && <Icon icon="lucide:arrow-right" size={s.text} color={c.text} />}
      </Frame>
    )
  }
)

export default () => (
  <Frame style={{ gap: 24, flex: 'col', p: 40 }}>
    <Button variant="Primary" size="LG" icon="Right" />
    <Button variant="Secondary" size="MD" icon="None" />
    <Button variant="Ghost" size="SM" icon="Left" />
  </Frame>
)

Calendar UI

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

const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const daysInMonth = 31

export default () => (
  <Frame style={{ w: 400, p: 24, bg: '#FFF', rounded: 16, gap: 16, flex: 'col' }}>
    <Text style={{ size: 20, weight: 'bold', color: '#000' }}>January 2024</Text>
    
    <Frame style={{ display: 'grid', cols: 'repeat(7, 1fr)', gap: 8 }}>
      {days.map(day => (
        <Text key={day} style={{ size: 12, weight: 'medium', color: '#666', align: 'center' }}>
          {day}
        </Text>
      ))}
    </Frame>
    
    <Frame style={{ display: 'grid', cols: 'repeat(7, 1fr)', rows: 'repeat(5, 1fr)', gap: 4 }}>
      {Array.from({ length: daysInMonth }, (_, i) => (
        <Frame
          key={i}
          style={{
            bg: i === 14 ? '#3B82F6' : '#F9FAFB',
            rounded: 8,
            p: 8,
            flex: 'col'
          }}
        >
          <Text
            style={{
              size: 14,
              color: i === 14 ? '#FFF' : '#000',
              align: 'center'
            }}
          >
            {i + 1}
          </Text>
        </Frame>
      ))}
    </Frame>
  </Frame>
)

Dashboard Layout

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

const StatCard = ({ title, value, icon, color }: { title: string; value: string; icon: string; color: string }) => (
  <Frame style={{ bg: '#FFF', rounded: 12, p: 20, gap: 12, flex: 'col' }}>
    <Frame style={{ flex: 'row', gap: 8 }}>
      <Frame style={{ w: 40, h: 40, bg: color + '20', rounded: 8, flex: 'row' }}>
        <Icon icon={icon} size={24} color={color} />
      </Frame>
      <Frame style={{ flex: 'col', gap: 4 }}>
        <Text style={{ size: 14, color: '#666' }}>{title}</Text>
        <Text style={{ size: 24, weight: 'bold', color: '#000' }}>{value}</Text>
      </Frame>
    </Frame>
  </Frame>
)

export default () => (
  <Frame style={{ w: 1200, p: 40, bg: '#F9FAFB', gap: 24, flex: 'col' }}>
    <Text style={{ size: 28, weight: 'bold', color: '#000' }}>Dashboard</Text>
    
    <Frame style={{ display: 'grid', cols: '1fr 1fr 1fr 1fr', gap: 20 }}>
      <StatCard title="Total Users" value="12,543" icon="lucide:users" color="#3B82F6" />
      <StatCard title="Revenue" value="$45,231" icon="lucide:dollar-sign" color="#10B981" />
      <StatCard title="Orders" value="1,234" icon="lucide:shopping-cart" color="#F59E0B" />
      <StatCard title="Growth" value="+23%" icon="lucide:trending-up" color="#8B5CF6" />
    </Frame>
  </Frame>
)

Troubleshooting

Connection Issues

If figma-use status fails:

  1. Ensure Figma is running with --remote-debugging-port=9222
  2. Check no other process uses port 9222
  3. For Figma 126+, use pipe mode:
figma-use daemon start --pipe

Render Failures

If JSX rendering fails:

# Check syntax
figma-use render file.figma.tsx --validate

# Verbose output
figma-use render file.figma.tsx --verbose

# Test with simple example first
echo '<Frame style={{w: 100, h: 100, bg: "#FF0000"}} />' | figma-use render --stdin

Variable Binding Issues

If variables don't bind:

# List available variables
figma-use variables list

# Use exact variable name
figma-use create frame --fill "var:Colors/Primary/500"

# Or reference by ID
figma-use create frame --fill "$abc123"

Node ID Format

Node IDs are in format pageId:nodeId:

# Get current page ID
figma-use page current

# Use full ID
figma-use node get 0:123

# Or just node ID if on current page
figma-use node get 123

Export Issues

If exports fail:

# Check node exists
figma-use node get <node-id>

# Try different format
figma-use export png <node-id> --scale 1 --output test.png

# Check permissions
ls -la $(pwd)

Environment Variables

# Custom debugging port
FIGMA_DEBUG_PORT=9222

# Custom timeout for operations (ms)
FIGMA_TIMEOUT=30000

# Log level
FIGMA_LOG_LEVEL=debug

Best Practices

  1. Use JSX for complex layouts — easier to visualize and maintain than sequential commands
  2. Define components once — first render creates master, subsequent renders create instances
  3. Bind to variables — use var: prefix for colors to maintain design system consistency
  4. Query before modify — use XPath queries to find nodes before batch operations
  5. Export to JSX for templates — capture existing designs as code for reuse
  6. Arrange after bulk creation — use figma-use arrange to organize canvas automatically
  7. Lint regularly — catch inconsistencies early with figma-use lint
  8. Use icons by name — avoid manual imports, let Iconify handle the library

FAQ

What does the figma-use-cli skill do?

Control Figma from command line with 100+ commands for AI agents to create shapes, text, components, set styles, and export designs

How do I install figma-use-cli?

Run npx skills add https://github.com/reason-machines/design-skills --skill figma-use-cli in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-use-cli/ (personal) or .claude/skills/figma-use-cli/ (project).

Which AI agents can use figma-use-cli?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is figma-use-cli safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains figma-use-cli?

It is published by reason-machines in reason-machines/design-skills. It has 140 recorded installs.

More from reason-machines/design-skills

View all →

awesome-claude-design

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

205 installs

open-design-ai-prototyping

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

174 installs

design-md-format

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

171 installs

open-codesign-ai-design

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

171 installs

design-md-chrome-extractor

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

166 installs

claude-design-system-hooks

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design165 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs