Staying organized and agile is key, but it can be challenging to maintain order as projects scale and documents become densely populated with elements. Don’t fret—by utilizing just a few tips and tricks, staying organized in Studio is easy.
In this tutorial, we’ll look at:
New to Studio?
Download the latest version of InVision Studio to get startedDownload StudioDownload InVision Studio
When you're caught up in your creative process, it's really easy to create, and create, and create layers that stack up into a big, bad mess. If you look at my layers list on the left-hand side, we've got an awful lot of disorganized content within this document. If you're interacting with things directly on the canvas, it might not feel so bad. But when it's time for a handoff, either to another designer or a developer, it might not be favorable just how disorganized this document is. It's also very helpful to get organized before you begin your animation workflow, because it will save you from headaches down the road. So let's start grouping some things up and cleaning up this document. The first thing I want to clean up is the sidebar on the left-hand side. This is a big area that we could group up into one group. So I'm going to click and drag a selection around this entire sidebar. And in doing so, you'll find that I accidentally selected this background box here that's gray and this bar across the top that's white. So when you click and drag to create a selection, you can also then hold Shift and click objects to remove or add them to your selection. If they're already selected, Shift-clicking will remove them from your selection. If they're not already selected, then Shift-clicking will add them to your selection. So I've just Shift-clicked on these two objects to remove them from my selection, and you can tell by the bounding box that my selection is now just the sidebar itself. So with these objects now selected, I can press Command-G on the keyboard to group them up. And now I've got one nice, organized group. And what can be helpful when creating a group is using the little eyeball that you see when you mouse over next to the layer to turn the visibility off and back on, just to be sure that that group has successfully encapsulated the layers that I intended it to. And it has. That's looking good. Now would also be a pretty opportune time for us to name this group, so we don't just end up with a different sort of mess with everything named Group, Group, Group, Group, Group. We can either click a second time on the group name, in order to change it, or Command-R on the keyboard is your shortcut to rename the selected layer or group. I'm going to name this Sidebar. And now with that name typed in, I'll hit Return to lock it in place. And there we have it. And again, Command-R is the shortcut to go in there and rename that group. And Tab on the keyboard will actually let you hop to the next layer, and the next layer, and the next layer each time you hit Tab, so that you can quickly rename a bunch of layers and groups, without having a hit Command-R or click twice over, and over, and over again. You can also press Shift-Tab to go backwards up the list, which is a really fast way to go through and rename layers. And then again, Return to lock that in. Great. Now, to click and drag around the layers that I have sitting on our gray background. We're going to run into trouble with the gray background itself, because I'm going to keep accidentally selecting that. If you do find yourself continuously accidentally selecting a layer, you can lock that layer, as opposed to hiding it. So you can keep it visible. You can keep it locked, really, for the remainder of your time working on the document, and you won't have to worry about accidentally selecting it. So here, if we go to the layers list, Canvas BG is the name of that layer. And we see our little eyeball. If you hold the Option key on the keyboard, the eyeball turns into a little lock icon. And we can click to lock that layer. And we now no longer have to worry about clicking on it and selecting it. We can click. We can click and drag. No worries about accidentally making a selection. So now I can click and drag on these other areas and Command-G to group them. I'll do the same here. Command-G to group this. I'll do the same for these guys down here. Command-G to group them. So now immediately, if we look over on the layers list, we're already doing much, much better on our organization here. And we can just worry about giving things the appropriate names now and showing and hiding layers that we no longer need to see. And you'll be organized in no time.