Getting started + simple animation with InVision Studio
I requested an invitation to InVision Studio looooong time ago. When I received and tested it, it was pretty much unusable. Fortunately, on my current workplace I had the chance to give it a second chance and…
Wow. It was improved. A LOT.
That’s why I decided to create a simple getting started for the ones who want to give it a try. By the way, I had also the chance to compare it with the brand-new-super-hyped FramerX and I must admit that I was absolutely delighted. Not only was way more stable, usable and simpler to use: it has everything I needed to design, animate and prototype as much as I can, on the simplest way possible.
I’m just in love with it. Hands on!
Creating a simple project
As soon as you init the app you should see something like this
From here you can pretty much get an empty project for any device and check the vast amount of resources and tutorials that this tool offers. But in our case, we are going to get a small kickstart with a template. InVision provides tons of UI kits, so let’s use one of those for the purpose of this tutorial.
I chose a really kick-ass one called RELATE, but you can choose whatever you want here. After downloading it just drag it into the InVision Studio icon on the dock to import it. You should see something like this:
Here we have pretty much everything we need to play, experiment and do really cool stuff. Click on the 2–9 Timeline and copy it into a separate page. You can just click on the + icon on the left bar and cmd + v to paste.
Duplicating the screen and starting to tinker!
Let’s create a duplicate of the list that we’ve just paste it using one of the most useful shortcuts: click + alt + drag:
Here we go! Let’s select the copy and just drag to the left the second card and put a small text that will act as a delete button:
With this we can create our first transition. Let’s click on our first screen and add an interaction. For this we can push C or click on the kind of lightning symbol that will appear on the top bar. After that, we click on the second screen and a menu will pop up:
Here we can select the type of interaction from a list. In this case, as long as is an app we click on the second tab and select the swipe left. As simple as that. We can also add some smooth transitions and stuff activating the motion option on the previous menu
Clicking on save will create our fist transition, Hooray!!
Finishing touches
As you could see, creating a quick prototype couldn’t be easier. For finishing the one we are working on right now we should do some stuff for dragging the row back, right? So let’s click on the row that we just moved left and do the same we did but on the opposite direction. Push C and click on the first screen:
In this case, we will chose a tap and swipe right and we’re done!
This is a prototype for a potential series of InVision Studio tips and how to’s. Hope you found it useful and please don’t hesitate to give me some feedback!
