小团队构建大网站_如何用小团队构建设计系统-CSDN博客

小团队构建大网站

by Naema Baskanderi

通过内玛·巴斯坎迪(Naema Baskanderi)

如何用小团队构建设计系统 (How to Build a Design System with a Small Team)

Last night my small team and I headed out to do a little networking and learn about Design Systems. Being that is was the buzzword of 2017, we were eager to learn how we could create our own.

昨晚，我和我的小团队前往进行一些网络交流，并了解了Design Systems。成为2017年的流行语，我们渴望学习如何创建自己的品牌。

We had heard all the wonderful benefits of creating a design system: saving time, reducing debates, collaboration, adoption, and more. I was excited!

我们已经听说过创建设计系统的所有好处：节省时间，减少辩论，协作，采用等。我很兴奋！

All the talks spoke about how to create a design system. However, these were big teams or they had dedicated resources, even a DesignOps team (2nd buzzword of 2017) to build and maintain the design system.

所有讨论都谈到了如何创建设计系统。但是，这些团队规模很大，或者他们拥有专门的资源，甚至还有DesignOps团队(2017年第2个流行语)来构建和维护设计系统。

At the end of the evening we left a little discouraged. But we were not alone. During the Q&A session many were asking:

傍晚时分，我们有些沮丧。但是我们并不孤单。在问答环节中，许多人问：

“How can I build a design system as a single designer?”

“如何以一个设计师的身份构建一个设计系统？”

“I’m the only designer, what advice do you have for me?”

“我是唯一的设计师，您对我有什么建议？”

But my team and I decided we weren’t going to let this stop us. We are still going to create our own design system. Before I dive into that, here’s a bit of background.

但是我和我的团队决定不要让这种情况阻止我们。我们仍将创建自己的设计系统。在我深入探讨之前，有一些背景知识。

什么是设计系统？ (What is a Design System?)

“A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.” — Nathan Curtis

“设计系统提供了视觉样式，组件和其他问题的库，这些库由个人，团队或社区记录并发布为代码和设计工具，从而使产品的采用更加高效和具有凝聚力。” — 内森·柯蒂斯 ( Nathan Curtis)

Simply put, a design system is a collection of reusable components to tie whole products together.

简而言之，设计系统是可重复使用的组件的集合，以将整个产品捆绑在一起。

Many people have written in-depth articles and books on design systems. Here are a few you may find useful:

许多人撰写了有关设计系统的深入文章和书籍。以下是一些您可能会发现有用的信息：

A comprehensive guide to design systems - InVision BlogCompanies like Airbnb, Uber, and IBM have changed the ways they design digital products by incorporating their own…www.invisionapp.com Design Systems, Style Guides, and Pattern Libraries: Oh My! - UXcellenceMany designers use the terms design system, pattern library, and style guide interchangeably. But they don't mean the…uxcellence.com Design Systems HandbookA design system unites product teams around a common visual language. In this book, learn how you can create a design…www.designbetter.co Creating a Design System: The 100-Point Process ChecklistKnow how to build a design system step-by-step. Based on real projects. Create a UI inventory, get buy-in, create color…www.uxpin.com

设计系统的全面指南-InVision博客 Airbnb，Uber和IBM等公司已经通过合并自己的软件来改变其设计数字产品的方式 。www.invisionapp.com 设计系统，样式指南和模式库：噢，我的天哪！ -UXcellence 许多设计师 交替 使用术语设计系统，模式库和样式指南。 但是，这并不意味着…… uxcellence.com 设计系统手册 设计系统将产品团队围绕一种通用的视觉语言团结在一起。 在本书中，学习如何创建设计... www.designbetter.co 创建设计系统：100点流程清单 了解如何逐步构建设计系统。 基于实际项目。 创建UI清单，获得支持，创建颜色…… www.uxpin.com

样式指南与设计系统 (Style Guide vs. Design System)

You may be thinking, great but isn’t that just a style guide?

您可能在想，很棒，但这不只是样式指南吗？

“A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” — Nathan Curtis

“样式指南是设计过程的产物。设计系统是具有路线图和待办事项的，有生命的，受资助的产品，可为生态系统服务。” — 内森·柯蒂斯 ( Nathan Curtis)

Additionally, a design system is a bunch of different sized components (or molecules) that can be put together in endless ways to create a series of larger components. Brad Frost’s Atomic Design is the inspiration for component design.

此外，设计系统是一堆不同大小的组件(或分子)，可以无休止地将它们组合在一起以创建一系列较大的组件。布拉德·弗罗斯特(Brad Frost)的“ 原子设计”是组件设计的灵感。

设计系统的好处 (Benefits of a Design System)

“The challenge we face today is that tools don’t communicate to each other very well, details fall through the cracks, there is a huge gap between design and engineering and we need to do a lot of manual work to make sure we are always on top of everything.” — UX Bootcamp

