Join Demian Borba for an in-depth discussion in this video What is a design system?, part of Developing a Design System with Adobe XD.
- [Instructor] What is a design system? A design system is something that comes way, way back. All the way from the print days. Where we have the print guidelines to help designers work together to bring consistency to their projects. Later on, during the website era, we have style guides as PDF, as websites, as static websites. And then people had to go there to be informed about how to use colors, how to use typography. But those were isolated things. Today, more and more we see companies having designers and developers working together.
Consuming the same set of components, code, type, colors, all from the same place in a very effective way through design systems. So any time a designer needs to work with bigger teams, designing systems can help a lot. I really like this quote from Nathan Curtis. A design system is a scalable framework for decisions and team behaviors across a product portfolio to converge on a cohesive experience. So it really tells the story of working together in a very cohesive way.
A design system is a living product. So it's something you have to keep an eye on, you have to keep iterating on. It's not something you do once and it's done. It's a living product. It's modular. So you have your components, your Lego pieces all in one place. And designers and developers can go there to access information to use in real projects. It has style guides. Not only style guides in terms of how to use a color or how to use typography, but also how to write content, how to expose content.
It also has patterns. All of your libraries, all of your components, all of the pieces you can have in your projects. And it has specs, not only design specs, but also developer specs. Where developers can go to and grab information about motion, measurements, all these different pieces. One website that I highly recommend for you to check is styleguides.io. Here you can find information about articles, books, podcasts, talks, tools, and tons of examples with design systems from big companies like IBM, Salesforce, Google, Apple, all there to help you move faster.
Another one that I highly recommend is the Material Design website. Material.io. Here you can find information about how Google created this design language with components, lots of resources, and tools. One post that I recommend is this one created by AirBNB. Where they describe how they created their design language system, their DLS. Here they have information about the components, colors, typography, even spacing. It's really detailed and informative.
One that is available for Adobe XD is the iOS 11 UI kit, that's very helpful in terms of understanding components. And I have it here, so let's take a look. This is the Apple design resources iOS 11 UI kit for Adobe XD. Here you have information about colors, Force Touch, UI elements like bars, controls, views. And in order to use them, you just select something. For example, I can zoom in here, I can select this element, right click copy, and start using it in my project.
That simple. It also has templates that help you move faster. So you can select the art board you want here, copy and paste into your project. That simple. Another one is the Google Material Design component sticker sheet. Here you can find the one for XD and you can see it's two megabytes. It's 10 times smaller than the one available for Sketch. Super small, super precise. Let's take a look. Here in the Google Material Design sticker sheet, you have information about typography, system icons, all the different components like lists, cards.
And, again, it's just select the element you want, right click copy, and paste into your projects. So this is a design system, a place for designers and developers to go to to grab information about colors, typography, anything that can bring consistency to their projects, a place where they collaborate and work on amazing things together.
- 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