How to use Figma for Power BI?

When we are creating reports we would like to make them not only business valuable but also user-friendly. Reports don’t need to be boring! With the right design elements, we can turn them into dynamic tools that help users navigate complex business information effortlessly. In this post, I’m excited to show you how to create very simple Power BI template in Figma.

What is Figma?

Figma is a collaborative web-based design and prototyping tool. It’s commonly used for user interface (UI) and user experience (UX) design, as well as for creating interactive prototypes.  In Figma you can do it more like interactive mock-up etc but we will focus on creating a ready-to use background.

You can download Figma from the offical Figma website.

I created video which you find below this article where it is presented step by step how to create this Power BI report template in Figma:

Before you start creating template based on the tutorial I would like to share with you some basic knowledge about the design. It is really important to align all elements with each other. When I am creating template, first what I determined is the space base between objects. In this template I am following “8-pixel grid” strategy. The strategy in design refers to aligning and spacing elements in a design using increments of 8 pixels. The “8-pixel grid” strategy in design is not associated with a specific author or individual. Many designers and design teams have adopted this grid system because of its practicality and effectiveness in creating visually pleasing and user-friendly designs for digital interfaces.

When you use an 8-pixel grid, it means that you align the edges and spacing of elements to multiples of 8 pixels. For example, you might ensure that the margin between two elements is 8, 16, 24 pixels, and so on. This alignment creates a sense of order and consistency in your design. In the template example from this post you can see that between panel navigation and space for the visual is 16 pixels. 

✏️ TIP! ✏️
To check the space click on the object, then press CTRL + ALT and move by the mouse to the object between would you like to check the space. CTRL + ALT is the deaufult keyboard shortcut in Figma for Windows environment.