totopc
totopc
  • 118
  • 187 137
[Figma Basics] Continuous loader animation, for Onboaring or Loading Screens
A basic figma tutorial on how to utilize gif animations for loaders. Allowing it to be played the whole cycle on a loading screen.
🗃️Figma File
www.figma.com/file/kmU343nOT6wuEpIr2VjEig/One-page-loading-screen?node-id=0%3A1
🛠️Tools used
Figma
www.figma.com/
💬Join My Discord @
discord.gg/estaN4B
👉Follow me :
Dribble: dribbble.com/totopc
Behance: www.behance.net/totopc
Twitter: totopc
Переглядів: 154

Відео

(Figma Tutorial) Exploring Auto Layouts and Pop up Hovers for pricing cards
Переглядів 1722 роки тому
A basic figma tutorial for auto layouts using cards and interactive components 🗃️Figma File www.figma.com/file/jqNahZCISZZyLpm9eZNGDy/Pricing-Card-Auto-Layout?node-id=0:1 🛠️Tools used Figma www.figma.com/ 💬Join My Discord @ discord.gg/estaN4B 👉Follow me : Dribble: dribbble.com/totopc Behance: www.behance.net/totopc Twitter: totopc
[Interactive Components] Tab Group Switching Interaction
Переглядів 7873 роки тому
A basic figma animation tutorial in making tab group switch, changing tab content with interactive components 00:00 - Intro and Demo 00:48 - Explaining Elements 3:44 - Creating Components and Variants 6:11 - Animating / Prototyping 7:39 - Reviewing Animation 9:30- Thoughts and outro 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/MwBczhj6yZuUdHpjO7Itup/Tab-Content-/-...
[Interactive Components] Count / Quantity Animation, Increment and Decrement Number Interaction
Переглядів 14 тис.3 роки тому
A basic figma animation tutorial in making a quantity / counting form animation using interactive components 00:00 - Intro and Demo 00:23 - Explaining Elements 1:11 - Creating Components and Variants 4:13 - Animating / Prototyping 8:09 - Reviewing Animation 8:58- Thoughts and outro 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/hWaAeNfR6RtekIcV1AR6dz/Increment-and-D...
[Basic Figma Animation] Making Switch Button ( on and off ) using Interactive Component Variant
Переглядів 1343 роки тому
A basic figma animation tutorial in making mask to reveal icons in navigation. 00:00 - Intro and Demo 00:17 - Explaining Elements 00:34 - Creating Components and Variants 1:28 - Animating / Prototyping 2:18 - How to use and Some Corrections 3:17- Thoughts and outro 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/BDR5KEUu8ND6r1iYXwB3yE/Switch-Button?node-id=0:1 🛠️Tool...
[Basic Figma Animation] Reveal active navigation icon using stripe style masking effect
Переглядів 2383 роки тому
A basic figma animation tutorial in making mask to reveal icons in navigation. 00:00 - Intro and Demo 00:33 - Explaining Elements 00:52 - Creating Mask and masking elements 03:52 - Creating the Frames for Animation 12:18 - Explaining the Animation 14:08 - Animating and corrections 19:03 - Final Animations and reviewing the animation 19:55 - Outro 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Fi...
[Figma Basic Animations] Ticket / Coupon Tear to Redeem Animation in Figma
Переглядів 1,1 тис.3 роки тому
A basic figma animation tutorial in an on drag animation for a tearing animation in figma for coupons and tickets 00:00 - Intro and Demo 00:38 - Placing Elements 08:11 - Discussing the Animation Idea 10:03 - Animation and Discussions 11:05 - Animation Final and Review 11:25 - Outro 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/mxzO2OzEWmnyM0sVya1AXd/Coupon-Tear-Ani...
[Basic Figma Animation] Simple Card Flip Animation in Figma
Переглядів 7 тис.3 роки тому
A basic figma animation tutorial in creating card flip animations. 00:00 - Intro and Demo 00:22 - Designing Cards 02:07 - Animation and Discussions 05:44 - Review from the start 07:20 - Hi-Fidelity Sample for app screen concept 09:19 - Outro 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/T4U1d1koEifdUjTpLSA6KR/Card-Flip-Animation?node-id=0:1 🛠️Tools used Figma www.f...
Using Gifs in Figma for Real Life Product Demo / Feature Request
Переглядів 6413 роки тому
Here I show how to use figma feature of gifs in prototype mode to spice up your demos 📹Catch Me Streaming @: www.twitch.tv/totopc 🛠️Tools used Figma www.figma.com/ 💬Join My Discord @ discord.gg/estaN4B 👉Follow me : Dribble: dribbble.com/totopc Behance: www.behance.net/totopc Twitter: totopc
[Basic Figma Animation] Mouse Hover Interaction using Overlays in Figma
Переглядів 2 тис.3 роки тому
A basic figma animation tutorial in creating a Mouse Hover Interaction using Overlays in Figma 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/hbNwVGrgUoIiWtWl8DH3x4/Overlay-Hover-Interactions?node-id=0:1 🛠️Tools used Figma www.figma.com/ 💬Join My Discord @ discord.gg/estaN4B 👉Follow me : Dribble: dribbble.com/totopc Behance: www.behance.net/totopc Twitter: twitter.c...
[Basic Figma Animation] UI Card Expansion, more info animation for desktop or mobile
Переглядів 7 тис.3 роки тому
A basic figma animation tutorial in creating a UI interaction of cards expanding. 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/YqMwIvDbrKBFvuUkylfgAp/Card-Expansion?node-id=0:1 🛠️Tools used Figma www.figma.com/ 🖌️Figma Resources www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/ 💬Join My Discord @ discord.gg/estaN4B 👉Follow me : Dribble: dribbbl...
[Basic Figma Animation] Deleting contacts or list using drag / swipe to right to reveal more options
Переглядів 1,4 тис.3 роки тому
A basic figma animation tutorial in creating a mobile interaction of drag to right to show more options and deleting the item. 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/lFoO5ZfQbesfmcAGnyHdbE/Delete-Contact?node-id=0:1 🛠️Tools used Figma www.figma.com/ 🖌️Figma Resources www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/ 💬Join My Discord @ dis...
[Figma Basic Animations] Turning hamburger icon into and x or close icon
Переглядів 2,2 тис.3 роки тому
A basic figma animation tutorial in creating a simple mobile menu and animating the hamburger icon to an x icon 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/eRvRPzNjmz1IHxZnd8tlXS/Hamburger-Menu?node-id=0:1 🛠️Tools used Figma www.figma.com/ 🖌️Figma Resources www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/ 💬Join My Discord @ discord.gg/estaN4B...
(Figma Tutorial) From Restaurant Menu to Desktop Website design Pizza landing page + ordering flow.
Переглядів 2,1 тис.3 роки тому
An overview of creating a Desktop Pizzeria / Pizza store simple landing page and ordering flow 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/7LGI50nYofWA6w6o38DKyv/Pizzaria-Desktop-Design?node-id=0:1 🛠️Tools used Figma www.figma.com/ 🖌️Icons From thenounproject.com/ 💬Join My Discord @ discord.gg/estaN4B 👉Follow me : Dribble: dribbble.com/totopc Behance: www.behance...
[Figma Tips] Making Pie / Circle / Arc / Progress graphs in figma without using strokes only shapes.
Переглядів 3,9 тис.3 роки тому
A tutorial on how to do Non destructive Pie / Circle / Arc / Progress graphs in Figma 📹Catch Me Streaming @: www.twitch.tv/totopc 🗃️Figma File www.figma.com/file/g8U7M1nxQuopwpBTr2dTKU/Circle-Graphs?node-id=0:1 🛠️Tools used Figma www.figma.com/ 💬Join My Discord @ discord.gg/estaN4B 👉Follow me : Dribble: dribbble.com/totopc Behance: www.behance.net/totopc Twitter: totopc
(Figma Tutorial) Credit Card Manager Mobile Interface Concept
Переглядів 1093 роки тому
(Figma Tutorial) Credit Card Manager Mobile Interface Concept
SPEEDRUN STRATS: One Card to kill the Final Boss in RougueBook
Переглядів 273 роки тому
SPEEDRUN STRATS: One Card to kill the Final Boss in RougueBook
[Beginner UI Design] Making a Keyboard Market E-Commerce App Tutorial in Figma
Переглядів 413 роки тому
[Beginner UI Design] Making a Keyboard Market E-Commerce App Tutorial in Figma
[Beginner UI Design] Making a Mobile Chat App Tutorial in Figma, Step by step.. Not Speed up..
Переглядів 1,4 тис.3 роки тому
[Beginner UI Design] Making a Mobile Chat App Tutorial in Figma, Step by step.. Not Speed up..
Designing a Random exercise generator App in Figma..
Переглядів 1323 роки тому
Designing a Random exercise generator App in Figma..
Master Studies: Charles Dana Gibson - Timelapse Drawing
Переглядів 553 роки тому
Master Studies: Charles Dana Gibson - Timelapse Drawing
Make smooth Gif Animation smoother with DAIN-AI Magic..
Переглядів 1,1 тис.3 роки тому
Make smooth Gif Animation smoother with DAIN-AI Magic..
(Quick Tips) Quickly Copy Gradient and images into other shapes in figma. A HIDDEN FEATURE???
Переглядів 10 тис.3 роки тому
(Quick Tips) Quickly Copy Gradient and images into other shapes in figma. A HIDDEN FEATURE???
8 - Bit Alarm App from concept to design to animation in figma
Переглядів 1,5 тис.3 роки тому
8 - Bit Alarm App from concept to design to animation in figma
I've recreated all UI Screens shown in Material You Presentation in Google I/O for Android 12
Переглядів 533 роки тому
I've recreated all UI Screens shown in Material You Presentation in Google I/O for Android 12
Process of making animated cat animation for discord server
Переглядів 203 роки тому
Process of making animated cat animation for discord server
Figma Animation Android 12 Homescreen breakdown using Material You, shown in Google I/O Conference.
Переглядів 1833 роки тому
Figma Animation Android 12 Homescreen breakdown using Material You, shown in Google I/O Conference.
Design tips for Converting Web Dashboard to a Mobile Design that doesn't hurt, the app..
Переглядів 1893 роки тому
Design tips for Converting Web Dashboard to a Mobile Design that doesn't hurt, the app..
Carries Has cool Items but level one HARDMORE TFT, TOP 1? Dragon Slayer Skirmisher Jax Kennen Carry
Переглядів 33 роки тому
Carries Has cool Items but level one HARDMORE TFT, TOP 1? Dragon Slayer Skirmisher Jax Kennen Carry
EZ Tutorial: Display song list animation in Figma, morphing buttons and mask using rounded corners.
Переглядів 1453 роки тому
EZ Tutorial: Display song list animation in Figma, morphing buttons and mask using rounded corners.

