mcpField
F
figma-plugin

figma-plugin

github.com/srstompDevelopment979 installsUpdated 5w ago
Repository

About figma-plugin

figma-plugin is a development skill for building plugins that extend Figma. It explains the plugin's main and UI thread architecture, messaging, API usage, testing, and publishing.

Key features

  1. 01Explain main and UI thread roles
  2. 02Guide postMessage communication
  3. 03Cover Figma API and nodes
  4. 04Provide UI and React patterns
  5. 05Document testing and publishing

Use cases

  1. 01Plan a plugin's thread responsibilities
  2. 02Connect plugin logic with its iframe UI
  3. 03Build interfaces using React or plain HTML
  4. 04Prepare a plugin for testing and publishing

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/srstomp/pokayokay --skill figma-plugin

After installing, type/figma-pluginin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
api-globals-and-nodes.md
api-rendering-and-advanced.md
colors-and-text.md
development-testing-and-publishing.md
layout-storage-and-utilities.md
project-structure-and-build.md
selection-traversal-and-batching.md
ui-architecture-and-messaging.md
ui-patterns-and-resources.md
ui-react-and-theming.md

Details

From the project README

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

ReferenceDescription
project-structure-and-build.mdManifest, TypeScript setup, build configuration
development-testing-and-publishing.mdDev workflow, testing, publishing, troubleshooting
api-globals-and-nodes.mdGlobal objects, node types, components
api-rendering-and-advanced.mdPaints, effects, auto layout, styles, variables, events
ui-architecture-and-messaging.mdiframe UI, postMessage, typed messages, plain HTML
ui-react-and-theming.mdReact setup, hooks, Figma theme colors
ui-patterns-and-resources.mdLoading states, tabs, color pickers, file downloads
selection-traversal-and-batching.mdSelection handling, node traversal, batch operations
colors-and-text.mdColor conversion, manipulation, text operations
layout-storage-and-utilities.mdPositioning, alignment, storage, error handling, utilities

Comments

Markdown supported