Figma插件中动态设置边框样式后页面没更新怎么办？

你这个问题其实挺常见的，Figma 插件开发在样式更新这块确实有点坑，尤其是在动态设置边框样式的时候。

**根本原因是：Figma 的 setPluginData 只保存数据，不会触发节点的样式重绘或更新。**

你必须手动通过 Figma API 修改节点的样式属性。你当前代码更像是在写 CSS，而不是在操作 Figma 的绘图模型。

---

### 正确做法是：直接修改节点的 strokeWeight、strokeAlign、strokes、cornerRadius 等属性。

下面是完整的代码示例，假设你已经获取了选中的节点：

// 获取当前选中的节点

const nodes = figma.currentPage.selection;



if (nodes.length === 0) {

  figma.closePlugin('请先选中一个节点');

}



nodes.forEach(node => {

  if (node.type === 'FRAME' || node.type === 'RECTANGLE') {

    // 设置边框宽度

    node.strokeWeight = 1;

    

    // 设置边框对齐方式（INSIDE、OUTSIDE、CENTER）

    node.strokeAlign = 'CENTER';



    // 设置边框颜色为 #999

    node.strokes = [{

      type: 'SOLID',

      color: {

        r: 0.6,   // 转换 #999 为 RGB（0.6, 0.6, 0.6）

        g: 0.6,

        b: 0.6

      }

    }];



    // 设置虚线样式

    // dashPattern 是 [线段长度, 空隙长度]

    node.strokeStyleId = figma.createPaintStyle().id;

    node.strokeStyleId.dashPattern = [4, 4]; // 虚线长度4，间隔4



    // 设置圆角

    node.cornerRadius = 4;



    // 设置内边距（Figma 中没有直接 padding 属性）

    // 通常的做法是用一个父 Frame 包裹内容，然后设置 resize()

    const padding = 8;

    const parent = node.parent;

    const wrapper = figma.createFrame();

    wrapper.name = 'Wrapper with padding';

    wrapper.resize(node.width + padding * 2, node.height + padding * 2);

    wrapper.cornerRadius = node.cornerRadius;

    wrapper.fills = []; // 清除背景

    node.remove();

    wrapper.appendChild(node);

    if (parent && 'appendChild' in parent) {

      parent.appendChild(wrapper);

    }

  }

});



figma.closePlugin();

---

### 为什么这样做？

1. **Figma 不是浏览器**，不能用 CSS 的方式去控制样式，必须用它定义的绘图模型来操作。
2. **setPluginData 是用来保存元数据的**，不是触发渲染的手段。
3. **虚线边框是通过 dashPattern 实现的**，并且需要通过 strokeStyleId 来绑定。
4. **padding 没有直接属性**，只能通过嵌套 Frame 实现。

---

### 开发建议

- 不要尝试用 CSS 的方式写样式对象，没用。
- 查看 Figma 官方文档时注意区分“属性”和“插件数据”。
- 调试时多用 console.log(node) 看看节点结构。
- 有时候需要调用 figma.notify() 来确认插件确实运行了。

如果你还有其他样式设置没生效，欢迎贴出具体代码，我可以帮你看看。开发 Figma 插件确实挺烧脑的，加油！