Cursors for prototyping

A very common way for me to share motion prototypes in an accessible way across my org is dropping it into a deck in Google Slides. I’ve found the best way to do this is to create a prototype (device: none), screen record that prototype using QuickTime, and then convert the .mov to a .gif using GIF Brewery 3. This process works pretty well.

The primary downside is that the only way to get a touch cursor in the prototype is to set the device to a mobile device, which then includes the device chrome. This is not ideal for screen recording and creating a .gif as it increases the file and image size.

A simple way of solving this would be to include cursor settings in top-level prototype settings that includes a choice of either a touch cursor or a pointer cursor (this is similar to how Principle does it: View->Toggle Preview Cursor Type). While this would solve for my specific use case, I also think it allows people to create more robust prototypes for touch devices that excludes device-specific chrome.

Also useful to note: this is tangentially related to being about to choose a text cursor when hover on text (see idea).

10 Likes

This is also related to allowing exporting of prototypes idea.

Heavy plus 1, we really missing this feature, because we are designing an app for users, who uses it from the tablet, which are not listed in a Figma device list.

I also thing it can be solved as an option for figma user to choose — which cursor to use for every figma file, having something by default and predefined.

Made a quick sketch of how it can look:

4 Likes

Plus one! It’s a highly important feature that we are sadly missing in Figma.

1 Like

We heavily needs this feature! When we screen record prototype that are not matching mobile devices sizes in Figma, they appear with a desktop cursor which is weird and confusing for clients.

1 Like

+1! I’m recording vids of prototypes for mobile but don’t want the mobile device to show, however, I do want the cursor that shows when a mobile device is selected. When setting to ‘custom size’ I’m stuck with the normal mouse cursor.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Basically, what I would like to see is: CSS “cursor:” attribute

Thanks for the feedback, All!

We’ll pass this onto our prototyping team for consideration.

Hi, are there any updates regarding this? I don’t understand why this hasn’t been implemented yet.

PS
For those in a bind when recording a prototype, I found a work around. Download the chrome extension “Cursor Helper” and use the “upload cursor” functionality to upload a transparent png with this graphic.

If the link isn’t accessible, it’s basically:

  • 56x56px frame
  • 46x46px circle: #D8DADA, 50%
  • Dropshadow: x=0, y=5, blur=5, spread=-2, #00000=25%

Once you’re done and it’s turned on, just get the prototype URL using the ‘share’ button and paste into chrome.

2 years have passed… and the only reaction “ill pass it to our development team”. For such a basic function.

1 Like

Seems like they are prioritizing automation and corporate needs (eliminating jobs) over designers’ requests to help GET work and apply for said jobs. When it comes to support and helping us with our portfolio’s – a HUGE part of our career – we’ve hardly seen any improvements in the last 5 years.