Designverse
Designverse
  • Видео 61
  • Просмотров 229 200
Add loader to your Figma prototype | Figma tutorial
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! 💙
-------------------------------------------------------------------
Music I use: www.bensound.com
License code: AFQ35XIMPWADGZNS
Let's connect 🤝
Twitter: mrsidverse
Instagram: mrsidverse
#mrsid #uidesign #figma #figmatutorial #figmaprototype #webdesign #figmatips #uidesigner #figmauides...
Просмотров: 93

Видео

How to place a text in custom vector path | Figma Plugin
Просмотров 3972 месяца назад
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
Просмотров 5402 месяца назад
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
Просмотров 1382 месяца назад
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
Просмотров 2142 месяца назад
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
Просмотров 1022 месяца назад
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
Просмотров 5853 месяца назад
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
Просмотров 3174 месяца назад
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)
Просмотров 1854 месяца назад
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
Просмотров 2864 месяца назад
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
Просмотров 2074 месяца назад
Hello Everyone 👋 In this step-by-step Figma tutorial, we'll see how to create Social share button animation using Figma prototype. 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 to my channel for more UI/UX design tutorials. Don't forget to hit the not...
Gradient Blur on Figma
Просмотров 6486 месяцев назад
Hello Everyone 👋 In this step-by-step Figma tutorial, we'll see how to create Gradient blur in Figma, which you may have already seen on twitter. x.com/JustinDanks/status/1715426137931960812?s=20 To achieve this we will use a layer with background blur and will mask the same with another layer with gradient as fill. You don't need any prior experience with Figma or design to follow along with t...
How to create horizontal scroll in Figma
Просмотров 3896 месяцев назад
Hello Everyone 👋 In this step-by-step Figma tutorial, we'll see how to design horizontal scroll in Figma prototype. 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 to my channel for more UI/UX design tutorials. Don't forget to hit the notification bell ...
How to install Wordpress on localhost
Просмотров 316 месяцев назад
How to install Wordpress on localhost
How to create popup in Figma | Figma tutorial for beginners
Просмотров 1,2 тыс.7 месяцев назад
How to create popup in Figma | Figma tutorial for beginners
How to create toggle button in Figma | Figma prototype | MrSid
Просмотров 3307 месяцев назад
How to create toggle button in Figma | Figma prototype | MrSid
How to Create 3D elements in Figma Without Using Any Plugin | MrSid
Просмотров 2,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
Просмотров 2,4 тыс.Год назад
Animated text and slide transition in Figma | Figma Prototype Tutorial- Part 3
Interactive slider in Figma | Figma Prototype Tutorial- Part 2
Просмотров 696Год назад
Interactive slider in Figma | Figma Prototype Tutorial- Part 2
Create loader animation in Figma | Figma Prototype | MrSid
Просмотров 361Год назад
Create loader animation in Figma | Figma Prototype | MrSid
Create Checkbox in Figma | Figma Prototype | Figma tutorial for beginners | MrSid
Просмотров 8 тыс.Год назад
Create Checkbox in Figma | Figma Prototype | Figma tutorial for beginners | MrSid
Responsive design in Figma | Figma Auto Layout | UI Design Tutorial for beginners | MrSid
Просмотров 485Год назад
Responsive design in Figma | Figma Auto Layout | UI Design Tutorial for beginners | MrSid
Text Animation in Figma | Figma Prototype | UI Design Tutorial 2022 | MrSid
Просмотров 385Год назад
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
Просмотров 4,6 тыс.Год назад
How to import and place multiple images at once in Figma | Figma tutorial for beginners | MrSid
Tooltip in Figma | Figma tutorial for beginners | MrSid
Просмотров 2,7 тыс.2 года назад
Tooltip in Figma | Figma tutorial for beginners | MrSid
Create Animated Button in Figma | Figma tutorial for beginners | MrSid
Просмотров 3722 года назад
Create Animated Button in Figma | Figma tutorial for beginners | MrSid
Create Sidebar Menu in Figma | Figma tutorial for beginners | MrSid
Просмотров 67 тыс.2 года назад
Create Sidebar Menu in Figma | Figma tutorial for beginners | MrSid
How to create chart in Figma | Figma tutorial for beginners | MrSid
Просмотров 7502 года назад
How to create chart in Figma | Figma tutorial for beginners | MrSid
Create animated gradient background in Figma | Figma tutorial for beginners | MrSid
Просмотров 3,2 тыс.2 года назад
Create animated gradient background in Figma | Figma tutorial for beginners | MrSid
How to create patterns in Figma | Plugins in Figma | MrSid
Просмотров 10 тыс.2 года назад
How to create patterns in Figma | Plugins in Figma | MrSid

