When I first joined TableCheck and we discussed having a new design system, I was excited — but also worried. I’ve worked on a number of these types of projects before so I knew how impactful they can be when they succeed. I also knew how difficult they can be to get right and to sustain.

当我第一次加入TableCheck并讨论拥有一个新的设计系统时，我很激动-但也很担心。 之前，我已经从事过许多此类项目的工作，所以我知道成功之后它们会产生多大的影响。 我也知道他们要正确并维持下去会是多么困难。

A design system is a long term investment. They’re not something you build overnight, or are ever “done” with. They need to be living things that continue to grow and adapt to meet the needs of your team and product. Unfortunately, unless you’re at a company like Google, IBM or Atlassian, you’re probably just not gonna have the ability to have a team dedicated solely to the growth and maintenance of this framework.

设计系统是一项长期投资。 它们不是您在一夜之间构建的东西，或者不是您曾经做过的事情。 他们需要成为能够持续增长并适应您的团队和产品需求的生物。 不幸的是，除非您在Google，IBM或Atlassian这样的公司工作，否则您可能没有能力拥有专门致力于该框架的成长和维护的团队。

To my relief, almost a year later, TableKit continues to mature and improve with each release. While we still have a long road ahead and we continue to evolve, here are the things I believe we did right so far. If you’re a developer or a designer at a small to mid-sized company, involved in building a design system for your own team, hopefully these insights can help you find success as well.

让我感到欣慰的是，将近一年后，TableKit的每个发行版都继续成熟和改进。 尽管我们还有很长的路要走，而且我们会继续发展，但我相信到目前为止，这是我们所做的正确的事情。 如果您是中小型公司的开发人员或设计师，并且参与为自己的团队构建设计系统，那么希望这些见解也能帮助您找到成功。

打下基础 (Laying a foundation you can build on)

It’s easy to look at something like Material and be intimidated or lost in the sea of components and guidelines they provide. So if you’re looking for a place to start, this is where I would suggest. Establish the basic, foundational rules of your visual design system. Also known as your “Design Tokens” or if you’re following the principles of Atomic Design, your “Atom” level elements. Your main areas of focus should be colours, composition (layout and spacing) and typography.

您很容易看到诸如“材料”之类的东西，而在提供的组件和指南中被吓倒或迷失。 因此，如果您正在寻找起点，这就是我建议的地方。 建立视觉设计系统的基本规则。 也称为“设计令牌”，或者如果您遵循“原子设计”的原则，则称为“原子”级元素。 您主要关注的领域应该是颜色，构图(布局和间距)和版式。

Once you settle on a set of colours, type specs, spacing increments and a grid, you’ve overcome the first big hurdle. Even without a standardized set of reusable UI components and patterns (yet), just establishing and adopting these rules will do wonders for enhancing the visual fidelity and cohesion of your products.

一旦确定了一组颜色，类型规格，间距增量和网格，就克服了第一个大障碍。 即使没有一组标准化的可重用UI组件和模式(尚未)，仅建立和采用这些规则也将为增强产品的视觉保真度和凝聚力创造奇迹。

With TableKit, we did exactly this. We needed a single colour palette that would suit all our needs, from branding, UI design, illustrations, data visualization — everything.

使用TableKit，我们可以做到这一点。 我们需要一个能够满足我们所有需求的调色板，从品牌，UI设计，插图，数据可视化到所有这些。

We did this by taking our brand colour. Then creating 7 additional “core” colours with the same visual brightness and saturation. Once we had our 8 core colours, we added 4 darker and 4 lighter shades of each for our scales. This gave us a total of 72 unique colours to work with.

我们通过采用品牌色彩来做到这一点。 然后创建7种具有相同视觉亮度和饱和度的“核心”颜色。 有了8种核心颜色后，我们为秤分别添加了4种深色和4种浅色。 这使我们总共可以使用72种独特的颜色。

While this is absolutely overkill for UI work, it’s something we needed for the additional use cases I mentioned above. Defining our palette this way allowed us to have a semantic way of referring to colours. Instead of #7935D2 it’s Purple 07. This gave us the structure and shared vernacular we needed to set up more specific palettes for things like data visualization as well as UI work.

