- 118
- 187 137
totopc
Philippines
Приєднався 3 жов 2011
UX, UI, Art and Tech
[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
🗃️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.
you are life saver man
Thank you so much
Thank you!
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👍
Okay, so I can confirm it works on switch. October-2024
HOW
i run and it doesnt work
@@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.
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.
Super helpful! Thank you for the tutorial! :)
Thank you, very helpful
does it still work cuz i am going to try
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.
what is the black section?
Works on ps5 March 18th 2024.
I was looking for that feature. thanks
Excellent!
Don’t work scam
You are bad at the game then it works you just have to do it right
Thank you so much for posting this!! It was driving me nuts haha!
Wow this is amazing, thank you! Very counter intuitive, but works perfect!
Wow, it worked! Appreciated !
Works BUT ITS HARDDDDD
Still works as of Oct 1st 2023 Series X. Pain in the ass but works🎉
THANKS
Don't work
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+
62 logs 😢
Very useful and easy to follow, Thank you!
Nvm
Patched
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
cool 😎
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 ?
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
😭 it didn't work
Thanks a lot!! You're the one who resolve this issue!!
Thank you so much! The easiest way to do it. Came across bunch of articles that do no shit. Thank you for this.
YOO IT WORKSS
I searched everywhere on how to do this exact animation - THANK YOU! 🙌
This is a live safer !
Glad I could help
Thank you!
How'd you get the active screen on the right for the componenet?????? Where it shows the live interaction on the right?
it's just two screens separate one is the live prototype view the other on is the workboard/artboard
Thank you so much!!!!!!
It is nice, but just felt that yo uwasted the first 6 minutes
Agreed, i might condense it to just the prototyping stage and just get into the point.
@@totopcYT sounded mean, but was constructive haha! you're good
I kept swapping sides and going slow then fast and it works really well
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.
Greay video, is it possible to make it look live? like the texting is happening in real time
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
Nice. Keep the vids coming.
minally got it working
thanks! what is the name for font app, in which you see how font look like?
I use fontbase it's free
Thankyou so much for this. I was struggling to find a way to copy gradient easily and this video helped me a lot!
Glad it helped!
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?
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
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
Use wood and then get over a trillion and sell it
Thank you for this tutorial, really helpful for my final project
Great to hear that!
YOU ARE A LEGEND THIS IS EXACTLY WHAT I NEEDED!!!!