How do I install the Figma Plugin skill?

Run npx skillmds@latest add bergside/figma-plugin in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Plugin safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Plugin?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Plugin free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Plugin?

bergside (@bergside) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Plugin by bergside — Agent Skill

Name: Figma Plugin
Author: bergside

File contents

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

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

References

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

---name: figma-plugindescription: Use when building Figma plugins, creating design automation tools, implementing sandbox/UI communication, or working with the Figma Plugin API for node manipulation, styles, and components.---# Figma Plugin DevelopmentBuild plugins that extend Figma's functionality using the Plugin API.## ArchitectureFigma 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 Checklist1. Set up project with `manifest.json` (name, id, main, ui)2. Create main thread code (`code.ts`) with plugin logic3. Create UI (`ui.html`) with interface elements4. Wire up postMessage communication between threads5. Test in Figma development mode6. 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 |

Frequently asked questions

Figma Plugin