2. Icon组件中的相同结构

在为所有组件命名所有图层之后，您是否仍然面临这种痛苦？让我们更深入地了解图标的结构。

在Tini设计系统 (opens new window)中创建图标时，我们遵循以下步骤。

步骤1：轮廓描边

始终创建线性图标的轮廓。有一些原因：

• 可扩展性与线条厚度的一致性
• 当我们切换到字形图标时，颜色值保持一致

p/s：当您创建轮廓并且您的图标破损时。先尝试将其平铺，然后再描边。如果这样仍然不起作用，我认为Adobe Illustrator是最终解决方案。

步骤2：合并选择和平铺

在您描边后，如果图标像下图一样复杂并且有许多细节，我们必须进行合并选择。

之后，Figma将所有元素合并为一个名为“Union”的对象。老实说，我是一个相当瘦的人，所以我 将其扁平化为实际的统一组件。

然后有人会问：“为什么我们不只使用扁平化功能？” 是的，它确实有效，但我想要一些“激发喜悦”的东西。让我向您展示比较的结果。

它激发了喜悦吗？（用玛丽·康多的声音读这句话）

第三步：给图层命名

“你好黑暗，我的老朋友。我又来和你交谈了。”

这是最后一步，也是最容易被忽视的一步。最好让库中的所有图标具有相同的结构，在它们的图层中具有相同的名称（而不是整个图标的名称）。

示例：

Tini图标的格式结构：

• <图标类别/图标名称>
• 可视区域框架
• 矢量

如果您对可视区域或我们的Tini图标指南感到好奇，请点击此处查看完整的指南：点击这里 (opens new window)

3. 注意右侧面板

在完成以上两个步骤后，我们认为现在您可以获得一些像GIF中一样精彩的组件。 有时候，当我们切换到其他变体时，这些组件可能会出现错误，而大多数情况下，答案都在 Figma 的右侧面板中。

这就是第三个提示，确保每个变体在以下方面保持一致：

• 变体属性
• 自动布局
• 垂直/水平方向（我个人总是忘记保持这个值的一致性）
• 项目之间的间距
• 项目周围的内边距
• 对齐和内边距
• 约束和调整大小

很难，对吧？我知道这是一项最具挑战性的任务。但当你确保所有上述值在组件变体中保持一致时，你就为使用你的设计库的设计师节省了很多时间。你的努力将会有所回报！