Shared design libraries

Tutorial Breakdown

Components allow designers to easily manage and reuse elements within a single Studio file, but as soon as multiple files or multiple designers come into the mix, components inevitably become out of sync between files. This disrupts the concept of a single source of truth and produces inconsistencies across designs.

Shared design libraries in Studio solve for this by allowing any Studio file’s component library to be accessible from all your Studio files, so that any changes made to the library’s components propagate to all files that are using those components.

  • Adding a Shared Library
  • Swapping Document and Shared Components
  • Editing Shared Components
  • Pulling Changes
  • Reconnecting a library

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

Components allow designers to easily manage and reuse elements within a single Studio file. But as soon as multiple files or multiple designers come into the mix, components inevitably become out of sync between files. This disrupts the concept of a single source of truth and produces inconsistencies across designs. Shared libraries in Studio solve for this by allowing any Studio files component library to be accessible from all of your Studio files so that any changes made to the library's components propagate to all the files that are using those components. First things firstlet's take a look at how to add a shared library to Studio. There's no special preparation required. A shared library is simply a Studio file that contains components. To add a shared library, we'll just head up to the top of the Layers list, and we'll click on this icon here to toggle over to our libraries. Now here, you'll see that we have a document library that shows any components stored within the document that we currently have open. Now, I've only got two measly components stored within this document, and I'd like to access all the global components that our design team has built. So I'm going to go back, and from the libraries list here, there's a plus sign in the top-right-hand corner. And if I click on that plus sign, it asks which Studio file I want to connect to as a shared library. To get other designers connected to and using your shared library, just use your favorite file sharing platform, like Dropbox or Google Drive. I'll click Open. And then on the left-hand side, you can see here, I now have Shared Library. And when I choose Shared Library, I can see all of the components within that Studio file. Now, we've got a live connection to that Studio file, so anything that gets added or changed is going to get added or changed here, regardless of which document I have open, as long as we're connected to the shared library. So let's find something here that we can add to our document, and I'll click and drag. And if we go back to the Layers list, there's one subtle difference. If you look at the Layers list, the icon for a component from a shared library has a little link in it so you can tell the difference between a component that's in your document library and a component that's in a shared library. Because I've just now connected a shared library to a document that's already a work in progress, we now have a header and a footer, which are already components, but they're components stored locally within this document library. These components also exist in our shared library. And ideally, we want it to be connected to our shared library in case myself or another member of the design team makes a change to that global shared library file. In order to swap out a document library component with a shared library component, just head over to the inspector on the right-hand side. You'll find the name of the document library component being used. And from here, you can switch from Document Library to Shared Library, and you can navigate to that very same component. I'll choose just that. And now you can see on the Inspector on the left hand side, we've got a shared library icon for the header. I'll do the same for the Footer, switching over to our shared library, and there we have it. The appearance might be the same, but we're now connected to that shared library. So if any changes are made to the header or the footer there, those changes will propagate here. Once your documents become populated with components from a shared library, it's inevitable that at some point you'll want to make an edit to one of those components. For example, we've got a View All button here. And if I zoom in on this, you could see that it is on the Layers list, Element/Button, and it's a component connected to a shared library, which means if I do choose to edit the master, I'm either going to go and change the shared library itself so that these changes are consistent everywhere or I'm making an exception here. So when I choose Edit master, I'm given that exact choice to either edit the original component in the original document, which will change everywhere it's being used, or I can unlink this one instance and turn it into a document component. Now, if I click on Unlink, what you'll find is that it brings us to a component as if we've just created a new one. And if we click the back arrow, you can see on the Layers list that we no longer have the link icon and this component now lives within this document only. So any changes that I make here will only affect this document. Let's undo that. I'm going to press Command-Z to undo. You'll see the link icon has reappeared. And I'm going to zoom out so we can see the impact of this change in full. Now, I've got this global color being used all over the place, this sort of reddish color. And if I want to make this change globally, I know that that red block is a component. And if I double-click to open up the layers within this button, I can see that I have Element/Brand Color that represents that reddish color. Now, if I choose to edit the master and edit that in the original document, which is going to bring me to the document of the shared library showing me that component within the shared library, where any change I make here is going to propagate everywhere that this shared library is used. So on the right-hand side, if I change this color to, say, a bluish colorthere we go. I can even go back, and I can show you guys that within the shared library, there are a lot of different components that use that color block component. So now, if I press Command-S to save the shared library, any document connected to it is going to allow me to pull those changes. When changes are saved to a shared library, any document connected to it is going to prompt you to review those changes. The prompt at the bottom of the screen is temporary, but up at the top of the Layers list, you'll see that blue dot representing that there's something new going on with our libraries, so we'll give that a click. Here, you'll see that shared library has one notification. And if we click into that library, we can see that there's one change to be reviewed. If we click to review that one change, we can see that that block color has been modified. We can choose to wait till later to update our document or we can update it now and see those changes propagate throughout. And just like that, we've pulled in a fully refreshed library of components and even nested components. When a Studio file being used as a shared library gets moved, deleted, or renamed, any documents previously connected to that library are going to take notice. You'll see a blue dot on the libraries icon indicating there's notification of some sort. When you click into the Libraries tab, you'll see a blue button that says Review missing library. Click on that to get some additional context. And then you can choose Add missing library. Select the Studio file that's been moved or renamed, and click Open. All the components within your document will link right back up automatically.

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