skills.rest
tankpkg
tankpkgOFFICIAL
Explore all skills by this author →
GitHub

@tank/figma-plugin

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

1|1|Updated Feb 20, 2026
Search Tags:#figma#plugin development#codegen#ui development#figma api#figma widgets
One-click install
npx skills add https://github.com/tankpkg/skills --skill tank-figma-plugin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: @tank/figma-plugin
Source: https://github.com/tankpkg/skills/tree/main/skills/figma-plugin
Command: npx skills add https://github.com/tankpkg/skills --skill tank-figma-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for developing robust and efficient Figma plugins, covering everything from architecture to publishing.

Core Features & Use Cases

  • Plugin Architecture: Understand the dual-context model and communication patterns.
  • API Mastery: Learn to use the Figma Plugin API for node manipulation, styling, and layout.
  • Development Workflow: Get guidance on project setup, build tools, and testing strategies.
  • Use Case: You need to build a plugin that automatically generates design system documentation from Figma components. This Skill will guide you through setting up the project, accessing component data, and structuring your code.

Quick Start

Use the figma plugin skill to learn how to create a new Figma plugin.

Frequently Asked Questions about @tank/figma-plugin

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

FAQPage Schema
How do I build a Figma plugin that reads component data?▼

Building a Figma plugin requires understanding the dual-context architecture and using the Plugin API to access component data. You must set up an iframe for the plugin UI and use message passing to communicate with the main thread.

What is the best way to implement Dev Mode codegen for Figma nodes?▼

Implementing Dev Mode codegen involves using the Figma Plugin API to inspect node properties and styles, then mapping that data to generate code snippets. Your plugin registers codegen triggers to output framework-specific code directly in Dev Mode.

How does message passing work between the iframe and Figma Plugin API?▼

Message passing connects the plugin UI iframe to the Figma main thread. The iframe cannot directly access the Plugin API, so you use postMessage to send user interactions from the UI to the main thread to execute node manipulation and layout updates.

Can I use the Figma API to access variables and styles for design system documentation?▼

Yes, the Figma Plugin API allows you to programmatically access variables, styles, and components. You can traverse the document tree to extract these properties and automatically generate design system documentation from the file.

What do I need to know before publishing a Figma plugin to the marketplace?▼

Before publishing to the Figma marketplace, you need to understand the submission requirements, monetization options, and how to package your plugin. Proper project setup, build tool configuration, and testing strategies are essential prerequisites for approval.

Related Skills

Explore More Software Engineering Skills→
jholhewresjholhewres
3

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

Community
Basic
anselsourceanselsource

write-plugin-marketplaces

Create and distribute Claude Code plugin marketplaces with marketplace.json.

Official
Intermediate
caffeinelabscaffeinelabs

extension-authorization

Enforce role-based access control in Motoko canisters and React front-ends.

Official
Advanced
rodydavisrodydavis
58

lit-and-figma

Develop Figma plugins with Lit web components and WebAssembly.

Community
Advanced