虽然这对于UI工作绝对是多余的，但对于我上面提到的其他用例，这是我们需要的。 通过这种方式定义调色板，使我们可以使用语义方式来指代颜色。 而不是＃7935D2，它是Purple07。这为我们提供了结构和共享的语言，我们需要为数据可视化以及UI工作设置更多特定的调色板。

If all you need to do is UI work, you can sidestep curating a full palette like we did, and just start with establishing your Theme and UI colours. For a deep dive on colour theory and a tool for establishing your own scales, I highly recommend Lyft’s ColorBox tool and the accompanying article that goes into how they rebuilt their own colour library and developed the tool. If you’re curious as to how we arrived at our own colour library, (why we have 8 core colours instead of 9? Why 9 shades instead of 6? etc…) Let me know and I will do a more focused deep dive on this process and building palettes for data visualizations specifically.

如果您需要做的只是UI工作，则可以像我们一样避免使用整个调色板，并从建立主题和UI颜色开始。 为了深入学习颜色理论和用于建立自己的比例尺的工具，我强烈推荐 Lyft的ColorBox工具以及随附的文章 ，其中介绍了他们如何重建自己的颜色库和开发该工具。 如果您对我们如何到达自己的颜色库感到好奇，(为什么我们用8种核心颜色而不是9种？为什么用9种阴影而不是6种？等等……)让我知道，我将重点关注一下此过程并为数据可视化构建调色板。

Alongside the colour guidelines, we also established a fixed set of pixel values for our spacing scale. This would help us make sure our components and layouts had a consistent set of values for things like paddings and margins.

除了颜色准则外，我们还为间距比例尺设置了一组固定的像素值。 这将有助于我们确保我们的组件和布局对于诸如填充和边距之类的东西具有一致的值集。

IBM calls this “the mini unit” but it’s basically just the idea of ems, adopted from frontend development and applied to visual design. You define a base value (in our case 8) and then set every other step in your scale as an increment of that base value. This is also known as an 8pt grid. Check out this article for a more detailed look at this approach to UI composition.

IBM称其为“迷你单元”，但基本上只是ems的概念，它是从前端开发中采用并应用于视觉设计的。 您定义一个基准值(在本例中为8)，然后将刻度中的每个其他步骤设置为该基准值的增量。 这也称为8pt网格 。 请查看本文，以更详细地了解这种UI组合方法。

We also extended the same framework to our typescale, setting our line-heights for each step in full or half increments of 8; and then fine tuning the font size to sit well within that specific line height.

我们还将相同的框架扩展到我们的字体比例尺，将每个步骤的行高设置为8的全部或一半增量； 然后微调字体大小，使其恰好位于特定的行高范围内。

All this took a while to dial in. (In fact, like everything else this is something we’ve adjusted over time — but more on that later). Setting a foundation like this allows you to start building. Which brings me to my next piece of advice.

所有这些都花了一段时间才能拨入。(实际上，就像其他所有内容一样，我们已经随着时间的推移对其进行了调整-但稍后会对此进行更多调整)。 这样设置基础可以使您开始构建。 这使我想到了下一条建议。

根据需要构建事物 (Build things as you need them)

There are two other common mistakes I see teams make. (Meaning I’ve also made them in the past). This applies to things like high level guidelines as well, but it’s most prevalent when it comes to building actual components.

我看到球队犯了另外两个常见错误。 (意思是我过去也做过)。 这同样适用于高级准则之类的东西，但是在构建实际组件时最为普遍。

One is, simply put — over complicating things. Trying to build out highly complex, highly flexible systems, anticipating any and every possible potential use case you can think of.

简而言之，一个就是使事情复杂化。 尝试构建高度复杂，高度灵活的系统，并预测您能想到的所有可能的用例。

This slows down your progress and makes your life (and the things you produce) needlessly complex. This doesn’t mean you shouldn’t plan ahead and make sure you’ve properly gathered requirements. But be smart with your time and resources.

