By Dani Beaumont
Creating experiences that are consistent at scale as a challenge, especially for design teams and large companies. Designers have begun to implement design systems as a way that define the building blocks of an experience while ensuring consistency. Yet the tools for design systems haven't offered enough creative flexibility. They tend to keep a team in sync, but in doing so break up the core pieces of the design across screens and limit a designer’s ability to see the big picture. This is why we've introduced features in XD that make creating and maintaining a design system flexible, frictionless, and intuitive.
Here's an example of a Design System that I created in XD. I've added all the colors and character styles to the Assets panel, as well as any components that I'd like my team to be able to use in their designs. Now when I share this design system with the team, they'll be able to see all of the elements in one place. I'm ready to do that now, so I'll come over here to the Share button and click on invite to edit.
The first thing I need to do is save this Design System up as a cloud document. I'll go ahead and click Continue and I'll assign a good name for it, and make sure that it's pointing to the cloud document directory. I'll then click Save, and now that that file is in the cloud, I'm going to share access to it with the rest of my team members. I'll give them a quick note to let them know that it's available and I'll go ahead and send off that invitation.
Now that they've been invited, let me give you a quick look at what the experience looks like for my team members. So I'm now logged in here as my colleague Ike and I can see that here in the Creative Cloud, Ike has received a notification letting him know that I've shared that cloud document with him. If he clicks on his notifications, there's the message right there that I sent him granting him access. Also you'll notice here towards the left in the Shared with you section of the home screen of the XD application, I can see that same document that I shared with him. So from here I can come into the home screen and click on a brand new document, and as he's working, get links to those source design system assets that i shared with him. To do that, he'll click on the Linked Assets button here towards the left and then browse to what has been shared with him. Click on that design system, and automatically all of the colors, fonts, and components that I've shared up with him are available for his own design work. From here, he can begin to create a new project, and layout an artboard. We'll go ahead and give it a nice dark fill. He can come in and, just for example, access all of the components that I've shared with him. He can start to drag those components onto the canvas and build out the design using these elements. Notice that they're all linked to that cloud instance of that design system, so he's always staying in sync. If, over time, changes take place, he'll be alerted to that. Let's go ahead and advance his workflow just a little bit to a more finished design.
Okay so a bit of time has passed and Ike has gone ahead and designed out a number of desktop browser landing pages using various assets from my source Design System. Around the same time, I've gotten some brand guidance from the client and have updated a number of the elements in the source document. When he came to work this morning and opened up the version he's been working on, he was notified of the changes that I've made. There’s a notice here towards the bottom letting him know that 14 of the source components have been updated. He has the choice to roll over each of the individual updated components. He can see a preview of the change that I've made, both in the Assets panel and if that element is on the design canvas, there on the canvas. Of course, I've exaggerated the change here to make it easier for us to see what's happened, but here's the existing design. And then the change that I've made from there I can choose to accept that change and accept the update, by clicking on the icon. Alternatively, he can come in and just click Update All -- which will update all instances of that asset. Or he can just ignore the change and continue to work with the versions of the assets that he has. As you can imagine, I've just scratched the surface of this powerful new system. You'll want to be sure to read some of the updated help documentation for more details. I encourage you to give this new capability a try.
Design systems help keep teams aligned, and provide a blueprint for which assets and patterns to use across design and development. Designers use design systems to define the building blocks of experience and ensure that the design they're building is consistent. Learning how to create and maintain a design system in Adobe XD can help you and your team create experiences that are consistent at scale. Create and manage a design system in XD using components, linked assets, and cloud documents. Link components to a centralized source so that you and your team can easily reuse elements across multiple projects in a team or organization.
