When you get to explain a dashboard live to users, it’s easy to go over all the features. But what happens when you’re not around? One way to help users navigate your dashboard is to add a help overlay that pops up when they click a “help” icon on the dashboard. In this post, I’ll go over a simple method to add this overlay using Figma.
To get started, you’ll need to take a screenshot of your dashboard. Make sure to get the full dashboard – you might have to upload it to a server in order to zoom out far enough. Then open up a new design project at figma.com, and copy-and-paste your screenshot in.
(Note: This screenshot won’t stay in your final overlay! We’ll delete it before we’re done. We’re just using it to make sure that our positioning is perfect.)
Now use the shape tool to create a rectangle, and position it over your dashboard. Make sure that it’s the exact size of your dashboard – you might want to use the width and height set fields on the right to make sure it’s an exact match. Set the fill color of your rectangle to black.
Let’s make our rectangle transparent! Click on the fill panel to open the fill dialog, and set the opacity to around 50%.
Play around with the opacity and background color until you get a combination that works well with your dashboard color scheme. I prefer using a darker overlay so that I can put white text boxes over it later, but your dashboard might work better with a white overlay at a lower opacity. Mess around with the colors until you find the combination you like best!
Now it’s time to add your text. Add a white box (or your preference of color) and a text box on top of it, and fill it with the explainer text that you want to use. I suggest keeping these short and to the point, and mostly using them to call out mechanics or points that might not be immediately obvious; think about the things you would point out if you were training someone on how to use the dashboard.
Depending on your specific layout, you may want to add an arrow to point to what you’re annotating – I usually do! To add an arrow, start by adding a line using the pen tool. (Click and drag to make a curved line, or click two points to make a straight line). Then head to the line edit pane on the right, adjust the styles as desired, and select an arrowhead on the “start point” or “end point” option.
Repeat this process with the other points you want to annotate! Here’s how my figma image is looking:
You might notice that I have a tip in the top right that isn’t pointing to anything yet. This is where I’m going to put my show/hide button for this overlay, so I went ahead and added a comment for it early – thinking ahead!
When you’re happy with your overlay, delete the original dashboard screenshot you pasted in. (Tip: Use the layers menu on the left to select it, since it’s hidden under all the other layers). Then select everything else in the project, right click, and group all the layers.
Now you can download your overlay. Select the group you just made, go to the right sidebar, and scroll all the way down to “export”. For the sharpest results, select a 4x quality. Then export your image!
Let’s get the overlay onto the dashboard. This is the easy bit – we’re almost done! Head over to your dashboard, and drag in a floating image object. Put in the image you just downloaded, then resize the image to cover your whole dashboard. I recommend using the position controls in the layout tab to get the position and size exact – set the x and y to 0, and the width and height to the size of the dashboard.
Don’t worry if things look blurry at this stage! Once you upload it to a server, the image quality will resolve.
Finally, let’s add the ability to toggle this overlay on and off. Click the dropdown arrow in the corner of the image, and select “add show/hide button”
Drag the button to the spot on the dashboard that you want it – I like the upper right corner.
Finally, select the button and set the options however you prefer. I like to use the default X image for when the item is shown, and put in a custom help icon for when it’s not. Google Fonts has a huge library of free, clean icons – you can download the help icon I’m using here, or browse for your own. To add a custom icon for when the overlay is off, toggle to “Item Hidden” in the button edit menu and choose the icon you downloaded.
You may want to add a custom tooltip here too, so that viewers get a sense of what the button does when they hover over it.
With that, we’re done! Clicking the X will hide the overlay, and clicking the ? (or whatever icon you chose) will show it. Check out the viz below to see this in action:
