Creating a  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. 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 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!



Source link https://blog.prototypr.io/getting--simple--with-invision-studio-c880089afe6e?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here