Before we get started... if you would like to follow along with the article in Studio, download the source file here.
As the InVision Studio release date grows closer, there's a good chance that you've already gotten to experiment with Early Access. The animation tools are pretty powerful and the connection to the whole InVision prototyping ecosystem has a lot of potential.
However, there are a number of features that aren't immediately obvious. These features can help you speed up your workflow, create more compelling interactive prototypes, and accurately communicate and test your designs well before development even starts.
Without further ado, try out this handful of things to make sure you're getting the most out of Studio:
No need to create masks or use images as fills. Studio automatically crops images as you resize them.
Image dimensions are locked by default, so just unlock the image and start resizing. This works the same as creating an image fill in Sketch and setting it to 'fill' but doesn't take quite as many steps.
Intelligent image cropping works best for images with the main area of interest in the center and for images you want to crop into rectangles, rounded rectangles, and circles (set the same x and y dimensions and max out the radius). If your image needs a unique shape or more specific focal point, creating a mask will give you more options to customize it.
Every element within Studio can be resized based on the size of the artboard. X, Y, Height, and Width can all be set in pixels or percentages. This allows you to create prototypes that are responsive to a variety of screen sizes. Elements don't currently reflow like they would on a live website, but using percentages makes creating mockups of different sizes much quicker.
You can also base an element's size off of the width of its container by turning it into a component... nested components and resizing is a whole other article (or 5) though.
Where percentage-based elements really shine is once your project is uploaded to InVision...
Once everything is based on percentages, these responsive prototypes can be shared with others through the InVision web interface.
When you are previewing your designs in Studio the size you set in the preview window translates to the size of the web prototype. If you select 'Resizable' in Studio, your design will automatically fill the entire width of the InVision web application. Any elements that are percentage-based will resize as you resize the browser window!
This means it's possible to create (mostly) responsive prototypes with complex interactions... all without a single line of code!
The 'Timer' feature allows you to link multiple artboards into a single animation. Create an interaction by selecting the 'Lightning' icon or hitting C on the keyboard, then select the 'Clock' icon under Trigger.
Loop animations by having the final artboard point back to the first one, or have a multi-step animation direct someone to another part of your design.
These complex animations can be great for loading animations, empty state illustrations, or video intro/outros (check out the Learn InVision Studio logo animation).
Studio makes it easy to test your prototypes and animations directly on your phone. Just hit the share button in the top right, select mirror, and Studio will give you a QR code to scan (there is a valid use for QR codes after all!). Scan the code in the InVision mobile app, and you're ready to go.
Fixing headers and footers in InVision prototypes has been possible for a while now, but Studio now gives you the ability to fix any other element you can imagine.
Artboards can be set to scroll horizontally, vertically, or both by selecting the appropriate option in the inspector. Once the artboard has been set to scroll, select the element you want to fix and click the 'Pin' icon in the upper right of the inspector panel.
Animations that update based on scrolling behavior can be some of the most interesting (and sometimes most annoying) animations on the web. Although Studio doesn't (currently) have an equivalent of Principle's drivers to create animations exactly like this, using swipe animations can allow you to create these effects.
Swipe tiggers can be used to create parallax effects, pull to refresh animations, and other animations that often happen on scroll.
Designers have been asking for different UI themes as long as digital design tools have existed. Although this may seem like just a fun addition, it's especially helpful when you are designing a light user interface and need the added contrast provided by the darker theme.
If you're a Sketch user, the InVision Studio shortcuts will be immediately familiar. The toolbar, layers, and inspector are where you expect them to be, and 93% of the shortcuts (sorry, I didn't really count) are the same. No need to spend months relearning shortcuts like you did when you switched away from Photoshop. The transition is as seamless as possible.
Some of these smaller features can be hard to find, but they do make Studio a powerful and flexible tool. Although there are a handful of bugs and features that are still being ironed out (it is Early Access after all!), the core of a great design tool is already there.
