Component overrides

Tutorial Breakdown

Where there are rules, there are exceptions. At first glance, the consistency associated with using Components may look like a ball and chain, but each and every layer and property within an instance of a symbol can be “overridden” to appear different from it’s Master. This gives us the flexibility to make rules and break them, either for the sake of design exploration or to show permutations without creating additional components.

In this video we’ll explore:

  • Overriding position
  • Overriding style
  • Overriding text
  • Resetting overrides

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

Every now and then, when you're using components to keep objects in sync within your document, some instances of some symbols may need to be a little bit different than all of the other instances. And this, in my document here, is no exception.

If we zoom in, I've got a left arrow pointing to the left, and a right arrow also pointing to the left. That's a problem. They are the same component, so they currently match one another—but they don't have to. We can use what are called component overrides to make specific instances of a symbol appear a little bit different from all the other instances.

So, for this arrow here, I'm going to press Command-2 (one of my favorite shortcuts) to zoom into the selected object, and we can click twice on any instance of any component, and the layers list reveals its content. We don't have to go and edit the master and have those changes sync with every other instance. We can directly make a change to this specific instance in order to fix the discrepancy here.

We'll head over to the inspector on the right-hand side with this arrow selected, and I'm going to type 180° to flip it around the other way. Now, if I zoom out, which I'm going to do by clicking this image and pressing Command-2 again to zoom to fit that image (which will show us both arrows), you'll see that the arrow pointing to the left has not been affected by rotating the arrow within this component instance to face the other way.

Another example is that we might want a disabled version of this button to show that we can't click it to go to the left. Maybe this is the first image, for example. So we'll click twice to go into this instance of this component, we'll head over to Fills, and we will override the fill color, just by making a change like we normally would. Since we're not editing the component, it's not syncing those changes. We're only editing this one instance of this component, which is just a remarkably intuitive and easy feature to use.

Now, if you go a little too far (or you just want to return the component back to its original state), you can do a right-click and choose to reset those overrides, and the component will once again sync with its master and return to its original state.

And if I undo that, you can see that, despite the fact that this is a gray instance of this symbol, if we go up to Edit Component in the top right corner to view the master, then you can see that the master of this component is still that red/pink color. It's not gray, it's just that one instance with that override that makes it gray.

This also works for the content of text fields. If we head down to our footer, you can see that we've got this email-form field here, and this email-form field is, in fact, a component.

We'll click again to drill through these groups, and again to get to the text, and again to edit it. And we can type anything we want to override just this one individual instance.

If we zoom back out, I'll press Command-1 to show the entire canvas, you'll see that we haven't affected any other instances of this symbol—just this one. Just this one by itself, because this is, again, an override for one individual instance.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio