Join Demian Borba for an in-depth discussion in this video Understand the XD project, part of Developing a Design System with Adobe XD.
- [Instructor] Up until now designers who are working on design systems tend to have colors and character styles and all the components within the same sticker sheet. That's fine. But XD can help you especially with colors and character styles. I'll get to that in a minute. Here if you want to see the colors of this Apple UI design resources iOS 11 UI kit you can select the art board by click on its title then you can open the layers panel and you can see that guy selected.
I can then double click on this little icon here and it takes me to a full view of that art board. So here I can see the colors that Apple recommends us to use. I can go back and I can double click on the text one to show me all the difference sizes that I can use for text in my project. So now let's jump to our project and see what I mean by making the process better. So here's our final project. This is a personal project that I have called DDTS Design Driven Transformation School.
A school that I'm planning to create to teach people some design methodologies to change the world. So if I select here the website design and click on the preview button. I'll make this full screen. You can see I have a header, I have information about design thinking, some information about Design Sprint, and also one called SURF that I'm creating. A personal one, it's called SURF because it stands for Set Understand Reset and Focus.
And I'll share more information as I have it. Then I have information about why it's focused, fast, and fun, and some testimonials from people that went through this set of courses and have something to say about it. And of course a contact us form and on the very end our footer. Here I have the same website where everything is reorganized to fit a mobile view.
And the footer is there. But one thing that you notice right there is that you now have this assets panel on the left and this is giving me information about my colors, character styles, and my symbols. Now let's learn everything we got to do to get started on this project in Adobe XD.
- 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