By Howard Pinsky
Hey everyone. I'm Howard Pinsky, Senior XD Evangelist at Adobe. Symbols have played a crucial role in her design workflow allowing us to keep many instances up to date with a single edit. But to take things to the next level we've supercharge their functionality and graduated symbols into components. Let's take a look.
On the basic level, components share a lot in common with symbols. Elements can be grouped into a single object to use throughout your projects. You can override text Nest them within each other and all instances can be updated at once. Components builds on this base by introducing resize ability and a lot more flexibility for overrides while still maintaining links back to its source. In this first example, I have this profile badge that I'd like to use on various screens. With the elements selected right-clicking will let me create a component. I can also use the same shortcut as in previous versions, command and control K. This will pop it straight into the assets panel. You'll now start to this a few differences compared to symbols. The diamond at the top left, lets us know that this is the master component. Any changes made to the master will push it to any instance where the targeted change was not overridden. You'll see how this works in a moment. Second, it's resizable and it works beautifully with responsive resize.
Now that the master has been created, populating your documents with instances is as simple as copying and pasting or dragging them out from the assets panel. With another badge in place, I can begin the overriding. And for this badge, I'm simply going to resize it to fit the longer panel. Shifting over to the light version of this application, this badge will need a few tweaks. Starting with the background, border and text colours. Next, to illustrate that different users can log in, I'll change the name and then hop over to finder and drag on a new profile photo. Great! Even after all these changes have been made, the instance remains linked to its master allowing me to globally update the properties which are not overridden. If you're not sure where the master is located or it's not on any of your artboards, you can right-click on any instance and choose edit master component.
My creative director let me know that the badge and photo should contain rounded corners and that the premium text should be uppercase. I've also been provided with another icon to use for settings. And, because it's a nested component, I can easily swap it out with a new one. Checking out the other instances I created, the updates have been applied. And even though I tweaked many aspects of the light version of this badge since I didn't override the corner radius or text styling I was able to apply global edits by editing the master. Let's look at a slightly more extreme example. The playback area at the bottom of this application is a component containing album info, a scrubber and buttons many of which are components nested within it. Since XD supports position, size and appearance overrides, I'm able to use this to create different size instances on the various screens I'm working on while still maintaining links back to the master. Since the master was created for desktop, I'll need to make a few changes for the iPad version including to its size.
Now, I can start rearranging the various elements to better fit the portrait screen size. I also have the ability to hide, delete or even add elements to instances if necessary. For this screen, I'll change the text representing the song and artist and then hop back over to finder and dragging a new image. Finally, I'll change the shuffle icon back to white. Now, while it may not look like it each of these other playback areas even on the light version originated from the same master component. Let's look back at my creative directors notes. Unlike the badge the rounded corners aren't working for the album artwork. And even though the green will remain the highlight colour throughout the application the volume bar needs to be toned down to touch. I've also been told to spice up the background whatever that means. Maybe instead of a decreased opacity, I'll add a background blur and tweak the settings until it's looking spicy. Just like in the last example all properties which are not overridden are being updated. Lastly, in one of my favourite benefits of components is there used within repeat grids. As you may know aside from text and images making changes to an entry within a repeat grid pushes the changes to all of them, but what if we utilised components. Here's an album view of been working on and to ensure that I can override certain elements I'm going to first convert them into components.
Now with everything selected, I'll create the repeat grid and then pull out a few additional cards both horizontally and vertically. Then, I'll quickly hop over to finder to grab some images and then the album names using a text file. Now, since components were used in this grid and components can be overridden we have over rideable repeat grids. Oh before I go, did I mention that since I may want to provide a client with consistent progress updates, I converted the entire home screen into a component to keep the presentation artboard up to date. I sure did.
And, that's your look at resizable components with overrides in Adobe XD giving you much more flexibility over you're designing. To continue your XD journey head over to letsxd.com and subscribe to the Adobe Creative Cloud YouTube channel for more up to date product announcements and livestreams. I'll see you soon.
Components pick up where symbols left off and add significant functionality to power your design workflow. Components in XD help you to create and maintain consistency throughout your design projects without having to recreate the same user interface elements over and over in a document. Save time and reuse common attributes again and again in your prototypes. Learn how to leverage the power of components to quickly update your designs.