“我们今天面临的挑战是工具之间无法很好地进行沟通，细节掉入裂缝，设计和工程之间存在巨大差距，我们需要做很多手工工作以确保我们始终在一切之上。” — UX训练营

As a small team working on B2B enterprise software, we were diving into creating a design system with limited time, budget and resources. I wanted to remind our team of the benefits.

作为一个从事B2B企业软件的小型团队，我们正致力于创建时间，预算和资源有限的设计系统。我想提醒我们的团队受益。

Overall our team would be saving time because of:

总体而言，我们的团队将节省时间，因为：

Reduced debate — No need to waste time revisiting design decisions for the same component
减少辩论—无需浪费时间重新考虑同一组件的设计决策
Reusable components making scale possible
可重复使用的组件使规模成为可能
Increased collaboration — improve working remotely and in different offices
加强协作-改善远程和在不同办公室的工作

I had a selfish reason for wanting to build a design system. I quickly realized, if successful, we could ‘automate’ many tasks allowing us to have time to do something I love, solving user problems! That is the core of UX.

我有一个自私的理由想要建立一个设计系统。我很快意识到，如果成功的话，我们可以使许多任务“自动化”，使我们有时间去做自己喜欢的事情， 解决用户的问题 ！那就是UX的核心。

设计系统结构 (Design System Structure)

In order to create a design system, we need to break it down and understand its parts:

为了创建设计系统，我们需要对其进行分解并了解其组成部分：

A bit of soul searching is involved as well. Some questions to ask when creating a design system:

还涉及一些灵魂搜索。创建设计系统时要问的一些问题：

How does the system work today and in the future?
该系统现在和将来如何工作？
What is our vision?
我们的愿景是什么？
What problems are we trying to solve?
我们要解决什么问题？
Who does this problem most impact?
这个问题对谁影响最大？
What impact do we want a design system to have on how we work?
我们希望设计系统对我们的工作产生什么影响？

How others are attempting to approach this:

其他人如何尝试做到这一点：

How we’re using Component Based DesignComponent Based Design is often talked about in context of large, complex projects. In this post we’re making the case…medium.com Setup a design systemBuild a system that provides a unified set of UX, design rules and patterns.blog.prototypr.io

我们如何使用基于 组件的设计在大型，复杂的项目中经常谈论 基于 组件的设计。 在本文中，我们将介绍情况…… medium.com 设置设计系统 构建一个提供统一的UX，设计规则和模式的系统。 blog.prototypr.io

我们的小团队如何制作设计系统？ (How can our small team make a design system?)

Where do you start when you don’t have enough resources, time or budget?

如果没有足够的资源，时间或预算，您将从哪里开始？

1.不要从头开始 (1. Don’t start from scratch)

“If you wish to make apple pie from scratch, you must first invent the universe.” — Carl Sagan

“如果您想从头开始制作苹果派，则必须首先发明宇宙。” —卡尔·萨根(Carl Sagan)

Our team is reviewing existing design systems out in the wild so we can — as Austin Kleon says:

我们的团队正在狂野地审查现有的设计系统，因此我们可以-正如Austin Kleon所说：

Many companies have made their design systems public and have even shared sketch files. I have shared a list below. This fact, and the many other sketch resources, makes it a no-brainer to use Sketch as our tool of choice.

许多公司已公开其设计系统，甚至共享了草图文件。我在下面分享了一个列表。这个事实以及许多其他素描资源，使得使用Sketch作为我们选择的工具变得不费吹灰之力。

Additionally, there are tools out there which can help you quickly create a baseline for your design system:

此外，还有一些工具可以帮助您快速为设计系统创建基准：

Frames for Sketch - Web Design SystemCarefully crafted components and best sketch techniques combined into a powerful web design system.framesforsketch.com Symbols & StyleguidesThe smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by…symbols.janlosert.com Sketch App Sources - Free design resources and plugins - Icons, UI Kits, Wireframes, iOS, Android…Sketch App Sources is the largest collection of icons, UI kits, wireframes, and free design resources for Sketch.www.sketchappsources.com

草图框架-Web设计系统 精心制作的组件和最佳草图技术结合到了功能强大的Web设计系统中。 framesforsketch.com 符号和样式 指南最 灵巧 的模板以及Sketch中每个用户界面的未来起点。 不要再浪费时间了…… symbol.janlosert.com Sketch App Sources- 免费设计资源和插件-图标，UI工具包，线框，iOS，Android… Sketch App Sources是图标，UI工具包，线框和免费设计的最大集合Sketch的资源。 www.sketchappsources.com

2.知道你在做什么 (2. Know what you’re working with)

We have decided that it is a must to complete a UI Audit of all our sites and properties. We may have to call in a few favors to get this done. But since it is just documenting what exists, enlisting help from others may not be that difficult. This will be time consuming, but in the end it will be worth it. We will be able to design holistically when creating new components.

