Topics

在 Figma 中创建设计部件并共享作品时，您可能会遇到一些意想不到的问题。您是否遇到过组件图标颜色无法正确更改的情况？

在本文中，我们将清楚地解释图标实例颜色不反映问题的原因和解决方法，这是许多 Figma 用户都会遇到的问题。

我的资深同事把我做的按钮做成了一个组件！更棒的是，你甚至可以更换图标！太赞了！不过图标数量还不够，所以我打算继续把图标注册成组件，让它成为一个易于使用的组件！

我悄悄地制作了一堆图标。

咦？图标组件切换不正常？ 我确定我的制作方法和前辈一样……为什么颜色切换不正常？

那都是因为你制作图标的方式！

前辈！怎样才能让它变色呢？

太好了！我会教你如何在 Figma 中切换图标。记得记笔记并牢记！

是的！我会尽力记住的！

为什么颜色会被继承？Figma 的颜色覆盖机制是如何运作的？

在 Figma 中创建按钮时，通常会将图标设置为可通过实例属性更改。但是，切换图标时经常会出现问题，例如颜色无法同步或无法自动更改。

在 Figma 中切换图标时，我设置的颜色没有反映出来/颜色没有改变。你是否遇到过上述问题？本文将以通俗易懂的方式解释其原因和解决方法。

请务必检查图标和按钮侧的设置，以确保切换图标时颜色能够正确变化。

首先，检查按钮组件的结构

首先，我们来看一下以下结构中颜色是如何被覆盖的：

① 原图标组件为黑色

② 将其作为实例复制到按钮中，并仅覆盖颜色。

3. 如果在此状态下切换到另一个图标，图标颜色可能会恢复为默认颜色而是白色。

提示：了解主组件和覆盖组件之间的关系

最基本的一点是，你覆盖的任何属性将不再反映主组件中所做的更改。

被覆盖的部分如果在实例中更改颜色或文本，该部分将变为独立部分。如果之后在主组件中更改同一部分，则更改不会应用到实例。覆盖设置（填充、描边颜色、文本等）具有更高的优先级。

未被覆盖的部分您未更改的属性（例如 padding 和 margin）将反映主组件中所做的更改。

如果您更改主组件的图层结构，请格外小心：如果您重命名图层或删除图层并添加新图层，Figma 可能会将其识别为不同的元素并重置实例覆盖。

考虑到以上情况，我们来看看为什么图标颜色不会改变。

原因 1：填充和描边设置混用

即使图标乍看之下相同，但在 Figma 中，“填充”和“描边”是完全独立的属性。因此，如果您从使用填充的图标切换到使用描边绘制的图标，颜色更改可能无法正确反映。

例子：

图标 A

图标 B

• 图标 A：一个带有填充的轮廓图标。
• 图标 B：带描边的图标

这样一来，如果图标的绘制方式不同，应用颜色后的结果也会随之改变。保持表达方式的一致性很重要。点击图标 B 时，填充颜色设置为白色，但由于该图标组件仅由线条构成，因此颜色并未被替换。然而，填充颜色实际上已被正确设置为白色（尽管由于没有填充元素，白色无处可去……）。

✅ 解决方案：
规则是所有图标都必须使用“填充”效果。用线条绘制的图标必须转换为轮廓（command+shift+O将其转换为“paint”对象。这样做的好处是便于实现时的处理。

在我们的实现过程中，我们会将 SVG 路径放入 CSS 变量中，或者将其与 Astro Icon 结合使用，这样所有内容都会统一绘制。

如果只保留描边，缩放图标时线条粗细会发生变化，这可能会导致设计失真。除非有特殊原因，否则最好将其描边并使用一致的“填充”设置！

如果仅使用线条创建图标，缩放图标时线条粗细将保持不变。对于箭头等简单路径来说，这不成问题，但对于更复杂的图标，12px 的线条粗细会让图标看起来被压扁，而 80px 的线条粗细则常常会让图标看起来被拉长。

用线条绘制的图标最好描边，因为线条粗细在调整大小时不会改变。如果想保留描边前的原始数据，请将原始数据放在组件附近。

当您将描边创建的内容与填充内容组合时，它会变成填充，但即使在这种情况下，也经常会出现问题，例如形状的某个部分大小没有改变。

原因 2：图层名称不匹配

在 Figma 中，组件切换实例时，图层名称相同的元素会继承样式和属性。规范中有一条规定：

例子：

图标 A

图标 B

• 图标 A 矢量图层名称：Vector
• 图标 B 矢量图层名称：Vector2

如果图层名称像这样不同，Figma 会认为它们是“不同的”，并且覆盖的样式将无法正确应用。

✅ 解决方案统一图标中使用的图层名称（例如，“全部”）。Vector）

现在，让我们确保所有要着色的路径的图层名称都相同！

原因三：不同的层级结构（层次结构）

