你现在不需要一个设计系统
设计系统是强大的，但是你现在不需要。
它会消耗你的时间和精力，让你无法专注于产品本身的建设。
你的设计师将无法使用设计系统，你的开发人员也无法在他们的代码中使用。
让我告诉你如何节省关键的时间，不限制团队的创造力，而无需设计系统。
先暂时忽略设计系统
在从头开始构建Thursday时，我们不得不决定如何构建一个 设计系统是Figma组织的圣杯，你会花费几周的时间构建组件，然后会因为要重新设计计时器组件而将其丢弃。
它们如何帮助 #
设计系统有很多好处，即使在早期阶段也能帮助你：
- 它让你产品的设计保持一致性，不再有500个不同的灰色。减少设计负债。
- 设计最终的用户界面变得更容易和更快速。你不必自己移动每一个像素。
- 减少界面与前端之间的不一致性。在设计中使用的组件也被用于代码中。
它们如何阻碍 #
这些是设计系统的一些优势，但无论它们解决了多少问题，作为设计师，设计系统可能对你来说也是具有挑战性的：
- 设计系统可能对你作为设计师来说也有一些困难。 EMS（设计系统）表面上看起来很简单，但正确实施却很困难。专业设计师们正在努力维护它们在组织内的应用。
它们需要付出很高的努力和时间。市场上可购买的预构建系统的数量就是这一事实的证明。
如果一个系统只存在于设计文件中，那么构建它的意义何在呢？你的开发人员是否有自由与你合作，将其应用到产品中呢？
对于你的小型设计团队，真的需要一个设计系统吗？
显然，设计系统具有很高的投资回报率，但无论如何也是一个巨大的投资。如果你是初创公司的设计师，负责塑造产品，那么早期不是巩固你的界面的时候。你的UI模式还没有出现，你处于萌芽阶段。创新和想法可能随时冒出来，将系统应用于设计将限制它们只能使用现有的解决方案，从而阻碍创造力。
但我们该怎么办呢？你的初创产品需要你以快速的速度进行迭代，构建迅捷的原型进行测试，同时 以下是Markdown的翻译版本，同时删除了一级标题，并删除了其中的图片链接，尽可能删除了Markdown格式错误和一些无用的段落，重新装饰了整篇文章，使其读起来更加自然：没有任何帮助你完成这个任务的东西吗？遇到样式指南，将成为您未来设计系统的种子。
构建样式指南 #
样式指南是一个库文档（在Figma中）指导您产品的样式、颜色和字体使用。它消除了设计师需要做出微小决策的需要，例如使用哪个阴影值，并让他们专注于真正重要的事情，即创意。它帮助您保持一致性，无论是在设计中还是在开发中。
1. 从颜色开始 #
颜色是最重要的样式指南之一，但实施起来最简单。我们从产品中使用的6种灰色开始。3个月前…
接下来，我们添加了6种品牌颜色，最终为每个颜色添加了浅色背景和悬停状态的变体。…今天
2. 文本样式 #
如果您以前没有从事过字体设计，文本样式可能会很困难，但是如果您在网上寻找示例，在产品中进行映射，并从小处开始，您可以构建一个适用于早期阶段的最小可行指南。
检查 杂项
添加其余的内容。阴影。描边。你可能需要的其他任何东西。并随着开发的进展不断添加。
确保与开发人员一起构建，以确保一致性。例如，我们的颜色样式在我们的代码中得到了反映，当交付时，我们不提供十六进制代码，而是提供样式名称#purple500。如果将来我们更改了#purple500，它不仅仅是在我们的文件中在Figma中进行单击更改。它将是产品本身的代码行更改。
我们的颜色样式在代码中映射出来
有了这种安心，您可以随时在产品开发阶段更改样式，可以专注于创意，而不必担心视觉细节
设置一个组件文件 #
您可能不会从头开始构建设计系统。 h anymore. Instead, I can just play around with the interactive components on the screens page and see how they behave.
Some tips for organizing your Components file:
- Group related components together. For example, put all your buttons in one group, all your cards in another group, etc.
- Use descriptive names for your components. This will make it easier to find and use them later on.
- Delete any components that you no longer use or need. Keeping your file clean and clutter-free will make it easier to work with.
Remember, your Components file is a living document. It will evolve and change over time as you continue to work on your design system. Don't be afraid to experiment and try new things. That's the beauty of design!
Now that you have your Components file set up, you can start using it to build out your designs. Whenever you need to use a UI pattern, simply drag and drop the corresponding component onto your design canvas. This will save you time and ensure consistency across your designs.
As you work on your designs, you may find that certain components need to be tweaked or modified. Instead of making these changes directly on your design canvas, go back to your Components file and make the changes there. This way, the changes will be applied to all instances of that component throughout your designs.
In conclusion, your Components file is a powerful tool that will help you build consistent and efficient designs. Take the time to set it up properly and spend time organizing and maintaining it. Trust me, it will pay off in the long run.
Happy designing! 每次都能帮助克服创意障碍。来这里玩耍，尝试使用组件和自动布局使屏幕响应，创建变体并使它们交互起来！
在我们的第一个图标“mute”在三个月后成为了Figma组件。
Figma组织的更多提示 #
既然你走到了这一步，以下是一些帮助我们的额外提示：
- 封面图片。 用于快速在Figma文件之间切换。
Figma封面
- 页面名称。 使用具体的名称。例如，在我们的Lounge文件中，“音频/视频设置”页面比模糊的“v2.1探索”更容易在几个月后找到。
- 使用 🟢 来标记交接页面。不要过度使用表情符号。
- 在交接过程中，请确保样式已应用。
✅ 所有样式在交接过程中都已应用
结论 #
在这个早期阶段，你不需要构建一个设计系统，专注于产品和用户即可。一个样式指南就足够了，它可以保持一致性并推动构建的开始。 使用这种方法作为一个松散的框架来指导我们的设计，帮助我们在3个月内从0到1建立了Thursday，并成为Product Hunt上的第2个产品，并获得了来自我们用户的巨大反馈。
记住，“真正的艺术家是交付的”。