Spinning Carousel Animation in Figma

Поделиться
HTML-код
  • Опубликовано: 11 ноя 2022
  • Make a spinning carousel animation with a story pop-up in Figma with this easy tutorial for beginners. This is a great project to show off your animation skills and have some fun in Figma. If you have any questions feel free to drop a comment below!
    👇Get the Studio Pass
    bit.ly/49COJNQ
    👇 Try Figma for FREE
    bit.ly/figfree
    👇Download Figma For Pros
    bit.ly/fig-pro
    🚀 Subscribe for more Tutorials
    bit.ly/3T22qMZ
    📥 Buy Design Files & Merch
    bit.ly/3WuUl6D
    🌎 Find Me on Social Media
    Tiktok: bit.ly/3U7TdnQ
    Instagam: bit.ly/3fF9hyf
    Facebook: bit.ly/3ML5axg
  • ХоббиХобби

Комментарии • 86

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

    Thank you so much. your tutorials are SUPER amazing. I was able to replicate this but with different colours and pictures.

  • @user-hu4pz3ut2i
    @user-hu4pz3ut2i Год назад +2

    crazy skills,great mate,keep up the good work.

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

    Thank you so much for this tutorial, super helpful!

  • @DesignerWorld
    @DesignerWorld Год назад +1

    Thank you man love it

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

    Thank you so much for this

  • @praveenremix6421
    @praveenremix6421 Год назад +2

    your expertise on figma is next level subscribed. plz make some videos on about explaining things like tweaks

    • @shmeltstudios
      @shmeltstudios  Год назад

      I appreciate it! Thank you, and I’ll look into it!

  • @4988raja
    @4988raja Год назад +2

    Subscribed! This is complicated but made easy with your tutorial 🎉

  • @ashutoshramteke8353
    @ashutoshramteke8353 10 месяцев назад +1

    Woww..I learned so much from this.. specially spinner part #Amazing 🔥🔥

  • @newfoundland1956
    @newfoundland1956 11 месяцев назад +2

    WOW just what I was looking for . I got to add this to my assignment

  • @ellelo479
    @ellelo479 Год назад

    Thanks for the video!
    It's really helpful and learn with joy!

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

    Thank you so much :)

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

    Super helpful! Do you have a playlist of videos to help beginners get the hang of Figma?

  • @pneumace
    @pneumace Год назад +1

    so helpful

  • @cjn2109
    @cjn2109 Год назад

    Keep on going this chanell ! awesooome tutorials.

  • @rayhanpatwary6393
    @rayhanpatwary6393 Год назад +1

    WOW! Thank you, Thank you so much.. great one!

  • @NamVo-ou7nx
    @NamVo-ou7nx Год назад +1

    Subscribed! This is great!!!

  • @shaharasta
    @shaharasta Год назад +2

    Thanks for this!
    Can you make a tutorial of an endless slider that keeping his movement ? Like a logos bar...

    • @shmeltstudios
      @shmeltstudios  Год назад

      Oh like a ticker? I can look in to it 👍🏼

    • @helen-matthews-usa
      @helen-matthews-usa 5 месяцев назад

      @@shmeltstudios what can you do to change all the content above the spinner every time the spinner turns. I mean - when the spinner turns, the picture that is in the centre of the page changes too. I made three artboards following your video tutorial but can't understand how do you change all the rest of the content? Thank you...

  • @SomeDanGoodVids
    @SomeDanGoodVids Год назад +5

    Today I learned you really appreciate Auto Layout lmao.

    • @shmeltstudios
      @shmeltstudios  Год назад

      Haha when I watched the video back I was like damn! I said that a lot lol 😂

  • @DGMauro
    @DGMauro Год назад +1

    Liked, subscribed and amazed.

  • @gufranlazuardi
    @gufranlazuardi Год назад

    Hello Im from Indonesia, I follow you from tiktok until here, so love watching your video, keep make a beauty content bro 🙏🏼

  • @sammdesigns
    @sammdesigns Год назад

    nice exploration with the spinner buddy....big ups..
    😅👍

  • @pujadhakan2400
    @pujadhakan2400 Год назад +1

    I loved this tutorial! Thank you. Can you advise me how you you use the android/ios UI guidelines to pick the icon sizes in figma? Because in those guidelines they mention the sized in pixels or pts, but in Figma we use width and height. I am super confused on how I can convert that because I can't find in on google either. Please advice 🙏

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

    Worth😇

  • @lkplayer4363
    @lkplayer4363 Год назад +1

    Você poderia ter colocado a parte rápida pra ser lenta pq fico difícil entender aparte de fazer o carrossel 🎠

  • @nayanbarman184
    @nayanbarman184 Год назад

    Very interesting video

  • @benmajkut618
    @benmajkut618 Год назад +1

    How are people so good at figma

  • @nomanzahid4198
    @nomanzahid4198 Год назад

    wow soo cool man

  • @thiagosoares5052
    @thiagosoares5052 Год назад +1

    Top demais

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

    How to change the image or text while spinning?
    I mean in this user need to click on the plus.
    While clicking the plus icon. How can we do that. When spin the wheel click on that specific image and just right above image description popup.

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

    thank you for this incredible tutorial. i have a problem, when i click on menu images, let's say the right one each time to test each menu slot, at one point it doesn't do the naimation of shifting one notch to the left but makes the whole opposite turn... as if it doesn't know which way to turn... i don't know if it's clear, but if you have the answer to this problem i'm a taker :) thank you very much.

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

      i'va made à 6 slots menu...

  • @yvesnathan6966
    @yvesnathan6966 Год назад +1

    how would you take your Figma design and publish them as a real website. do you use webflow or framer?

    • @shmeltstudios
      @shmeltstudios  Год назад +1

      I have been playing around with both framer is more like Figma to me but if you know how to set up your files in Figma Webflow can also be a great solution

  • @adied7725
    @adied7725 Год назад

    Hi, could you share the figma file?, please, I'm new to figma and would like to play around with it, 😊 thanks

  • @sitifatimatulmunawaroh9078
    @sitifatimatulmunawaroh9078 Год назад +2

    hiii, I interested by ur content. but for remake this content esp for little shape or little piece, I was confused. can u tutor for ctrl e, x, and v?

    • @shmeltstudios
      @shmeltstudios  Год назад

      Ctrl E= Flaten vector, Ctrl X= Cut, Ctrl V= paste. Hope this helps 👍🏼

  • @sanaakhan9695
    @sanaakhan9695 Год назад +1

    Ur tutorials impressive but plz make a tutorial about linking elements for animation

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

    how I implement in website using html css javascript
    can u have a solution?

  • @neoshung3656
    @neoshung3656 Год назад +4

    How did you know every command but not shift + arrow to move 10 pixels 🤣 joke aside, I learned so much in this video. Thanks a lot.

  • @user-rb3pn4py6l
    @user-rb3pn4py6l 3 месяца назад

    I have an issue.. when im clicking on all vector point and cut theme the whole element didn't got selected.. I've tried it many times

  • @hasiburrahmantouhid9362
    @hasiburrahmantouhid9362 10 месяцев назад +1

    This is great sir. But How can I get different stories by clicking different images in the sloiders... It shows only one story. But I want to add more story videos of those places shown in the slider. How can I don that sir?

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

      With the new local variables in figma Im sure you can now tigger the stories based on the component names. This would be a good idea for me to make a new video on so keep a look out.

  • @SofiaSamsung-hh1sn
    @SofiaSamsung-hh1sn 7 месяцев назад

    عالی

  • @avijeetswain7101
    @avijeetswain7101 Год назад

    How to create this animation in Android studio please help 🥺

  • @AditiSingh-me7qb
    @AditiSingh-me7qb 11 месяцев назад

    i have a problem. my animation works but when I added it to the phone screen frame it didn't work

  • @eramanpreetsingh8435
    @eramanpreetsingh8435 Год назад +1

    Good Design i do this spinner but i dont reverss spin tell mee how prototype

    • @shmeltstudios
      @shmeltstudios  Год назад +1

      As long as you prototype each of the spinners it should spin which ever way you want.

    • @eramanpreetsingh8435
      @eramanpreetsingh8435 Год назад

      @@shmeltstudios thank

  • @abdullahasim4955
    @abdullahasim4955 Год назад

    Waiting for advance animations

  • @MrJoeydonato
    @MrJoeydonato Год назад +1

    I'd pay for this source file!

    • @shmeltstudios
      @shmeltstudios  Год назад

      I’ll have to clean up the file and I’ll throw it into Etsy 👍🏼

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

    Great tut, but I was scared a lot with "AUTO LAYOUT!!!" on 7:17

  • @user-yu1jf8ck2i
    @user-yu1jf8ck2i 11 месяцев назад

    can i have source code ?pls

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

    How do i develop this shit, my designer gave me this ..m struggling to develop it

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

    Why would my "Control E" not be working?????

  • @safakorti3767
    @safakorti3767 Год назад

    This tutorial is great but I spent hours trying to figure out how you put each shape on its own all in vain although I followed exactly the steps on the video

    • @murdockmatt7479
      @murdockmatt7479 Год назад

      Same... Are you doing this on windows on Figma application? I guess that might be an issue

    • @Sigi94
      @Sigi94 11 месяцев назад +2

      ctrl x then double click outside subtract area(between the frame and the subtract) and then ctrl v

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

      @@Sigi94 You are genius

  • @user-xq9gr4if9f
    @user-xq9gr4if9f 9 месяцев назад

    very good work but to fast for students.

  • @daria668
    @daria668 Год назад +1

    control e didnt work for me?

    • @JedHurricane
      @JedHurricane Год назад

      You still have to double click after ctrl E

  • @m.zavatskiy
    @m.zavatskiy 11 месяцев назад

    Jumpscare's, man!

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

    Prototype was speedup not defined properly how/why to connect did you connect all of the photos of frames with each other , It was speedup . Really didn't understand you must have explained it properly .

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

    i m sorry bro..i am bit slow..

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

    tf is ctrl e mean???

  • @asapaurel7459
    @asapaurel7459 Год назад +3

    Slow bra, slow ... tell all the steps in the next video please ... I'm not able to follow all of your steps bra...

    • @neelamgawande111
      @neelamgawande111 Год назад +1

      yeah right ...he is going too fast

    • @etoographics
      @etoographics Год назад

      not really too slow just that you need to have learn some fundamental before watching this.