In todays video tutorial Adobe XD components: what you need to know & how they work. Components have become one of my favorite tools within Adobe XD simply because of how much time they save. I mean seriously, they’ve definitely saved me hours of work! Once you learn about how Adobe XD components work and start to master them, you’ll never look back and want to use them any & every chance you get. The video tutorial below goes over what adobe components are, how they work and how to create them and I show you a couple on the fly examples so it’s easier to understand.
Affiliate Disclaimer: Please note this post contains affiliate links. If you go through them to make a purchase, I will make a commission at no cost to you. Thanks for your support!
what’s Adobe xd?
In case you haven’t heard about my love for Adobe XD, you can read about it here. Honestly, Adobe XD is one of my favorite new design tools and I’ve been using it for almost everything business related at this point. It was made primarily for web apps and protoyping, which is how I started. But you can also use if for social media graphics, templates, mockups, etc. If you don’t have Adobe XD, you can get it here for free!
what are Adobe xd components?
Adobe XD Components are essentially any UI element (ie: buttons, headers, lines, text boxes, etc) you create. You can then take that element and turn it into a component. That component is known as the ‘Main Component’. You can then make copies and reuse that component anywhere & everywhere you’d like. Copies are called ‘Instances’. When you make any changes on the Main Component, the design updates throughout the other Instances. So essentially, you design an element once, turn it into a component, copy & paste and then can update all of them at one time. It’s super cool!
How to create an adobe xd component?
Design your element first (even if it’s a simple text box) > Highlight & select all your layers or elements > Right Click and Select ‘Make Component’.
You can also go to the upper right hand side, find ‘Component’ and click the + sign (as shown below)
How adobe xd components work?
There are a few things to know about how Adobe XD components work but again, once you understand the basics, you’ll be on your way to becoming a pro in no time!
1. You MUST create a component FIRST before making any duplicates. Unfortunately, as of now, you can’t create a bunch of design elements and then turn them into a component down the line. It doesn’t work like that. You have to make it first or you’re going to have to re-do it later. That means there will be some planning involved so you know exactly what you need as a component. This can be a pain in the a** sometimes and I hope one day Adobe changes it so you can create components after the fact but until then, just remember to create the component FIRST before you start duplicating.
2. You can still make individual changes to Instances (the duplicated Component) without affecting all of them. For example, if you just want one color or image to change, you can do so on the Instance rather than the Main Component and only the selected element will be affected. However, if you do this, anything that was changed on an individual level WILL NOT change if the Main Component is updated.
3. You can always revert back to the main component when needed. You can do so by Right Clicking > Reset Main State.
4. You can update anything on that element including text, color, font, images, borders, etc. You can even add elements to existing components.
Watch the tutorial for adobe xd components: what you need to know & how they work below
Don’t Forget To
Pin Your Favorite
