Getting Started with GoodWire Wireframing Library
7 tips to get you up to speed so you can hit the ground running on your next dashboard project!
Are you tired of cumbersome wireframing for your data dashboards? Meet GoodWire, your new best friend in dashboard prototyping. The GoodWire wireframing library is a robust collection of UI components and chart types designed specifically for prototyping data analytics applications on the GoodData platform. This library provides everything you need to quickly prototype and iterate on your designs, ensuring a smooth and efficient workflow.
With GoodWire, you can focus on crafting a solid information architecture and displaying the key data points in a way that supports your users’ decision-making processes. I introduced the library in greater detail in the previous article, so feel free to catch up on that one first if you want more context.
Now, let’s look at the steps you need to take to utilize all the power GoodWire offers. First, you need to have your Figma, and then you need to get the actual Figma library.
1. Download the library from Figma Community
First things first — you need to download the library from the Figma Community page. It’s free.
- Go to the GoodData GoodWire Figma Community page
- Click the big blue Open in Figma button
Done. Now, you have your own copy of the GoodWire wireframing library file. Feel free to look around. But for now, it is only like any other Figma file, sitting in your drafts — not yet a real Figma library. Once you are ready to level up, go to the next step — and use the file as a library.
2. Use GoodWire as a component library
To fully utilize the design library, you must publish it to your organization or team first. Just a note: To use libraries, you must have any paid Figma plan — Professional, Organization, or Enterprise.
- Move the file from your Drafts, typically to a Design system, Components, or similar project. In the end, anything but Drafts will work — if you keep the file in your Drafts, nobody but you can use it, and even you cannot use it as a library. And that would be a pity.
- Select Publish library… from the dropdown menu
- Select the whole organization or just one team (current location of the library)
- Click Publish
- Wait a few moments (about a minute or two) before the library is assembled and published
Now, you want to enable the library in your organization, team, or specific design files. When done, all the components from the library will be available in the Assets tab.
Let’s look at how to enable the library in your team:
- Open team settings
- Select View team’s libraries
- Locate GoodData GoodWire and enable it for All files
- Done — now you can see all the components in the Assets panel for all files in your team
You can also enable the library for your whole organization or just a single file — learn more about working with libraries and managing them here in the Figma documentation:
3. Library structure
The GoodWire wireframing library is quite simple. It contains two main parts:
- Components — all the necessary components of GoodData’s UI and a few useful generic wireframing components like sticky notes
- Charts — the meat of the file. The library contains all of GoodData’s 21 chart types and hundreds of their variants, so you can prototype almost any scenario of your data product.
Other pages help you understand the library (How to) and give you an idea of what you can do with it (Demo). The demo is a good place to start your exploration if you are unsure what to do and would like some inspiration or tips on assembling dashboards.
4. Check the demo dashboard
The demo page contains a fully assembled prototype of dashboards built from 4 pages — check it out for some inspiration. Also, if you have no idea where to start, check the Demo first. That way, you will understand how the pieces fit together.
Hint: You can also hit the play button to launch the Figma prototype and see the dashboards in action — how the end user will see them. The menu on the left allows you to navigate between pages of the prototype. Also, look for the blue targets for more interactions.
The prototype is also the best way to communicate the results of your work with stakeholders — in a clean prototype environment, not in a messy design file.
Launch the live prototype here or check the video walkthrough below:
5. Set up an empty dashboard
The empty Dashboard component is a container for all your charts. But when you drag it out of the Assets tab, it’s a component with all its limitations — you need to detach its instance to use it as a proper container for your charts. But don’t worry, you won’t lose any important functionality:
- In the layers panel, expand the Empty Dashboard instance and select the subcomponents:
- Dashboards Menu
- Filters Bar - Detach them. The Empty dashboard now becomes the Artboard, which works as a container for all the charts.
You’ll want to work with the menu and filters beyond Figma’s components capabilities — mainly to add and remove menu items and filters. So they need to be detached from the original component in order to allow such modifications.
6. Adding charts to the dashboard
Now you can start adding the charts to your empty dashboard. Drag them from the Assets panel or use the Resources panel (keyboard shortcut Shift + I) for faster prototyping.
The empty dashboard is 1430 pixels wide by default — 230 pixels for the menu and 1200 pixels for the charts. The default width is 600 pixels for most charts and 300 pixels for headlines (KPIs), so you can fit 2 charts or 4 KPIs side by side neatly out of the box. But feel free to change the size as you like. GoodData dashboards work with 12 column layout, which is simulated by the pre-determined sizes of the charts:
7. Adjusting charts
Every chart type comes to the dashboard in its default configuration. But behind the scenes, every chart contains multiple, sometimes even dozens of variants — e.g., the number of columns in the column chart or slices in the pie chart. So you can, for example, easily represent weekly (7 columns) or monthly (30 columns) trends. You can change the chart properties from the properties panel on the right.
You can also use the Properties panel to swap the chart types. For example, if you swap the column chart for a line chart, you don’t need to delete it; just change the chart type.
Note: not every combination of properties is supported by the library — please see the Charts page to see all the currently available chart variants.
Now it is up to you!
These are the basic tips to get you started with the GoodWire wireframing library. Go and try it yourself. Download the GoodWire library today and transform your dashboard’s prototyping process! Build your first dashboard. Iterate on it and discuss it with your coworkers. But mainly — build it in GoodData. The wireframes are not the final product, but they will help you.
In the next article, I’ll share some tips and tricks to take your dashboards to the next level, focusing on creating interactive prototypes.
