Learn FIGMA-PLUGIN-API with Real Code Examples
Updated Nov 26, 2025
Installation Setup
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
Environment Setup
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
Config Files
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
Cli Commands
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
Internationalization
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
Accessibility
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
Ui Styling
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
State Management
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
Data Management
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