Episode 292: Using Tokens in Design Systems with Jan Six
32:30 Share

令牌如何帮助您的设计和开发团队提高效率？我们今天的嘉宾是Jan Six，GitHub的资深产品设计师和Tokens Studio的共同创建者。您将了解设计组件和令牌在技术层面的关联性，为什么采用是设计系统中最大的挑战，如何开始创建您自己的系统等等。播客订阅：在您最喜欢的播客应用程序中订阅https://feeds.simplecast.com/4MvgQ73R，并在iTunes、Stitcher或Google Podcasts上关注我们。节目笔记Tokens Studio在设计系统中命名令牌——Nathan Curtis的一篇文章多方面主题设计系统——Brad Frost的一篇文章Primer——GitHub的设计系统访问Jan的网站在Bluesky上关注Jan本集由Wix Studio提供赞助——面向代理机构和企业的全新网络平台。Wix Studio的神奇之处在于其先进的设计功能，这使得网站创建高效且直观。以下是一些您可以执行的操作：在一个画布上与您的团队同步工作跨站点重用模板、窗口小部件和部分为无缝移交创建客户端工具包并利用所有Wix网站中一流的SEO默认设置进入Wix Studio以了解更多信息，网址为wix.com/studio有兴趣赞助一集吗？在此处了解更多信息。留下评论评论非常重要，因为它们可以帮助新人发现此播客。如果您喜欢收听本集，请在iTunes上留下评论。方法如下。</context> <raw_text>0 您好，女士们，先生们，欢迎收听UI Breakfast播客。我是您的主持人Jane Portman。今天，我们令人敬佩的嘉宾是Jan Six，GitHub的资深产品设计师和Token Studio的共同创建者。我们将讨论今天在设计系统中使用令牌。

本集由Wix Studio提供赞助，Wix Studio是面向代理机构和企业的全新网络平台。Wix Studio的神奇之处在于其先进的设计功能，这使得网站创建高效且直观。以下是一些您可以执行的操作：在一个画布上与您的团队同步工作，跨站点重用模板、窗口小部件和部分，

创建客户端工具包以实现无缝移交，并利用所有Wix网站中一流的SEO默认设置。访问wix.com/studio，进入Wix Studio了解更多信息。嗨，Jan。嗨，很高兴见到你。感谢您的邀请。

我们非常高兴今天能与您讨论这个技术性和前沿性的突破性话题。但在我们开始之前，让我们谈谈您的背景，以及您在Token Studio的创业故事，我也觉得非常吸引人。是的，当然。让我通往设计的背景是，我想……

我最初是在代理公司工作的。我想，我在不同的代理公司工作了大约六年，搬过几次地方。我一直，就像我在印刷品方面工作过，但当时也在做数字设计。我一直有这种

感觉我想做更多的事情，基本上是想设计出能够产生影响并改善用户生活的设计，并始终优化我能做的事情，而当时这与代理机构的做法并不完全一致。所以总是交付产品，交付项目，然后转到下一个项目。我一直觉得我想优化单个产品或项目，然后在进行过程中不断优化。

最终，这让我成为了一名产品设计师。所以我有点换了工作，加入了一家初创公司，这是一家非常小的自筹资金的初创公司。这让我不仅可以从事UI和UX设计工作，还可以接触代码。所以我学会了自学开发，基本上是自己构建网站，因为正如我提到的，这是一家小型初创公司。所以我们必须

在资源和时间管理方面非常精打细算。所以很多时候我会比我们的工程能力快。所以我觉得我可以自己学习一下，看看我是否能以任何方式帮助他们。

我认为这是帮助我了解您提出的设计方案的最佳决定之一。它们是否可构建？你能构建它们吗？这是您可以更改或改进的内容吗？所以我认为这是一个非常好的举动。最终，这让我四年前加入了GitHub，现在几乎是一名产品设计师，在那里我

从事拉取请求的工作，也从事副驾驶的工作。我在不同的项目中工作过几次。我从奥地利的萨尔茨堡的家工作。是的，我认为这就是我今天所处的位置。我认为，在那段时间里，这也是创建Token Studio插件的灵感来源。

