Join Demian Borba for an in-depth discussion in this video How do we create a design system?, part of Developing a Design System with Adobe XD.
- [Narrator] Now that you know what a design system is, and why you need one, let's learn how to create one. So how do we create a design system? The first thing you got to put in your mind is that done is better than perfect. So a lot of people try to perfect things, but that slows down things and everything never gets finished, so make sure that you have that as a mind set. Done is better than perfect. The second one is accept that building a design system is an ongoing process.
It takes time. You start with something that's simple, and over time, as your company or product has more information, more elements, you add to your design system. Understand the customers. The main customers of this thing, the design system, is the designer and the developer. So do some exercises there. Talk to designers, talk to developers. See what they need, see what kinds of information is more relevant to them and go from there. Develop core principles.
Again, define your guiding principles. Another important point; make sure that as you name things, they're platform agnostic, meaning that if you jump from iOS development to website design, everyone knows what you're talking about. The same element the same component has the same name. Form a multidisciplinary design operations team. For example, some companies, like Airbnb, has a team dedicated to tooling, and to serve designers as they design a language system grows.
Build your interface inventory; Start small, launch often. Remember, start with colors, then you can define your basic typography. Then you can start creating your buttons, your forms, your headers, your footers, your whole element that will become organisms that could be reused by developers and designers. Make your customers remember designers and developers part of the process. Make sure you talk to them all the time.
It may be the hardest one; sell often. It takes time. It's not easy. You got to sell this upwards and even make it get to the CEO sometimes. If it doesn't get there, all this effort is worthless. Remember in the beginning, things were really isolated as PDF's when they were brain guidelines? Nowadays you can really benefit designers and developers because everything is connected. There's a lot of benefits in offering this thing. It's all connected.
Enough with theory. Now let's get our hands dirty, let's open XD, and let's work on a real project, creating a real design system.
- Managing your project
- Managing typography and colors
- Pattern library with symbols
- Creating a CC Library in Photoshop
- Consuming colors and character styles
- Using linked and unlinked bitmaps
- Exporting assets
- Gathering feedback