A few years ago, we worked on a complex IoT dashboard application containing many different sections, each with a wide range of functionalities. The deadline was tight, so our team immediately set about creating high-quality screens without wireframes. Two weeks later, when the work was already underway, the client came to us and changed the main concept of the project, and we had to redo everything. It was like watching a sandcastle being swept away by the tide. That was the last time we started working on a dashboard without first preparing a wireframe in Figma.
Since then, at WizzDev wireframes have become more than just an “optional step” for the team. They are essential for IoT dashboards—projects where the amount of data and complexity can easily get out of hand.
What is a wireframe design?
A wireframe in Figma is a sketch of the interface, a visual plan that aims to answer three questions. What information do we show? Should there be a settings icon in the upper right corner, or would it be better to use a hamburger menu on the upper left corner and hide it? In what order should the information be presented? Should we first show the user their devices connected to the network with their activity status, or perhaps the current readings from the sensors? And the last question: how will the user navigate the GUI (graphical user interface)? Each of these elements is crucial because it determines how the user will use the application and what their experience will be like. That is why when creating wireframes in Figma for an IoT application, there is no room for colors, branding, or embellishments. These elements are added at a later stage of the work, when we know exactly what content will be included on the dashboard. A wireframe consists of rectangles instead of widgets, placeholder text instead of real data, and a gray scale instead of colors.
This is critical in IoT dashboards, because usually you need to fit alerts, device statuses, real-time charts, log lists, and filters on a single screen. With this approach, we can be sure that only the most important elements will be on the dashboard before we move on to “beautifying” it.
Benefits of creating wireframes in Figma
Creating wireframes in Figma not only saves time on corrections and reduces stress levels for developers and investors who are impatient to see the product on the market. Wireframes offer several simple but powerful benefits:
- The hierarchy is immediately apparent – the size and shade of gray of the elements indicate what is important and what is not. The client does not focus on details but sees places – simple shapes and colors that will become places for data in the future,
- Layout changes take minutes, not hours,
- Clear paths from the general view to the details (e.g., alert → device → historical chart),
- Facilitate decisions – a simple sketch helps to understand the layout faster and decide on the direction of work,
- We strive for simplicity and usability – we avoid situations where the application screen turns into an overloaded aircraft cockpit – the user does not search for their data and buttons.
A well-designed wireframe not only means faster time to market for the product, but also higher customer satisfaction later on.
Why is creating wireframes in Figma a good choice?
Creating wireframes in Figma is a good choice because it allows us to work quickly and agilely, while collaborating with the client at all times. In addition, the ability to work on a single project in real time with the client allows us to obtain feedback on an ongoing basis. As a result, the GUI development process itself runs smoothly. In addition, the Figma community provides plenty of wireframe examples, from simple layouts to complex dashboard layouts. These examples contain elements that we can use in our project, e.g.: Sidebars & Menus, Navigation, Cards & Widgets, Charts, Tables, Filters.
Thanks to ready-made templates prepared by other users, you don’t always have to spend time reinventing existing solutions. However, our notes and sketches from meetings with clients are always crucial—they form the basis for the wireframe. The more questions we ask the client and the more details we learn at the early stage of interface planning, the more efficiently the work will proceed.
How to create wireframes in Figma?
We start creating a GUI wireframe by creating a new Design file and adding a Frame in desktop format (e.g., 1920×1080 px). Next, we place photos from the workshop with the client as a reference layer. This allows the entire design team to see the context of the meeting and makes it easier to translate the ideas gathered during the discussion into specific interface elements.
The next step is to define the main sections. Using rectangles and simple shapes, mark modules such as: sidebar, header, main area for charts, and space for alerts and logs.
This sketch gives a general outline of the dashboard layout and allows you to visualize the structure more quickly. In the next step, we will fill it with elements that show exactly what content and features will be located in each place.
Once the project has been divided into sections, we can fill them with placeholders. At this stage, instead of real data, we use descriptions such as “[Temperature chart]” and replace icons with simple shapes. Remember to stick to grayscale—at this stage, it’s about the structure and logic of the layout, not the final design. This allows the interface to gradually take on functionality and makes it easier to assess how individual elements will work together.
The final step is to export the project. Simply select the frame, choose the Save File option, and prepare a version for sharing. Next send the saved wireframe to the client for feedback and to discuss any corrections.
What should be avoided when creating GUI wireframes?
The most common mistake while creating wireframes in Figma is to move on to the final design right from the start. We immediately get our project in a nice design, but it rarely stays that way. As the application expands after adding real data from the database, it turns out that we need to go back and find space for data other than what was expected. Some modules become unnecessary and others replace them. Such corrections prolong the time it takes for the product to enter the market and generate unnecessary costs.
How to prevent this? By following a few simple useful tips on what not to do:
- Avoid using colors and details too early – when brand colors, icons, and photos appear in the sketch, the conversation with the client begins to revolve around aesthetics rather than the logic of the dashboard.
- Don’t use Lorem Ipsum everywhere – placeholder text does not show real limitations. When you insert real KPIs (“Sensor temperature: 147.3 °C”), it suddenly turns out that the column is too narrow.
Failure to consider states – every IoT dashboard must anticipate situations: data is loading, data has not arrived, the system reports an error. If we do not include such screens in the wireframe, it turns out that there is no room for them in the implementation.
Real WizzDev insights how we create wireframes in Figma?
At the beginning, we mentioned that at WizzDev, we have not been able to imagine starting GUI design without first preparing a wireframe for several years. Therefore, we would like to conclude by presenting two projects in which the wireframe in Figma proved to be an invaluable tool.
The first project was a logistic dashboard for monitoring devices in a hall. The screen had to accommodate over twenty modules: live charts, alarms, data tables, filters, and settings configurators. At first, the client wanted to see several variants – separately for managers, warehouse workers, and technicians. If we had started with a “polished” design right away, we would have gotten bogged down in details. Instead, we prepared three simple wireframes. This allowed the client to see different concepts within an hour, quickly point out what worked and what didn’t, and feel like they were truly co-creating the solution.
The second project was part of a dashboard for a smart building with hundreds of sensors. The requirement was clear: one dashboard for administrators and another, as simple as possible, for regular users. So we started with two separate wireframes. Already at the sketch stage, it became clear that many of the options that the administrator considered key would be completely useless to the employee. Making this correction to the finished, complex interface would have taken weeks of revisions. And so, even before the first “pretty” design was created, all roles and needs were sorted out. The result? Zero misunderstandings, quick decisions, and implementation without unnecessary setbacks.
5 reasons why we create wireframes in Figma
Here's the WizzDev checklist!
Why is it important to create wireframe prototypes?
In IoT dashboards, wireframes are not an add-on, but a foundation. With them, you can quickly prioritize data in Figma and determine what should appear where. You minimize the risk of overloading the screen with information, while saving your team and client time by avoiding unnecessary corrections and misunderstandings. Equally important, you build a tool that actually supports real-time decision making.
So before you reach for colors and icons, start with a simple sketch. Your dashboard (and your client) will certainly benefit from it.
Do you have an idea for your own IoT dashboard or application and want to start with a solid foundation? Contact us – we will help you translate your sketches and needs into clear wireframes in Figma, and then into a finished product.
