Learn FIGMA-PLUGIN-API with Real Code Examples

Install Figma desktop or use Figma web

Open Figma > Plugins > Development > New Plugin

Configure plugin manifest (manifest.json)

Develop main code (main.ts/js) and optional UI (ui.html/js)

Load and test plugin directly in Figma environment

Figma desktop or web

Node.js environment for TypeScript/JS

Code editor (VSCode recommended)

Plugin development manifest and folders

Optional build tools for bundling UI code

manifest.json - plugin metadata and permissions

code/ - main plugin logic

ui/ - optional plugin panel code

assets/ - images/icons/fonts for UI

tests/ - plugin testing scripts

npm install typescript

tsc - compile TypeScript plugin

figma-plugin-cli - optional build helper

npm run watch - live reload plugin during development

Upload plugin via Figma desktop/web for testing

Plugin UI can support multiple languages

Strings stored separately for localization

Supports UTF-8 text rendering

Dynamic content from external sources can be localized

Independent of Figma document locale

UI should be keyboard-navigable

Labels for buttons and inputs

Respect system dark/light mode

Avoid excessive flashing in UI

Provide text alternatives for icons

Plugin UI styled with HTML/CSS/JS

Independent from Figma design styles

Responsive panels possible inside plugin window

Interactive elements controlled via JS

Supports dynamic updates and animations

Manage plugin data via clientStorage

Temporary runtime variables in main thread

UI thread state handled via JS/HTML

Event-driven updates for document changes

No global Figma state modification outside plugin

Node properties stored in Figma document

ClientStorage for persistent plugin data

Temporary in-memory storage in main/UI thread

JSON-based exchange for external data

Efficient batch operations for performance