这减慢了您的进度，并使您的生活(以及您生产的东西)变得不必要地复杂。 这并不意味着您不应该事先计划并确保已正确收集需求。 但是要节省时间和资源。

The second mistake is trying to shortcut this initial ramp up time but saying “Let’s just use and reskin <insert your favourite component library here>.” This doesn’t mean you can’t cherry pick patterns and elements from other systems when you see something that’s particularly well done.

第二个错误是试图缩短最初的启动时间，但是说“让我们使用并重新涂皮<在这里插入您喜欢的组件库>” 。 这并不意味着当您看到做得特别好的东西时就不能从其他系统中挑选模式和元素。

The thing to keep in mind is that if you’re adopting another design system wholesale, you’re also inheriting any technical debt and restrictions that come with it.This often just adds both design and engineering bloat to your product and increases the likelihood that you end up with something nobody really likes to use.

要记住的是，如果您采用另一种批发设计系统，那么您还将继承其附带的任何技术欠债和限制，这通常只会使产品增加设计和工程膨胀，并增加您最终会得到没人真正喜欢使用的东西。

You can largely sidestep both of these issues by just building things as you need them. This means you will only ever have things in your framework that you actually use, and you will always have real use-cases to test elements and rules with.

您可以根据需要构建事物，从而在很大程度上避免这两个问题。 这意味着您将只在框架中拥有实际使用的东西，并且将始终具有实际的用例来测试元素和规则。

A basic example of how we did this on TableKit is the introduction of different button treatments over time.

我们如何在TableKit上执行此操作的一个基本示例是随着时间的推移引入了不同的按钮处理方式。

Did I know we were probably gonna need a “danger treatment” for destructive actions at the outset? Yep — but we didn’t actually have a use for it till a few months in, so we didn’t build out that variant until then. Enhancements and fixes for TableKit happened naturally, as the work required to build new components was baked into the estimates and resourcing of ongoing product development.

我是否知道我们一开始就可能需要采取“危险措施”来进行破坏性行动？ 是的-但是直到几个月后我们才真正使用它，因此直到那时我们才开发出该变体。 TableKit的增强和修复是自然而然的，因为构建新组件所需的工作已纳入到正在进行的产品开发的估算和资源中。

共享所有权 (Shared ownership)

This way of trojan horsing the design system development into our day to day product work had another knock-on effect. It got all of our frontend developers familiar and invested in using and improving the system. Now credit where it’s due, I got lucky here. My team in general was fairly open to this project to begin with, but having an engineer counterpart who was also an evangelist for this effort also helped a lot.

这种特洛伊木马将设计系统开发纳入我们日常产品工作的方式具有另一种连锁效应。 它使我们所有的前端开发人员都熟悉并投入使用和改进系统。 现在归功于到期日，我在这里很幸运。 总的来说，我的团队对这个项目很开放，但是拥有一名工程师同行(同时也是这项工作的推广者)也大有帮助。

If I had to pick one thing that could make or break the longterm success of a design system, it’s this. A system isn’t successful if you have a nicely structured Sketch of Figma file with some great looking specs, or a slick looking site to demo everything on.

如果我必须选择一件可以使设计系统取得长期成功或成败的事情，就是这样。 如果您拥有结构良好，外观精美的Figma文件草图，或者具有光滑的外观进行所有演示的站点，则系统将不会成功。

A system’s success is measured in the products you ship using it, and the time it saves you along the way. But for it to be successful, you need to have a shared sense of ownership and buy-in across the different parts of your team. So that people want to use it and are invested in seeing it grow. This also helps ensure that the tools and rules you build are uniquely suited to meet the needs of your team, and that is one of the biggest benefits of building your own solution.

系统的成功与否取决于您使用该系统交付的产品，并且可以为您节省时间。 但是要使其成功，您需要在团队的不同部门之间拥有共同的主人翁意识和认同感。 因此，人们希望使用它，并投资于看它成长。 这也有助于确保您构建的工具和规则特别适合满足团队需求， 这是构建自己的解决方案的最大好处之一。

A good metric to track your success on this front is simply seeing how often the code and content of your design system gets updated.

