你现在不需要一个设计系统

设计系统是强大的，但是你现在不需要。

它会消耗你的时间和精力，让你无法专注于产品本身的建设。

你的设计师将无法使用设计系统，你的开发人员也无法在他们的代码中使用。

让我告诉你如何节省关键的时间，不限制团队的创造力，而无需设计系统。

先暂时忽略设计系统

在从头开始构建Thursday时，我们不得不决定如何构建一个 设计系统是Figma组织的圣杯，你会花费几周的时间构建组件，然后会因为要重新设计计时器组件而将其丢弃。

它们如何帮助

设计系统有很多好处，即使在早期阶段也能帮助你：

• 它让你产品的设计保持一致性，不再有500个不同的灰色。减少设计负债。
• 设计最终的用户界面变得更容易和更快速。你不必自己移动每一个像素。
• 减少界面与前端之间的不一致性。在设计中使用的组件也被用于代码中。

它们如何阻碍

这些是设计系统的一些优势，但无论它们解决了多少问题，作为设计师，设计系统可能对你来说也是具有挑战性的：

• 设计系统可能对你作为设计师来说也有一些困难。 EMS（设计系统）表面上看起来很简单，但正确实施却很困难。专业设计师们正在努力维护它们在组织内的应用。

它们需要付出很高的努力和时间。市场上可购买的预构建系统的数量就是这一事实的证明。

如果一个系统只存在于设计文件中，那么构建它的意义何在呢？你的开发人员是否有自由与你合作，将其应用到产品中呢？

对于你的小型设计团队，真的需要一个设计系统吗？

显然，设计系统具有很高的投资回报率，但无论如何也是一个巨大的投资。如果你是初创公司的设计师，负责塑造产品，那么早期不是巩固你的界面的时候。你的UI模式还没有出现，你处于萌芽阶段。创新和想法可能随时冒出来，将系统应用于设计将限制它们只能使用现有的解决方案，从而阻碍创造力。

但我们该怎么办呢？你的初创产品需要你以极快的速度进行迭代，构建敏捷的原型进行测试，难道没有任何工具帮助你完成这个任务吗？样式指南（Style Guide），正是你未来设计系统的种子。

构建样式指南

样式指南是一个库文档（在Figma中）指导您产品的样式、颜色和字体使用。它消除了设计师需要做出微小决策的需要，例如使用哪个阴影值，并让他们专注于真正重要的事情，即创意。它帮助您保持一致性，无论是在设计中还是在开发中。

1. 从颜色开始

颜色是最重要的样式指南之一，但实施起来最简单。我们从产品中使用的6种灰色开始。3个月前…

接下来，我们添加了6种品牌颜色，最终为每个颜色添加了浅色背景和悬停状态的变体。…今天

2. 文本样式

如果您以前没有从事过字体设计，文本样式可能会很困难，但是如果您在网上寻找示例，在产品中进行映射，并从小处开始，您可以构建一个适用于早期阶段的最小可行指南。

检查 杂项

添加其余的内容。阴影。描边。你可能需要的其他任何东西。并随着开发的进展不断添加。

确保与开发人员一起构建，以确保一致性。例如，我们的颜色样式在我们的代码中得到了反映，当交付时，我们不提供十六进制代码，而是提供样式名称#purple500。如果将来我们更改了#purple500，它不仅仅是在我们的文件中在Figma中进行单击更改。它将是产品本身的代码行更改。

我们的颜色样式在代码中映射出来

有了这种安心，您可以随时在产品开发阶段更改样式，可以专注于创意，而不必担心视觉细节

设置组件库文件

你不需要一开始就建立庞大而沉重的高保真设计系统，只需在独立页面中探索交互组件的实际行为与表现。

组织组件库文件的实用建议：

1. 将相关组件归类分组：例如，将所有按钮放入同一个画框或分类，将卡片、输入框各自归类。
2. 使用清晰语义化的命名：规范的命名规则能让团队成员在后续快速检索和调用组件。
3. 及时清理废弃组件：删除不再使用或过时的组件，保持设计文件清爽整洁，提升加载性能。

请记住，组件库是一个持续迭代的“活文档”。随着产品的演进，它会不断扩充和完善。不要害怕尝试和重构，这正是设计的魅力所在！

当组件文件搭建完毕后，你就可以开始用它搭建界面了。每当需要特定的 UI 模式时，直接将对应组件拖拽至画布即可，这既节省时间，又确保了全站设计的一致性。

在设计过程中，如果某个组件需要微调，不要直接在页面画布上打散修改，而是回到组件源文件中修改主组件。这样一来，所有的修改都会自动同步到全项目的所有实例中。

总而言之，组件库是构建高效、一致产品界面的核心利器。花时间做好规范和整理，长远来看必将带来巨大的回报。

每次都能帮助克服创意障碍。来这里玩耍，尝试使用组件和自动布局使屏幕响应，创建变体并使它们交互起来！

在我们的第一个图标“mute”在三个月后成为了Figma组件。

Figma组织的更多提示

既然你走到了这一步，以下是一些帮助我们的额外提示：

• 封面图片。 用于快速在Figma文件之间切换。

Figma封面

• 页面名称。 使用具体的名称。例如，在我们的Lounge文件中，“音频/视频设置”页面比模糊的“v2.1探索”更容易在几个月后找到。
• 使用 🟢 来标记交接页面。不要过度使用表情符号。
• 在交接过程中，请确保样式已应用。

✅ 所有样式在交接过程中都已应用

结论

在这个早期阶段，你不需要构建一个设计系统，专注于产品和用户即可。一个样式指南就足够了，它可以保持一致性并推动构建的开始。 使用这种方法作为一个松散的框架来指导我们的设计，帮助我们在3个月内从0到1建立了Thursday，并成为Product Hunt上的第2个产品，并获得了来自我们用户的巨大反馈。

记住，“真正的艺术家是交付的”。