Figma设计按钮
我创建了一个具有4个属性的按钮。例如，在图像中，您看到一个具有以下属性的变体：大小；大号；款式 文字+图标，类型；初级，悬停；离开。
让我提供有关该按钮的更多信息。示例按钮的填充值为：左右16px，上下5px。图标的高度和宽度为34px。字体，SF Pro Rounded Bold 34px。最后，背景色为＃194FDA。此按钮是组件的变体。
并且所有变体如下所示；
我使用变体，一切都很好。那如果我想改变我的风格指南怎么办？例如，当我想更改用作主要颜色的颜色时，选择带有所有变体的Button组件。然后，从右面板一起更改颜色。而已;
我可以做到，尽管选择每个都具有挑战性。通过这种方式，我可以完全更改颜色，笔触属性，效果属性和填充值。但是，当涉及到排版，图标功能等时，该过程将变得更加困难。例如，我们通常在框架中使用图标。因此，当我们要更改图标时，我们必须单击多次，直到选中框架中的图标。想象一下，您为10个图标完成了此操作……烦人。
如果尝试，即使集体选择，也会看到过程花费很长时间。
设计主按钮
解决方案；在变体之外创建主组件。它有3个变种为小，中，和大与大小属性。
主组件做什么？在创建新组件时，我们从主组件中获取一个实例，并将更改应用于该实例。因此，所有变体都连接到主组件。简而言之，当我对主组件进行更改时，此更改将反映在所有变体中。我将GIF上的24px图标替换为34px，并且在所有变体中都可以看到它；
应该考虑什么？
重要的！从主组件创建变体时，首先复制所有实例，最后选择多个组件会更正确。这样，所有变体将是直接连接到主组件的嵌套组件。让我告诉你我的意思；
我在图1中复制了两个按钮。从主组件复制后，我创建了按钮组件以从这两个主组件继承它。这是我使用的方法。
下图是我避免但不推荐使用的方法；
在这里，我创建了第一个副本作为组件。然后我将其命名为First Instance。然后，我复制了“第一实例”组件并将第二个副本创建为一个组件。我将其命名为Second Instance。
如果看图2，我们可以看到嵌套的结构。如果我们只想对图2中的First Instance进行更改，则这是不可能的，因为Second Instance继承自它。我们所做的所有更改也将应用于“第二实例”组件。
但是在图1中，我们可以分别更改每个组件。每个组件仅继承于主组件。
结果
使用主组件将使我们免于手动样式更改。我们都将节省时间，而且绝对会减少工作量。如果适合您的系统，我建议您尝试一下。注意：请注意仅继承主组件✌️