跟踪您在这方面取得成功的一个很好的指标就是简单地查看设计系统的代码和内容多久更新一次。

What can you do as a designer to help foster this sense of ownership across your company? Give people (whether it’s other designers or engineers) a voice in the process. At TableCheck we have a #tablekit channel on slack that anyone at the company can join and participate in.

作为设计师，您可以做些什么来帮助在整个公司中培养主人翁感？ 在此过程中让人们(无论是其他设计师还是工程师)发声。 在TableCheck中，我们有一个#tablekit频道，供公司中的任何人闲暇时使用。

Every component and design that makes it into TableKit goes through this channel at some point for review. It’s not always perfect or easy, but this open process gives others on the team the opportunity to contribute, and once people see that their input is actually valued and can have an impact, they’ll be more likely to continue to participate in the process.

使其成为TableKit的每个组件和设计都会在某个时候通过此通道进行审查。 这并不总是完美或容易的，但是这种开放的过程使团队中的其他人有贡献的机会，一旦人们看到他们的投入得到了真正的重视并可能产生影响，他们将更有可能继续参与该过程。 。

迎接改变 (Embrace change)

“Strong opinions, loosely held” is a mantra often repeated on product teams. And I think it goes double here. While you want to avoid introducing foundational changes every two weeks, there should be nothing in your framework that couldn’t be changed if there was a good enough reason to support the decision.

“强硬的意见，松懈的态度”是产品团队经常重复的口头禅。 我认为这里翻了一番。 尽管您希望避免每两周进行一次基础更改，但是如果有足够的理由支持该决定，则您的框架中应该没有任何不能更改的内容。

“Let’s do it. Get it out there. See how it works, and if we need to come back and change it — we can” is phrase I say so often I should probably get it printed on a shirt. This philosophy of embracing change helps avoid indecision and mitigate the fear of failure. Because one of the few guarantees that I can make is you’re not gonna get everything right the first time. Once you remove the pressure of essentially having to be right all the time, it frees you and your team up to experiment more. But it also means not being overly attached to your ideas — and this is something I find people sometimes struggle with.

“我们开始做吧。 把它拿出来。 看看它是如何工作的，如果我们需要回来修改它—我们可以。我经常说这句话，我应该把它印在衬衫上。 这种拥抱变化的哲学有助于避免犹豫不决，减轻对失败的恐惧。 因为我可以保证的少数保证之一就是您不会在第一时间就把所有事情都做好。 一旦您消除了始终必须保持正确状态的压力，它便可以释放您和您的团队进行更多实验的力量。 但这也意味着不要过于依赖您的想法-这是我发现人们有时会遇到的问题。

It’s ok to be wrong, but it’s also important to be ready to see something you felt really strongly about or invested time in fail — and then be able to let go of that idea and see what you need to change.

错是可以的，但准备好要看到您真正对失败有强烈感觉或花时间在失败上也很重要，然后能够放开这个想法，看看您需要更改什么。

When we were first laying the foundation for TableKit, we went through an array of different font pairings until we arrived at the perfect combination.

当我们首次为TableKit奠定基础时，我们经历了一系列不同的字体配对，直到达到完美的组合。

Source Sans Pro being the main font, used everywhere across our apps and websites. Poppins being the accent font, used primarily in marketing for things like headlines, and where we needed to add some additional visual flair.

Source Sans Pro是主要字体，在我们的应用程序和网站中广泛使用。 Poppins是一种加重字体，主要用于市场营销中的标题等内容，以及我们需要添加一些其他视觉效果的地方。

It was great.

太好了。

Until we decided to change it about 4 months later.

直到大约4个月后我们决定更改它。

While the initial combination worked well in the use cases we tried, we found the legibility really suffered for Source San at smaller font sizes, in more data dense displays. So we went back to the drawing board, experimented with a few options; eventually settling on Plex as our font family of choice.

虽然最初的组合在我们尝试的用例中效果很好，但是我们发现Source San在较小的字体大小和更多的数据密集显示中确实受到了影响。 因此，我们回到了绘图板上，尝试了一些选择。 最终选择Plex作为我们选择的字体家族。

