Cursor tracking without plugins - Figma tutorial

[@TheFunofIterating]

This is some next-level Figma hacking. I'm genuinely impressed!

[@StoriesMails]

That's awesome! Please continue making these kind of videos! Can't wait to see what's next. I would love to see more about Variables in prototyping.

[@doubleglitch]

Thanks! Variables will certainly be included in future videos, although prehaps in a bit unconventional fashion :)

[@vaanresvaanica]

Guy, that's awesome! I hope one day Figma will officially support cursor tracking and scroll trigger events, those will be game changers in prototype world.

[@doubleglitch]

Thanks, that's for sure. I have little something with scroll events, but it's fate depends on if Figma fixes a bug or not

[@nortusman]

@@doubleglitch if you have scroll event hack can you pls add video link?

[@bred.]

Please, more of these. This is incredible.

[@doubleglitch]

Thank you, I will definitely do!

[@RedditorsTale]

bro your gonna be famous in no time after this video!!!! You DESERVE more Attention bro... Also don't forget your ogs!!!! been a sub from a long time!!!!

[@doubleglitch]

Haha thanks!

[@radepent]

scroll to interaction was also very good..! we can utilise for smaller areas like volume,slide etc..woow

[@itsamegrabbins]

Unbelievably cool! Subscribed.

[@boycechi7972]

Amazing work, I can't even understand how Figma files work! cooool!

[@santiecam]

Fantastic work! Thanks for taking us through your whole exploration process 👏👏👏

[@doubleglitch]

My pleasure!

[@cjn2109]

Yo that was kinda crazy to learn :D thanks!

[@user-jg2nc6kl9hbv]

You're a genius!!👍Thank you for the informative video. I'd also like you to post a video about other effects in the figma community.😊

[@LearningPro-Lallu]

that logic blew my mind

[@scorpyix]

Thanks for documenting and sharing these techniques! ❤

[@doubleglitch]

Thank you for stopping by!

[@Tranquiltaps]

You are Genius! and this logic is amazing!!

[@MuhammadDawar-x3r]

Mind Blowing Genius!! I would love to see scroll animation and transformation in Figma prototype...

[@doubleglitch]

Thanks, its definitely coming at some point, I have a working proof of concept

[@snehasishsamanta8503]

Damn awesome video 🎉, you're underrated

[@sartrcrow]

Wow. It's mind-blowing

[@shamnadshah1622]

Man deserve a subscribe❤❤❤❤❤

[@sangmeshdeshmukh8813]

Instantly Subscribed..♥

[@royafarrokhzadeh5242]

Damnnn, its amazing, thanks a lot for sharing this

[@making-things]

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.

[@doubleglitch]

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.

[@anandsagar4622]

works perfectly..! but some scenarios, the other hovers or clicks are not working when we fix this cursor frame into top. Is there any ways to solve that?

[@doubleglitch]

Yeah, this is a known problem I forgot to mention. You can replace your hovers with mouse enter/mouse leave interactions, they have higher priority. Not sure why you mentioned clicks though, they should work fine

[@36.7hz]

I'm curious why increasing the width of the instances can reduce the cursor tracking interaction time

[@chromery]

Super cool!

[@与克莱德邦尼]

Genius！❤

[@haythamwali6642]

I really wanna see a tutorial for the free figma file in the descrp

[@palmwine_intellectual]

Lovely.

[@anaosorio7926]

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!!

[@DillonBarenbrugge]

Is it possible to have the cursor style change (switch to a different variant) when you hover over a specific element?

[@doubleglitch]

Unfortunately no, or at least I haven't found the solution. I'm working on another version where it will be possible.

[@muhammadkhanniazi7911]

Fucking hell man!!! Amazing!! Keep this content flowing.

[@unstablejamil]

I don't understand why we have to flip the horizontal triggers, cool video tho

[@unstablejamil]

no, actually I don't understand anything at all

[@sahilk.shinoda]

SUBBED!!!

[@tm7171]

I followed everything till the end, but it doesn't work. I just get a blank screen.

[@DillonBarenbrugge]

Same

[@doubleglitch]

Sorry to see that! I saw the previous version of the comment before you edited it (in the inbox) where you say you're stuck at 9:18, so if the problem stays, that's probably because you removed selection from the frame (Horizontal position), that's why you're unable to see its properties.

[@DillonBarenbrugge]

@@doubleglitch Got it! Had "Clip content" on Horizontal Position and Horizontal Triggers frames. Unselected on both and it works. Thanks!

[@jaivignesh9171]

But how does this work?

[@davidfitcher2953]

When a developer plays figma as a video game

[@francescarossi1002]

Can you please explain it better? It's difficult to follow you....

[@CodyWalton1979]

‼‼‼‼

[@slm7900]

Tutorial on the infinty please😂

[@doubleglitch]

You might wanna check my Twitter where I posted a tutorial with the similar blurred masking technique

[@TaskerTech]

All of this to avoid learning how to code. But great tutorial nonetheless =)

[@doubleglitch]

Haha thanks, I see your point but no, it's purpose is different. Figma is a prototyping tool to test out ideas before implementing them, so I thought it would be nice to expand it's possibilities to give designers more freedom in their creative process. So it doesn't replace actual coding in any way.

[@TaskerTech]

I agree with you and I love testing the limits just like you did, but it's so much work and time - that to be honest we don't have on our day to day work, for something that takes 10 minutes with code, I'm a seasoned product designer with 8 years of exp. and I came to the conclusion that sometimes to be able to really experiment I needed to learn how to code. Also framer allows you to mix code and design so you don't have all the burden of FE dev only the creative part I hope figma considers it it the near feature too. Good discussion tho keep up with the good work =) @@doubleglitch

[@Tschoii90]

What... the fuck.

[@Tschoii90]

So I've watched the video two times now and I still don't quite understand it. I can implement it now thanks to your tutorial at the end but hell do I not understand it. Haha.

[@doubleglitch]

Yea, It's a little bit mind-bending 🤓Probably because it's a product of my brain working at 4 AM

[@1NightInParisOfficial]

This technique will have most complete prototypes running slow... There has to be a better way...

[@doubleglitch]

Probably, but it's still much better than what we had before. Of course the best way would be native support

[@aatamixxx]

You rock! Waiting for more content... Do some crazy stuff with variables 🙏

[@doubleglitch]

Thanks! Got something in progress that might interest ya🙂

[@tolkokolom2781]

I know this guy!🫶

[@doubleglitch]

Well hello there 👋