在启动时构建设计系统
如何在快速发展的启动阶段构建设计系统并如何充分利用设计系统提供的所有好处。
在Deepnote，我们正在为数据科学家构建类似于IDE的协作界面。从设计的角度来看，这意味着要争取每个像素，同时要在每天轻松花费8个小时以上的时间来进行项目的环境中为用户提供一致，清晰的体验。
但是，如何使不断壮大的团队组成一致的用户体验呢？实现此目的的一种方法是建立设计系统。有很多很棒的文章深入探讨了什么是设计系统。粗略地描述，设计系统是团队用来设计和开发的可重复使用组件和资源的不断发展的集合。
如果您是正在考虑建立设计系统的创始人设计师，早期工程师或创始人，那么本文将向您解释我们在Deepnote上是如何做到的。不必做大事，但可以显着提高团队速度。
在我们探讨为什么拥有一个设计系统之前，让我先描述一下没有它的世界。我们曾经将所有组件散布在各种Figma文件中，而没有一个真实的来源。这使得很难为我（团队中唯一的设计师）搜索和重新使用它们。对于其他人来说，这是完全不可能的。随着团队的成长，将代码中的组件与设计保持同步也变得更加困难。
完成后，我们观察到有一个可靠的设计系统的3个主要好处：
在本文的后面，我们将简要介绍所有好处。首先，让我们看一下我们如何进行初始实施。
创建设计系统可能很容易需要数周或数月的时间，具体取决于您制作系统的规模。 Deepnote是一家快速发展的创业公司，因此，我们不希望分配几个团队成员参与一个为期数月的项目。在我们的情况下，设计系统意味着非常基本的元素和构件的简单集合。考虑类型，颜色，按钮，输入和下拉菜单。与Figma的UI2或Visual Studio Code Toolkit这样的简洁系统相比，还有很长的路要走，但是这已经对团队产生了很大的影响。
我们是固定时间，可变范围运输方式的忠实拥护者。我花了2天的时间来完成我们的设计，并将基本元素转换为组件。更具体地说，在那两天内，我设法设置了以下构建块：键入比例，按钮，输入，下拉菜单，复选框，切换，单选按钮，工具提示，标签和下拉菜单项。仅凭这些预先创建的组件，就可以使设计师和前端团队像您要雇用新的团队成员一样有效（如果考虑时间投入，这是非常重要的）。
从Deepnote开始，我们就使用了隐式4点网格，这宽松地表示元素大小和间距为4的倍数（您可以理解为4px，8px，12px）。但是，网格从未真正正式化或强制执行。因此，如果另一个团队成员添加了一些设计，那么他们不太可能会遵循网格。我们必须重新审视旧的设计并解决视觉上的细微不一致，以使其与新形式化的网格一起使用。
与网格并列的是类型刻度。我检查了我们在界面中使用的字体大小，可以轻松地找到介于11px到16px之间的所有字体大小。不要让我开始使用字体粗细和行高。线条高度定义了文本框的高度，这意味着它们必须为4的倍数才能匹配4点网格。为了解决这个问题，我从Figma的UI2字体比例中汲取了灵感，并定义了几个字体大小及其高度。高度均为4的倍数，并使用下面的屏幕快照中所示的公式进行计算。
一旦定义了网格和类型比例，创建单个元素的速度就会变得惊人地快。我们已经创建了元素，它们只是分散在许多Figma文件中。这是一个很好的练习，它可以重新访问您每天使用的所有按钮或输入，而不必再三思而后行，并检查它们是否遵守网格，键入比例并与设计系统的其余部分保持一致。
我们的目标是永远不要在我们编写＆amp ;;取代一切。这可能会花费大量时间。
相反，我们选择了几个最重要的元素，并与前端团队一起跳入Storybook实现中（或者已经有一个实现，我们只是对其进行了更新）。 Figma变体确实很有帮助，因为它们为我们提供了组件应具有的React道具的指南。
如果我们将旧的React组件作为PR的一部分，我们只需检查该组件是否使用Storybook中定义的设计系统元素即可。如果没有，我们将其替换。逐渐地，我们删除了所有不符合设计系统的硬编码和孤立元素。默认情况下，所有新的React组件都利用设计系统的Storybook实现。
您的公司规模越大，设计系统的好处就越大。在我们的案例中，我们看到了3个主要好处。
设计系统的最直接和最受好评的好处。同事们可以直接在代码中使用与Figma设计中相同的组件。这也大大减少了交接时间，为双方节省了时间。另外，如果其他人有他们想看到的想法，我鼓励他们为它做设计。由于有了设计系统，现在这变得容易得多。
这是不言而喻的。如前所述，我们正在逐步将所有元素替换为其对应的组件。这也是一个不错的现实检查，我们发现同一按钮有7种不同的表示形式。
设计系统最显着的不同之处在于，它减少了我需要做出的决策数量。我不再需要搜索正确的文件和元素，而决定它们是否适合新设计。我只是将它们拖放到设计中，因为他们知道它们为用户提供了统一的体验。我可以利用精力专注于手头的实际设计问题。这让我想起了一个故事，讲述扎克伯格（Mark Zuckerberg）为何每天都穿着同一件衬衫。
设计系统永远不会完成，而这只是第一步。看到它对整个团队产生的影响力已经令人惊讶，从工程师渴望创建设计（否则他们会因为寻找元素而灰心），到所提到的减少的决策疲劳。
我们正在招聘开发人员和设计师。如果您喜欢创建漂亮的界面，或者您认识任何想加入我们的职位的人，请给我们发送电子邮件至[email protected]。