Комментарии

  • @tracywang3266
    @tracywang3266 6 дней назад

    love this!! thanks for sharing :))

  • @jz1244
    @jz1244 11 дней назад

    wtf theres no sound :(

  • @jerronickog9933
    @jerronickog9933 19 дней назад

    How to prototype then?

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

      I have already done the prototype in this video.

  • @user-nc7xc8ve2g
    @user-nc7xc8ve2g 21 день назад

    Amazing 🤩

  • @AbhishekSingh-rb2jj
    @AbhishekSingh-rb2jj 22 дня назад

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

    • @MrSidverse
      @MrSidverse 22 дня назад

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

    • @AbhishekSingh-rb2jj
      @AbhishekSingh-rb2jj 22 дня назад

      Thanks appreciated for your response!

  • @callmemk2460
    @callmemk2460 24 дня назад

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

    • @MrSidverse
      @MrSidverse 22 дня назад

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

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

    This animation help me thankyou!!!

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

      You’re welcome 😊

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

    Great video!! Thank you

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

    Thanks brooo

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

      You’re welcome 😊

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

    good tuts, please reduce background sound

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

      Sure, thanks for the feedback 🧡

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

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

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

      Hey, thanks for your feedback 😊

  • @MuhammadHaroon-bb8oz
    @MuhammadHaroon-bb8oz Месяц назад

    thanku 🥰

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

      You’re welcome 😇

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

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

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

    great video! Thank you!

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

      Glad you liked it!

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

    thanks...

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

    Do you have file please send

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

    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 2 месяца назад

      Thanks for sharing this quick tip 😊

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

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

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

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

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

    really appreciate your video to show how to create the patterns! thanks MrSid!

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

      I'm glad you found the video helpful for creating patterns. If you have any more questions or need further assistance, feel free to ask! 😊

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

      Only thing that I'm looking for is ability to change the border radius in my repetitive pattern. Do you have any solution for that?@@MrSidverse

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

    420 🚬

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

    Amazing 🎉

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

    🎉

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

    This plugin is so handy. I was looking over Google Images to get a PNG pattern with a transparent background (which they obviously weren't, just patterns on top of chessboards). Now I can create my own patterns.

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

      True. Now, there are so many plugins available to create such assets.

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

    🎉🎉

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

    Hello, Whenever i do it, so if the first number i write is 1 as a component then i keep getting 1 when i activate or hover over any other number and i don't know how to change it, so if you know what m,ight be the problem please tell me, thank you so much for your help

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

      Hello, I got your point, while creating this video it was not possible to do that on Figma. But now you can do the same using Figma variables. So when you create a component, you have to assign a variable for the text. So whenever you use the component, you will have an option to enter the text for that particular use case and the same text will be reflected on all the variants. I just tried this method and it worked so you can try the same. If you need any further help. Please text me on Instagram or Twitter.

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

    🎉🎉

  • @user-eg7de7ki7c
    @user-eg7de7ki7c 5 месяцев назад

    Hi , can we make this dynamically like with variables

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

      I didn’t get, can you elaborate please?

    • @user-eg7de7ki7c
      @user-eg7de7ki7c 5 месяцев назад

      @@MrSidverse ok here you are making the menu collapse with the prototype ,but i want to ask how can we make it using variables in figma bcz for coding purpose

  • @Mr.bnadem
    @Mr.bnadem 5 месяцев назад

    Thank you 🙌🏻

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

      You’re welcome 😇

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

    😝 P R O M O S M

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

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

    🎉🎉

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

    21 21

  • @user-is9xk5bs7g
    @user-is9xk5bs7g 6 месяцев назад

    thankyou

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

      You’re welcome 💙

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

    ✌🏻✌🏻🔥🔥

  • @user-xx7eo4rm3x
    @user-xx7eo4rm3x 7 месяцев назад

    I don't have the "on click option" don't know why

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

      Check if you have already added any click interaction on the same element. Let me know if you’re still having the issue.

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

    🔥🔥

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

    Awesome

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

    Thank you so much you helped me with my school project❤️❤️❤️❤️❤️

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

      Glad to know that it helped you 😊

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

    🔥🔥🔥

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

    My question is once the date is selected , how can you close the calendar so that the date you selected appears ? Like making a dinner reservation, how can you close the calendar so the 14 appears so I can move on to the next task ( i.e. , selecting a time , then number of people , etc. ) ? Or is that a developer’s job ? Thanks !

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

      Great question. Actually there were no logical flows and features on Figma at the time of recording this video. So it was not possible to continue with selection. Every screen needed to be designed manually. 👇 But now, you can achieve the same using Variable on Figma. You can do complicated things like Counter, If Else etc. Please learn about Figma Variable, there are endless possibility with that.

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

    What did you do there🤷🏼‍♀️

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

      I selected both the slice elements and exported them. The external screen after export was not recorded.

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

    Very good tutorial. Is there a way to limit the number of choices? For example, show 12 choices and you can only choose three or four?

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

      It was not possible at the time of recording this tutorial. But now, it can be done with the help of Figma variable.

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

    Hey there thanks for putting this together. ITs the simple things like this that help when building dynamic designs. kepp it up!

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

      Thankyou so much 🙏🏼

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

    I didn't see how this actually worked... doesn't look like you did anything? Next time try explaining the steps and what each step is doing. Thanks!

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

      Thanks! I’ll do that. Actually the exporting and image preview was not recorded due to some issues. If you select the slices and export it, the layer behind that will be exported.

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

    ❤️🌈🎉❤

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

    Sorry man. This video was a total waste of my time.

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

    This video is a huge waste of time folks.