Skip to Content
VibeCoder 1.0 is released 🎉
PluginsBuild Figma Plugin

Figma Plugins

Build Figma plugins to extend Figma’s functionality. Automate design tasks, create custom workflows, and integrate with external services using Claude Code.

Overview

Figma plugins let you add custom features to Figma. You can automate repetitive tasks, integrate with APIs, generate designs programmatically, and create custom tools for designers.

Prerequisites

Required

  1. Figma Desktop App - Download from figma.com/downloads 
  2. Node.js - Download from nodejs.org 
  3. Text Editor - VS Code recommended
  • Basic knowledge of JavaScript/TypeScript
  • Familiarity with Figma interface
  • Understanding of React (for UI plugins)

Setup

Create a new plugin

  1. Open Figma Desktop App

  2. Go to Plugins → Development → New Plugin

  3. Choose a template:

    • Empty - Blank plugin
    • With UI - Plugin with HTML interface
    • Run once - Simple one-time action

  4. Choose save location

  5. Figma generates starter files

Project Structure

my-plugin/
├── manifest.json     # Plugin configuration
├── code.ts          # Main plugin code (runs in sandbox)
├── ui.html          # Plugin UI (optional)
└── package.json     # Dependencies

Start Claude Code

cd path/to/your/plugin
claude

Development Workflow

Run your plugin

  1. In Figma: Plugins → Development → Your Plugin Name
  2. Plugin runs in current document
  3. Make changes to code
  4. Re-run plugin to see updates

Example prompts for Claude

"Create a plugin that generates a color palette from an image URL"

"Build a plugin that exports selected layers as React components"

"Create a plugin that auto-generates design system documentation"

"Build a plugin that imports data from CSV and creates text layers"

"Create a plugin that optimizes images by compressing them"

"Build a plugin that generates Lorem Ipsum text with custom parameters"

Plugin Types

Run-once Plugins

Execute an action and close immediately.

// Example: Rename all layers
figma.currentPage.children.forEach(node => {
  node.name = node.name.toUpperCase()
})
figma.closePlugin("✅ Renamed all layers")

UI Plugins

Show an interface for user interaction.

// code.ts - Show UI
figma.showUI(__html__, { width: 400, height: 300 })
 
// Receive messages from UI
figma.ui.onmessage = msg => {
  if (msg.type === 'create-shapes') {
    // Create shapes based on UI input
  }
}
<!-- ui.html - Send messages to plugin -->
<button onclick="parent.postMessage({
  pluginMessage: { type: 'create-shapes', count: 5 }
}, '*')">Create Shapes</button>

Common Plugin Features

Access Selection

claude "get all selected layers and log their names"

Create Shapes

claude "create 10 random rectangles with different colors"

Modify Properties

claude "change all text layers to use 'Inter' font"

Work with Colors

claude "extract all colors used in the current page"

Generate Components

claude "create a button component with variants for primary, secondary, and disabled states"

Export Assets

claude "export all images in the current frame as PNG files"

Read Data

claude "read text from all text layers and create a list"

Import Data

claude "create text layers from a JSON array of names"

Advanced Features

External API Integration

claude "fetch quotes from an API and create text layers with the quotes"

Image Processing

claude "apply filters to selected images"

Auto Layout

claude "convert selected frames to auto layout"

Component Management

claude "find all instances of a component and update their properties"

Batch Operations

claude "resize all frames to 1920x1080"

Building UI with React

Setup React

npm install react react-dom
npm install -D @types/react @types/react-dom

Example UI Plugin

claude "create a plugin UI using React that lets users generate a color palette"

Figma API Highlights

Common APIs

// Selection
const selection = figma.currentPage.selection
 
// Create rectangle
const rect = figma.createRectangle()
rect.resize(100, 100)
rect.fills = [{type: 'SOLID', color: {r: 1, g: 0, b: 0}}]
 
// Create text
const text = figma.createText()
await figma.loadFontAsync(text.fontName)
text.characters = "Hello World"
 
// Export
const bytes = await node.exportAsync({format: 'PNG'})

Access Styles

claude "get all color styles in the document and list their hex values"

Variables (Design Tokens)

claude "create variables for spacing tokens (4, 8, 16, 32, 64)"

Testing

Run in Figma

Test in real Figma environment:

  1. Make changes to code
  2. Run plugin in Figma
  3. Check console for errors (Ctrl+Opt+I or Ctrl+Shift+I)

TypeScript

Use TypeScript for better error checking:

claude "convert my JavaScript plugin to TypeScript"

Publishing

Prepare for Publishing

  1. Test thoroughly
  2. Add icon (manifest.json)
  3. Write clear description
  4. Create screenshots
  5. Set permissions
claude "help me prepare my plugin for publishing on Figma Community"

Publish to Community

  1. In Figma: Plugins → Development → Publish Plugin
  2. Fill out plugin details
  3. Upload screenshots
  4. Submit for review

Update Published Plugin

  1. Make changes
  2. Update version in manifest.json
  3. Publish new version in Figma

Pro Tips

Always test your plugin on different file sizes. Large files can cause performance issues.

  • Use TypeScript to catch errors early
  • Keep plugin code lightweight for better performance
  • Handle errors gracefully (files can be large or complex)
  • Use async/await for font loading and exports
  • Cache data when possible to reduce API calls
  • Provide clear user feedback (loading states, success messages)
  • Test with empty selections and edge cases
  • Follow Figma’s plugin guidelines

Common Use Cases

Design System Tools

claude "create a plugin that generates all component variations from a design system spec"

Content Generation

claude "build a plugin that generates realistic user profiles with avatars and names"

Export Tools

claude "create a plugin that exports designs as HTML/CSS"

Accessibility Checkers

claude "build a plugin that checks color contrast ratios"

Data Visualization

claude "create a plugin that generates charts from CSV data"

Icon Management

claude "build a plugin that imports icons from an icon library API"

Example Plugin Ideas

  • Color palette generator from images
  • Lorem ipsum text generator
  • Design system documentation generator
  • CSV to Figma table converter
  • Batch resize tool
  • Component variant generator
  • Export to React components
  • Icon set importer
  • Spell checker for text layers
  • Layout grid generator
  • Chart creator
  • QR code generator
  • Barcode generator
  • Placeholder image generator

Debugging

Console Logging

console.log("Selection:", figma.currentPage.selection)

Error Handling

claude "add try-catch error handling to my plugin code"

Chrome DevTools

Open DevTools in Figma:

  • Mac: Cmd + Opt + I
  • Windows: Ctrl + Shift + I

Resources

Security

Never expose API keys in plugin code. Use environment variables or ask users to input their own keys.

Next Steps

  1. Install Figma Desktop App
  2. Create a new plugin using Figma’s built-in generator
  3. Start Claude Code in your plugin directory
  4. Build your first plugin
  5. Test thoroughly in Figma
  6. Publish to Figma Community

Start building plugins that make design workflows faster and more powerful!

Last updated on
Build iOS AppCLI