КОМЕНТАРІ

  • @afronet
    @afronet 16 днів тому

    you are life saver man

  • @eq656
    @eq656 Місяць тому

    Thank you so much

  • @habibrahal
    @habibrahal Місяць тому

    Thank you!

  • @uibyanil
    @uibyanil 2 місяці тому

    Thank you to making this stuff... i was stuck that how i work like this. but seeing your video... my problem solved. Thank you mam👍

  • @puro0324
    @puro0324 2 місяці тому

    Okay, so I can confirm it works on switch. October-2024

    • @julyconkxd-l6792
      @julyconkxd-l6792 2 місяці тому

      HOW

    • @julyconkxd-l6792
      @julyconkxd-l6792 2 місяці тому

      i run and it doesnt work

    • @puro0324
      @puro0324 2 місяці тому

      @@julyconkxd-l6792 Okay, so here's the thing; You have to collect it WHILE the material is going to combine with the other. My only hint is; Pay attention when the material pops out the second time, watch how it goes up a little and then fall, while it's falling, run (I was on top of the furnace, a little away from it, but enough to interact) to it while it's still falling as it will combine after one or more miliseconds.

    • @puro0324
      @puro0324 2 місяці тому

      It is tricky, I know, we know, but I did it, and so did others. It takes a while to actually catch up to the timing, I took around 40-50 minutes to reach a million woods. You really need to remember the amount you had before doing it, or so you'll not know if it worked or not.

  • @kupcakez
    @kupcakez 3 місяці тому

    Super helpful! Thank you for the tutorial! :)

  • @36.7hz
    @36.7hz 5 місяців тому

    Thank you, very helpful

  • @Avatars99
    @Avatars99 5 місяців тому

    does it still work cuz i am going to try

  • @FierceDoomALT
    @FierceDoomALT 6 місяців тому

    Guys if you are looking for an answer, It works perfectly on PC, I'm not sure about other platforms but PC I am sure.

  • @zhangliwei6952
    @zhangliwei6952 8 місяців тому

    what is the black section?

  • @darksaber230
    @darksaber230 9 місяців тому

    Works on ps5 March 18th 2024.

  • @bolkhayegakya
    @bolkhayegakya Рік тому

    I was looking for that feature. thanks

  • @AndyWarhol-g4t
    @AndyWarhol-g4t Рік тому

    Excellent!

  • @ToXIK-RM-
    @ToXIK-RM- Рік тому

    Don’t work scam

    • @gues_is_mexican
      @gues_is_mexican Місяць тому

      You are bad at the game then it works you just have to do it right

  • @ZohaibJafri-u8y
    @ZohaibJafri-u8y Рік тому

    Thank you so much for posting this!! It was driving me nuts haha!

  • @Jennifer-fk5xi
    @Jennifer-fk5xi Рік тому

    Wow this is amazing, thank you! Very counter intuitive, but works perfect!

  • @DenisaNastase
    @DenisaNastase Рік тому

    Wow, it worked! Appreciated !

  • @Zanny1-i7f
    @Zanny1-i7f Рік тому

    Works BUT ITS HARDDDDD

  • @GangstaDecipleXSX
    @GangstaDecipleXSX Рік тому

    Still works as of Oct 1st 2023 Series X. Pain in the ass but works🎉

  • @ViniciusLira-x6j
    @ViniciusLira-x6j Рік тому

    THANKS

  • @angieme7968
    @angieme7968 Рік тому

    Don't work

  • @sarah.wright
    @sarah.wright Рік тому

    Cool video, I only have the problem that I can use 'on tap' (in your video shown as 'click') only once in an interaction. This means the animation can count up but not back down again. Do you have a tip for me on how I can make this work? Thanks+

  • @pott_frostritter1446
    @pott_frostritter1446 Рік тому

    62 logs 😢

  • @anbukkarasivijayanandhan
    @anbukkarasivijayanandhan Рік тому

    Very useful and easy to follow, Thank you!

  • @Krabgt
    @Krabgt Рік тому

    Nvm

  • @Krabgt
    @Krabgt Рік тому

    Patched

  • @vladzf9655
    @vladzf9655 Рік тому

    I did it as of july 31st 2023 on my series s but it is finicky as hell, I had to try for a couple of minutes but anything is better than leaving it idle for hours

  • @AngkuraAungkuramas
    @AngkuraAungkuramas Рік тому

    cool 😎

  • @BrowniesOfficiel
    @BrowniesOfficiel Рік тому

    How can we do cards expanding with elements under ? Imagine if my card is on the middle of the page and i have things under that i don't want to be cover. It is possible ?

    • @totopcYT
      @totopcYT Рік тому

      Yes, so you have your cards, then have 3 of them stacked with auto layout, with auto layout set into hug contents it will adjust accordingly aslong as they are a part of the auto layout

  • @sd73638
    @sd73638 Рік тому

    😭 it didn't work

  • @winnersknowhow
    @winnersknowhow Рік тому

    Thanks a lot!! You're the one who resolve this issue!!

  • @ripplesr5655
    @ripplesr5655 Рік тому

    Thank you so much! The easiest way to do it. Came across bunch of articles that do no shit. Thank you for this.

  • @FelipeGames08
    @FelipeGames08 Рік тому

    YOO IT WORKSS

  • @Chantellabellaaa
    @Chantellabellaaa Рік тому

    I searched everywhere on how to do this exact animation - THANK YOU! 🙌

  • @minnie2nocky
    @minnie2nocky Рік тому

    This is a live safer !

  • @Smile1oasis
    @Smile1oasis Рік тому

    Thank you!

  • @justinhendrickson9784
    @justinhendrickson9784 Рік тому

    How'd you get the active screen on the right for the componenet?????? Where it shows the live interaction on the right?

    • @totopcYT
      @totopcYT Рік тому

      it's just two screens separate one is the live prototype view the other on is the workboard/artboard

  • @brianring5836
    @brianring5836 Рік тому

    Thank you so much!!!!!!

  • @JuanTheGardener
    @JuanTheGardener Рік тому

    It is nice, but just felt that yo uwasted the first 6 minutes

    • @totopcYT
      @totopcYT Рік тому

      Agreed, i might condense it to just the prototyping stage and just get into the point.

    • @JuanTheGardener
      @JuanTheGardener Рік тому

      @@totopcYT sounded mean, but was constructive haha! you're good

  • @djyoyle
    @djyoyle 2 роки тому

    I kept swapping sides and going slow then fast and it works really well

  • @AshleyBradford
    @AshleyBradford 2 роки тому

    Thanks so much, I really appreciate your sharing this! I looked at several articles before finding this, and yours is the only thing that gave a solution that worked.

  • @Inferencer
    @Inferencer 2 роки тому

    Greay video, is it possible to make it look live? like the texting is happening in real time

    • @totopcYT
      @totopcYT 2 роки тому

      Yes you can do that it's by using gif or component looping animation, so the animation is just 3 dots wiggling up and down.. it would be much harder if it's per letter animation like the person is typing word per word

  • @tauriurbanik5509
    @tauriurbanik5509 2 роки тому

    Nice. Keep the vids coming.

  • @Jay2Trappy
    @Jay2Trappy 2 роки тому

    minally got it working

  • @cryptomane1
    @cryptomane1 2 роки тому

    thanks! what is the name for font app, in which you see how font look like?

    • @totopcYT
      @totopcYT 2 роки тому

      I use fontbase it's free

  • @imtheusmankhan
    @imtheusmankhan 2 роки тому

    Thankyou so much for this. I was struggling to find a way to copy gradient easily and this video helped me a lot!

    • @totopcYT
      @totopcYT 2 роки тому

      Glad it helped!

  • @s3.396
    @s3.396 2 роки тому

    This is a great tutorial one question tho how can i hide all the variants so its not on display whilst keeping the functionality working?

    • @totopcYT
      @totopcYT 2 роки тому

      wdym by this? you can create mask to hard a component element or just the hide/eye button for each component element. If i missed the mark, pls do elaborate

  • @clydelewis1315
    @clydelewis1315 2 роки тому

    I'm using this to dupe boss summon items meaning once all the boss items are done crafting and I kill all the bosses I'll have 1400+ spirit orbs and I'll be doing 2000+ damage

    • @Carno66466
      @Carno66466 Рік тому

      Use wood and then get over a trillion and sell it

  • @BlueV205
    @BlueV205 2 роки тому

    Thank you for this tutorial, really helpful for my final project

    • @totopcYT
      @totopcYT 2 роки тому

      Great to hear that!

  • @TubOfSun
    @TubOfSun 2 роки тому

    YOU ARE A LEGEND THIS IS EXACTLY WHAT I NEEDED!!!!