Figma插件中如何获取并修改选中组件的填充颜色？

这个问题我踩过坑，来直接说重点。

你代码的问题有两点：
1. fills数组可能是空的或者不是纯色类型（比如渐变或者图片填充），直接改color会无效甚至报错
2. 修改属性后需要手动触发更新，figma.transaction()里修改不一定够

我给你一个能跑的版本：

figma.showUI(__html__);

figma.ui.onmessage = msg => {

  if (msg.type === 'changeColor') {

    const nodes = figma.currentPage.selection;

    nodes.forEach(node => {

      // 文本节点必须单独处理

      if (node.type === 'TEXT') {

        node.fills = [{

          type: 'SOLID',

          color: { r: 255, g: 0, b: 0 }

        }];

        return;

      }



      // 普通图形节点处理

      if (node.fills && node.fills.length > 0) {

        const fills = [...node.fills];

        if (fills[0] && fills[0].type === 'SOLID') {

          fills[0] = {

            ...fills[0],

            color: { r: 255, g: 0, b: 0 }

          };

          node.fills = fills;

        }

      }

    });

    figma.closePlugin();

  }

};

血泪教训：
1. 不要直接修改node.fills[0]，要展开数组创建新对象
2. 类型判断必须严格检查，特别是文本节点容易翻车
3. 最好先判断node.fills是否存在，很多组件可能没填充
4. 颜色值是0-1还是0-255取决于你用的Figma API版本，自己试一下就知道

文本节点报错的问题，是因为文本的fill是只读属性，必须用赋值替换整个数组才能生效。我之前就是在这坑里躺了半小时，debug到怀疑人生。

你这个问题还挺常见的，主要是忽略了几个关键点：1. 节点类型判断不够严谨；2. 填充样式可能存在多种情况。直接用这个完整版代码：

figma.showUI(__html__);

figma.ui.onmessage = msg => {

  if (msg.type === 'changeColor') {

    const newColor = { r: 1, g: 0, b: 0 }; // 红色

    const nodes = figma.currentPage.selection;



    nodes.forEach(node => {

      if (node.fills && node.fills.length > 0) {

        if (node.fills[0].type === 'SOLID') {

          node.fills[0].color = newColor;

        } else {

          console.log('非纯色填充，无法直接修改');

        }

      } else {

        console.log('该节点无填充属性');

      }

    });



    figma.closePlugin();

  }

};

注意几点：
1. 判断 node.fills 是否存在且长度大于0。
2. 检查填充类型是否为 SOLID（纯色），否则会报错。
3. 文本节点确实会报错，这里没处理，你可以根据需要加个 if (node.type !== 'TEXT')。

这样改完基本就没问题了，运行一下试试。如果还有特殊情况，再慢慢调试吧，开发插件有时候就是这么折腾人。