设计令牌的好处：增强协作和一致性

设计令牌是强大的工具，可促进设计师和开发人员之间的协作，同时确保整个项目的一致和凝聚力的外观。在这篇博客文章中，我们将通过餐厅类比以外行的方式探讨设计令牌的优势。因此，让我们潜入并发现设计令牌如何工作以及它们在现代设计和开发工作流程中至关重要的原因。

设计令牌：一致性的美味配方

想象您是一家著名餐厅的厨师，负责创建客户喜欢的令人垂涎的菜肴。为了实现这一目标，您可以使用不同的成分，例如香料，蔬菜和肉类。每种成分都有助于您的菜肴的独特口味和表现。

同样，在设计领域，设计人员使用各种设计元素（例如颜色，排版，间距等）来创建视觉上吸引人且一致的网站和应用程序。但是，保持所有统一的东西可能具有挑战性，尤其是当涉及多个设计师和开发人员时。这是设计令牌发挥作用的地方。

设计令牌：您的特殊成分

设计令牌可以比作您为厨房创建的特殊食谱的成分。与其每次烹饪菜肴时都使用各种成分，不如制作特定的香料，蔬菜和肉类组合，这些香料，蔬菜和肉类代表特定的味道和风格。这些“设计令牌”（或食谱成分）使厨房中的所有厨师都可以轻松烹饪，无论谁在做饭。

在设计世界中，设计令牌是颜色，版式，间距和其他设计属性的预定义值。设计师在创建网站或应用程序的视觉元素时使用这些令牌，就像厨师使用特殊食谱创建可口餐一样。

在我们的餐厅类比中，想象一下，作为厨师，您已经在食谱中写下了所有特殊食谱。这本食谱就像一本指南，适合与您合作的所有其他厨师。他们每当需要烹饪菜肴并使用成分和烹饪说明的确切组合以确保一致性时参考该食谱。

在设计令牌的世界中，开发人员可以使用类似的指南，通常称为“设计指南”。本设计指南应包含设计人员和开发人员在构建网站或应用程序时遵循的所有设计令牌和准则。系统中的设计令牌是一种通用语言，使设计师和开发人员都可以有效地进行沟通并无缝地进行工作。它创建了一种通用语言，突出了各方都需要的必要信息。

在敏捷环境中，设计师和开发人员之间的日常工作流程。

在常规工作日，设计师和开发人员合作，有效地实施了客户的设计要求。一天通常从项目会议开始，客户提供反馈或请求特定的设计更改。例如，他们可能会要求设计中更多细微的灰色阴影。设计师注意了客户的反馈，并使用诸如Figma之类的设计工具来创建新的设计概念。他们从设计令牌库中选择适当的灰色阴影，以确保与总体设计系统保持一致。设计最终确定后，设计师将通过更新文件并将令牌导出到共享JSON存储库来与开发人员共享。开发人员从外部JSON存储库中导入设计令牌，并在代码库中更新CSS变量或自定义属性以合并新灰色。现在，开发人员可能会注意到令牌使用的一些问题，现在实际的网站或应用程序正在使用这些问题（例如颜色对比度，例如字体或视口问题等），并且还可以相反地编辑令牌并将这些更改上传到存储库中。设计师正在通知，并可以轻松地将他的无花果文件与令牌存储库同步。设计师和开发人员密切合作，以解决任何实施挑战，并确保正确整合新的设计元素并通过必要的测试。由设计令牌提供支持的简化协作过程使他们能够有效地合作，从而产生了与用户需求相符的凝聚力和视觉吸引力的用户界面。

设计令牌的好处

让我们详细探讨设计令牌的好处：

• 一致性：设计令牌确保整个网站或应用具有一致的外观和感觉，因为设计师和开发人员使用相同的值。

• 效率：通过使用预定义的设计令牌，设计师可以加快设计过程，从而消除了从头开始提出新样式的需​​求。

• 可伸缩性：设计令牌可在不损害一致性的情况下易于缩放网站或应用程序，就像打开餐厅的新分支一样，同时保持相同的美味味道。

• 易于更新：设计师可以更新设计令牌以反映更改或改进，并且开发人员可以使用这些更新的令牌而无需破坏现有组件。