It was highly legible at all sizes. It worked well for both marketing and product work. And it had a few other big pluses such as great internationalization support.

各种尺寸都清晰易读。 它既适合市场营销又适合产品工作。 它还有其他一些重大优点，例如强大的国际化支持。

And we’ve continued to iterate on it over time, most recently swapping out the Bold font weight for a slightly lighter Semi Bold, and adding a condensed variant for headlines.

随着时间的推移，我们一直在进行迭代，最近一次是将粗体替换为较轻的Semi Bold，并为标题添加了精简变体。

All these decisions were driven by new lessons we learned as we applied our rules, tools and guidelines to different parts of our products, and our needs evolved.

所有这些决定都是由我们在将规则，工具和指南应用于产品的不同部分时所吸取的新经验所驱动的，并且我们的需求也在不断发展。

不要让完美成为善良的敌人 (Don’t let perfect become the enemy of good)

One of the other reasons that we have such a high rate of updates on TableKit is because we’re constantly locking in small bits of progress and improvements.

我们对TableKit进行如此高的更新的另一个原因之一是，因为我们一直在锁定少量的进展和改进。

An example of this in practice can be seen on Tablekit’s demo site itself. http://tablekit.tablecheck.com

在实践中可以在Tablekit的演示站点上看到一个示例。 http://tablekit.tablecheck.com

Is it amazing? No. It’s missing content around design guidelines we’ve standardizes across our team, but haven’t solidified into a publicly available resource yet, and the structure is a bit of a mess. (Amongst other things). Clearly room for improvement.

很棒吗？ 否。我们在我们的团队中标准化的设计准则中缺少内容，但尚未整合为可公开使用的资源，结构有些混乱。 (还有其他事情)。 显然还有改进的余地。

But our initial focus was to build the tools necessary for our product and engineering teams to streamline our delivery. This meant the site’s primary focus was to serve as a sandbox and point of technical reference. For that, the current site worked well enough. But now we’re reaching a point in our system’s maturity where this resource is starting to be used by non-engineers as well — so we need to improve. This is a great problem to have.

但是，我们最初的重点是为产品和工程团队构建必要的工具以简化交付过程。 这意味着该站点的主要重点是充当沙箱和技术参考点。 为此，当前站点运行良好 。 但是现在我们已经达到系统成熟度的程度，该资源也开始被非工程师使用-因此，我们需要进行改进。 这是一个很大的问题。

If you’re not embarrassed by the first version of your product, you’re not moving fast enough. — Reid Hoffman (LinkedIn Founder)

如果您对产品的第一个版本不感到尴尬，那么您的移动速度还不够快。 — Reid Hoffman(LinkedIn创始人)

It’s a bit extra but I agree with the general premise. We have a responsibility to maintain a certain level of quality for everything we release, but at the same time design has really suffered from the Instagram-ification of this industry. Where everyone is trying to condense their work into a few highly polished, sexy screenshots, that don’t always accurately reflect the reality of what gets delivered. Which is a shame. So don’t worry if you work is less than perfect at first — the important thing is to keep making progress and keeping going. As long as your work is continuously improving your team’s output— that’s what matters.

这有点多余，但我同意一般的前提。 我们有责任为发布的所有产品保持一定的质量，但与此同时，设计确实受到了该行业Instagram风格的影响。 每个人都试图将他们的工作浓缩成一些高度精美，性感的屏幕截图，但这些屏幕截图并不总是能准确反映出所交付内容的真实性。 真可惜。 因此，一开始工作并不完美就不必担心-重要的是要不断进步并继续前进。 只要您的工作不断提高团队的产出，那就很重要。

合理的默认值(可以覆盖) (Sensible defaults (that can be overriden))

I think one of the hardest things to get right in any design system is balancing flexibility and consistency. Make something too restrictive, and it becomes a pain to use because you end up fighting the tool itself half the time. Make something too flexible, and you risk losing the cohesion you’ve worked so hard to achieve.

