Back to Details

figma-plugin

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Plugin Development

Figma插件开发

Build plugins that extend Figma's functionality using the Plugin API.
基于Plugin API构建可扩展Figma功能的插件。

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
Figma插件运行在两个通过postMessage通信的线程中：
  • 主线程（沙箱）：拥有Plugin API访问权限，可进行节点操作、调用
    figma.*
    方法
  • UI线程（iframe）：负责HTML/CSS/JS界面，无Figma API访问权限，可使用npm包

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
  • 主线程处理所有Figma文档操作
  • UI线程负责用户界面与外部API
  • 线程间通过
    figma.ui.postMessage()
    和
    onmessage
    实现通信
  • 插件需保证性能——避免阻塞主线程

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
  1. 使用
    manifest.json
    （包含名称、id、main、ui）搭建项目
  2. 创建包含插件逻辑的主线程代码（
    code.ts
    ）
  3. 创建带界面元素的UI（
    ui.html
    ）
  4. 配置线程间的postMessage通信
  5. 在Figma开发模式中测试
  6. 通过Figma社区发布

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
参考文档说明
project-structure-and-build.md清单文件、TypeScript配置、构建配置
development-testing-and-publishing.md开发工作流、测试、发布、问题排查
api-globals-and-nodes.md全局对象、节点类型、组件
api-rendering-and-advanced.md填充、效果、自动布局、样式、变量、事件
ui-architecture-and-messaging.mdiframe UI、postMessage、类型化消息、纯HTML
ui-react-and-theming.mdReact配置、钩子、Figma主题色
ui-patterns-and-resources.md加载状态、标签页、颜色选择器、文件下载
selection-traversal-and-batching.md选择处理、节点遍历、批量操作
colors-and-text.md颜色转换、处理、文本操作
layout-storage-and-utilities.md定位、对齐、存储、错误处理、工具函数