Create an amazing animated hamburger button! - @Figma Tutorial (interaction, ui, prototype)
Master the creation of animated hamburger buttons in Figma: a simple and practical tutorial to apply
_______I USE AND RECOMMEND: 🔥🔥🔥_______
🖱️ Mouse [Very ergonomic!] https://amzn.to/3nEz6ji
✍️ Graphics tablet [Affordable and good!] Best price: https://s.click.aliexpress.com/e/_99nxGj
OR https://amzn.to/2ZewfnS
👨🎨 WANT TO IMPROVE YOUR PHOTOSHOP SKILLS?
COURSE Realistic illustration with a focus on product marketing.
https://flambdesign.com/curso/
📚Book Suggestions to Improve Your Professional Performance📚:
📕 https://amzn.to/3HJwPLK Easy reading, good narrative, and a great kick to your mental procrastination. One of the best books I've read.
📙https://amzn.to/3nESPzr Improve the defense of your projects and even your personal/professional presentation.
FREE download 🤩🎁⬇️ (mockups and prototypes):
https://www.figma.com/@flambdesign
Support our channel 😊 👍
--------------------
⬇️ ⏱️ #figma #uiux #designer
00:00 Interactive hamburger button
00:55 Creating the hamburger with the pen
02:15 The close button
03:20 The weight of the elements
04:40 The components
05:09 The interaction
08:30 Result
_____________
Create an amazing animated hamburger button! - @Figma Tutorial (interaction, UI, prototype)
Hello, in this video, I'll show you how to create one of the most classic interactions: a button that transforms into an X!
*Creating the components*
We start with a button. To create it, you need a circle as a background and three rectangles to form the hamburger. After creating it, we duplicate it and adjust it to form the X.
*Pay attention to the weights*
The X needs to have a visual weight similar to the hamburger, so I increased the size of the X slightly to balance it.
*Creating the interaction*
We turn each button into a component and configure the properties for Figma to recognize which one we want to interact with. We make sure that "Smart Animate" is enabled and set up the animation.
*Result*
In the end, we have a button that transforms into an X with a smooth interaction.
Would you like to suggest a topic about Figma? Just leave it in the comments.
The channel's idea is to strengthen the creative community, whether you are a designer, UI/UX designer, product designer, graphic designer, advertiser, etc.
_______
💻 https://www.FLAMBdesign.com
💼 LinkedIn: / cordeiroflavio
📷 Instagram: / flambdesign
🕹 Artstation: https://www.artstation.com/flambdesign
👨🎨Behance: https://www.behance.net/flaviocordeiro
_____
Who am I:
Flavio Cordeiro, an enthusiastic designer with over 9 years of professional experience.
I have worked in advertising agencies, design studios, and marketing departments. I have led design teams at a global american company. I have worked on projects for international clients.
I have had the opportunity to work in various design fields. Photoshop is my favorite tool.
Currently, I am transitioning into UI/UX design, but I also study the world of 3D. In the end, I try to bring everything together to create solutions.
Channel's Objective:
Throughout my journey as a designer, I have gone through various creative phases and challenges in different environments: advertising agencies, design studios, marketing departments, and startups.
Each of these creative environments has its peculiarities, priorities, and needs. For this, I had to study many tools: Photoshop, Illustrator, After Effects, Adobe XD, Figma, Blender 3D, ZBrush, Substance Painter, and more.
After several "how do you do that?" questions, I thought I could be useful to beginners in the field of design, advertising, social media, interface design, and everyone in the creative world. Those looking for tutorials and tips to improve their workflow, professionally edit images, create designs with 3D elements, etc.
This professional experience led me to create effective ways to solve creative problems. FLAMB design was born from everything I learned. These are things I would like to share with you.
PHOTOSHOP - Image Editing
Photoshop is one of my favorite tools; I've done a lot of image manipulation and realistic illustrations. In this area, I believe I can share many tips and tricks.
3D EDITING
3D is my new passion. A complex world but full of rewarding challenges. I believe I can bring this reality to a simpler scenario to understand. Nowadays, Photoshop has a 3D tool that can yield cool results.
TRANSITION TO UI/UX DESIGN
Currently, I am transitioning my career into UI/UX design. I still have much to learn, but if you are an experienced designer, I can tell you that this career transition is less complex than people say. I believe that in this channel, I can share my experience learning about interfaces, applications, user interactions, user experience, micro-interactions, etc.
I hope my creative solutions are useful to your professional life or help boost your creativity.
____
Watch video Create an amazing animated hamburger button! - @Figma Tutorial (interaction, ui, prototype) online without registration, duration hours minute second in high quality. This video was added by user Flamb Design 05 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 44 once and liked it 3 people.