Designverse
Designverse
  • Видео 65
  • Просмотров 327 701
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...
Просмотров: 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
Gradient Blur on Figma
Просмотров 1,8 тыс.Год назад
Gradient Blur on Figma
How to create horizontal scroll in Figma
Просмотров 1,1 тыс.Год назад
How to create horizontal scroll in Figma
How to install Wordpress on localhost
Просмотров 39Год назад
How to install Wordpress on localhost
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

Комментарии

  • @alessandrodjordjevic8023
    @alessandrodjordjevic8023 25 дней назад

    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?

    • @MrSidverse
      @MrSidverse 15 дней назад

      Yes, that’s possible. You will have to set the overlay as FIXED from prototype setting.

    • @alessandrodjordjevic8023
      @alessandrodjordjevic8023 14 дней назад

      @ 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.😅

  • @bestman_26
    @bestman_26 25 дней назад

    How to get it?

    • @MrSidverse
      @MrSidverse 15 дней назад

      I think this update is for everyone on UI3

  • @alessandrodjordjevic8023
    @alessandrodjordjevic8023 26 дней назад

    at minute 7:33. what did you press to make "HOME" appear everywhere? you didn't show that

    • @MrSidverse
      @MrSidverse 26 дней назад

      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.

  • @alessandrodjordjevic8023
    @alessandrodjordjevic8023 Месяц назад

    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)

    • @MrSidverse
      @MrSidverse Месяц назад

      Can you please check the interactions again? See if you have connected the slider and not the whole frame.

    • @alessandrodjordjevic8023
      @alessandrodjordjevic8023 Месяц назад

      @@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)

    • @alessandrodjordjevic8023
      @alessandrodjordjevic8023 Месяц назад

      @@MrSidverse Do you have Instagram or something where I can just send you a photo so you can see what I mean?

    • @alessandrodjordjevic8023
      @alessandrodjordjevic8023 Месяц назад

      @@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?

  • @BCCreationn
    @BCCreationn Месяц назад

    Make designs with designer 🙌

  • @KaptenIkan
    @KaptenIkan Месяц назад

    in minutes 2:00 how you do that

    • @MrSidverse
      @MrSidverse Месяц назад

      I wrapped both of them in a Frame. Cmd + Opt + G

  • @Bestiezzzz
    @Bestiezzzz Месяц назад

    Amazing! thanks for sharing

  • @Bestiezzzz
    @Bestiezzzz Месяц назад

    Thanks for sharing

  • @bubah8
    @bubah8 Месяц назад

    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?

    • @MrSidverse
      @MrSidverse Месяц назад

      Sorry, I didn’t get your question. Can you please explain? Or You can also reach me out on Instagram/twitter @mrsidverse

  • @Stylesizzle999
    @Stylesizzle999 2 месяца назад

    Thank you😊

  • @jorisvanimhoff9722
    @jorisvanimhoff9722 2 месяца назад

    djeeez that was useless

  • @crystaldesigns771
    @crystaldesigns771 2 месяца назад

    The only issue is that you dont show what shortcut you pressed

    • @MrSidverse
      @MrSidverse 2 месяца назад

      Hey, thanks and sorry for inconvenience. I’ll try to add the Shortcut used on upcoming videos.

  • @johnesmaina8552
    @johnesmaina8552 2 месяца назад

    Hello man,, i just completed the entire 12 episodes which are soo much beneficial in advancing my prototyping skills in Fig!! Tysm.

    • @MrSidverse
      @MrSidverse 2 месяца назад

      Hello, Great to hear! Let me know if you need any help. Have a great day… 🧡

  • @johnesmaina8552
    @johnesmaina8552 2 месяца назад

    You tutorials are such an eye-opener.. Thanks!!

    • @MrSidverse
      @MrSidverse 2 месяца назад

      Glad you like them!

  • @johnesmaina8552
    @johnesmaina8552 2 месяца назад

    The tutorial is very much insightful.. Thankyou

  • @johnesmaina8552
    @johnesmaina8552 2 месяца назад

    The tutorial is staged properly. I totally recommend it.

  • @johnesmaina8552
    @johnesmaina8552 2 месяца назад

    I think the tutorial is well - recorded and the steps have been clearly captured.. Thankyou for the good-work!

    • @MrSidverse
      @MrSidverse 2 месяца назад

      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!

  • @miboy
    @miboy 3 месяца назад

    OMG THANK YOU SO MUCH FOR THIS TUTORIAL. HELP ME ALOT

  • @wameshole8266
    @wameshole8266 3 месяца назад

    What's the plugin with pictures that you used

  • @UISystellar
    @UISystellar 3 месяца назад

    was looking for this. Thanks

    • @MrSidverse
      @MrSidverse 3 месяца назад

      Glad I could help

  • @thapelommakola8208
    @thapelommakola8208 3 месяца назад

    Thank you!

  • @ahrafasfari
    @ahrafasfari 3 месяца назад

    Thanks ❤

    • @MrSidverse
      @MrSidverse 3 месяца назад

      You're welcome 😊

  • @АлексейКарпенко-м6ф
    @АлексейКарпенко-м6ф 3 месяца назад

    Я когда убираю курсор, то плашка возвращается сама обратно, как сделать что бы она оставалась на одном месте?

    • @MrSidverse
      @MrSidverse 3 месяца назад

      Change the interaction to click, I assume you’re using mouse hover or enter.

  • @Ibibiofame
    @Ibibiofame 4 месяца назад

    BEAUTIFUL VIDEO!!!!!! thank you for this. helped me with my school project!

    • @MrSidverse
      @MrSidverse 4 месяца назад

      You're very welcome!

  • @sanjimastypo1749
    @sanjimastypo1749 5 месяцев назад

    niceeeee..thank you..short time video saved it all..

    • @MrSidverse
      @MrSidverse 5 месяцев назад

      Glad it helped 😊

  • @saumyarastogi2154
    @saumyarastogi2154 5 месяцев назад

    Please remove the background music it creates lot of disturbance

    • @MrSidverse
      @MrSidverse 5 месяцев назад

      Thanks, I’ll keep that in mind.

  • @aothao9437
    @aothao9437 6 месяцев назад

    What if the slidebar lie in the right of the screen?

    • @MrSidverse
      @MrSidverse 6 месяцев назад

      In that case, you will have to align the items on right side, so that it will be expanded on the left side.

  • @meech63
    @meech63 6 месяцев назад

    Hey, awesome video!! Followed along to make some awesome animations! I was wondering how you preview components like you did 3:12

    • @MrSidverse
      @MrSidverse 6 месяцев назад

      Hey, thanks. For mini preview, select the frame and press Shift + Spacebar

    • @meech63
      @meech63 6 месяцев назад

      @@MrSidverse awesome, thank you!!

  • @suvinapaul
    @suvinapaul 6 месяцев назад

    Avoid using music for educational videos. Does not help in anyway, it only distracts.

    • @MrSidverse
      @MrSidverse 6 месяцев назад

      Thanks, I’ll keep that in mind.

  • @anaanana_ana
    @anaanana_ana 6 месяцев назад

    thank you so much!!!!!!!

    • @MrSidverse
      @MrSidverse 6 месяцев назад

      Glad it helped!

  • @AmeliaPrasad
    @AmeliaPrasad 6 месяцев назад

    Thank you for this, I just made my first collapsible sidebar!!

  • @trivenidn-qc1ds
    @trivenidn-qc1ds 7 месяцев назад

    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.

    • @MrSidverse
      @MrSidverse 7 месяцев назад

      Glad it was helpful!

  • @nadiaumaira2553
    @nadiaumaira2553 8 месяцев назад

    thank u broo,, from many of tutorials, I only understand thisss !!

    • @MrSidverse
      @MrSidverse 8 месяцев назад

      Happy to help 🧡

  • @tracywang3266
    @tracywang3266 8 месяцев назад

    love this!! thanks for sharing :))

    • @MrSidverse
      @MrSidverse 8 месяцев назад

      You are so welcome!

  • @jerronickog9933
    @jerronickog9933 8 месяцев назад

    How to prototype then?

    • @MrSidverse
      @MrSidverse 8 месяцев назад

      I have already done the prototype in this video.

  • @KelashKumar-v7q
    @KelashKumar-v7q 8 месяцев назад

    Amazing 🤩

  • @John_heath
    @John_heath 8 месяцев назад

    Hello it was really good! ❤ Btw can you share yhe source of those icons if possible!

    • @MrSidverse
      @MrSidverse 8 месяцев назад

      Hey, thanks. I’m using Feather Icon pack in this video. Please search on Figma community.

    • @John_heath
      @John_heath 8 месяцев назад

      Thanks appreciated for your response!

  • @callmemk2460
    @callmemk2460 8 месяцев назад

    good stuff but would've been better if you actually spoke in the tutorial

    • @MrSidverse
      @MrSidverse 8 месяцев назад

      Hey, thanks for your feedback. I’ll try to make the upcoming tutorials with audio.

  • @Apekshaaher_
    @Apekshaaher_ 9 месяцев назад

    This animation help me thankyou!!!

    • @MrSidverse
      @MrSidverse 9 месяцев назад

      You’re welcome 😊

  • @isaaclongoria229
    @isaaclongoria229 9 месяцев назад

    Great video!! Thank you

    • @MrSidverse
      @MrSidverse 9 месяцев назад

      Glad you liked it!

  • @jarbodj
    @jarbodj 9 месяцев назад

    Thanks brooo

    • @MrSidverse
      @MrSidverse 9 месяцев назад

      You’re welcome 😊

  • @suhaibcherukunnon1698
    @suhaibcherukunnon1698 9 месяцев назад

    good tuts, please reduce background sound

    • @MrSidverse
      @MrSidverse 9 месяцев назад

      Sure, thanks for the feedback 🧡

    • @SarahCooper-UVUX
      @SarahCooper-UVUX Месяц назад

      or just turn your volume down

  • @thankgodlove
    @thankgodlove 9 месяцев назад

    nice job dear! would only recommend you kept the milliseconds as 300ms instead of 500ms to speed up the checking process ❤

    • @MrSidverse
      @MrSidverse 9 месяцев назад

      Hey, thanks for your feedback 😊

  • @MuhammadHaroon-bb8oz
    @MuhammadHaroon-bb8oz 9 месяцев назад

    thanku 🥰

    • @MrSidverse
      @MrSidverse 9 месяцев назад

      You’re welcome 😇

  • @myriam5662
    @myriam5662 10 месяцев назад

    Very helpful, but the sound of your voice is too quiet in comparison of the high level of the music sounds in the background..😞

    • @MrSidverse
      @MrSidverse 10 месяцев назад

      Sorry for that…

  • @jsopiak1
    @jsopiak1 10 месяцев назад

    great video! Thank you!

    • @MrSidverse
      @MrSidverse 10 месяцев назад

      Glad you liked it!

  • @sudalaimuthu4018
    @sudalaimuthu4018 10 месяцев назад

    thanks...

    • @MrSidverse
      @MrSidverse 10 месяцев назад

      You're welcome!

  • @yimehav9165
    @yimehav9165 10 месяцев назад

    Do you have file please send

  • @bobbytables464
    @bobbytables464 11 месяцев назад

    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.

    • @MrSidverse
      @MrSidverse 11 месяцев назад

      Thanks for sharing this quick tip 😊

  • @ieltswritinglab-emmajacobs5021
    @ieltswritinglab-emmajacobs5021 11 месяцев назад

    Thanks, but difficult to learn from it without instructional dialogue- the music didn't add anything to the purpose of learning

    • @MrSidverse
      @MrSidverse 11 месяцев назад

      Thanks for sharing your feedback, would definitely try to add voice on upcoming videos.