我认为，在任何设计系统中，最困难的事情之一就是平衡灵活性和一致性。 限制得太严格，使用起来会很痛苦，因为您最终会花费一半时间与工具本身打架。 太灵活了，可能会失去努力实现的凝聚力。

With TableKit, we tried to balance this with the following approach.

使用TableKit，我们尝试使用以下方法来平衡这一点。

Build in sensible defaults that can be easily overriden if required.

建立合理的默认值，如果需要，可以轻松覆盖这些默认值。

You can see a simple example of this with how we’ve built our modal component. The padding around the edges of the content area is set at 16px by default. However, we’ve had some usecases where we needed to do something a bit different, with content going edge to edge for example. So we’ve made this a prop that can be turned off if needed, (rather than having to hack around it with CSS). Our aim is to provide sensible defaults and encourage our team to use these components as they are out of the box; but provide the ability to override certain properties in a controlled way, when we do need to bend our own rules.

您可以看到一个有关如何构建模态组件的简单示例。 默认情况下，内容区域边缘周围的填充设置为16px。 但是，在某些用例中，我们需要做一些不同的事情，例如内容会边到边。 因此，我们已经将此工具做成了一个可以在需要时关闭的道具(而不是必须使用CSS对其进行破解)。 我们的目标是提供合理的默认值，并鼓励我们的团队使用这些现成的组件； 但是当我们确实需要弯曲自己的规则时，它能够以受控方式覆盖某些属性。

But you often don’t know what these properties are, until you come across some repeat use cases that require additional flexibility. Which takes us back to our previous points — starting simple and embracing change.

但是，在遇到一些需要额外灵活性的重复使用案例之前，您通常不知道这些属性是什么。 这使我们回到了之前的观点-开始简单而又拥抱的变化。

总结思想 (Closing thoughts)

I always found working on design systems to be really rewarding. It’s one of the few projects where the impact of the work can benefit your customers and your team at the same time. Personally, I like to build tools. Things that help people succeed and be better at what they do. And a project like TableKit definitely ticks those boxes.

我总是发现在设计系统上工作真的很有意义。 这是工作影响能够同时使您的客户和团队受益的少数几个项目之一。 我个人喜欢构建工具。 可以帮助人们成功并做得更好的事情。 像TableKit这样的项目肯定会打勾那些框。

We’ve room for growth and things we still want to do. But considering how far we’ve come in the last 12 months, I’m proud of the progress we’ve made and can’t wait to see where things go in the next year.

我们有增长的空间，还有我们仍想做的事情。 但是考虑到过去12个月中我们取得的成就，我为我们所取得的进展感到骄傲，迫不及待地想知道明年情况会如何发展。

The following images are examples of sites, illustrations, products and side projects we’ve built using this system over the past year. While I helped kickstart this project and was the primary driver in terms of design work and direction, here’s the thing I’m most proud of. (Humble brag incoming).

下图是我们在过去一年中使用此系统构建的站点，插图，产品和附带项目的示例。 在我帮助启动这个项目并成为设计工作和指导的主要推动力的同时，这是我最引以为傲的事情。 (谦虚吹嘘)。

Of these images, only 2 of them were made by me directly. The rest are examples of work that others on my team (often engineers) have produced using our framework — looping me in for advice or reviews as they needed. I think the above is a testament to the skills of the people I work with. It’s also a good example of how a design system can help empower others on your team in their own work, and help scale design across an organization.

在这些图像中，只有2张是我直接拍摄的。 其余示例是我们团队中的其他人(通常是工程师)使用我们的框架进行的工作的示例-随时请我咨询或提出建议。 我认为以上证明了与我一起工作的人的技能。 这也是一个很好的例子，说明设计系统可以如何帮助您团队中的其他人增强自己的工作能力，并有助于在整个组织中扩展设计。

If you’re setting out to build your own solution, hopefully you’ve found the examples and advice in this article useful. If you have any questions, feedback or want to chat further, leave a comment or send me a message!

如果您打算构建自己的解决方案，希望本文中的示例和建议对您有所帮助。 如果您有任何疑问，反馈或想进一步聊天，请发表评论或给我发送消息！