- 3
- 54 891
Double Glitch
Ukraine
Приєднався 8 кві 2023
The wildest design experiments
Creating parallax with variables — Figma tutorial
Get the free file here: www.figma.com/community/file/1374047143845728064/proto-parallax
In this tutorial we will create a real working parallax effect in Figma. Not faking it!
Chapters:
00:00 Intro
00:22 On the high level
00:38 Creating variables
02:53 Variable-based cursor tracker
08:05 Creating parallax layers
09:38 Setting parallax strength
Follow me here:
Twitter double__glitch
Music from Uppbeat:
uppbeat.io/track/enzalla/luminosa
uppbeat.io/track/vens-adams/adventure-is-calling
uppbeat.io/track/tatami/utopia
uppbeat.io/track/icosphere/highland
In this tutorial we will create a real working parallax effect in Figma. Not faking it!
Chapters:
00:00 Intro
00:22 On the high level
00:38 Creating variables
02:53 Variable-based cursor tracker
08:05 Creating parallax layers
09:38 Setting parallax strength
Follow me here:
Twitter double__glitch
Music from Uppbeat:
uppbeat.io/track/enzalla/luminosa
uppbeat.io/track/vens-adams/adventure-is-calling
uppbeat.io/track/tatami/utopia
uppbeat.io/track/icosphere/highland
Переглядів: 24 832
Відео
Cursor tracking without plugins - Figma tutorial
Переглядів 26 тис.Рік тому
Check the free file here: www.figma.com/community/file/1314335159485738721/cursor-tracking Join me on the journey of discovering the secrets of Figma! Today we'll create a fast and lightweight cursor position tracker using a bit unconventional techniques. Chapters: 0:00 Intro 0:30 Existing solutions 1:40 Scroll to 4:33 Some optimizations 6:04 The magic of components 8:32 Quick version of the tu...
Photoshop-level text effects in Figma!
Переглядів 4,1 тис.Рік тому
👇Get it here for FREE: doubleglitch.gumroad.com/l/figma-text-effects Who needs Photoshop and Illustrator now 😄 With those advanced text effects, add depth, dimension, and personality to your text without ever leaving Figma. It's really that easy - just pick the effect you need and type your text. And if you're feeling creative, go ahead and customize your colors and fonts too!
how do you get this good at figma
Amazing work. Thank you for sharing this. 👏
Thanks
Amazing video 🔥 Still figuring how it's work. Fantastic work man 👑
That's the real parallax effect I have seen so far in Figma. Super awesome 👍
I like your content and the way you explain it, Well done, man 👏
Yo that was kinda crazy to learn :D thanks!
Thank you so much ❤
You are a goddamn god and I cant express how much I appreciate you right now
wow this is pretty advanced stuff here...awesome job! thnx for sharing
Man deserve a subscribe❤❤❤❤❤
CANT DO THIS IN FIGMA FREE PLAN
I'm trying this out myself, but like others and I am running into the problem where you can't run 2 interactions simultaneously. I've downloaded the figma community file and trying to figure out what the "hack" is that you invented. So far, I can't figure it out. Can you help? This is positively amazing! best tutorials I've ever found for Figma prototyping an animation... oh! and I figured you would be the guy if any to figure out a few more hacks that would push figma limits... Do you have a solution for movement along a curve?
Instantly Subscribed..♥
Lovely.
Hey man, great stuff! Would love to see some tutorials about how to make custom font effects and all. Again thanks, keep up the good work.
auxilio jaja ahora el punto rosa que puse para seguir el cursor, se va en espejo! en la dirección completamente opuesta al cursor, no puedo de la risa pero ayuda!!
개쩐다
WHAT THE HACK?????????? :D OH WOW, YOU'RE SO AMAZING DDDDDDDDD:
You are Genius! and this logic is amazing!!
crazy stuff, what a king you are!
lol this is bananas.
Man thank you so much for the effort, i'm sure you heard about Framer, can you release a video about how we can do the same thing in Framer?
Amazing tutorial. Thank you!
give this guy 20% share in figma co., even figma owner did not know that this kind of artistic work can be in done his app......
me Again, not all UIUXs understand the instructions you make, they will comment that cursor X can work well, but when cursor Y is created, cursor not all uiux can find out where the problem is.. for me, X and Y won't work at the same time because in your video you made the X frame an autolayout, and in the figma file you didn't explain step by step I'm not trying to say you're wrong or anything, as a uiux I'm trying to find a way why this can't work and indeed I checked there was an error in the video you made. If others follow your video instructions then they will be just as confused as to why X and Y can't work at the same time. my answer is because in your video frame X you create autolayout
but, again. you r amazing , smart i just respect, not all uiux can't make animation and figure out the case
Thanks man. I was getting frustrated. Yes, as you wrote, no auto layout fix the problem
Bro it went through me head :D But its awesome, I need to rewatch it.
Mind Blowing Genius!! I would love to see scroll animation and transformation in Figma prototype...
Thanks, its definitely coming at some point, I have a working proof of concept
When you finished creating variables for X and Y, why didn't you show the results in the prototype? My response: The X cursor works well, but when you create a variable for the Y cursor, the X cursor does not work because the Y cursor covers the X cursor frame.
I understand why you feel so cautiously about that, there are a ton of fakes, but this is not one. You can just check the Figma Community file in the description and see for yourself, it's free. I'm using a hack I invented, it allows triggering several interactions simultaneously, so both X and Y work just fine
@@doubleglitch I have the same problem as @felix-ng1dl Any idea how to fix it? I can see it's working in your design but not in my case
Tedious. But, fun. Maybe?
Yea, a bit of both. Or you can just download the file in the description 🙂
that logic blew my mind
Super 🔥👍
How i con use it please
have you figured this out brother ?
@@cheapthrills6660 no
Amazing videos. I would be grateful if you could find a solution to create a true slider control that can be dragged to any position and released. A slider that displays a percentage value from 0 - 100%. As a bonus, it would great if that percentage value followed the draggable handle. Right now, On Drag is faking the drag by tweening between frames. This may not be currently possible with Figma, I don't know. Loving the content. Keep it up.
Ooh, I've actually tried it at some point. Unfortunately, I don't think it's possible due to how drag interactions work in Figma.
why not to use spline then ?
wow
awesome!! figma master 🎉
this is blackmagic 🔥 with this mouse direction-aware technique, maybe there's a way to make working rotative buttons ? ...
You mean 3D or perspective rotation? That's definitely not possible, at least now, there's no 3D rotation functionality
@@doubleglitch no, more like the potentiometers you can find on a MIDI keyboard, I've never been able to make them work properly because you need to make a circular movement to make it turn, in both ways. I looked over the internet but it seems to be a big challenge and I didn't find anyone who managed to do it.
Ah I see, no, still impossible, there are simply no variable for the layer rotation. You can kinda fake it using two states with different angles and Smart animate on drag, but it will snap anything in between to these two states only
This video is amazing! It's realy show your skills and knowledge of figma. Thank you very much for your work and I really hope you can make more of this in the future!
Superb! Loved each second of the video
When a developer plays figma as a video game
How to deliberately waste time
Well, there's the file, so you don't have to
@@doubleglitch Thanks!!!
Got the sub and like bud ! Would love the follow up of breaking down the illustration for parallax <3
BRAVOOOOO! you are fantastic
Great tutorial man, i love it. can u show how to generate the image for parallax effect?
On it!
can we implement this on framer? :)
Not without custom code I think
@@doubleglitch okey thanks!
At the first time is scary to learn
Not often I comment on videos, but I'm doing it here so more people can watch this one. Amazing tutorial, truly. Thank you for sharing your knowledge. Just subscribed to your channel.
That's very nice of you to say, thank you!
Now this is absolutely sweeeettttt. Never thought it'd be possible. But this right here? Genius!!!
Love your video bro, please keep creating more
Working on it 🫡