即使统一了层名称，切换也可能无法正常工作。在这种情况下，问题可能与层结构差异有关。如果层数或结构不同，属性可能无法正确映射。。然而，在某些情况下，如果图层名称相同，则层级结构上的细微差异不会造成问题。。

例子：

图标 A

图标 B

图标 C

• 图标 A 是“矢量”（path）勾勒轮廓并合并成一个矢量图（基本图标）
• 图标 B 是“火焰”（Flame） > Vector（path）→ 确定（颜色会继承到路径名“Vector”）
• 图标 C 是“矢量”（Flame） > Flame（path）结构 → NG（火焰名称“Vector”中设置的颜色变化出现）

这样，图层名称“在“Vector”包含组的结构中，您需要注意如何应用样式。此外，即使名称相同，颜色也仅在顶层发生变化（参见图标 C），而颜色变化不会反映在第二层的矢量图中。

✅ 解决方案不仅仅是图层名称，设计时要确保样式实际应用的路径结构与之匹配这将有助于避免出现问题。

只要向量名称正确，结构略有不同通常也没关系。但是，在团队开发中，为了方便后来加入的成员，最好尽可能保持内部结构的一致性。

原因 4：填充或描边的数量与原始组件不同

如果只使用一种颜色，只要合并图层或统一图层结构和图层名称，就无需担心。但是，如果切换到与原图标填充或描边数量不同的图标，则只有部分颜色会改变，而其他颜色保持不变，这可能无法达到预期效果。一般来说，图标应统一使用一种颜色。或者，如果需要使用两种颜色，则需要为双色图标创建一个单独的图标变量，或者采用其他巧妙的方法。

✅ 解决方案：

• 请勿混用单色图标和多色图标。
• 如果您需要多色图标，请复制带有变量的图标组件，并创建一个用于双色图标的组件。
• 使用多色图标时，一般不应使用颜色覆盖。

请注意，即使您只更改一个颜色的图标，也只能更改一种颜色！

原因五：混合模式和蒙版

如果图标使用了蒙版或特殊混合模式（例如正片叠底），改变颜色可能不会带来任何可见的变化。。

✅ 解决方案：
如果您使用蒙版或混合模式，请在创建组件之前，通过合并或展平对象，将它们转换为看起来合适的简单路径对象。

在这种情况下，也可以通过在最后勾勒路径轮廓来安全地将其简化为一个简单的路径。如果使用乘法运算，则最好使用实时追踪或类似工具来正确地创建路径，这样更安全。

核实摘要

实际颜色反射行为已证实

下面显示的是在按钮内切换不同图标时观察到的颜色反射行为（见图）。

运用Tips

从测试中总结出的关键点：

• 图层名称和结构必须匹配，这一点非常重要。
• 可以使用颜色样式或变量来指定填充颜色，但并非必须指定。
• 为了便于实施，图标通常使用填充来创建（线条在放大或缩小时容易变小，因此建议使用轮廓）。
• 如果要向现有图标添加元素，为了避免颜色问题，最好创建一个新图标，然后逐个替换每个元素，而是编辑当前显示的变体。

从设计到实施的顺利过渡技巧：

• 使帧尺寸统一（不要使用不同的尺寸，例如 24px、40px、80px 等）。
• 缩放图标时，它会根据图标大小进行平滑调整（这使得在设计和实现中处理数据变得更加容易）。

此外，我们的实施规则如下：

• 将颜色设置为纯黑色 #000（除非原始数据为黑色，否则无法更改天文图标的颜色）

操作阶段可能出现的常见问题：

• 修改现有图标时要小心。如果在操作过程中向现有图标添加或修改元素，其结构可能会发生意外变化，从而导致颜色反射问题。在这种情况下，请勿直接编辑现有组件，而应遵循相关规则。创建一个新的图标组件并替换它这样更安全。

概括

你明白了吗？基本上，创建图标时，只需遵循以下三条规则！ 1. 使用一致的“填充”绘制方法（轮廓线！） 2. 为需要着色的路径使用一致的“图层名称”。 3. 尽可能简化图标的“图层结构”。 此外，在制作阶段，修改现有图标时要格外小心。修改过程中，图标结构通常会发生变化，导致颜色无法正确反映。 因此，不要直接修改现有图标，而是创建一个遵循这些规则的新组件，并在其中修改图标。然后，在按钮组件中用新图标替换旧图标。这样可以显著减少颜色问题。

谢谢！我现在可是图标制作高手了！我会尝试用前辈教我的方法制作一个组件！

切换图标实例时，即使它们看起来相同，但内部结构不同，颜色也无法正确反映。

这次提出的观点，特别是“统一填充”“统一图层名称”只要遵循这两点，你应该就能避免大多数问题。

如果仍然无法正确切换，则可能是由于内部结构或同名父层存在差异所致。

希望这篇文章能帮助你更轻松地使用 Figma 进行设计工作。