Should I use Figma Design for dashboard prototyping? | R bloggers

Should I use Figma Design for dashboard prototyping? | R bloggers



Have you heard of Figma, but not sure what it is? Have you seen Figma but not sure if it’s worth learning? Never heard or seen Figma? If the answer to any of these questions is “Yes,” then this blog post is for you.

What are Figma and Figma Design?

This is a simple question with a somewhat complex answer, not least because there are multiple products under the Figma umbrella, created by developers at the company Figma, Inc (often shortened to Figma). At the time of writing, these products are listed on Wikipedia as:

  • Figma
  • FigJam
  • Figma slides
  • Figma sites
  • Figma Making
  • Figma Buzz
  • Drawing figma

You’ll notice that the first of these products is simply labeled “Figma.” This is the original Figma product that has been around since mid-2010. (In contrast, the last four products mentioned were all launched in 2025.) However, due to the existence of these other Figma products, Figma, Inc has now started referring to the original product as “Figma Design” (or in some places just “Design”). I think this name is slowly being adopted in general, but you will still find plenty of references to Figma meaning what Figma, Inc now calls Figma Design.

Screenshot of new file options for a logged in user figma.com

So what is Figma Design?

According to Figma, Inc:

Figma Design is for people to create, share, and test designs for websites, mobile apps, and other digital products and experiences. A popular tool for designers, product managers, writers and developers, it helps everyone involved in the design process contribute faster, provide feedback and make better decisions.

I would simplify that to:

Figma Design is a cloud-based collaboration software that allows users to create wireframes, high-fidelity mock-ups, and working prototypes of websites and mobile applications.

This doesn’t cover everything Figma Design can do or be used for, as I’ll say, but I think it covers the main reasons why you might choose to learn Figma Design over other design software.

What can I use Figma Design for?

As implied in the previous section, Figma Design’s core offering (at least in my opinion) is the ability to quickly create wireframes, high-fidelity designs, and interactive prototypes. These can be very useful when building a complex dashboard.

Example of a wireframe of the top of the Jumping Rivers homepage, built with Figma Design.

I’ve used Figma Design for a number of other things, including:

  • simple vector art
  • flowcharts
  • annotating screenshots
  • promotional material intended for printing
  • very simple image editing

Figma Design is not the best tool available for all these tasks. But if it’s available to you, you know how to use it, and it does its job at a satisfactory level, then it could be the most useful tool at your disposal.

Example of a (joke) flowchart, built with Figma Design.

Is Figma Design free?

Like many (most?) cloud-based software tools, Figma Design (and the rest of the Figma products) freemium software. What is and isn’t available on the free tier is subject to change, so everything that follows in this section should be assumed to be caveated with “at the time of writing.”

While you can certainly use Figma Design for free – and, I think, learn how to use most of its tools – the answer to the question of whether you can use it to your liking without paying is unsurprisingly: “it depends.” If you’re on a team, the free tier strictly limits the number of collaborative files that can be created and your ability to create shared libraries. If you work independently these things may not be much of an issue, but you won’t have access to other features available in paid tiers, such as Developer mode and video import.

Tools in the toolbar

The things you’ll use most in Figma Design, besides the ubiquitous Move tool, are almost certainly the Frame tool and the Text tool. These may not sound very exciting, but these alone can go a long way. Much of their power comes from the ability to fine-tune the appearance of frames (essentially containers for stuff) and text, and to build complex layouts by combining and nesting items you create. Frames can also be filled with images, so while there is a separate image/video tool, you don’t really need to use it to create your hi-fi mockups. This is illustrated below, with the top of the Jumping Rivers home page recreated using only the Frame and Text tools.

Hi-Fi mockup of the top of the Jumping Rivers homepage. The only tools from the Figma Design toolbar used for this were the Frame and Text tools (plus the Move tool).

There are several other tools available related to vector drawing – Line, Rectangle, Ellipse, Pen – as well as sections and comments.

Screenshot of the Figma Design toolbar with the vector drawing submenu open.

Conceptual tools

In addition to the literal (in the digital sense) tools described above, Figma Design gives you the tools (in the broad, conceptual sense) to perform a number of useful tasks.

The most important of these conceptual tools is the ability to create interactive prototypes. In short, you can select an item in your design, link it to another item and then define one or more interactions. This is simple in principle and in practice quite easy to get started with. For complex designs with a lot of interactions, I quickly find it quite messy and difficult to decipher: Figma, Inc calls the visual representations of connections you make between elements ‘noodles’ and I find this appropriate because it’s quite easy to end up with a kind of noodle soup that’s difficult to decipher. Nevertheless, the tools are there and for simple designs it is quick to set up and then run a working prototype.

Screenshot of a simple dashboard design with four tabs. The curved arrows (“noodles”) show the interactions the user can perform: for example, click on one of the “Flight Delay” buttons to go to the second view (top right). Even for this fairly simple prototype, the interlocking noodle pattern can be quite difficult to decipher.

Paid users can use the tools available in developer mode. Since it’s not part of the free version I won’t go into details here, but in short it’s a set of tools that should make it easier to convert design files to code.

It’s also easy to export arbitrary parts of a design as JPEG, PNG, SVG or PDF. There is no native app support for WebP or AVIF export yet, but there are community plugins that provide them.

Should I design my dashboard with Figma Design?

That is of course up to you. If your dashboard is quite simple and you are working alone, it may be easier to build version 1 of your dashboard right away using your favorite dashboard building tool. If you’re skilled with a library like Shiny or Dash, this can be quite fast. However, if you’re part of a team building a complex app, Figma Design can make the early stages of development easier. And if you want to do user testing with simple interactive prototypes, this is definitely an option worth considering.

For updates and revisions to this article, see the original post


#Figma #Design #dashboard #prototyping #bloggers

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *