Custom Dropdown Menu Animation | Origami Studio Tutorial

In this video I go over how to create a custom dropdown menu animation with Origami Studio. Origami Studio is a software that you can use to create mobile, tablet and web prototypes. I use Origami to create interactive prototypes for user testing digital products and for creating animations to hand off to development. Origami Studio is a program created by Facebook and you can create interactive UI designs for your product workflow.

In this video I go over:
0:43 - How to add a rectangle on the screen
1:34 - How to add a text layer to the prototype
2:32 - How to add a tap interaction
3:30 - How to add a dropdown rectangle
5:32 - How to add text for the menu options
9:04 - How to add a line animation
10:53 - How to add hover states for the menu options

Let's Connect

[Produkthelt]

Great video! Have you considered showing how to create a functional search suggestion interface.

Would be also great to give some insight to how you would nest these components on a parent, let’s say web app.

Are components reusable?