设计系统标注，第二部分：组件标注的高级方法
在本系列的第一部分中，我们讨论了可访问性如何在设计系统组件的不同实例中被忽略的问题。我们的解决方案？为Primer设计系统中的每个组件使用一套"Preset标注"。这使得设计师能够包含未内置到组件中且未在设计中直观传达的特定预设细节。
也就是说，Preset标注是每个设计系统独有的——虽然我们的方法可以作为构建参考——但如果您不使用Primer设计系统，其他组织无法直接使用这些标注。
幸运的是，您可以构建自己的标注。以下是具体方法。
如何为设计系统创建Preset标注
首先评估哪些组件需要Preset标注——并非所有组件都需要。优先考虑那些最能从Preset标注中受益的组件，并将关键信息构建到每个组件中。接下来，确定应包含哪些属性。只包含那些未在视觉上传达、未包含在组件属性中且未内置到编码组件中的关键信息。
确定组件优先级
当设计系统拥有60多个组件时，确定从何处开始可能是个挑战。哪些组件最需要这些标注？哪些对设计团队和用户的影响最大？
当我们基于概念验证创建新的Preset标注集时，我们决定使用十个最能受益的Primer组件。为了帮助选择，我们使用了一个名为Primer Query的内部工具，该工具跟踪GitHub代码库中的所有组件实现以及与之相关的任何审计问题。
- 与组织优先级一致的组件（即高价值产品和/或流量大的产品）
- 在可访问性审计问题中频繁出现的组件
- 具有React实现的组件（作为我们的首选开发框架）
- 最频繁实现的组件
映射属性
对于每个组件，我们交叉参考多个来源，以确定每个Preset标注中需要添加哪些组件属性和属性。我们寻找的内容可能只存在于这些来源中的一两个地方，因此不太可能在设计和开发生命周期中得到充分考虑。这些来源包括：
Primer.style上的组件文档
设计系统文档应包含面向设计师和开发者的使用指南，可访问性要求也应是此指南的一部分。一些指南和要求被构建到组件的Figma资源中，而一些仅最终出现在编码组件中。
寻找未内置到Figma或代码中的任何可访问性要求。如果已内置，将相同信息放入Preset标注中可能是冗余或不相关的。
Presets可以处理罕见用例
在构建TextInput组件的Preset标注时，我们发现实现可能单独使用图标或具有隐藏的输入标签。对于GitHub的全局搜索或筛选输入，单独的放大镜图标可以作为可见标签，但字段仍需要为辅助技术用户提供可访问的标签。
Storybook中的编码演示
我们的组件沙箱帮助我们查看每个组件如何在React或Rails中构建，以及HTML输出是什么。我们寻找未包含在组件文档或Figma资源本身中的任何代码结构或可访问性属性——特别是当它们可能因实现而异时。
设计师可能看不到或设置的代码属性
Storybook通过显示在其他地方未提及的一些重要属性，帮助我们构建TextInput组件的Preset标注。type属性默认值为text。根据字段的用途，输入的类型也可以是search、email、number、tel、date或time。这应有意设置，以便用户能够使用最合适的虚拟键盘。
Figma资源库中的组件属性
库资源通过文本层、图像填充、变体和复杂的组件属性集提供了很大的灵活性。我们密切关注这些选项，以了解设计师可以更改和不能更改的内容。Preset标注中值得添加的是其他来源中未内置到Figma组件中的可访问性属性、要求和使用指南。
TextInput的Figma组件中缺少的内容
当将TextInput添加到设计中时，Figma组件附带许多可自定义选项。有一个inputTextType属性，涉及视觉设计和排版，而不是表单输入的类型。可以在Figma的侧边栏中设置标签和输入字段的值，但由于默认隐藏，没有选项设置错误验证消息的文本。
我们不能假设在Figma中交付的每个设计都会显示包含所有错误状态的表单示例，因此这些错误消息可能得不到应有的关注。如果此消息不能作为文本属性构建到组件中，则可以将其添加到Preset标注中。
其他潜在来源
- 团队成员的经验：与您合作的设计师、开发者和可访问性专家可能对文档和设计工具可能遗漏的内容有见解。如果您的团队和设计系统已经存在一段时间，他们的见解可能比您在文档、组件演示或资源库中找到的更有价值。花时间询问哪些组件存在具有挑战性的错误，哪些在实现时被有意破坏。
- 最近审计的发现：设计系统组件本身可能存在未解决的审计问题和修复建议。如果是这种情况，这些问题可能出现在Storybook演示中，并且可能在组件文档中未得到说明。设计系统审计问题可能包含既有助于创建Preset标注，又提供关于不应从现有资源中继承的内容的见解的详细信息。
整合所有内容
我们为TextInput组件创建的新Preset标注包含使用指南和Storybook的链接，以及关于如何在设计中最优使用组件以避免潜在问题的可选教程。有两个强制提示用于输入类型和错误文本，以及一个用于偶尔隐藏表单标签的可选提示。
创建Preset标注的经验总结
Preset标注可能不适合每个团队或组织。然而，它们特别适合年轻的设计系统和那些采用程度不高的设计系统。
像Primer这样的成熟设计系统会频繁更新。这意味着如果没有密切监控，设计系统组件本身可能会与Preset标注的构建方式不同步。这可能在开发开始后导致混乱和返工，因此确保在创建这些标注后有维护能力可能是明智的。
对于GitHub的新团队、现有团队的新成员以及对设计系统不太熟悉的团队成员来说，内置指南以及指向文档和组件演示的链接被证明非常有用。更有经验的人员也能够微调Presets及其使用方式。
如果您尚未对设计系统组件有广泛经验（或没有同行帮助构建它们），评估和映射构建Preset所需的属性可能需要大量时间。在Figma的属性面板中简洁地命名组件属性而不被截断也可能具有挑战性。如果上下文不明显，一些培训或附加文档可能会有所帮助。
并不总是清楚需要Preset标注
在许多情况下，这种灵活性可能会令人困惑，因为您可以使用任一标注。例如，Primer