Figma 插件编写器

编写插件代码（code.js）以在 Figma 文件中实现设计自动化。更新代码后，通知用户运行插件。

前置条件

用户必须提供：

1. 1. 插件目录 — 包含 code.js 和 manifest.json 的文件夹
2. 代码文件 — 通常是 code.js
3. 目标 Figma 文件 — 可选，用于提供上下文

工作流程

1. 1. 接收用户的设计需求
2. 将插件代码写入 code.js
3. 通知用户：插件 → 开发 → <插件名称>
4. 根据反馈进行迭代

API 参考

字体加载（创建文本前必需）

js
await figma.loadFontAsync({ family: Inter, style: Regular });
await figma.loadFontAsync({ family: Inter, style: Medium });
await figma.loadFontAsync({ family: Inter, style: Semi Bold });
await figma.loadFontAsync({ family: Inter, style: Bold });

画框（容器）

js
var frame = figma.createFrame();
frame.name = MyFrame;
frame.resize(width, height);
frame.cornerRadius = 12;
frame.fills = [{ type: SOLID, color: { r: 1, g: 1, b: 1 } }];
frame.x = 0;
frame.y = 0;

文本

js
var text = figma.createText();
text.characters = Hello World;
text.fontSize = 16;
text.fontName = { family: Inter, style: Regular };
text.fills = [{ type: SOLID, color: { r: 0, g: 0, b: 0 } }];

矩形

js
var rect = figma.createRectangle();
rect.resize(100, 50);
rect.fills = [{ type: SOLID, color: { r: 0.9, g: 0.2, b: 0.2 } }];
rect.cornerRadius = 8;

嵌套节点

js
frame.appendChild(text);
parentPage.appendChild(frame);

投影

js
frame.effects = [{
type: DROP_SHADOW,
color: { r: 0, g: 0, b: 0, a: 0.1 },
offset: { x: 0, y: 4 },
radius: 12,
spread: 0,
visible: true,
blendMode: NORMAL,
}];

描边

js
frame.strokes = [{ type: SOLID, color: { r: 0.8, g: 0.8, b: 0.8 } }];
frame.strokeWeight = 1;

文本对齐

js
text.textAlignHorizontal = CENTER; // LEFT | CENTER | RIGHT | JUSTIFIED
text.textAlignVertical = CENTER; // TOP | CENTER | BOTTOM

自动布局（画框内）

js
frame.layoutMode = VERTICAL; // 或 HORIZONTAL
frame.primaryAxisAlignItems = CENTER; // MIN | CENTER | MAX | SPACE_BETWEEN
frame.counterAxisAlignItems = CENTER;
frame.paddingTop = 16;
frame.paddingBottom = 16;
frame.paddingLeft = 16;
frame.paddingRight = 16;
frame.itemSpacing = 8;

页面导航

js
var pages = figma.root.children;
var targetPage = pages[pages.length - 1];
await figma.setCurrentPageAsync(targetPage);

清除页面内容

js
var old = targetPage.children.slice();
for (var i = 0; i < old.length; i++) {
old[i].remove();
}

视口

js
figma.viewport.scrollAndZoomIntoView([frame]);

通知

js
figma.notify(完成！, { timeout: 3000 });
figma.notify(错误： + e.message, { timeout: 10000 });

页面信息

js
var pages = figma.root.children;
var count = pages.length;
var pageName = pages[0].name;

代码模板

js
async function main() {
try {
// 1. 加载字体
await figma.loadFontAsync({ family: Inter, style: Regular });
await figma.loadFontAsync({ family: Inter, style: Bold });

// 2. 获取目标页面
var pages = figma.root.children;
var target = pages[pages.length - 1];
await figma.setCurrentPageAsync(target);

// 3. 清除旧内容
var old = target.children.slice();
for (var i = 0; i < old.length; i++) old[i].remove();

// 4. 创建设计...
var frame = figma.createFrame();
frame.name = 屏幕;
frame.resize(375, 812);
frame.fills = [{ type: SOLID, color: { r: 1, g: 1, b: 1 } }];
frame.x = 0;
frame.y = 0;
target.appendChild(frame);

// 5. 完成
figma.viewport.scrollAndZoomIntoView([frame]);
figma.notify(设计完成！, { timeout: 3000 });

} catch (e) {
figma.notify(错误： + e.message, { timeout: 10000 });
}
}

main();

陷阱与注意事项

documentAccess: dynamic-page 模式

如果 manifest.json 中包含 documentAccess: dynamic-page：

• - ❌ figma.currentPage = page → ✅ await figma.setCurrentPageAsync(page)
• ❌ figma.getNodeById() → ✅ await figma.getNodeByIdAsync()
• ❌ figma.closePlugin() → ✅ await figma.closePluginAsync()

错误处理

• - 始终将代码包裹在 try-catch 中
• 通过 figma.notify(错误： + e.message, { timeout: 10000 }) 显示错误
• 不要在文本内容中使用表情符号（字体可能不支持该字形）
• 不要自动调用 figma.closePlugin()（让用户手动关闭）

免费版限制

• - 最多 3 个页面 — 不要创建新页面
• 在现有页面内工作（清除并重建）

字体

• - 默认字体：Inter（Figma 内置）
• 支持的样式：Regular、Medium、Semi Bold、Bold
• 颜色使用 { r, g, b } 格式，取值范围 0-1

迭代模式

每次设计迭代：

1. 1. 清除旧元素：page.children.slice().forEach(c => c.remove())
2. 重新创建带有更改的设计
3. 通知用户重新运行插件