Skill134 repo starsupdated 2mo ago

figma-plugin

This skill provides comprehensive guidance for building Figma plugins that extend the application's functionality through the Plugin API. It covers the two-thread architecture (main thread for Figma operations, UI thread for interface), postMessage communication patterns, project setup with manifest configuration, and development workflows including testing and publishing. Use this when creating design automation tools, implementing custom UI components within Figma, manipulating document nodes and styles, or building plugins that bridge Figma's API with external services.

View source Repository: design-md-figma

Install in Claude Code

Copy

git clone --depth 1 https://github.com/bergside/design-md-figma /tmp/figma-plugin && cp -r /tmp/figma-plugin/.agents/skills/figma-plugin ~/.claude/skills/figma-plugin

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# Figma Plugin Development

Build plugins that extend Figma's functionality using the Plugin API.

## Architecture

Figma plugins run in two threads communicating via postMessage:
- **Main thread (sandbox)**: Plugin API access, node manipulation, `figma.*` calls
- **UI thread (iframe)**: HTML/CSS/JS interface, no Figma API access, npm packages allowed

## Key Principles

- Main thread handles all Figma document operations
- UI thread handles user interface and external APIs
- Communication between threads via `figma.ui.postMessage()` and `onmessage`
- Plugins must be performant — avoid blocking the main thread

## Quick Start Checklist

1. Set up project with `manifest.json` (name, id, main, ui)
2. Create main thread code (`code.ts`) with plugin logic
3. Create UI (`ui.html`) with interface elements
4. Wire up postMessage communication between threads
5. Test in Figma development mode
6. Publish via Figma Community

## References

| Reference | Description |
|-----------|-------------|
| [project-structure-and-build.md](references/project-structure-and-build.md) | Manifest, TypeScript setup, build configuration |
| [development-testing-and-publishing.md](references/development-testing-and-publishing.md) | Dev workflow, testing, publishing, troubleshooting |
| [api-globals-and-nodes.md](references/api-globals-and-nodes.md) | Global objects, node types, components |
| [api-rendering-and-advanced.md](references/api-rendering-and-advanced.md) | Paints, effects, auto layout, styles, variables, events |
| [ui-architecture-and-messaging.md](references/ui-architecture-and-messaging.md) | iframe UI, postMessage, typed messages, plain HTML |
| [ui-react-and-theming.md](references/ui-react-and-theming.md) | React setup, hooks, Figma theme colors |
| [ui-patterns-and-resources.md](references/ui-patterns-and-resources.md) | Loading states, tabs, color pickers, file downloads |
| [selection-traversal-and-batching.md](references/selection-traversal-and-batching.md) | Selection handling, node traversal, batch operations |
| [colors-and-text.md](references/colors-and-text.md) | Color conversion, manipulation, text operations |
| [layout-storage-and-utilities.md](references/layout-storage-and-utilities.md) | Positioning, alignment, storage, error handling, utilities |