Tracking Prototype Analytics Using Figma Variables

so today we have a real interesting variables lesson where we're going to look at how to use figma variables and conditional logic in order to track individual user analytics within a figma prototype so we're going to look at how to track session time of a particular page the number of sessions of a particular page the number of times a specific button was clicked and also the click-through rate as well one thing I would like to call out is that this approach is not all-encompassing in the last part of this video I'll go more in depth on that and also too our first figma plugin our design system tracker is still in free public beta be sure to check that out for we do release our full paid version uh a link for this will be in the description so let's Dive Right In so let's start off by looking at how to track how long a user viewing our prototype is spending on an individual page in this process you can repeat across all the pages that you might want to track but for now we're just going to focus on how long a user is going to spend within the the Prototype viewing our banking dashboard so what I'm going to do first is actually set up the foundations for a timer so I'm going to set this to zero just make some small adjustments here just delete that make this a little bit bigger sorry now I'm just getting picky there we go and so that's going to be our hours this is going to be our minutes and this is going to be uh our seconds then I'm just going to add some colums in between just to make it look a little bit more realistic select off add some Auto layout and we're going to call this uh dashboard session timer beautiful so now that we have our timer let's create some local variables and I'm just going to copy the name here and they're going to be number variables uh one is going to be for our seconds another is going to be for our minutes and another is going to be for our hours our hours and then let's just go ahead and apply these variables so I'm just going to set this to our hours this to our minutes and this to our seconds beautiful and I'm just going to create the component and there we go so now that we have the foundations for our timer and our variable set up now we actually need to go ahead and add the conditional logic and we're not adding the conditional logic to the timer itself we're actually adding it to our made the frame for which we want to track so in this case our dashboard frame so what I'm going to do is go into prototype select interactions and we're not going to have have it so that it's an action that we take is what just going to change the timer but it's actually going to be after specific delay because again if I click something I don't want it to click something in the seconds to go up same with hovering I want the seconds to go up after a second which is why I'm going to select after DeLay So after a delay of a th000 milliseconds which is equal to 1 second what's going to happen is we're going to set some conditional logic that if seconds is less than 60 our seconds are going to go up by one again what this is saying is that after 1 second if seconds is less than 60 because again once seconds hit 60 you want that to change to a minute and seconds to reset which we'll get to in just a sec so if seconds is less than 60 and we want to have to happen that that our seconds will increase by one now let's add some additional conditional logic that's going to state that if our seconds is greater than or equal to 60 again because we already have if seconds is less than 60 here so if seconds is greater than or equal to 60 we want seconds to reset to zero but we also want our minutes to go up by one so we're going to add a set variable that's going to stay to our minutes to minutes plus one we're just going to drag that in oops let's close this and then drag this in so let's review this from the top what this essentially saying so after a th000 milliseconds or 1 second if seconds is less than 60 seconds will increase by one if seconds is greater than or equal to 60 our seconds is going to reset to zero and our minutes is going to go up by one let's look at a quick demo of this and I'm just going to hide this for now and one thing that's important to note here is that um when you're working with variables especially text variables like they don't change on the can figma canvas itself they only change within the Prototype so when you're viewing if you want to go in and see your the analytics is you actually have to view the Prototype itself and then just find your way um to the analytics page that a user cannot actually find so it's less than ideal but it's uh what you got to do to make it work so I'm just going to copy uh a symbol of this and then what I'm going to do is just present this as it stands so I can see it's set to zero but using um the keys on my keyboard if I navigate to this banking dashboard I stay here for 5 seconds 1 2 3 4 five and then I navigate back I see it went up by one but it didn't keep going up and the reason being is that if we go back and look at our logic that we set it's only saying after a delay of a th000 milliseconds this occurs okay but what happens after 1,000 milliseconds there's nothing that tells figma that this process should repeat so what we actually need to do is set this in what we call a loop so this is where it gets fun is I'm just going to bring this down and create the component of this page right click and add a variant then what we're going to do is I can see that now on both our variants we have the same conditional logic that we set but now we need to place this in the loop so we're going to add a change to our second variant so after delay of a th000 milliseconds or 1 second this process that we went through through is going to happen and then it's going to change to this variance when it changes to this variance after th000 milliseconds this process is then going to repeat so after 1,000 milliseconds our seconds going to go up by one and then it's going to go to this variant where after a th000 milliseconds or 1 second our seconds is going to go up by one but now we want it to go back to our first variant where it then goes up by one again so now we need to add a change to um our first variant so it's almost like a loop so after a th000 milliseconds it's swapping to this variant runs through the process and then goes to this variant and it runs to the process again or that timer just keeps going up up up and up um one thing I would just like to call out is if you are really looking to track hours as well just duplicate this process uh for your hours so now if we go back to our prototype F but before we do that we need to actually copy a symbol little slow oops come on third time of charm here what's going on there we go awesome so uh now that we have um a symbol I am going to frame this selection call it dashboard and now if I play uh this prototype again I can actually I'm just going to reset it here so I'm going to play this from the beginning so I can see it's currently at zero and now if I go back and wait one two three four and five and then navigate back I can see that that timer has continuously gone up and when I'm not on that page I can see that that timer just does not keep going so this is an real great easy way to track how long that users are spending on your individual Pages within your figma Prototype all right so now that we can track how long an individual user is spending on our banking dashboard let's take it that next level further and actually look to calculate a clickr rate of a desired action so I've added a couple more screens to the flow here so we have again just a basic sign up or login we have our banking dashboard once a user clicks deposit they'll get taken to this page right here where they can select how much they want to deposit so this we're with this page here we're actually going to track how many sessions this page has so how many times one specific user has landed on this page then we also want to track how many times a user uh clicks this deposit funds are they clicking it once are they not clicking it at all because this is our desired action so we're again we're going to track how many times how many sessions this page has again specific to one user and then how many times this user clicks deposit funds and if they do at all so let's start off by uh setting some local variables so let's uh create a number variable for deposit funds uh and let's just go sessions and then so again that'll be how many sessions this page has deposit funds button click so how many time then again this would be how many times this button has been clicked so deposit fund sessions then button click and then let's go through uh and actually uh apply these variables here so again we have our dashboard session time then I just added a section um for the number of sessions and the number of times deposit uh funds has been clicked so let's uh sessions and then button click and then CTR we won't uh get to just just yet so when we're tracking how many times uh how many sessions a page it has what we're actually going to do is we're going to add an interaction but it's not going to be well hovering because if it's well hovering and it increases by one it's just going to keep going up and up and up and up an easier way to track this is just whatever a mouse enters the individual page itself so when the mouse enters the page we're going to set our number of sessions to sessions plus one let's try it out so I'm just going to remove that let's uh start this up screen here let's go forward all right I can see my mouse has landed on this page and I can see that the number of sessions is now one beautiful now let's track how many times this button has been clicked so let's uh add an interaction that's going to State on click we're going to set our variable button click to button click + one so then if I go back click this button couple times I hit it three or four times there I can see that uh that has also gone up so now that we have our number of sessions and the number of times that button has been clicked we can now calculate our click-through rate or our conversion rat uh accordingly so what we're actually going to do is hit this button here and uh oops we actually need a local variable for our uh CTR as well so deposit funds number variable deposit make sure I spells right deposit funds uh and let's go CTR so click through rates perfect so let's go ahead and apply this variable now and let's prototype an interaction that's going to State actually let me Define um our CTR formula first so our CTR is our clicks over our Impressions and believe it or not with figma variables you can actually do some small C calculations um so CTR clicks over our Impressions so in this case impress will be our number of sessions and clicks will be well clicks so uh what we actually want to have happen as well is that every time we come back a user hits this dashboard we want our CTR to update so what we're going to have happen is that we're going to set an interaction on the frame for analytics dashboard itself that's going to hit while hovering we want to set our variable to again our clicks over our Impressions so our button click oops hit the wrong one C we're so we're set our CTR variable to our clicks over our sessions so again whenever I start hovering on this page our CTR is going to recalculate so our CTR will change to the value of our button clicks again our clicks over our sessions which is our Impressions so now if I come back to this page and I can see that now our CTR our click rate uh has updated accordingly based on our current number of clicks and our number of sessions so it's important to note that this method of tracking uh analytics within your prototype is not perfect it is not all-encompassing you know if you're looking to track analytics across you know a crazy large User Group uh consisting of some users who you don't have a great relationship with I would 100% advise advise against this this process works really well for internal teams are really tight-knit uh user testing groups that you have a great relationship with let me elaborate on this so some current limitations of this approach are that variables are unique to the user so say one user goes through the Prototype and maybe spends one minute on that banking dashboard that one minute could not be added on to another user's two minutes they are unique to the user so again at the end of the Prototype you would need to have uh some way in order for that user to send you their analytics so again this process works best for internal teams maybe if you want your boss to run through something see they how they interact with your prototype the rest of your design team or again if you have a really tight-knit user uh testing Community who would be more than happy to go to share a screenshot uh of their analytics so what I actually did is when I was going through uh or when I was asked to uh come up with a way to track some analytics on a particular prototype that I was working with is at the end of the Prototype I had users navigate to a page that looked like this so thank you for testing this prototype your participation goes a long way to ensuring the best user experience possible please screenshot this page and send to Kirkland me and slack so the users would see their dashboard session time the number of sessions they had on a particular page the number of clicks on a particular button and then their CTR so again this isn't what you don't want um a user testing Community full of users you don't have a relationship with landing on this page because they might not understand but again if you're working with a really tight-knit uh group of user testers um or a really tight-knit design team they this works just fine um and when I was going through and doing it I actually got about 85 or 90% um of the design team that I was working with to actually go through the Prototype and then send me a screenshot of their analytics you know so your team will be more than willing uh to test this out so just as a little bit of a visual here what happened um is as a user's going through land on the banking dashboard spend a couple seconds maybe I then hit deposit funds and I go back and then I go back and then I go back a couple times maybe on this third time third or fourth time that I land on this page I decide to actually deposit some funds I would then land on a page like this you know funds are been deposited but instead of returning home I would get taken or the user would get taken directly to this page itself again I would I would always give the users who I sent it to a heads up that at the end they're going to uh receive a page that looked like this and if they could send their analytics to me so that I could dive into those insights so again thank you for testing this prototype your participation goes a long way to ensuring the best ux possible please screenshot this page send to me in slack and I can see the user's dashboard session time the number of sessions they had on a particular page the number of clicks on the button Buton and also their CTR so that is how I was able to track uh analytics uh for a particular prototype uh within my internal team um so yeah hope this helps and happy analytics tracking thanks for watching today's video everyone just want to encourage everyone to sign up for UI collective.com our community for design system designers where you get access to myself and mic directly for any questions you might have relating to Design Systems uh variables modes anything to do uh with figma and we did also just recently launch our first FMA plugin our design system Tracker Where it tracks the components Styles and variables that have been detached which are remote which are local and where they come from it's a real great way to ensure consistency in your designs before you ship off your designs to development we are currently still in free public beta right now but this will change in the next week or so as we're adding additional features and functionality for our full paid release uh so be sure to check this out uh and yeah hope to see you online UI Collective

Channel: UI Collective

Views: 2,752

Keywords: figma variables, figma conditional logic, figma prototype analytics

Id: MFGQrjBFMe8

Length: 17min 57sec (1077 seconds)

Published: Mon Nov 27 2023