如果我有平行的人生轨迹，我很想把您的轨迹留在那里，因为您准确地概述了我能看到的问题，您知道，设计能力确实少于或多于。基本上，设计工作比工程快得多，前端实施设计系统听起来很棒。所以我很期待您的轨迹。

是的，我认为能够在Figma中构建您正在设计的设计，然后在实际代码中构建它们也很有趣。有时我会比平时更早地跳入代码，因为如果您正在处理实际产品，您可以探索和发现许多不同的方法来完成某件事。没错。现在，Token Studio的创业故事，非常吸引人，您和Mike正在从事不同的工作，然后联合起来。请告诉我们更多关于这方面的信息。

是的，至少对我来说，最初的灵感是创建这个插件，只是因为我当时在这家初创公司工作，这家公司基本上是关于一个可以自定义的平台即服务。根据平台的不同，您会获得不同的外观和感觉。您可以获得不同的背景颜色、不同的字体，所有这些。我是在Figma中做的，以便重新设计整个体验，并

稍后在代码中进行。大约在那段时间，我了解了设计令牌及其功能。但我发现，无法在我的设计工具中做到这一点，这让我感到很不方便。我知道我可以在代码中使用设计令牌，并且有所有这些转换工具可以将其转换为CSS变量。但是，如果我想在我的设计工具中使用设计令牌，我就无法做到。没有办法。我

决定只构建一个小型插件，这个插件基本上可以为我做到这一点，它会使用JSON字符串（您的设计令牌的编码版本），让我将其应用到我的设计中。我可以将其替换为不同的版本，可能是不同的品牌，可能是蓝色的背景等等。根据平台的不同，它会显示不同的效果。一开始非常非常简单。但与此同时，它是我一直有想法的事情之一。

这与我之前做过的其他一些项目不同，在那些项目中，我最终觉得现在结束了。我已经完成了我想做的事情，现在我继续前进。但在这种情况下，它一直在发展。我一直觉得还有一件事我们需要做，这里还有一件事，那里还有一件事。几年后，产品发展壮大到拥有一个专门的团队来构建和推动它向前发展。我认为那是……

在我最初发布这个开源项目几个月后，我已经开始做这个开源项目了，我联系了Mike，他当时已经创建了一堆功能请求，我们互相交换想法。

然后在某个时候，我们决定共同努力，让更多的人参与进来，以便从开源的角度来维护它，因为问题一直在增加。基本上，需要完成工作，以及来自其他人的更多功能请求。正如您可以想象的那样，对于一个人或两个人来维护它来说，这太多了。所以我们决定让一些人完全管理它。从那以后它一直在发展。

这是一个相当引人入胜的产品故事。一方面，Figma正在发展。所以他们不久前添加了变量，这在某种程度上复制了您的一些核心功能。但另一方面，Token Studio也在发展，你们在那里构建了更令人兴奋的东西。请告诉我们更多关于这方面的信息。

是的，当我们发布或构建插件时，这是在不同的主题中设置设计风格的唯一方法，我会这么说。还有一些其他的插件，但我认为它是一个更可扩展的选项之一。我们总觉得理想情况下，这将是一个原生解决方案，或者是可以通过原生功能增强的东西，因为它更快，因为插件本身做了很多工作，这

在某个时候会达到它的极限，或者至少当时是这样。我会说，一旦Figma引入了变量，我们就会注意到，使用插件的更简单的理由，例如公司开始使用浅色和深色主题，或者公司决定在两个不同的品牌之间切换等等，这些都是Figma的变量本身解决的问题。

而插件本身则发展成为一种更能满足更复杂需求的东西，或者更能满足那些对管理其设计系统和设计令牌的需求比Figma变量提供的需求更高的设计系统维护者。所以在它发布的时候，我们决定将我们提供的产品发展成超越Figma的东西。

