5 Tips for Better Prototypes with GoodWire

Five more tips to take your dashboard prototypes in Figma to the next level

By now, you have probably mastered the basics of using the GoodWire, as outlined in the previous article. If not, I highly recommend you pause here and start with the Getting Started with the GoodWire article. It outlines the basics of getting and setting up the library and working with various components.

And now, let’s dive into the more advanced prototyping tips to take your wireframes to the next level.

1. Annotate your wireframes

By default and by intention, the GoodWire has a pretty low level of fidelity. You only really need a few components — chart type, approximate complexity/number of data points, title, and axis labels. That’s it. Most of the time, you won’t need anything else, but sometimes, you still need some extra commentary to explain the interactivity or other details.

Sticky notes are useful for annotating your prototypes beyond the fidelity of the available components — for example, to indicate the slices of a donut chart or stack in the column chart. The Note component is available on the Components page of GoodWire in various colors and sizes.

If the notes do not fit the desired space, you can use Figma’s default Arrow shape to point it to an exact spot. Just hit Shift + L and drag your arrow.

2. Create interactive navigation

You will eventually present your dashboards to your stakeholders or test them with future users — that is one of the main purposes of the wireframe. So, helping them imagine how the dashboards will work in practice can go a long way.

One of the best ways to help their imagination is interactivity. Don’t worry about the number of steps needed; it’s quite fast and well worth it.

1. Start by creating your dashboards.
2. Duplicate the Dashboards menu component outside of your dashboards.
3. Create links to all dashboard pages from separate menu items:
   - on click — Navigate to
4. Create a component out of the Dashboards menu
5. Replace the menu on all the dashboards with its instance. That way, the interactions (navigation between pages) will be duplicated automatically across all dashboards.
6. Now, you can adjust the states of menu items to match the selected dashboards.
7. Last step — add a Flow starting point to your first dashboard and enjoy the working prototype!

See the video of creating the interactive navigation step by step:

You can also see the Demo dashboard live prototype and explore the navigation on your own.

3. Drill to modal window

GoodData platform also supports another type of interactivity — drilling into the visualization. That means showing a particular visualization in a modal window. You can learn more about this interaction pattern and how to set it up in the GoodData documentation. Now let’s look at how to set it up in the Figma prototype:

1. Insert the Modal component on a canvas outside your dashboard
2. Detach the Modal component so it becomes a Frame
3. Insert your chart into the Modal frame and adjust it as needed
4. Select the chart element on your dashboard that will trigger the drill
5. Switch to prototyping mode
6. Drag the connection to the Modal and set it as follows:

• On click
• Open overlay
• Instant
• Centered
• Check Close when clicking outside
• Check Add background
• Set background color to #FFFFFF at 75% opacity

Done. Play the prototype and check how it works.

Bonus tip: Set the X button in the modal to close it:

1. Select the X button
2. Drag the prototyping connection to the Close overlay

4. Create sticky navigation

Effective presentations sometimes hinge on little details. For example, there is a scrolling behavior. The dashboard menu, title, and filters stick to the top of the page when the user scrolls in the GoodData platform IRL. You can easily simulate this behavior with Figma prototyping capabilities and give your prototypes a nice final touch.

Here’s how to do it:

1. Group the Dashboard title and Filters bar
2. Select the group you just created and the Dashboards menu and bring them front in the layers hierarchy
3. Switch to prototype mode and set Scroll behavior — Position to Sticky (stop at the top edge) for both the grouped title and filters and for the dashboard menu

Done. Play the prototype and enjoy.

Bonus tip: Dashboard building best practices

Now, you should know the moves for assembling dashboard components in Figma. But there is more to it — the whole craft of analytics product design. Before you start building the dashboards, I would advise you to familiarize yourself with general dashboard-building principles. You can start by going through the following articles to learn the basics:

In the article 7 Crucial Tips for Building Dashboards Users Actually Love to Use, you’ll learn a few crucial tips to get you started. You’ll discover how to define the problem, understand user requirements, and focus on simplicity and clarity. Additionally, you’ll learn to use appropriate visualizations, ensure data accuracy, and continuously iterate based on user feedback to develop engaging and user-friendly dashboards.

Next is the article How to Choose the Best Chart Type to Visualize Your Data. It covers the key considerations for choosing the right chart, such as understanding your data, the message you want to convey, and the audience’s needs. You’ll explore different chart types and their optimal use cases to enhance the clarity and impact of your data presentations.

What do I want to show to my users? The answer to this question dictates the chart type.

Another important aspect of dashboard building is the information architecture. Check the article Six Principles of Dashboards Information Architecture to learn about the key principles of dashboard information architecture that ensure an intuitive and effective user experience. It covers essential guidelines on structuring and organizing data, emphasizing clarity, consistency, and ease of navigation. By following these principles, you can design dashboards that make data insights easily accessible and actionable for users.