Creating, adding, and editing components

Tutorial Breakdown

When designing digital products at scale, it becomes increasingly challenging and critical to remain consistent. Many design elements are repeated from screen to screen, potentially thousands of time. Components allow us to manage the appearance and properties of these repeating layers from a single centralized instance called a “Master”. No matter how many instances of a component are used throughout your design, they can all be updated instantly, simply by editing the Master. This saves hours of time tediously updating things like buttons and icons and creates flawless consistency throughout your product.

In this video we’ll explore:

  • Creating Components
  • Adding Instances
  • Editing Components
  • Unlinking components

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

In any screen design project, whether small or large, there are always going to be elements that repeat from screen to screen. Whether it's an entire header, or an entire footer, or just a navigational element, these items need to match from screen to screen, and if we make a change in one place we don't want to have to make that change over, and over, and over again. Solving this problem is what Components in Studio are all about.

So, I've got this left point arrow here, and I would like to turn that into Component because I plan to reuse that all over the place in this particular project. All you need to do is with an element selected, whether it's a group, or a single layer, you can head up to the toolbar at the top of the screen, and this button here will allow you to create a Component. You can also press command K on the keyboard to bring up this exact same dialogue box. Now, I'm not going to name this arrow left because I plan to use it for more than just pointing left. I'm just going to name it Arrow, and then I'll click done to create the component, so now where its been added is to my component library at the top of the layers list, there's a little book icon you click, and here is our Component Library showing a list of all the Components that we've created in this particular document.

So, here I've got my Arrow. I can click and drag anywhere in my project to create a new one or you can of course, copy, and paste or option drag any existing Component to create another instance of that Component. So it's important to know that each and ever time you use a Component within your document, that's considered a Component Instance. The Component Master, is what they all sync with. So if I want to make a change to the appearance of these buttons, which I do, I can select an Instance and then head up to the top right corner where it says, "Edit Component." That shows me the master of that Component that all the Instances are syncing with.

So I can now click, and I'm going to remove the stroke from this background box, I'll click on this blue color, and I'll switch it out to be more consistent with the UI, using this red color and now I can click the arrow to return to my design and every instance of that Component has updated to match that master. No more blue color, no more stroke on both of these arrows. And if I used it 100 times in 100 places all 98 of the other ones would have updated at the same time instantly.

If you've got a Component instance that you don't want to be a Component at all anymore, you don't want it to sync, you want it to be its own rogue element, you can do a right click and then you can choose detach Component and it will turn back into the regular groups and layers that it was before. Now for those of you who have been paying very close attention you might notice that I have two left arrows instead of a left arrow and a right arrow. If that's bugging you, you're not alone, it's bugging me too, so let's take a look at how to fix something like that using Component Overrides.

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