Components are for you, a way to take control of your designs
even across multiple Artboards,
by grouping elements together, and letting you control all of them from one place.
Or you can customize elements of each instance
while maintaining the original design elements.
So, if you'd like to explore this with me, open up the Menu Gallery - begin.xd file
from the sample files.
And I'm going to begin just by showing you what I have in place already.
If you come over here and select
the component on the main Gallery Artboard,
you'll see this green outline showing up
with a green diamond in the upper left-hand corner.
This signifies not only a component, but a Master Component.
So, I'll show you what this looks like, and then we're going to create our own.
So, in the Layers panel, you can open up the little icon here
which is the component icon.
And, inside you'll see
basically, this is a group of a whole bunch of different XD elements.
We have a Text element, we have a Repeat Grid
that I can open up and see the items of the Repeat Grid.
We have a Layer group
and a Clipping Mask
with a background graphic.
Now since I'm in the Master Component, if I come in here and make a change
for example, I come in here and maybe rotate these photos,
notice that all of the photos are modified across all of the individual Artboards.
This component has been copied and pasted on every one of the additional Artboards.
So, anything that I change in the Master Component
will change throughout the rest of the Artboards.
So, let me undo this.
So, we're going to create another component
starting with the elements on the Entree 1 Artboard.
So, let's zoom up on this Artboard.
Let's click once to select one of these items.
This will show us all of the layers in here.
And what we're going to do is we're going to select the icon - close.
These three icons are also components.
And you'll see the background component down here
which is the one that we were editing.
I have a lock on here, so we can't move it.
So, let's come in here and select all of the items.
And on the Mac, let's choose Make Component from the Object menu
or hit Command K.
Or on the Windows platform, you can hit Control K.
Or you can right click on all of the selected items
and choose Make Component.
Once we do that, we'll see that our new component is now the master
because we have that green icon here.
So now, let's zoom out a little bit.
With this component selected, let's just call this our gallery item.
Then let's copy this by choosing Copy from the Edit menu on the Mac
or hitting Command C,
or in Windows, hitting Control C.
Let's go to the Entree 2 Artboard.
Hit Command or Control V to paste that.
Let's go to the Entree 3 Artboard.
Paste it.
Entree 4 and paste it here as well.
So, now we have the same component in all four places.
Now if we go back to the original component
the Master Component with the green icon.
Open this up.
And if we were to come in here, and make a change,
for example, maybe want to rotate the photo,
we'll see that that will rotate in all of the instances.
So, to complete our photo gallery, let's go back to the practice files
and let's find the photos folder.
And let's add the photos into these individual components.
So, let's start by grabbing the chicken.jpg file.
Let's drag it into the Master Component.
You'll see that that gets apply to all of the other components.
But now we'll go back to the project files.
Let's grab the lasagna.jpg file.
Let's drag this into the second component on Entree 2
and you'll notice that that image is only applied to that instance.
So, then we'll do the same thing for penne,
and then finally, for tuna.
Now back in XD, let's zoom up on all of these Artboards.
Let's come into the Master Component.
Let's Double Click on the text.
And let's change the text from saying Entree to what this is actually showing.
So, I'll type in Chicken Cutlets.
Notices that changes and all of the remaining Artboards.
Then I'll go over to the second Entree Artboard,
and let's change this to say Lasagna.
And just like with the image,
notice that this change is only affecting this particular instance of that component.
And then finally, we can come down and change the last two
to say Penne and Tuna.
So, components give us a way to design an entire system
across all of our Artboards inside of XD.