- 6
- 24 588
effekt
เข้าร่วมเมื่อ 25 พ.ค. 2023
Here to share my passion for everything web design & development. Constantly learning and sharing what I learn with you.
Intro to Figma Prototypes - Create a Stunning Animated Sidebar Menu in less than 15 mins!
🌟 In this Figma Prototypes tutorial, we learn how to create a smooth, animated sidebar menu in just 15 minutes using Figma's built-in tools, no plugins or external apps required.
We'll create a mobile website hero section with a burger menu icon. When clicked, a beautifully animated right sidebar will open, revealing staggered links sliding in and a dark, blurred backdrop. An elegant, eye-catching animation aimed to improve a user's experience and elevate your designs.
🕒 TIMESTAMPS:
00:00 - Intro
00:35 - The Figma Prototype Overview
02:06 - Setting up the Design for the Sidebar Menu
04:39 - Adding Content to the designed Menu
06:36 - How to use the Prototype Tool (Creating Links)
08:55 - Adding the stagger animation effect to menu content
14:20 - Preview & Wrap Up
At Effekt.design, we create a friendly, easy-going, and calm environment for designers to learn and grow. So, sit back, grab your favorite beverage, and follow along with this tutorial.
If you find this video helpful, don't forget to hit the subscribe button and 🔔 notification bell to stay updated on the latest content. Your support means the world to me! 🌍
Happy designing and animating 💛
#FigmaPrototypes #UIUX #Animation #DesignTutorial #SidebarMenu
We'll create a mobile website hero section with a burger menu icon. When clicked, a beautifully animated right sidebar will open, revealing staggered links sliding in and a dark, blurred backdrop. An elegant, eye-catching animation aimed to improve a user's experience and elevate your designs.
🕒 TIMESTAMPS:
00:00 - Intro
00:35 - The Figma Prototype Overview
02:06 - Setting up the Design for the Sidebar Menu
04:39 - Adding Content to the designed Menu
06:36 - How to use the Prototype Tool (Creating Links)
08:55 - Adding the stagger animation effect to menu content
14:20 - Preview & Wrap Up
At Effekt.design, we create a friendly, easy-going, and calm environment for designers to learn and grow. So, sit back, grab your favorite beverage, and follow along with this tutorial.
If you find this video helpful, don't forget to hit the subscribe button and 🔔 notification bell to stay updated on the latest content. Your support means the world to me! 🌍
Happy designing and animating 💛
#FigmaPrototypes #UIUX #Animation #DesignTutorial #SidebarMenu
มุมมอง: 2 532
วีดีโอ
Master Figma Auto Layout with 3 Practical Examples in under 15 Mins
มุมมอง 508ปีที่แล้ว
🌟 Welcome to this Figma Auto Layout tutorial, where I'll guide you through three practical examples to help you master this powerful feature. Auto Layout is like a.. "smart group", that helps you create responsive designs and streamline your workflow. In this tutorial, we'll dive deep into Auto Layout and explore its potential through three examples: A simple button A responsive footer componen...
The Simplest UI/UX Animation Tool - Figma to Jitter.video Crash Course (2024)
มุมมอง 15Kปีที่แล้ว
🌟 Welcome to Design Therapy w/ effekt.design In this video tutorial, I'm exploring Jitter.video, a rather simple, fast, and time-saving animation tool for UI/UX designers. Great for Figma beginners too. This tutorial is perfect for anyone looking to add that extra flair to their designs effortlessly. We can literally create something great in a matter of minutes. 🎨 Want to follow along using th...
Design a Multistep Form on Figma - in under 15 Minutes! (+Channel Introduction)
มุมมอง 1.5Kปีที่แล้ว
Hey guys! 👋 In this video, I'm going to show you how to recreate a multistep form on Figma in under 15 minutes. Whether you're just starting with Figma or looking to improve your design skills, this tutorial is perfect for you. I'll guide you step-by-step through the process, sharing some tips and tricks along the way to help you create a sleek and functional multistep form. ━━━━━━━━━━ ⏰ Timest...
Great video. Can I export an entire design set that has already been prototyped in Figma to jitter?
Great video! Thanks for your help.
Thank you for sharing this material!
What a great explanations! Congratz
looks fire ❤🔥
Great tutorial, thank you!
Great video! Thanks for your help. 😊 Couldn't find many jitter tutorials.
amazing video!!! how do you make this video you posted on TH-cam what software did you use to make the illustrations?
After effects 😊
@@effekt.design thank you!
Syfg
smoooooooth
Yes, great tools, actually designer looking these kind of tool for animation. Thank you, and plz upload more video about Jitter
Dude! What's happening with your videos? Don't stop!
I found its helpful can I get ur mail
u have it in hi youtube description
Nice clean explanation ....
Amazing Content :)
Amazing
Alr done with it? Bruh
I have been looking for a multistep form design tutorial. It feels like most design channels do sort of the same things. I therefore like that you started out with this ”rare” piece. One question I have though since I have this type of form in my app; how would you do the mobile version?
hi there !, I think it will be interesting to see your hacks for AFX to animate faster/simpler your UIs
EXACTLY WHAT I WAS LOOKING FOR THANK YOU SOO MUCH❤
Glad it was helpful! Thanks a lot for your comment :)
He even names the layers... A legend, ladies and gentlemen! 🎉
haha! Appreciate the comments brother (x3) 🫡
@@effekt.design Can't help it. You're dropping a lot of gems 💎 and the least I can do is to appreciate and spread the word.
Subscribed immediately, you're doing a wonderful work.
Appreciate your comment again :) Thanks a lot for the feedback 😎
Thank you so much for this 👏
most welcome😊 appreciate the comment 🤝🤝
Very good abd thoroughly explained tutorial. One little request is to remove music because it kinda distracts from the video and makes me wanna take a nap 😊
Thanks a lot for the comment! 🙌 Totally agree with the feedback music mid explanation can get distracting 🫡 appreciate constructive criticism
Thankyou! This is very helpful! 🤟I've been looking for this kinda tutorial but i got nothing. And suddenly your video comes out in my recommendation.
Appreciate the feedback! Thanks so much for the comment 🙌
When next albion live?
Don't stop making videos
yesssir 🫡 haha Thanks for the comment, appreciate it!
nice vids, whatched them all, very helpfull
Appreciate the feedback brother! 💛 haha
Super helpful!
Glad it was! Thanks for the feedback 😊
need to connect with you , I'm new to designing please help me regarding this
Will be glad to help out :) Find me on discord through @effekt
i have DM'ed you on discord
Replied 🤝
Thank you 👍
Appreciate the feedback! 💛 Most welcome :)
🕒 TIMESTAMPS: 00:00 - Intro 00:35 - The Figma Prototype Overview 02:06 - Setting up the Design for the Sidebar Menu 04:39 - Adding Content to the designed Menu 06:36 - How to use the Prototype Tool (Creating Links) 08:55 - Adding the stagger animation effect to menu content 14:20 - Preview & Wrap Up
If you find this video helpful, don't forget to hit that subscribe button and 🔔 notification bell to stay updated on my latest content Happy designing 💛
Hey man, this is very helpful for me to give my client a first look at the design. Thanks again and look for your new video
Appreciate the feedback! Glad I could be of help 💛
Promo`SM ✅
Wow❤
Appreciate the comment 💛
Woow!!! This is the best tutorial ive been looking for. This made me understand the autolayout more. Ilearned that Disecting is the key to understand the structure. Cos before i dont know when to use autolayout or not to use it... this helped me a looot
Glad I could help 😊 also thanks a lot for the feedback! 💛
Sorry could you explain what is the difference between hugged + fixed ? Didnt catch that ? (second b.)
Hug Auto-layouts will have variable widths/heights (i.e if the element inside it has a width of 80 -> then that means the auto layout will expand to contain that element and basically hug that element from all sides making the auto layout itself also 80) Where as fixed Auto-layout means that the auto layout will always maintain a certain FIXED width/height (REGARDLESS of the elements inside of that auto layout group)
Could you please make a video on scroll down menu ? Thx
Do you mean dropdown menus/ Navbar drop downs?
I have been looking for a good explanation for about three days straight. Nobody gives a definition, they all try to go fast and impress, not teach. I am brutally honest and you my friend are doing a great job. Try definition example mode. Great job, honestly
Glad I could help 😊And Really Appreciate your feedback! 🤝
If you find this video helpful, don't forget to hit that subscribe button and 🔔 notification bell to stay updated on my latest content Happy designing 💛
🕒 TIMESTAMPS: 00:00 - Intro 00:16 - What is Figma Auto Layout? 01:55 - Example 1: Button 04:47 - Example 2: Footer Component 07:26 - Example 3: Card Component 15:57 - Outro
Hey nice video, I'm new to web design, coming over from an E-Com background, can you use this with webflow also?
Hey thanks for the feedback! You can definitely use this by exporting a video in GIF format or MP4 formats and importing then as videos/images to your webflow website. If you want something more light weight you can export the animation as a Lottie file and importing it that way but if you opt to this method I believe you will need the premium version of Jitter.
👋 Found this helpful? maybe drop a like or sub 😎 Helps me create similar content for you!
🎨 Want to follow along using the same design file? Visit this Figma link ( bit.ly/effekt-jitter ) and copy it to your files to get started. 🕒 TIMESTAMPS: 00:00 - Intro 01:50 - Keyframing Concept Explained 03:07 - Jitter.video Tutorial
Nice tutorial bro. Keep it up! Cheers!
👋 Found this helpful? maybe drop a like or sub 😎 Helps me create similar content for you!
Great vid!
Tyy 🤝 glad u found it helpful 😊
⏰ Timestamps: 0:00 - Short Channel Introduction 1:20 - Preview 1:52 - Design 15:18 - Outro