我们认为必须完成所有站点和属性的UI审核。我们可能需要征求一些帮助才能完成此任务。但是由于只是记录现有内容，因此寻求他人的帮助可能并不那么困难。这将很耗时，但最终还是值得的。创建新组件时，我们将能够进行整体设计。

This may be useful for learning how to conduct a UI audit:

这对于学习如何进行UI审核很有用：

The step-by-step guide to an effective UX audit — InVision BlogThis step-by-step guide will teach you how to audit your user experience. But before we dive in, let’s first…www.invisionapp.com

有效的UX审核分步指南— InVision博客 此分步指南将教您如何审核用户体验。 但是，在我们潜入之前，让我们先... www.invisionapp.com

3.随您建立 (3. Build as you go)

A design system is a living document. Realizing that the work is never done, we’ve decided to jump in and build as we go. As we iteratively work on our projects, we will design with components in mind and will eventually have a design system. Fortunately, there are a few of us, which allows us to be collaborative and “steal” from each other.

设计系统是一个实时文档。意识到这项工作从未完成，因此我们决定立即进行构建。当我们反复进行项目工作时，我们将在设计时牢记组件，最终将拥有一个设计系统。幸运的是，我们当中有几个人，这使我们能够相互协作并相互“偷”。

Quick tip: Build symbols in Sketch. I know, it seems time-consuming, but once you see the power of symbols you will appreciate the old saying:

快速提示 ：在Sketch中构建符号。我知道，这似乎很耗时，但是一旦您看到了符号的力量，您就会欣赏这句老话：

“You have to go slow in order to go fast.”

“你必须慢下来才能快。”

4.知道你的极限 (4. Know your limits)

Start small.

从小开始。

Some design systems include code snippets. That is the ultimate goal, because it will increase adoption across the company and create a consistent user experience. However, my small team can’t do that. Not yet, that is.

一些设计系统包括代码片段。这是最终目标，因为它将提高整个公司的采用率并创建一致的用户体验。但是，我的小团队无法做到这一点。还没有。

We are planning to start with a sketch file of simple components. Once we are far enough, we will work with our frontend devs to create CSS. Allowing developers to use their ‘weapon of choice’ when it comes to code may allow the design system to live. And with code bases changing on what seems to be a daily basis, keeping our hands out of it may be best.

我们计划从简单组件的草图文件开始。一旦够了，我们将与前端开发人员一起创建CSS。在代码方面，允许开发人员使用“选择的武器”可能会使设计系统得以生存。随着代码库似乎每天都在变化，最好不要使用它。

5.保持井井有条 (5. Stay organized)

Sounds simple, but with projects piling up and looming deadlines, it feels easier to do things the ‘quick and dirty’ way. Staying organized does take time and is never done, but it keeps everyone sane and reduces the email or slack clutter of files flying back and forth. As we start working on new things using a UI kit that we are going to build with one of the tools listed above, we need to keep track. Otherwise, we will end up where we started — different styles everywhere!

听起来很简单，但是随着项目的堆积和最后期限的临近，以“快速而肮脏”的方式做事会变得更加容易。保持井井有条确实会花费时间，而且永远不会做，但这会使每个人保持理智，并减少电子邮件或文件来回飞散的混乱。当我们开始使用将要使用上面列出的工具之一构建的UI套件来开发新事物时，我们需要保持跟踪。否则，我们将以我们开始的地方结束-各地都有不同的风格！

Design document versioning is a dream for all designers. No one product has gotten it 100% right. We are going to give Abstract and Plant a try to see how it can help keep us on track. Working for an enterprise, the only online platform we can use for file storage is One Drive. Google drive and Dropbox are other options if you aren’t restricted.

设计文档版本控制是所有设计师的梦想。没有一种产品能100％正确地做到这一点。我们将尝试对Abstract和Plant进行尝试，以了解它如何帮助使我们步入正轨。对于企业而言，唯一可用于文件存储的在线平台是One Drive。如果您不受限制，还可以使用Google驱动器和Dropbox。

AbstractVersion control and file management for your Sketch files. Abstract enables designers to reliably version and manage…sketchapphub.com Plant - version control app and Sketch plugin for designersPlant is a version control app and Sketch plugin for designers. Sync design versions, invite teammates and take full…plantapp.io

Sketch文件的 抽象 版本控制和文件管理。 Abstract使设计师能够可靠地进行版本控制和管理… sketchapphub.com Plant- 用于设计师 的版本控制应用程序和Sketch插件Plant是 用于设计师 的版本控制应用程序和Sketch插件。 同步设计版本，邀请队友并全面参加... plantapp.io

These are the first steps my team and I are going to try when starting this journey. Fingers crossed we make some headway. I would love to hear from other small teams, even a ‘team of one,’ to learn how they are tackling this challenge.

这些是我们团队的第一步，我将在开始此旅程时尝试。手指交叉，我们取得了一些进展。我很想听到其他小型团队，甚至是“一个团队”的信息，以了解他们如何应对这一挑战。