UPDATED Menu Animation in Figma

preview_player
Показать описание
UPDATED!! Animated Menu in Figma. I got a lot of comments on how to make the shape behind the circle transparent and I finally figured it out!! But I went a step further and using figma's new variables we can adjust the icon colors based on the background. I hope this answers a lot of questions and really appreciate all the comments!

Learn how to make this animated menu with Figma! Build frames and prototype your animation with the local variables panel.

👇Get the Studio Pass

👇 Try Figma for FREE

👇Download Figma For Pros

🚀 Subscribe for more Tutorials

📥 Buy Design Files & Merch

🌎 Find Me on Social Media
  1. Shmelt studios
  2. Figma
  3. ui
  4. ux
  5. animation
  6. tutorial
Рекомендации по теме
UPDATED Menu Animation 0:13:26

UPDATED Menu Animation in Figma

Menu Animation in 0:04:52

Menu Animation in Figma

Menu Animation in 0:07:37

Menu Animation in Figma

Creating A Stunning 0:03:41

Creating A Stunning Navigation Bar In Figma Step-By-Step Tutorial 2023

Design an Animated 0:06:05

Design an Animated Sidebar Menu | Figma Tutorial

The Right Way 0:09:46

The Right Way To Build A Navigation Bar In Figma!

Animated Navigation Bar 0:11:45

Animated Navigation Bar in Figma - Prototyping Tutorial

Create an action 0:01:00

Create an action menu with smart animate in Figma

Create Animation in 0:16:19

Create Animation in Figma Range Slider, Accordion menu, buttons

Animating a tab 0:00:41

Animating a tab bar menu in Figma #shorts

Design an Animated 0:02:43

Design an Animated Mobile Menu | Figma Tutorial | Smart Animate ✨

Create with me 0:00:36

Create with me a Loading Animation in #figma! 💻

#Code for #Animation 0:00:36

#Code for #Animation in #Figma!

Make slide menu 0:05:43

Make slide menu on Figma | Menu bar animation | Expert Azi

Animated Dropdown Menu 0:09:58

Animated Dropdown Menu with Variants in Figma (2022 Update)

Create a DROPDOWN 0:14:01

Create a DROPDOWN MENU in Figma (Tutorial)

Create an Interactive 0:22:03

Create an Interactive TAB NAVIGATION Prototype ft. Smart Animate (Project Files Available)

Reduce Prototypes by 0:05:41

Reduce Prototypes by 50% (Simple trick) | Figma Tutorial

How to create 0:12:15

How to create an interactive sidebar menu in Figma using interactive components ⚡

Navigation Hover Effects 0:04:56

Navigation Hover Effects in figma | Smart Animate Figma | Figma Trick & Tutorial

Navigation Hover Effect 0:01:15

Navigation Hover Effect in one minute using Figma

Create a Functional 0:15:28

Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)

Animate a menu 0:01:00

Animate a menu button in Figma

Create a hamburger 0:01:00

Create a hamburger menu transition in Figma #shorts

Комментарии
Автор

I'm new to Figma and I tried to watch several videos that did this. They went so fast I couldn't catch up, thank you for a perfect walk thru for the novices

katanajokatanajo
Автор

had issues with the copy and paste of interactions, everything else was great, thank you. Although it looks pretty tricky to implement in a full project

edwardbajomo
Автор

Awesome video, thanks for your great tutorials. Would you please tell how can I prototype the selected icon in animated toolbar to the page I want to connect it?

moghezel
Автор

You are my hero! Thanks a million for this!

theado
Автор

As a beginer I found this video very informative and usefull, thank you. :)

hajnahortobagyi
Автор

This was a great video tutorial, one of the best and easy to follow since I started my learning of mobile App development. I definitely subscribed to your channel. Keep up the great work.

LadonMoore-pm
Автор

How to add this created Menu in app layout? i added created component in app but whenever i click on menu my app disappear and only animated menu lefts on blank screen. i am new and learning this please help

atharvapbidwe._.
Автор

is this animation can be exported to html website ?

christianaudebert
Автор

unfortunately when I try to scroll down my page this menu goes to the middle of the page. even after changing the position to fixed and overflow to "vertical" or no scrolling. Can anyone help me figure this out?

FoodAndPlaces
Автор

So this is only for profesional account users. Normal users cant add 2 variants

Arise__