这也就是我们开始致力于一个专用平台的时候，团队可以在这个平台上管理他们的设计决策，作为设计令牌，或者更在一个专门的平台上，这个平台是不可知的，位于不同的设计工具之间，您可以在不同的设计工具之间使用它，但拥有这个空间，为维护者和创建者以及使用设计系统空间的人提供

他们需要的一切，以便他们能够有效地工作。我认为大约在那个时候，我们也开始与Penpot合作，Penpot是一个开源设计工具，我们基本上是在一个开源协作中构建Penpot的原生设计令牌集成，其理念是能够在这些不同的工具之间架起桥梁，并且

是的，我认为这只会从那里发展壮大。能够在插件和Figma中提供像我们这样的功能，也许是Sketch或Framer，如果我们考虑得更远一些，像InDesign或Illustrator这样的工具，或者我们还没有使用设计令牌覆盖的其他行业。

真正实现我们的愿景和目标，即使用单一格式的设计令牌来驱动所有这些设计决策和我们所有的工具，而无需任何人工操作。所以我们的长期目标是拥有这样的工具，它允许我们从设计工具A到设计工具B，而不会带来今天所带来的所有牺牲和摩擦。

您遵循的是“为什么开始”的方法，当您有一个全球性的总体目标时，然后您会遵循产品的方向。这太棒了。是的。我想这也源于我自己在处理此类系统时的愿望。我不希望手动完成所有这些工作，才能从这个品牌切换到平台上的另一个品牌。

而是能够通过点击按钮来做到这一点，并且产生这种效果，不仅在我的Figma设计中，而且在它生成的代码中也是如此。所以我们可以节省时间，提高团队效率。让我们向我们的听众介绍一下设计系统，如果他们不了解这个概念和什么是设计系统的话。更有趣的是，当您开始一个设计系统时，您正在生成哪些实际资产以及如何实施设计系统？

所以，我认为有很多不同的定义，但我认为对我来说，一个好的设计系统归结为对我们团队就如何使用我们的产品和内部产品所做出的所有决策的封装，在寻找一致性、凝聚力方面，无论是您定义的颜色调色板，还是您选择的排版，所有这些不同的设计决策都构成了您的系统。

这些将被封装起来，您将其与组件库结合起来，组件库存储您各种组件以及编码，例如按钮、卡片、警报等等。您再次将其与构成您系统的模式、决策和规则结合起来，形成您拥有的更大的设计系统。我认为这可以从非常非常简单的事情开始。

可能只是您决定定义各种颜色，但您可以将其发展成一个复杂的系统，能够满足许多团队的需求。但是您总是可以从小处着手。我自己就是一个单一的设计师，在之前提到的那家初创公司工作，我想让它起步，并且

我通过从某个地方开始做到了这一点。当然，它没有达到许多大型设计系统所达到的水平，但它帮助我的团队了解了那里有什么，我们应该使用什么，我们如何才能避免总是重复造轮子？我认为，如果我必须给出一条建议，那就是从适合您的规模开始，然后您可以始终让您的系统变得更复杂。设计令牌本身就是

构成您系统的原子决策，正如我提到的，颜色或排版。但这也可以发展成间距和填充以及其他各种决策，例如您提供什么边框半径？或者您总是从随机值中选择吗？因此，通过将这些定义为设计令牌，您可以在应用时消除猜测

任何层面的决策，并使您的产品设计师更容易、更快地从值中进行选择。但我认为主要收获和主要优势是您的用户也会感受到这种一致性。我认为对我来说，这将是对设计系统的简短总结。但是，正如我提到的，当然还有不同的级别。您可以变得更复杂。您可以保持这种简单性。我认为这总是取决于您的需求以及在您当前目标的情况下什么对您有用。

具体来说，组件和令牌在技术层面上有什么关联？所以有组件设计令牌的概念。也许先退一步，对于设计令牌，我们有不同的级别。所以假设您有一种红色的颜色，您给它一个名称。假设它被称为red 500。也许您将其放在一个刻度上，例如red 100到red 900，而500是中间值。

您给它起名为cutoff.red.500。这就是您拥有的核心令牌。然后您可以在这个令牌中引用这种颜色。所以您说我的按钮背景是cutoff.red.500令牌的引用。您可以想象比这更宽或更深，而不仅仅是定义这两个级别，而是许多不同的级别。

