- Видео 65
- Просмотров 327 701
Designverse
Индия
Добавлен 23 мар 2015
I'm a self-taught UX/UI Designer based in India, who is passionate about sharing knowledge and resources with fellow designers. Follow my journey and let's learn together!
My experiences have sparked a passion in me to learn more about UX/UI Design and Web Development. I want to share my skills/experience with you all and want to prove that anyone can get into the UX/UI Design and be successful with a little hard work, the right strategy and atlast, desire to learn. 🌱
New videos about my UX/UI journey, webdev and productivity hacks will be posted on this channel.
Thankyou
Siddheshwar Chandravanshi
My experiences have sparked a passion in me to learn more about UX/UI Design and Web Development. I want to share my skills/experience with you all and want to prove that anyone can get into the UX/UI Design and be successful with a little hard work, the right strategy and atlast, desire to learn. 🌱
New videos about my UX/UI journey, webdev and productivity hacks will be posted on this channel.
Thankyou
Siddheshwar Chandravanshi
Create Gallery Hover Animation in Figma
Hello there!
In this video, we will see how to create an animated gallery component using the smart animate feature of the Figma prototype. Watch step-by-step as we demonstrate the process, and get ready to master the tool.
If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to never miss a new upload! 🔔
Thanks for watching! 💙
-------------------------------------------------------------------
Music by: Bensound.com/royalty-free-music
License code: NNJJQMXPJMNZ3QNP
Let's connect 🤝
Twitter: mrsidverse
Instagram: mrsidverse
#mrsid #uidesign #figma #figmatutorial #figmaprot...
In this video, we will see how to create an animated gallery component using the smart animate feature of the Figma prototype. Watch step-by-step as we demonstrate the process, and get ready to master the tool.
If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to never miss a new upload! 🔔
Thanks for watching! 💙
-------------------------------------------------------------------
Music by: Bensound.com/royalty-free-music
License code: NNJJQMXPJMNZ3QNP
Let's connect 🤝
Twitter: mrsidverse
Instagram: mrsidverse
#mrsid #uidesign #figma #figmatutorial #figmaprot...
Просмотров: 196
Видео
3 Button Hover Effects in Figma | Figma Prototype Tutorial
Просмотров 86Месяц назад
Hey there, designers! In this video, we will see how to create button hover interactions in Figma using the smart animate feature of the Figma prototype. Watch step-by-step as we demonstrate the process, and get ready to master the tool. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to n...
Remove Image Background in Figma for Free: No Plugins Needed
Просмотров 1872 месяца назад
Hey there, designers! In this video, learn how to effortlessly remove image backgrounds in Figma using its powerful AI feature-without the need for any plugins! Whether you're designing for social media, websites, or presentations, this method will save you time and enhance your design workflow. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX desig...
Card Hover Animation in Figma | Figma Prototype Tutorial
Просмотров 5266 месяцев назад
Hey there, designers! In this video, we will see how to create card hover animation in Figma using the smart animate feature of the Figma prototype. Watch step-by-step as we demonstrate the process, and get ready to master the tool. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to never ...
Add loader to your Figma prototype | Figma tutorial
Просмотров 2869 месяцев назад
Hey there, designers! In this video, we will see how to add loader animation in the Figma prototype. Watch step-by-step as we demonstrate the process, and get ready to master the tool. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to never miss a new upload! 🔔 Thanks for watching! 💙 Musi...
How to place a text in custom vector path | Figma Plugin
Просмотров 2,8 тыс.10 месяцев назад
Hey there, designers! Ready to take your Figma skills to the next level? Join us in this tutorial where we'll show you how to seamlessly place text in vector shapes using the Curve Text plugin by Lichin, in Figma. Whether it's a circle, square, triangle, or your own custom vector path, we've got you covered. Watch step-by-step as we demonstrate the process, and get ready to add some serious fla...
Mobile menu animation in Figma | Figma Prototype Tutorial
Просмотров 6 тыс.10 месяцев назад
Hey there! 👋 Join me in this tutorial where we'll create a mobile menu prototype. We'll add smooth animations for opening and closing the hamburger menu, make it appear on user click, and even add some fun hover animations to the menu items. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell ...
Create interactive tab in Figma | Figma Prototype Tutorial
Просмотров 1,8 тыс.10 месяцев назад
Hello hello👋, Join me in this Figma tutorial where I'll walk you through creating an interactive tab with cool hover animations. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to never miss a new upload! 🔔 Thanks for watching! 💙 Music by www.bensound.com/free-music-for-videos License code...
Menu hover animation in Figma | Figma Prototype Tutorial
Просмотров 1,7 тыс.10 месяцев назад
Hello hello 👋 In this video, we will create a hover effect using the Component and Figma prototype features. If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to never miss a new upload! 🔔 Thanks for watching! 💙 Music: Bensound.com/free-music-for-videos License code: YALXKLJDIQNJBPFH Let's c...
Create Embossed lines pattern in Figma
Просмотров 35910 месяцев назад
Hello 👋 In this video, we will see how to create an Embossed line pattern from a vector in Figma. We will use the Embossed Lines plugin to create the pattern. Link to plugin: www.figma.com/community/plugin/1329369867868989491/emboss-lines If you enjoy this video, please give it a thumbs up and subscribe to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell to ...
Create interactive Dropdown menu in Figma
Просмотров 7 тыс.11 месяцев назад
Hello hello 👋 In this video, I will guide you through the process of creating an interactive dropdown menu in Figma. By leveraging the power of Figma components and prototypes, I demonstrate how to seamlessly design and animate a sleek dropdown that enhances user experience. We'll explore every step, from component creation to prototyping, allowing you to grasp the intricacies of crafting a dyn...
How to create responsive tags in Figma
Просмотров 1,1 тыс.Год назад
Hello hello 👋 In this step-by-step Figma tutorial, we'll see how to create a Responsive tags container in Figma. We will use a main component for the tag element so that we can make changes to all the instances at once. You don't need any prior experience with Figma or design to follow along with this tutorial. I'll walk you through each step. If you enjoy this video, please give it a thumbs up...
Fluted Glass Effect in Figma (Ribbed Glass)
Просмотров 401Год назад
Hello hello 👋 In this step-by-step Figma tutorial, we'll see how to create a Fluted glass effect in Figma, also called the Ribbed glass effect. We will use the Background Blur effect to create this effect. You don't need any prior experience with Figma or design to follow along with this tutorial. I'll walk you through each step. If you enjoy this video, please give it a thumbs up and subscribe...
Circle Text Rotation Animation in Figma | MrSid
Просмотров 1,3 тыс.Год назад
Hello Everyone 👋 In this step-by-step Figma tutorial, we'll see how to create Circular Text rotation animation using Figma prototype. We will use a plugin called Typo Tool to create a circular text and will use Figma smart animate to create the animation. You don't need any prior experience with Figma or design to follow along with this tutorial. I'll walk you through each step. If you enjoy th...
Social Share Button Animation | Figma Prototype Tutorial
Просмотров 969Год назад
Social Share Button Animation | Figma Prototype Tutorial
How to create horizontal scroll in Figma
Просмотров 1,1 тыс.Год назад
How to create horizontal scroll in Figma
How to create popup in Figma | Figma tutorial for beginners
Просмотров 5 тыс.Год назад
How to create popup in Figma | Figma tutorial for beginners
How to create toggle button in Figma | Figma prototype | MrSid
Просмотров 1,4 тыс.Год назад
How to create toggle button in Figma | Figma prototype | MrSid
How to Create 3D elements in Figma Without Using Any Plugin | MrSid
Просмотров 3,2 тыс.Год назад
How to Create 3D elements in Figma Without Using Any Plugin | MrSid
Animated text and slide transition in Figma | Figma Prototype Tutorial- Part 3
Просмотров 6 тыс.Год назад
Animated text and slide transition in Figma | Figma Prototype Tutorial- Part 3
Interactive slider in Figma | Figma Prototype Tutorial- Part 2
Просмотров 7 тыс.Год назад
Interactive slider in Figma | Figma Prototype Tutorial- Part 2
Create loader animation in Figma | Figma Prototype | MrSid
Просмотров 1,8 тыс.Год назад
Create loader animation in Figma | Figma Prototype | MrSid
Create Checkbox in Figma | Figma Prototype | Figma tutorial for beginners | MrSid
Просмотров 14 тыс.2 года назад
Create Checkbox in Figma | Figma Prototype | Figma tutorial for beginners | MrSid
Responsive design in Figma | Figma Auto Layout | UI Design Tutorial for beginners | MrSid
Просмотров 5162 года назад
Responsive design in Figma | Figma Auto Layout | UI Design Tutorial for beginners | MrSid
Text Animation in Figma | Figma Prototype | UI Design Tutorial 2022 | MrSid
Просмотров 4182 года назад
Text Animation in Figma | Figma Prototype | UI Design Tutorial 2022 | MrSid
How to import and place multiple images at once in Figma | Figma tutorial for beginners | MrSid
Просмотров 7 тыс.2 года назад
How to import and place multiple images at once in Figma | Figma tutorial for beginners | MrSid
Tooltip in Figma | Figma tutorial for beginners | MrSid
Просмотров 3 тыс.2 года назад
Tooltip in Figma | Figma tutorial for beginners | MrSid
Create Animated Button in Figma | Figma tutorial for beginners | MrSid
Просмотров 4932 года назад
Create Animated Button in Figma | Figma tutorial for beginners | MrSid
Cool video, but I have an important question: at the end, when you copied the first variant from the component into the frame, you obviously couldn't scroll down during the animation. But the height is bigger in my frame, so it's set so that you can scroll down and I want to keep it that way, just not for the animation. Is it somehow possible for the animation to stay fixed and for me to be able to scroll down afterwards?
Yes, that’s possible. You will have to set the overlay as FIXED from prototype setting.
@ I don't know if I understood that correctly, but I have now clicked on every variant in the component and then set everything to Fixed under "Prototype" under "Position", but it still doesn't work. Could you perhaps explain that to me in a little more detail? I would be very grateful.😅
How to get it?
I think this update is for everyone on UI3
at minute 7:33. what did you press to make "HOME" appear everywhere? you didn't show that
That’s called ‘Paste to replace” Choose all the elements that you want to replace, and right click and choose paste to replace or Cmd+Shift+R This will replace the selected elements with the copied element.
Why is it that when I move the red dot in the animation, it only animates up to the second level and not further? As if it doesn't go any further there, but there are other levels and the arrows are actually placed correctly (on drag/ smart animate/ 500ms)
Can you please check the interactions again? See if you have connected the slider and not the whole frame.
@@MrSidverse what do you mean by slider? I'm working on it right now and I see that every arrow goes to the next variant. I've also tried to see what happens if I connect the first arrow to the next variant instead of the next one and the problem is the same. In the animation, the red dot can only be animated up to this point and no further. (knowing that the animation in between is of course skipped)
@@MrSidverse Do you have Instagram or something where I can just send you a photo so you can see what I mean?
@@MrSidverse Tell me, is it possible that you have to click on the red dot once for each individual step? Because I just found out by chance that you have to click and drag once for each individual step. Isn't it possible to just click once and drag to where you want?
Make designs with designer 🙌
in minutes 2:00 how you do that
I wrapped both of them in a Frame. Cmd + Opt + G
Amazing! thanks for sharing
Glad you enjoyed it!
Thanks for sharing
Thanks for watching!
Great video, can you elaborate on the situation when you have other inputs below the dropdown, like name, organisation etc. How do you collapse it in a layout so it doesn't take too much of a white space, but still works in a prototype?
Sorry, I didn’t get your question. Can you please explain? Or You can also reach me out on Instagram/twitter @mrsidverse
Thank you😊
You're welcome 😊
djeeez that was useless
The only issue is that you dont show what shortcut you pressed
Hey, thanks and sorry for inconvenience. I’ll try to add the Shortcut used on upcoming videos.
Hello man,, i just completed the entire 12 episodes which are soo much beneficial in advancing my prototyping skills in Fig!! Tysm.
Hello, Great to hear! Let me know if you need any help. Have a great day… 🧡
You tutorials are such an eye-opener.. Thanks!!
Glad you like them!
The tutorial is very much insightful.. Thankyou
The tutorial is staged properly. I totally recommend it.
I think the tutorial is well - recorded and the steps have been clearly captured.. Thankyou for the good-work!
Thank you for your kind words! I’m glad you found the tutorial helpful. Your feedback means a lot! If you have any questions or topics for future videos, just let me know!
OMG THANK YOU SO MUCH FOR THIS TUTORIAL. HELP ME ALOT
Glad it helped!
What's the plugin with pictures that you used
Unsplash
was looking for this. Thanks
Glad I could help
Thank you!
You're welcome!
Thanks ❤
You're welcome 😊
Я когда убираю курсор, то плашка возвращается сама обратно, как сделать что бы она оставалась на одном месте?
Change the interaction to click, I assume you’re using mouse hover or enter.
BEAUTIFUL VIDEO!!!!!! thank you for this. helped me with my school project!
You're very welcome!
niceeeee..thank you..short time video saved it all..
Glad it helped 😊
Please remove the background music it creates lot of disturbance
Thanks, I’ll keep that in mind.
What if the slidebar lie in the right of the screen?
In that case, you will have to align the items on right side, so that it will be expanded on the left side.
Hey, awesome video!! Followed along to make some awesome animations! I was wondering how you preview components like you did 3:12
Hey, thanks. For mini preview, select the frame and press Shift + Spacebar
@@MrSidverse awesome, thank you!!
Avoid using music for educational videos. Does not help in anyway, it only distracts.
Thanks, I’ll keep that in mind.
thank you so much!!!!!!!
Glad it helped!
Thank you for this, I just made my first collapsible sidebar!!
Wonderful!
Hi, I was searching for menu animation. I found your video while searching, It’s a great video by the way. Thank you verrrrrry much.
Glad it was helpful!
thank u broo,, from many of tutorials, I only understand thisss !!
Happy to help 🧡
love this!! thanks for sharing :))
You are so welcome!
How to prototype then?
I have already done the prototype in this video.
Amazing 🤩
Thanks 😊
Hello it was really good! ❤ Btw can you share yhe source of those icons if possible!
Hey, thanks. I’m using Feather Icon pack in this video. Please search on Figma community.
Thanks appreciated for your response!
good stuff but would've been better if you actually spoke in the tutorial
Hey, thanks for your feedback. I’ll try to make the upcoming tutorials with audio.
This animation help me thankyou!!!
You’re welcome 😊
Great video!! Thank you
Glad you liked it!
Thanks brooo
You’re welcome 😊
good tuts, please reduce background sound
Sure, thanks for the feedback 🧡
or just turn your volume down
nice job dear! would only recommend you kept the milliseconds as 300ms instead of 500ms to speed up the checking process ❤
Hey, thanks for your feedback 😊
thanku 🥰
You’re welcome 😇
Very helpful, but the sound of your voice is too quiet in comparison of the high level of the music sounds in the background..😞
Sorry for that…
great video! Thank you!
Glad you liked it!
thanks...
You're welcome!
Do you have file please send
Need to check
Save time and clicks - select all icons and make them white, put a dark background behind so you can see them. Then you can just copy and paste to replace without having to make each one white every time.
Thanks for sharing this quick tip 😊
Thanks, but difficult to learn from it without instructional dialogue- the music didn't add anything to the purpose of learning
Thanks for sharing your feedback, would definitely try to add voice on upcoming videos.