Working with Flinto — creating basic menu transition

A tutorial on how to create a very simple menu transition.

What we going to create today

A very simple menu transition with Sketch + Flinto.

  • (Complexity level: 1/10)
  • Time: < 15 mins

Step 1 — Sketch

Create the design in Sketch


Arrange the layers properly to ease the setup in Flinto later. I have named it as top, middle and bottom.

Step 2 — Export to Flinto

Export it to Flinto with the plugin. 
Download the plugin here:


If you are designing your mockup in 1x, select 100% instead of 200%.

Step 3 — New Behaviour

Select the all the layers and create a behaviour (the button is at the top menu bar)

Step 4 — New State

Click the + button to create a new state.

Once it is created, change the opacity of the middle layer to 0%.

Shift the top layer to the middle

Shift the bottom layer to the middle

Step 5 — Create the third state

Click the plus button again to create a new state.

Then, rotate the bottom layer by 45º (you may press command and hover to the corner of the layer to rotate) or under Rotation, change the z figure.

Next, rotate the top layer by 45º.

Step 6— Create the fourth and fifth states

Click on the second state then click on the + button, it will duplicate the state.

Similarly, click on state 1 then click on the + button, it will duplicate the fifth state.


You may change states to preview the animation.

Step 7 — Define the timer

The Timer Link sets the time between two states.

Tick the Timer Link then set it too 0 ms and set the Target to next state (this means when the preview is played, it will transit directly to the next state).

Repeat this for state 2, 3 and 4.

Step 8— Preview

Once you are done with the above, tap preview to view your menu transition.

You may record it as well by clicking on the grey circle icon beside the percentage.

Remember to tap the house (home) icon if it is not working.

If you like this tutorial, click to Recommend button to boost my morale. =)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.