Take a look at the component tool with the example project.
- [Instructor] If you come from a coding background you'll be familiar with the term component. For those who aren't, it's a way to separate parts of a design or application for reuse, design, or code once then quickly and easily reuse the component as many times as you'd like. For example, in Envision Studio, when you create a button you'd like to reuse across several screens you can create it as a component. If down the road you decide to change the color or font of that button you can simply change the component and it will change across all its instances within your project.
It's similar to symbols in Sketch if you're familiar with the concept. Let's see this in action. So let's go back to Envision Studio and what I'm gonna do is first create a component and I will leverage some of the design's assets that I've already done so as you can see if we click here this is where you have a library of components. So I already have just one here. If I click this, this is the actual component. So this is the background that is reused across all my design.
So if we click on Onboarding you can see that this background is reused across all the screens on this particular design. So what we're gonna do now is leverage all the assets that I've created in this guy here and create a component and then delete this guy here and reuse it for this one. So let's first define what would be the elements that we would reuse across all our designs in this particular design. So let's go back to that page here and this is the introduction so let's click on the Introduction and we got first the little square here.
So I believe it's this rectangle here so as you can see as I scroll through the elements, they're highlighted in the design. So as we can see, it's this guy here and let's unlock this guy. That's another detail so you can actually lock/hide layers directly from this guy here. You can lock it from right clicking and then Lock Layer and then if you want to unlock it you can simply click on this guy here. So what we're gonna do is reuse this guy here and then the line is the similar design that we're reusing across all and then this text which is now really not anything interesting but if we would create our own text then I wouldn't reuse that because this is something that will be specific to that design.
So in this case, the line, the background, and the text, and then everything else will be redone on a specific screen. So let's do that. Let's select the background. Let's select the line. I'm doing CMD + click and then the text is this guy here so let's do that. And then what I'm gonna do is create a group by this guy here and call this Card. And let's recheck that we have all the right stuff in the back.
Once we created the card you can literally right click and then Create Component, like that. And then select what name you want to give to this particular component and I'm gonna keep the same name, so Card, like that, and now we got our component. If you scroll back we have our two components here so the background and then the card and you can go back to that card and change the design. So let me add that card to all the designs on the main design.
Now I have this card here that I can reuse across all these different designs and I'm going to delete this item here. Let's unlock this guy. Let's unlock all these guys. Alright so this is what I need. Let's delete that by right clicking and then Delete. So as you can see right now we don't have the card, we don't have anything else anymore. So let's go back to our components and click on this guy and drag and drop this in this design here and then position him roughly at the same height and then let's go back to our design to make sure it's front and centered.
Let's drag this guy behind. So now we have the same design across here but what if I wanted to change the color of that background? Let's go back to our components and then click on the cards and let me select a background here and then simply change it to something else, like red. And let's go back to our design and as you can see all the items that are using this component have suddenly changed to that new color.
So that's the beauty of using components because if you create a button once and you wanna reuse the same button across all your designs, then you can go back and simply change the color or change the design of that button and it will be replicated across all your designs. So let's move on.