TapTail

About this plugin

😌 No explicit sign-ups, logins or permissions are required to use TapTail. Just run the plugin!

Have you ever wanted to know if the Figma proto you shared was opened? To see where people clicked? To get insights how your proto works? Read on 👇

Use this example prototype created by Figma to try: https://www.figma.com/community/file/915647337333327091/figma-for-beginners-2020-petma-the-social-media-app-for-pets

TapTail brings real usability data into Figma with minimal effort. Install the plugin, create a prototype sharing link, share the link with your subjects and start collecting metrics. Once you collected enough data (at least one session), you will be able to generate a report directly in your prototype's Figma document (on a separate page).

💬 Feedback and questions (I read and reply to every e-mail): [email protected]

♥️ Found it useful? A 'Like' would mean the world to me! :)

————————

Tired of bouncing between Figma and external usability test tools? With TapTail, you can see metrics directly in Figma:

1. Session details: Total time spent, time to first click , count of unique sessions and more.
2. Click positions: Numbered circles on each frame show exactly where and in what order users tapped.
3. Interaction density: How many taps landed on each screen, helping you spot hot and cold zones.
4. Labels: Add a tag when copying links to know which channel drove each test.

Your original designs stay untouched: all results are exported on a separate page and overlaid on separate layers of your designs' clones.

————————

🛟 How to use

A very detailed, step-by-step guide on how to create a sharing link and a report:

Creating a sharing link:

1. Run the plugin.
2. Click the blue 'Create' button.
3. Provide a 'Name' and your Figma prototype's sharing URL (simply copy like you normally would and paste it here) then click the blue 'Create' button at the bottom. Once done, it will show you a list with the created item on top.
4. Click the item's link icon to copy the TapTail sharing link: it will ask if you'd like to track the link (this is optional but recommended: use only numbers and lowercase, english alphabet letters without spaces).
5. Click the blue 'Copy link [...]' button. Sharing link is now copied on your clipboard.
6. Share the link with your test subjects. When they open it in their browser, your prototype will appear like the original Figma prototype (as if you would shared from the figma.com link).

Report generation:

1. Run the plugin in the same Figma document where the shared prototype is located (this is important ❗️).
2. You can check for new sessions with the 'Refresh' link on the top right corner.
3. Once you have at least 1 session, you can create a report by pressing the 'Play' button.
4. A confirmation pop-up will appear first. If you confirm, report generation will start and a loading indicator will appear (normally a report generation takes a few seconds, but could be more depending on your machine's computational capacity and the volume of the collected data).
5. Report is generated on a new page in the document.

————————

⏳ License & Trial

TapTail is currently in open beta, therefore all features and functions are free for a limited period of time! Feedbacks, questions, bug reports: please and thank you 🤗

————————

🔐 Data handling & privacy

TapTail does NOT need access to your name, e-mail, files, comments, projects, components or styles to work. It only needs a very limited set of data to function:

Your identity

1. Your Figma user ID is stored, but only in a scrambled form called a hash. A hash is like a one-way fingerprint: can't turn it back into the real ID. Your ID is needed to assign your account the free license.
2. Other identity related data is only needed if you buy a license, then at least a billing name, billing address and an e-mail address is required.

Your prototype link

Your Figma prototype sharing URL (copied from Figma, provided by you manually) must be stored so your prototype can be served for your users via the TapTail sharing link (which looks like this: https://ux.taptail.com/s/<handle>). Part of the prototype link is a string called the 'file key' (format: https://www.figma.com/proto/<file key>/…) which identifies your Figma document. Since the prototype sharing URL is stored, the file key is also stored (as part of the URL). Read more about the implications here and here.

Prototype emitted events

List of Figma emitted events that are captured (with timestamp + data such as node ID, click and scroll cooridnates, etc. – for more info, click the event name below):

1. MOUSE_PRESS_OR_RELEASE
2. PRESENTED_NODE_CHANGED
3. INITIAL_LOAD
4. NEW_STATE
5. REQUEST_CLOSE
6. LOGIN_SCREEN_SHOWN
7. PASSWORD_SCREEN_SHOWN

This data is only used to build your in-Figma reports and are never shared with anyone else.

You can learn more about embeds in general here: Embed Figma Files.

————————

🚧 Roadmap & new features

In no particular order, directly from my todo list:

1. define expiration date+time;
2. define simple instructions/ welcome screen;
3. designated success screen (to enable missions);
4. component variant change handling;
5. data export in structured form (like JSON, CSV, …);
6. <your ideas maybe? get in touch!>

————————

🪳 Found a bug? Got feedback? Have an idea for a feature?

E-mail me at [email protected]!

I read and reply to every e-mail :)

————————

🫶 Credits

1. The prototype used for demo in the video: https://www.figma.com/community/file/915647337333327091/figma-for-beginners-2020-petma-the-social-media-app-for-pets