This is a free place to learn and understand Figma prototyping. The tutorials are simplified so that we can focus on the main interactions and connections. We will explore basic but fundamental principles, simple and complex interactions. I attached the links to all of the tutorials (videos, articles…) that helped me learn Figma. Have fun!
Year2022Linkwww.figma.com
In this tutorial I’ll show how to build the vertical drag modal of an app and how to prototype it in Figma. This feature can be found in Google Maps app, Spotify app and many more. This action is not activated by a button like a normal modal, this is always visible and can be accessed in every page.
Spotify Player Modal Animation | Figma Advanced Prototyping
Bottom Sheet Modal | Figma Prototyping (modal activated by a button)
This tutorial shows how to prototype the correct way menus or other elements that have different variants. Here we present a button with two variations, Selected and Unselected. We need to create a component with different variants, those variants can customized with other colors, sizes… A hover state can be found in the Try Prototype example (hover is more likely to be used on desktop).
This tutorial shows how to prototype the correct way. For this type of Menu we need to create a component that will connect to its specific frame. The other connections will be created automatically by placing the asset into each frame. To change the selected button I used another component (from the previous tutorial), this is optional but it will help us in the future if we change our mind on how the button should look.
This tutorial will show how to build radio buttons or checkboxes with just one single active option. Its easier to make buttons with two instances and put them as checkboxes but sometimes we need just one checkbox to be selected and others automatically deselected. The easiest way to understand how this works is by checking the tutorial link I’ve put down below, it explains very clearly a number of steps where screenshots won’t do much.
Tutorial in progress