Join Demian Borba for an in-depth discussion in this video What are the parts of a design system?, part of Developing a Design System with Adobe XD.
- [Instructor] Now let's learn what makes a great design system. So the first part of a great design system starts with guiding principles. In here I'd like to tell a personal story, the story of Adobe XD. Since the very beginning, we have guiding principles to create Adobe XD, the first one is lightweight and approachable, meaning it's light, it's super fast, and anyone can start easily. And it's also approachable, meaning that anyone starting with XD or starting with design can get there fast.
The second one is zero friction, meaning that we're looking at the whole UX challenge of today and we're trying to improve every single part of it, and we're also trying to remove entire pieces of the workflow to improve the speed of designers. And the last one, open and transparent. Open in meaning that we're going to open up XD for extensibility, so plugin developers will be able to develop plugins to integrate with different services. And transparent meaning that we interact with the community all the time, we listen to feature requests, we get the bugs, we talk to the community on Twitter and social media, and that's helping us shape the future of Adobe XD.
So guiding principles, very, very important. The second one is colors. Here you can have your primary colors, your secondary colors, you can even name your colors for other designers to know it. Typography comes third, here you can define what kind of font you're using, how big it is, the kerning, how paragraphs behave, all of that, just like you saw on the iOS UI kit that we viewed in the beginning. Iconography, here you can have all the icons used by your company, your product really accessible for anyone to select, right click, copy and paste.
Writing and tone, this is very interesting, and a lot of companies today are defining how you should write about the company, how you should expose content. This is very different and special, so even the tone is there. The next one, grid and spacing. Here's where you define how many columns you have for let's say website design versus mobile design, your gutters, your hang lines, your rows. And spacing, how things are spaced out.
Again, comparing with mobile and web design. Then comes pattern library. Here is where your elements, components, modules, templates, all available as a sticker sheet. Your elements create your components, that create your modules, that create your templates. Then design specs, here's where designers can find information about design, how big things are, the colors, in terms of components.
And development specs is something for developers so they can see everything that's available for designers like red lines, but they can also see information about CSS code. For example, Airbnb has all the design elements that's available for designers as code in GitHub so developers can go there and see what everything is. So now that you know what parts make a great design system, let's learn how to create one.
- 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