当涉及到组件时，我刚才通过拥有一个button primary background令牌所做的实际上是声明了一个组件级令牌。所以这只能在按钮组件中使用。但作为一名工程师，我已经知道，好的，我应该为按钮的背景应用什么值或什么颜色，这是一个主要的变体？我可能会在那里选择button background令牌。但您不必那么具体。您通常只需从A开始。

另一个层级，这可能只是，也许您给它一个名为foreground default和background default的名称，也许还有一个名为accent.default的颜色。所以，根据您想要深入的程度，您可以创建反映这一点的系统。然后您可以始终深入和变得更复杂。当涉及到组件时，正如我提到的，您可以为每个组件创建自己的令牌，这可能会非常深入和复杂。

但是，当团队开始他们的设计系统工作时，通常有帮助的是，也许不包括，也许不要过多考虑这些组件级令牌，而是

坚持我们所说的语义令牌，这正是我刚才提到的，accent default或foreground default，background defaults，而没有使用这种组件特定的命名，您可以稍后随时添加。如果您了解CSS，这很可能是一个已经存在的概念。

它会产生共鸣，因为您有CSS变量，您基本上是在定义某些变量的值，并将它们附加到某些属性，如颜色或背景。您还可以创建这些引用的嵌套，例如一个变量引用另一个变量。通过这样做，您可以创建一个更灵活的系统，更容易更改内容而不会破坏侧面的内容，从而产生造成混乱的副作用。

所以在设计令牌上发展到更基于组件的决策是有优势的，但它也会产生很多开销。所以这通常是应该在过早地深入研究这些内容之前仔细考虑的事情。在线上是否有任何文章或指南可以使用示例和视觉展示来解释您所描述的概念？

那里有一些非常好的文章。Nathan Curtis总是会创作出非常好的文章。他写了一篇关于命名设计令牌的文章。现在已经几年了，但我认为它仍然适用，并且包含了很多这样的讨论。我认为另一篇总是有帮助的文章，或者至少帮助我理解的文章，是Brad Frost的文章。我不知道它的确切名称，但是

类似于多维主题的东西，这也有助于理解我们为什么需要这样做。所以，如果您要从浅色主题更改为深色主题，那么通过遵循这样的模式，通过遵循一致的命名模式，您实际上会从中受益。那里有一些。我想也许我们可以在此之后在笔记中添加一些。没错。这就是我问的原因。我们将把这些链接添加到节目笔记中，供听众参考。

您自己处于一个非常独特的位置，您是设计系统令牌平台的共同创建者，同时您也是设计系统的使用者，是GitHub的产品设计师。所以我很想听听您身份的这一部分，也就是使用现有的设计系统，以及问题是什么，挑战是什么，好处是什么，以及您总体上的印象。

所以在GitHub，我是一名产品设计师，并没有积极参与Primer（GitHub的设计系统）的工作，但我是一个使用者。我通常在Figma中使用它，但作为设计师，我也在代码中使用它，通常也使用代码。但我认为对我帮助很大的一件事是我的Token Studio工作，这是作为使用者所获得的知识和重要性。

所以我总是重视速度、效率，并且不会有太多的选择，因为我需要处理想法并让它们付诸实施，而不会被迫过早地进行系统化。我作为消费者学到的另一件事是我非常重视的是，您可以非常信任系统来完成它的工作。我认为这是设计系统最重要的部分之一，那就是让您的消费者相信

无论他们做什么，只要他们留在系统内，系统都会处理它。所以当涉及到颜色模式时，GitHub有很多颜色模式，我可以相信，只要我选择系统中正确的颜色部分，在将其更改为深色模式、深色高对比度模式或高对比度模式时，我不会遇到任何意外。我认为这是那里的关键经验教训之一，或者对我来说很重要的一件事

