TapTail
by Iaci
Real heatmaps for your prototypes in Figma
FreeFigma
Installs
87
Likes
30
Users
305
Views
884
Preview
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-petsTapTail 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): laci@taptail.comβ₯οΈ 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:Session details: Total time spent, time to first click , count of unique sessions and more.Click positions: Numbered circles on each frame show exactly where and in what order users tapped.Interaction density: How many taps landed on each screen, helping you spot hot and cold zones.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 useA very detailed, step-by-step guide on how to create a sharing link and a report:Creating a sharing link:Run the plugin.Click the blue 'Create' button.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.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).Click the blue 'Copy link [...]' button. Sharing link is now copied on your clipboard.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:Run the plugin in the same Figma document where the shared prototype is located (this is important βοΈ).You can check for new sessions with the 'Refresh' link on the top right corner.Once you have at least 1 session, you can create a report by pressing the 'Play' button.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).Report is generated on a new page in the document.βββββββββ³ License & TrialTapTail 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 & privacyTapTail 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 identityYour 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.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 linkYour 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/). Part of the prototype link is a string called the 'file key' (format: https://www.figma.com/proto//β¦) 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 eventsList 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):MOUSE_PRESS_OR_RELEASEPRESENTED_NODE_CHANGEDINITIAL_LOADNEW_STATEREQUEST_CLOSELOGIN_SCREEN_SHOWNPASSWORD_SCREEN_SHOWNThis 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 featuresIn no particular order, directly from my todo list:define expiration date+time;define simple instructions/ welcome screen;designated success screen (to enable missions);component variant change handling;data export in structured form (like JSON, CSV, β¦);ββββββββπͺ³ Found a bug? Got feedback? Have an idea for a feature?E-mail me at laci@taptail.comββββββββπ«Ά CreditsThe 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
More prototyping & animation plugins plugins
View allFigmotion
by L
Bringing motion to your Figma designs
406.8K 7.5K
LottieFiles - Discover, Create & Export Lottie animations
by LottieFiles
Animate Your Designs with Lottie Animations
373.4K 15.3K
Motion β Animate UI & Create Animations in Figma
Paidby Pavel Babkin
Animate UI in Figma. Export to video, GIF, SVG.
153.7K 5.7K
Jitter Β· Animation for Figma
by Jitter
Animate your Figma designs, export to video / GIF / Lottie, handoff animation specs to developers
116.1K 12.1K