By Dani Beaumont
As I mentioned, XD was created with speed in mind, and part of designing at the speed of thought includes the ability to reuse elements and apply global changes quickly as you do your work. Let's focus on a few of those features now.
I want to switch back over to Design mode by clicking here in the upper left-hand corner, and next I want to come over and open up the Assets panel. It's here in the lower left-hand corner, just above the Layers panel. When I click on that icon it'll open up that Assets panel for me. Notice that I have the ability to define colors, character styles, and components. There's already one character style in place here that was included with this file.
When I define colors and character styles, I can just easily extract or pull values from objects here on the design canvas. To do this all I need to do is come and select some content on the canvas. I'll go ahead and hit the spacebar and just move my artwork over so I can see the two artboards a little more clearly. Next I'll come in and select my first artboard Monstera 2 - and with it selected, I'm going to come back to the Assets panel and, in the color section, I'm going to hit the + sign on the right hand side. What XD's done is very quickly pulled out all of the solid color fills and strokes from any of the items on that artboard and extracted them into the Assets panel.
Now that's pretty slick, but what's even more cool is a way that I can come in and change global attributes once I've extracted them from the file. Let's say for some odd reason I find this shade of orange to be just a little bit harsh and I want to go and change it. But the change I make, I don't want to have to make over and over again, for every item in my project that has that shade of orange. I can begin by first determining if the shade of orange that I'm looking for is in the assets panel. In the color section I'd say given the brightness of this orange it's highly likely that that's the same one.
Another way I could determine it if it wasn't so bright would be to click on an object that has the color that I want to change, then in the right-menu select "Reveal Color in Assets". It's going to come in and select that color for me. From here I want to come in and change the global attributes for this color here in the Assets panel. If I click on the right menu, I can bring up the Edit option. From there I can change the color value. Let's bring it to a darker, gentler shade of orange. Notice as I move around and change that color it's changing all instances of the orange color on the design canvas. So if I land on something that I think is a bit better all I need to do is come and click off and that swatch color has changed here in the Assets panel as well as all instances of that orange color on the design canvas.
This same behavior works for character styles and text as it does for color swatches and colors. As your design becomes more and more complex with multiple objects and artboards, this can be a real productivity trick. Let's move on to the next step where we focus on fixed elements.
Adobe XD was created with speed in mind, and unlocking workflows where designers can iterate and design at the speed of thought. There is nothing more frustrating than fighting with navigation and busy toolbars when you're trying to express your ideas. Thankfully Adobe XD shortcuts are here to help. With a handful of keyboard shortcuts available in Adobe XD, navigating the application, pulling up the tools you need, and moving elements on canvas can be done even faster. In this tutorial, learn how Adobe XD Shortcuts can help you accelerate your workflow, and design at the speed of thought.
Up next, QuickStart Design Step 05: Set fixed elements, and share your work.