但同时回过头来想想为设计系统维护者创建产品的人，它也表明了缺失的环节，您应该始终考虑最终用户，而不仅仅是下一个用户。所以我认为这是我们在创建复杂系统时始终需要确保的事情之一，使其对实际使用者来说易于使用和用户友好，因为这是您为其创建系统的用户。

并找到和创建帮助这些用户的工具，反过来也帮助这些维护者，使采用设计系统更容易。既然我们谈到了消费者和维护者，让我们谈谈公司角色，以及开发设计系统、使用设计系统的人员的典型职位名称，以及这一切如何融入组织结构。

当然。我认为这可能真的取决于招聘该职位的团队。我认为一个更经常出现的角色是设计系统架构师的角色，他负责监督系统中的所有逻辑。我不确定我是否知道任何在这种情况下特别的设计系统职位名称，但是……

内容非常重要，就像您将这些角色或能够以某种方式为您的系统带来意义的职业区分开来，从而使其能够在文档页面等领域为您的消费者提供支持。

令牌知识本身是我看到越来越多的事情，您有专门的人员能够构建设计令牌中的逻辑，我认为这与设计系统架构师非常接近，他们控制逻辑本身。然后您总是需要一些在技术方面的人来确保您创建的这些流程是您可以转换为代码的流程。

您创建了复杂的系统，但实际上它也应该同样落到您的工程师手中。只有在不仅被设计师使用，而且被工程师使用时，它才有用。所以，让公司中的每个人都有机会使用设计系统，这种采用的概念我认为始终是最重要的部分。所以找到围绕这一点的角色对我来说可能最有意义。

我很想听听您对那些在没有设计师、设计师很少的情况下走得很远，或者只是有一套不同的组件并且愿意投资设计系统的公司的建议。那么，审核所有内容以及简化大型现有产品以应用新的设计系统来开发和应用一个设计系统的过程是什么？

是的，我认为任何必须在没有设计系统的情况下更改现有产品内容的公司都知道，要完成这些更改需要经历多少痛苦。所以，虽然设计系统一开始似乎是一项巨大的投资，但一旦您遇到了一些需要进行更改的情况，并且由于您没有系统而导致速度变慢，这时您就会看到它的价值。

但我认为另一个价值是，有了适当的设计系统，您不仅可以在需要更改内容时加快速度，因为在一个地方进行了更改，而且产品设计师和工程师不必猜测。如果我不必猜测，那么我就可以在不花费太多时间思考正确的方法、正确的组件或所有这些方面的情况下创建解决方案，或者不是组件，而是我应该在这里使用什么？

在代码库中，它也使工程师的体验变得更加简单。它正变得越来越像使用设计精良的乐高积木，您可以将它们堆叠在一起。

这可以将功能开发生命周期和流程的速度提高很多倍。所以我认为，如果您没有这个系统，最大的建议是也许可以开始查看您现有的系统。您有多少个不同的按钮？您有多少个不同的实现？并与您的团队讨论这些部分，例如，在实际尝试使用正确的按钮上花费了多少时间。

与仅仅从一个示例或一个已定义的组件中进行选择相比，这应该会大大加快速度。拥有您今天设计外观的清单，即使您没有系统，您也拥有一个系统，这将帮助您了解您最需要投资的地方，以及在您实际定义系统之前可能需要进行更多调整的地方，因为也许每个团队都有自己做事的方式，也许每个团队都有不同的需求。

所以我认为沟通在这里至关重要，让所有团队成员参与进来，不同的团队，不同的职业，并确保每个人都对他们的需求达成一致。这不必是一个大型项目。它可以从非常简单的事情开始，也许是几个人走到一起，说他们最终需要这个，或者他们想为此付出努力。

从小处着手，逐步实施，这将对每个人都有帮助，因为您不必一次性更换所有内容，我认为。但是您可以一个接一个地这样做，并以此取得进展。您之前提到过，采用可能是组织在开发和实施系统时面临的最大挑战。

请详细说明一下，您的看法是什么？是的，我认为设计系统的采用对于您想在整个公司取得巨大成功至关重要。因为当不同的团队试图做不同的事情或试图做一些略微不同的事情时，就会开始出现问题。

