skills.rest
christophhdesign
christophhdesignCOMMUNITY
Explore all skills by this author →
GitHub

figma-plugin-dev

Develop Figma plugins and widgets using figma.* API code.

9|1|Updated Mar 18, 2026
Search Tags:#typescript#debugging#patterns#ui-patterns#plugin-api#figma-plugin#sandbox-architecture
One-click install
npx skills add https://github.com/christophhdesign/figma-plugin-developer-skill --skill figma-plugin-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-plugin-dev
Source: https://github.com/christophhdesign/figma-plugin-developer-skill/tree/main
Command: npx skills add https://github.com/christophhdesign/figma-plugin-developer-skill --skill figma-plugin-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps Claude Code become an expert Figma plugin developer by embedding deep knowledge of the Plugin API, REST API, sandbox architecture, and UI best practices, enabling faster building, debugging, or extending Figma plugins or widgets.

Core Features & Use Cases

  • Knowledge of the Plugin API, REST API, sandbox architecture, Grid/Auto Layout systems, Variables/theming, and UI patterns to guide implementation and debugging.
  • Use cases include creating manifest.json, code.js/code.ts, ui.html, or any figma.* API code across Figma, FigJam, Slides, and Buzz editor types.
  • Claude can apply best practices and design patterns to real-world plugin tasks, from initial scaffolding to maintenance, ensuring robust, scalable plugins.

Quick Start

Open a Figma plugin project and ask Claude Code to apply the Figma plugin development skill immediately.

Frequently Asked Questions about figma-plugin-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Figma plugin using TypeScript and the Plugin API?▼

Build a Figma plugin by scaffolding manifest.json, code.ts, and ui.html files using the Plugin API. This Skill embeds TypeScript patterns, sandbox architecture knowledge, and UI best practices to guide implementation and debugging.

How does the sandbox architecture work in Figma plugin development?▼

The sandbox architecture separates your plugin's main thread code from its UI iframe, requiring message passing for communication. This Skill provides architectural patterns to safely bridge the sandbox and manage state between code.ts and ui.html.

Can I use this to debug existing figma.* API code and manifest.json files?▼

Yes, you can debug existing figma.* API code and manifest.json files. The Skill applies deep API knowledge to identify issues across Figma, FigJam, Slides, and Buzz editors, ensuring robust plugin maintenance.

What's the best way to implement UI patterns and theming in a Figma widget?▼

Implement UI patterns and theming by applying Auto Layout, Grid systems, and Variables within your ui.html file. This Skill provides deterministic UI pattern references to ensure scalable and responsive Figma widget designs.

Does this support Figma plugin development for FigJam and Slides editor types?▼

Yes, this supports Figma plugin development across Figma, FigJam, Slides, and Buzz editor types. It embeds comprehensive API and architecture knowledge to handle the specific constraints of each editor environment.

Why is my Figma plugin not working when communicating between code.ts and ui.html?▼

Your Figma plugin is likely failing due to sandbox communication limits between code.ts and ui.html. This Skill addresses these constraints by providing safe message passing patterns and deterministic architectural references.

Related Skills

Explore More Software Engineering Skills→
rogierogie
64

figui3

Build Figma-style plugin interfaces with web components and design tokens.

Community
Basic
tankpkgtankpkg
1

@tank/figma-plugin

Guide Figma plugin development using the Plugin API and Dev Mode codegen.

Official
Advanced
dabowmandabowman

figma-plugins

Develops and deploys Figma plugins using the official Plugin API and manifest configuration.

Community
Advanced
phuetzphuetz
30

figma

Automate Figma design workflows via REST API, Plugin API, and MCP server.

Community
Intermediate