Cursor tracking without plugins - Figma tutorial

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 68

  • @StoriesMails
    @StoriesMails Рік тому +9

    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
      @doubleglitch  Рік тому

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

  • @TheFunofIterating
    @TheFunofIterating Рік тому +13

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

  • @bred.
    @bred. Рік тому +2

    Please, more of these. This is incredible.

  • @RedditorsTale
    @RedditorsTale 9 місяців тому +1

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

  • @itsamegrabbins
    @itsamegrabbins 11 місяців тому +1

    Unbelievably cool! Subscribed.

  • @vaanresvaanica
    @vaanresvaanica Рік тому +1

    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
      @doubleglitch  Рік тому +1

      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
      @nortusman Рік тому

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

  • @santiecam
    @santiecam Рік тому +1

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

  • @LearningPro-Lallu
    @LearningPro-Lallu 6 місяців тому +1

    that logic blew my mind

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

    You are Genius! and this logic is amazing!!

  • @radepent
    @radepent Рік тому +1

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

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

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

  • @scorpyix
    @scorpyix Рік тому +1

    Thanks for documenting and sharing these techniques! ❤

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

    Amazing video 🔥 Still figuring how it's work. Fantastic work man 👑

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

    Man deserve a subscribe❤❤❤❤❤

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

    Yo that was kinda crazy to learn :D thanks!

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

    Damnnn, its amazing, thanks a lot for sharing this

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

    Wow. It's mind-blowing

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

    Damn awesome video 🎉, you're underrated

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

    Instantly Subscribed..♥

  • @user-jg2nc6kl9hbv
    @user-jg2nc6kl9hbv 11 місяців тому

    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.😊

  • @与克莱德邦尼
    @与克莱德邦尼 Рік тому

    Genius!❤

  • @MuhammadDawar-x3r
    @MuhammadDawar-x3r 6 місяців тому

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

    • @doubleglitch
      @doubleglitch  6 місяців тому +2

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

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

    Super cool!

  • @palmwine_intellectual
    @palmwine_intellectual 4 місяці тому

    Lovely.

  • @haythamwali6642
    @haythamwali6642 7 місяців тому

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

  • @hildeexart8668
    @hildeexart8668 5 днів тому

    Дякую!

  • @CodyWalton1979
    @CodyWalton1979 Рік тому +1

    ‼‼‼‼

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

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

  • @anandsagar4622
    @anandsagar4622 7 місяців тому

    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
      @doubleglitch  7 місяців тому +1

      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

  • @making-things
    @making-things 6 місяців тому

    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
      @doubleglitch  6 місяців тому

      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.

  • @muhammadkhanniazi7911
    @muhammadkhanniazi7911 10 місяців тому

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

  • @anaosorio7926
    @anaosorio7926 4 місяці тому

    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
    @DillonBarenbrugge Рік тому

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

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

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

  • @sahilk.shinoda
    @sahilk.shinoda 7 місяців тому

    SUBBED!!!

  • @unstablejamil
    @unstablejamil 10 місяців тому

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

    • @unstablejamil
      @unstablejamil 10 місяців тому

      no, actually I don't understand anything at all

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

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

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

      Same

    • @doubleglitch
      @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
      @DillonBarenbrugge Рік тому +1

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

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

    But how does this work?

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

    Tutorial on the infinty please😂

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

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

  • @davidfitcher2953
    @davidfitcher2953 7 місяців тому

    When a developer plays figma as a video game

  • @francescarossi1002
    @francescarossi1002 8 місяців тому +4

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

  • @TaskerTech
    @TaskerTech Рік тому +1

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

    • @doubleglitch
      @doubleglitch  Рік тому +2

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

  • @1NightInParisOfficial
    @1NightInParisOfficial Рік тому

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

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

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

  • @Tschoii90
    @Tschoii90 Рік тому +2

    What... the fuck.

    • @Tschoii90
      @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
      @doubleglitch  Рік тому +1

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

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

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

    • @doubleglitch
      @doubleglitch  Рік тому +1

      Thanks! Got something in progress that might interest ya🙂

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

    I know this guy!🫶