这通常需要他们重建它。但是，如果您创建了这样一个系统，但您可能没有像应该的那样多地与您的团队或每个团队进行沟通，那么您最终可能会得到一个只对公司某一部分有用的系统，而另一部分则无法使用它，也无法像那样实施它。然后这些人基本上就会被抛在后面，并且将使用您的

根本不会使用您的系统。这意味着您作为设计系统团队或实施设计系统的人的有效性会降低一定百分比。所以我认为，您应该尽可能地尝试让整个公司能够使用您的设计系统，因为这样一来，您所做的任何小的更改都会对您将来所做的任何更改的有效性产生巨大的影响。

我认为您今天在我们的节目中已经散布了很多很好的建议。但是，如果您要总结一下您对没有使用设计系统的公司的建议，如何开始，那就太好了。是的，我认为每个人都应该首先从设计系统的一部分开始。如果您目前还没有任何东西……

也许可以从定义您的调色板开始。也许可以尝试查看您现有的内容，并减少您可以减少的内容。让人们不必做出太多选择。另一件事是，一旦您完成了，也许可以继续进行排版、间距等等，以定义您的核心价值观。

然后继续向您的用户提供这些内容，然后您也可以开始将其作为组件库来介绍。但我认为，一旦您有了设计令牌，

请确保正确记录这些内容。许多团队忘记这样做，只是公开CSS变量等等。但是文档以及如何使用这些内容或应该如何使用这些内容，这本身就是一个很大的进步。这可能意味着您只是定义了规则，而没有实现所有细节。

但是这样一来，您的团队就有一个中心的事实来源来查找内容。但是，一旦您完成了这些工作，我总是建议开始使用自动化流程，以确保您的设计系统与您的代码同步，例如通过我们提供的Figma插件，或者通过平台来拥有您所做任何事情的单一事实来源。但这将是您可以轻松地将其转换为整个团队的内容。

我认为你应该尝试尽可能地自动化这个阶段，而不要让每个人都感到不知所措。所以我认为这始终是一种平衡。但从这些小的增量步骤开始，至少可以让你入门。我很高兴你提到了文档。那么好的文档是什么样的呢？它在哪里？是团队Wiki吗？是一个专门的，我不知道，漂亮的网站吗？你都见过哪些？

所以我认为通常最有效的方法是专门的网站，但我认为这取决于具体情况。任何你的团队知道可以去的地方，如果你有一个专门的网站，你可能需要确保它是易于发现的。

如果你的团队Wiki足够用，你可能只有一个小型系统，那也很好，我猜。但是想想你的用户以及他们如何想要处理这个问题。如果这只是他们必须打开或保存的另一个书签，

而他们并没有经常使用它，因为内容仍然太少，那么直接在他们所在的地方实施它更有意义。寻找保存内容的方法可能很棒。我认为Kedapa Primer文档在你可以找到的内容和要使用的组件方面非常好。所以我认为这是一个非常好的例子，但它也是一个相当全面的例子。也许这还不是你目前需要的规模。

非常感谢你今天分享你在这个复杂主题上的智慧。人们在哪里可以了解更多关于你、关于Token Studio的信息，以及他们在网上在哪里可以找到你们？如果你去tokens.studio，你会发现更多关于我们正在公开构建的东西的信息。所以我们构建的任何东西都是开源的。我们还有一个你可以发现的Figma插件。我们还在开发这个Studio平台。

它允许各种规模的团队以可扩展的方式管理他们的设计决策，然后成为不同设计工具的桥梁，到Figma，在那里读写，但也到Framer或InDesign或我之前提到的所有这些不同的工具。那将是一个非常好的去寻找一些信息的地方。我们确实有Studio平台。

目前有一个候补名单，你可以在tokens.zudo网站上注册。然后顶部有一个studio按钮。如果人们想了解更多关于我的信息，我的域名是jan6.at，这也是我的BlueSky用户名，如果人们想关注，尽管我不像我应该的那样活跃。太棒了。非常感谢Jan今天做客，并祝你在构建和发展Token Studio方面好运。非常感谢你邀请我。