发布时间：2022-4-14 分类： 电商动态
构建组件库/设计系统这个问题是一个很长的翻译，使用草图库来构建更好的设计系统，从理论方法到实际演示。
阅读本文后，您将学习：
如何解决符号同步共享的问题？
使用草图库
创建组件库更新核心库中的元素
此外，Sketch 48 Beta已经开始提供色彩管理功能，并且从系统的角度来看是一个重要的更新。
注意：“库”功能仅在最新的Sketch 47中可用。
所谓的设计是在一系列约束下构建解决方案的过程。 —— Adam Morse
在某种程度上，设计系统就是这样一种约束。一系列设计语言元素，如颜色匹配，图标，按钮等，共同构成了一个标准化系统，为设计决策提供指导。
符合这样的标准化系统，可以有效加快设计过程;同时，设计模式的可重用性和一致性将得到改善，整个产品设计计划更具可扩展性，更易于维护。
然而，实际上，有许多方法来创建和维护标准化设计系统。 Sketch是我们在设计工作中的工具，它可以帮助我们简化设计系统的创建过程，但其各方面的问题都不容忽视。
问题是
在Sketch 47给我们带来了Libraries之前，Symbols一直是Sketch中最重要的功能之一，它也是构建设计系统的关键功能。符号用于创建可重用的界面元素，有助于保持设计的一致性。但是，此机制的范围仅限于文档内部，除非得到第三方插件的帮助，否则Symbols无法在不同文件之间进行同步。
为什么这是一个问题？
对于小型项目，这没什么大不了的。您可以将所有设计解决方案，甚至高保真原型和流程图放在一个文件中，Sketch不会造成任何问题。
但是，情况会因项目规模而异。出于性能效率或协作的原因，我们通常需要将项目分解为不同的Sketch文件;此时，将暴露Symphony同步共享问题。
我们的团队有三种产品使用相同的符号集。这里的挑战是如何确保不同项目之间的符号同步。这三个产品都是非常大的项目，每个源文件包含数百个Artboards，因此很难通过单个Sketch文件来携带它，否则文件会变得非常大。
△Sketch文件托管整个组件库
以前的处理方法
我们使用一组Sketch模板集中放置所有符号，引用了原型工具Marvel的官方设计规范创建方法。在此基础上，我们已经扩展到一定程度，例如，Symbols模板文件由Craft插件在不同的Sketch文件中统一调用。
△使用Craft插件构建组件库
事实上，我个人不推荐这种方法。文件大小确实受到控制，符号源统一。问题是，一旦模板中的符号发生变化，我们就无法同步已插入到不同文档中的符号的更新。
符号功能的基本目标是使项目更易于创建和维护。然而，强大的重用只是一个方面;对于那些插入到不同文档中的符号，您根本无法管理和更新它们。
幸运的是，Sketch 47为我们带来了图书馆。
溶液
Libraries功能可以帮助我们创建单独的符号库，可以由多个文件统一调用。这种机制有点类似于前端开发人员熟悉的Sass。不仅如此，您还可以嵌套库。
通常，您现在可以将不同类型的符号存储在不同的Sketch文件中作为单独的库，例如颜色定义，图标，按钮，表单元素等;可以在这些源文件中调用其他项目文件。符号。修改库源文件时，相关更改将更新为所有项目文件。
这种统一的管理和调用机制可以为工作带来许多好处，包括：
减小文件大小
增强Sketch的性能
改善界面元素的统一性
提高项目的整体可维护性
Sketch团队正式解释了这样的库功能：
库本质上是一个普通的Sketch文件，其中的Symbols可以被其他Sketch文件调用。如果编辑库中的符号，则调用库的其他Sketch文件将收到更新通知。您可以预览，比较和确认更改，以便这些Sketch文件调用的符号自动更新为最新版本。 →草图47库具有图形说明
使用草图库
创建组件库在本文的下一部分中，我将向您展示如何使用Sketch Libraries功能创建UI组件库。但在此之前，我们仍需要澄清一些想法和原则。
像开发人员一样思考
在构建设计系统的过程中，设计师必须尝试像开发人员一样思考。 —— D.R.Y–不要重复自己
组件库的基本概念是逐层创建可重用的UI元素，保持文件的轻量级和设计的一致性。
从“原始元素”开始;
我们创建的任何组件都由几个“属性”组成。这些属性是设计系统中最“原始”的元素。开发人员将在代码中为这些属性创建自己的变量，以提高代码的可重用性;对于设计师来说，同样如此，我们可以为各种原始UI元素创建库，逐层构建更高级别的库。组件。
原子设计理论
为了确保组件库的可扩展性，我将使用Brad Frost提出的原子设计理论作为指导。这套理论简单易懂。
简而言之，原子设计的灵感来自现实世界的分子结构。 UI中具有最小粒度的元素“原子”构成具有大粒度的控件，即“分子”;许多分子形成一个更复杂的组成部分和模块，即“有机体”。
将不同类型的符号放在各自的库文件中
当然，如果需要，您仍然可以将所有组件放在同一个库文件中;我的建议是为每种类型的符号创建一个单独的库文档。
与开发人员使用Sass partials的方式类似，调用多个Libraries文档可以使我们的设计系统更优雅，更易于维护。正确拆分的Libraries文档对于被不同项目调用更有用;它可以在需要时更容易扩展。
参考“原始元素”方法，我们将从最基本和核心的UI元素开始，包括将在整个设计系统中使用的颜色，图标等;所有“原子，分子，有机体”的UI元素也都由这些原始元素组成。
我们首先需要定义全局中使用的各种颜色。
第1步：为颜色定义创建一个新的Sketch文档
对于团队项目，我将添加“AIN”作为Sketch文件名称的前缀，例如“AIN-Colors”等，以区别于其他项目。当然，命名惯例和习惯因人而异。如果您和我需要处理许多不同的项目，那么通过前缀区分它们的方式可能值得考虑。
我将为设计系统中的每种颜色生成共享样式，并根据不同的功能对其进行分类，包括“品牌，灰度，UI”等。具体的分类方法是在共享样式命名中使用“/”符号。表示Sketch识别并自动生成相应模式的层次结构。
接下来，我将为每种颜色创建一个Symbol，并使用Symbol Organizer插件在Symbols页面中组织它们。在分层命名的帮助下，Symbols页面将自动呈现清晰的架构。
第2步：将颜色定义文档添加到库系统
完成颜色定义后，我们需要将此Sketch文档添加到Libraries系统。设计系统中所有原子元素的定义都需要此步骤。
在顶部菜单栏中，选择“Sketch› Preferences”，然后转到“Libraries”选项卡并单击“Add Library”按钮，选择我们在上一步中创建的Sketch文档。
如图所示，我将AIN-colors文档添加到Libraries系统，以便我可以在任何其他Sketch文件中调用它;这是图书馆功能的强大功能。
我如何使用这些颜色符号？我将在下一次创建图标库时进行演示。
第3步：为图标定义创建新的草图文档
与我们在第一步中的方法类似，这次我们定义了图标。新文档名为“AIN-icons”，并保存在与以前的“AIN-colors”文档相同的路径中;所有原子UI元素的库都将保存在此处。
每个图标放置在24和相同的大小; 24像素画板，24小时; 24像素透明层，确保规格统一。然后我将从AIN颜色库中选择合适的颜色符号，并将其插入图标画布，在图标图层上，并将其调整为24和次; 24像素。
接下来，将图标设置为蒙版“按住Control键，单击图标，在菜单中选择蒙版”，以便我们刚刚从AIN颜色库插入的符号可以将其颜色附加到图标形状。面具消失了。
请注意，在Sketch左侧的图层列表中，链图标是从外部库插入的符号。
这里的核心思想是图书馆的嵌套。这样，每当我需要修改颜色定义时，我只需要在“AIN-colors”文档中编辑它，然后将自动更新使用此颜色的所有图标或其他UI元素。
现在我们可以将图标画布转换为符号。应该注意的是，对于这些图标画板，请务必在右侧检查器中选择“调整调整内容大小”;还可以在捕捉时将图标的“调整大小”选项设置为四边，并锁定纵横比以确保图标符号在实际使用时可以灵活调整大小。
重复此过程，直到您定义了所有图标符号。在此期间还要注意分层命名方法，以便最终可以通过Symbols Organizer插件进行组织。
第4步：将图标定义文档添加到库系统
具体方法与我们在第二步中描述的相同。
此时，我们已经完成了两个Libraries文档的创建，在我的例子中，“AIN-colors和AIN-icons”。现在，我们的图标可以通过库中的其他文档统一调用。
步骤5：重复上述步骤以定义其他元素
我希望前四个步骤的介绍可以帮助您理解该过程的主题。
您可以继续优化其他基本元素的定义，以便逐层嵌套库。
在我们的AIN设计系统中，类似的元素包括按钮，表单元素等。当我开始制作分子或更高分子时，这些库文档与“AIN-colors和AIN-icons”一起存储在同一路径中。调用UI元素的库。
图书馆更新
随着产品的发展，您将始终需要更新核心库中的一些元素。 Sketch提供的机制使这个问题非常简单。您可以像在普通符号中一样在Libraries文件中修改它。然后，调用这些符号的所有Sketch文件都将收到更新提示“Sketch接口的上角”。单击提示以查看更改并确认，所有更新将自动完成。
下一步
在完成所有原子级UI元素的定义之后，您必须开始组织更复杂的元素，例如“分子”，然后是“有机体”，等等。在整个过程中，您可以将库嵌套在之前创建的所有级别，并将大粒子元素与小粒子元素组合在一起。
通过类比，这种基于Sketch Libraries机制的逐层设计系统将变得更加复杂和完整，并最终能够帮助您实现完整的界面。到那时，您可以在任何项目中调用此系统。
在本文的其余部分，我将向您介绍创建更复杂组件的过程，包括标题，导航，卡片视图，页脚等。它还将向您展示如何在实践中使用该设计。系统。
应该指出的是，原子设计理论只是一个指导原则，而不是一个艰难的原则。您仍然需要结合理论并根据产品的特定条件判断UI元素的分类方法。
另外，关于多个设备之间的库的同步使用，我个人还没有涉及到这个方面的实际应用。正如官方文档中的Sketch所示，您可以与Dropbox，Google Drive或类似的存储服务同步;这对团队共享和协作非常有用。
总结
在本文中，我们学习了如何使用Sketch Libraries构建模块化UI组件库/设计系统。我希望你已经体验过图书馆的巨大潜力。
如果您是设计团队或独立设计师的一员，他们需要更好的方法来管理项目，那么请尝试将Libraries应用于设计过程。自Symbols以来最重要的新功能将更有效地帮助我们构建和维护设计系统。
您可以下载我提供的示例项目作为参考，包括颜色，图标，按钮和简单项目案例等元素的定义。我希望这个例子可以帮助您更好地理解本文的内容。请注意，您需要更新到Sketch 47才能打开此文档。
相关资源
Jon Moore的草图库
布拉德弗罗斯特的原子设计方法论
素描馆的Pablo Stanley
Airbnb:构建视觉语言
原作者：Harry Cresswell
原始链接：Usejournal
