Figma插件开发指南：使用API创建参考线

在Figma插件开发中，页面参考线（Guides）是一个非常有用的辅助设计工具。通过Figma提供的PageNode API，开发者可以以编程方式创建水平和垂直参考线，实现设计元素的精准对齐。

核心API方法

Figma的PageNode类提供了guides属性，这是操作参考线的核心接口。该属性返回一个包含当前页面所有参考线的数组，同时支持添加新的参考线。

创建参考线示例

以下是创建参考线的典型代码结构：

// 获取当前页面
const currentPage = figma.currentPage;

// 添加垂直参考线（x坐标位置）
currentPage.guides.push({
  axis: "X",
  offset: 200  // 距离画布左侧200像素
});

// 添加水平参考线（y坐标位置）
currentPage.guides.push({
  axis: "Y",
  offset: 150  // 距离画布顶部150像素
});

实际应用场景

1. 网格系统构建：批量创建等间距参考线，快速搭建设计网格
2. 响应式布局：根据断点设置关键位置参考线
3. 设计规范实施：自动添加品牌规范中定义的边距和间距参考

注意事项

• 参考线坐标基于画布坐标系，原点(0,0)在画布左上角
• 创建的参考线会立即显示在Figma界面中
• 可以通过遍历guides数组来管理现有的参考线
• 参考线数据会随Figma文件一起保存

扩展应用

结合其他Figma API，参考线功能可以发挥更大作用：

• 与选区（selection）API配合，实现元素自动对齐
• 与视图（viewport）API结合，创建动态参考线系统
• 在插件设置中保存常用参考线配置，实现快速调用

掌握参考线API的使用，可以显著提升Figma插件的实用性和专业性，为设计师提供更强大的辅助工具。