• 合作：设计令牌与开发人员之间的设计代币促进了协作，提供了一种讨论设计元素的通用语言。

• 适应性：使用设计令牌，设计师和开发人员可以随时随地始终应用流行的样式或颜色，适应不断变化的趋势和用户的喜好。

使用外部JSON存储库进行设计令牌

为了进一步增强设计令牌的好处，可以利用外部JSON存储库有效地存储和管理这些令牌。这是可以实现该过程的方式：

1. 创建一个设计令牌规范：为您的设计令牌定义明确的规范，包括其名称，类型和值。

2. 设置外部JSON存储库：选择一个外部JSON存储库来存储设计令牌，使设计师和开发人员可以轻松访问它。

3. 组织JSON文件：为不同类别的设计令牌创建单独的JSON文件，维护模块化和有条理的结构。

4. 主持设计系统平台：要简化设计令牌的访问和使用，托管一个有效管理令牌的设计系统平台或工具。

5. 代码库中的导入设计令牌：使用CSS变量或自定义属性等适当的技术将设计令牌从外部JSON存储库导入到代码库中。

6. 协作和更新：使用设计系统平台进行协作来对设计令牌进行更新或添加，以确保同步工作流程。

7. 版本控制：利用外部JSON存储库的版本控制功能来跟踪更改和无缝管理更新。

通过使用外部JSON存储库和设计系统平台，设计人员和开发人员可以有效地协作，减少矛盾之处并确保跨项目的凝聚力用户体验。

现在，令牌看起来如何？

通常我们有价值，一种类型，有时也是一个描述。

{
    "tokenname": {
        "$value": "token value",
        "$type": "color",
        "$description": "Description of this token"
    }
}

现实生活中的例子看起来像

{
    "colors": {
        "$type": "color",
        "accent": {
            "base": {
                "$value": "#F8C307",
                "$description": "Primary color of our brand"
            }
        }
    }
}

在这里，您可以看到令牌可以嵌套成组，并且类型可以应用于组和单个令牌。

您也可能具有该令牌或状态相关值的变体，例如对于悬停或活动状态，或黑暗或光模式或视口大小。

按以下顺序进行分组可能是有意义的：变体 - >状态 - > parts->等，但这不是做出的微不足道的选择；代表变体的多维矩阵中的json对象可能很棘手。

对于按钮元素，这可能看起来像这样：

{
  "button": {
    "variants": {
      "base": {
        "bg": { "$value": "{colors.primary}" },
        "color": { "$value": "{colors.text.light}" },
        "border": {
          "radius": { "$value": "{radii.sm}" }
        },
        "padding": {
          "vertical": { "$value": "{spacing.s3}" },
          "horizontal": { "$value": "{spacing.s4}" }
        }
      },
      "secondary": {
        "bg": { "$value": "{colors.secondary}" },
        "color": { "$value": "{colors.text.light}" },
        "$extends": "{button.variants.base}"
      }
    }
  }

请参阅我们如何在此中引用令牌。颜色和间距本身就是一组令牌，可以应用于按钮样式。说，这样，您想更改按钮组件的所有颜色，您不需要进入那里，但是您也可以更改它们获取信息的令牌集。

另外：请注意，通常令牌是颜色，间距，排版量表，这些是最容易解释的，以及为什么我在本文中使用了它们，但是您可以思考。盒子阴影想到，边界拉迪，边界宽度，不透明度，..

结论

设计令牌是为设计和开发工作流带来一致性和效率的秘密食谱。就像一个井井有条的厨房一样，具有特殊的食谱，设计令牌赋予了设计师和开发人员的能力，以轻松地创建美丽而凝聚的界面。利用外部JSON存储库和设计系统平台增强了协作，使Hartoff变得更加容易且容易出错，简化了更新，并为参与创作过程的每个人提供了令人愉悦的用户体验。因此，拥抱设计令牌的力量，您将提供视觉上吸引人的数字体验，使您的用户渴望更多

这些年来，我阅读了一些额外的资源，并使我了解了这个话题：
https://uxdesign.cc/building-better-products-with-the-design-token-pipeline-faa86aa068e8

https://medium.com/bumble-tech/design-tokens-beyond-colors-typography-and-spacing-ad7c98f4f228