Figma + Tableau: Creating Menu/Navigation Panels

In a 2021 post I shared how to use “blank” or “empty” characters as a placeholder in a Tableau text navigation button to allow for a completely transparent navigation object. The purpose of this technique that I discovered is that you can then create a background menu or navigation panel in another tool, such as Figma.

Prior to this technique, I used to create individual images for each navigation button I needed in my Tableau dashboard. This took a lot of extra work – creating buttons, exporting each one individually, then loading them all individually into Tableau. With a blank character I just need ONE image for the panel (see examples below) and then navigation buttons that all just have the copied blank character in it.

You can read about how to do this technique in Tableau here, but if you are interested in how to create the panels in Figma, check out my most recent video that explains (in only 8 minutes!) why and how you can do this. I also provide a few examples of ways in which you can ensure that users know they have “activated” a button, or are on the selected dashboard without the workbook.

Create a familiar user interface
Use common concepts seen in other applications such as a website

If you want to see more Figma + Tableau, check out my YouTube page!

Cheers,

Lindsay

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s