Skip to main content

Hello Figma Community,


I am working on a mobile app interface and looking to simulate a specific interaction in my prototype. As depicted in the attached screenshot, the app allows users to drag their finger from one cell to another, with the chosen path being highlighted by a red line. The interaction starts at a cell marked with a solid dot (the starting point) and concludes at a cell marked with an empty dot (the current finger position).


I am striving to recreate this dynamic effect in Figma, where the path dynamically forms as the user drags their finger across the screen. Could anyone share insights or methods on how to best implement this?


Screenshot 2024-01-09 at 09.39.29


Specifically, I am interested in:



  • Techniques to make the path (red line) appear as the user drags across the cells.

  • Best practices for ensuring the prototype behaves responsively with this interaction.

  • Any plugins or third-party tools that could facilitate this effect.


Your guidance and suggestions would be greatly appreciated!


Thank you in advance for your help!

Hey @Parius! This is a great question. I checked in with some other Figma folks internally about this, since I only have a basic knowledge of smart animations of this type.


It doesn’t look like we have any native way to accomplish the robust type of interaction you’re looking to build at the moment. There are definitely some simpler interactions in a similar vein that can be built, but I’m certain that you’ve played around with them already.


As far as plugins go, I don’t know any directly that may bridge this need, but I’ll do some perusing in the community. If I find anything that may be useful, I’ll drop another comment here. Otherwise, I’ll leave this topic open for others to hop in with suggestions 😁

Reply


Terms & ConditionsCookie settings