Today I’m going to give you a quick introduction to Studio, a brand new screen design tool from InVision. With it, you can design your UI projects, but also build prototypes and collaborate with others to keep everything in sync. If you’re looking for an alternative to Adobe XD, or Sketch, or Figma, read on!
Studio is a free application (currently only available for MacOS) which you can download from invisionapp.com/studio.
Introducing InVision Studio
User Interface and Tools
The UI is pretty simple. On the left we have a sidebar which displays our pages, artboards, and layers. We can also switch from those things to view libraries instead.
At the top of the screen you’ll see the topbar, which shows us the name of our document, a tool selection dropdown, and zoom controls. To the right of the topbar we have access to collaboration tools and prototyping tools. The topbar also features various tools (such as alignment controls, boolean operators etc.) depending on what’s selected.
To the right of the screen we have another sidebar. This one is contextual and changes depending on what we’re doing. You can expect to find various properties and document details here, as well as export options when relevant.
Importing Sketch Files
One of the appealing aspects of Studio for me is its ability to import Sketch files. Let’s say you’re working on a Sketch project and you want to move it across to Studio without losing any of the layer details and organisation. No copy or paste is necessary; you’ll see on the Studio startup screen Open Studio or Sketch file:
Click it, select your Sketch file, and away you go! Studio will import everything perfectly, including the layer structure, and the symbols defined in Sketch (which you’ll find under Document Libraries). Studio will even import all the various pages present in your Sketch file.
Working With Layers and Common Tools
Working with layers and some of the more common tools in Studio is actually pretty simple if you’re used to working in Sketch or Adobe XD. There’s a very high degree of familiarity, so the transition (if you decide to move from one of the competing platforms) will be painless.
Common tools in Studio can be found on the topbar:
Among them you’ll find the Rectangle, Rounded Rectangle (you can alter the border radius in the properties sidebar), the Ellipse, Pen tool, Text, Image import, and Artboard tool. Creating an artboard can be done manually, or you can choose from a selection of common presets.
For more information about Studio’s tools and layer controls, check out the video above, or take a look at the detailed course I recently published:
Conclusion
InVision Studio is a very competitive design tool, in what’s hotting up to be an extremely competitive market. If you’re familiar with Adobe XD, or Sketch, or Figma, then you should definitely take a look at Studio and see what it can offer you!
