How to develop prototypes with Figma?
Interactive designs and their complications
In previous articles we have already talked about Figma, a highly intuitive graphic design tool that includes everything from the creation of Wireframes to the creation of prototypes, passing through Mockups.
This design tool will allow us to create customized products to meet the needs of our clients and as designers, one of our challenges is to correctly convey our work, but when our work consists of interactive design, this task becomes more complicated.
If you have ever developed an interactive design, some of these problems may be familiar to you, and have had to deal with them:
- You make a great design for the product or service, the client loves it and approves of the proposal, it’s greenlit and rolled out. But at the time of launching the product, users do not use it or complain about its operation. Why has this happened? It can be for many reasons, but one of them may be poor usability, or also for not having known how to meet the expectations of users or consumers. Remember, not everything is aesthetic.
- The client has approved the design and the development of the product or service has begun, but once the client sees it in development, he asks to change and modify things that he did not know would be like this, or that he imagined differently. It can also happen that functions are added that were not requested at the beginning, which arise as the project progresses.
- At the time of starting development, the explanations of all the functions, styles, animations, etc., occupy a good part of the development time. The conversations between development and design are constant, to know what each element does, which increases project times. And even if there is very good communication, it may be the case that an element does not develop as the designer had imagined.
How can we solve these problems?
At Itequia we believe that for each product, person, company, and client there will be solutions that give better or worse results, but we have verified that a good solution is to create interactive prototypes with Figma.
Why make a prototype in Figma?
Before we start, we will explain what can be done with Figma and why it is a key tool to test your product or service during the development phase.
What can we do with Figma?
Prototypes
With Figma, we will be able to create interactive prototypes without having to write a single line of code and share them with our clients, with the development team, with users who are going to try and test the product, etc.
Animations
In prototypes and developments, animations can be used, such as when moving from one screen to another, a specific transition is made. They are small details that will give more life and realism to the prototype and the final design.
Components
Another of the strong points of this design tool is that it will allow us to save components. These components are modular designs that we can reuse in different parts of our prototype. Thanks to this functionality, we will be able to create our design system, which will contain all the brand elements and reusable components.
What solutions does Figma offer us?
- The prototype will be just as the web is once it is developed and this will allow us to show the client what each thing, each interaction, each animation, etc. will be like. With this, we can avoid changes derived from misunderstandings or lack of information.
- Once we have the prototype created, it will allow us to test it and detect possible usability errors, by being able to interact with it as if it were the real web/product.
- Figma allows us to document each function and/or element through a Design System. We can also leave notes and instructions to the different users, including the client, the development team, etc. This provides greater visibility of the project for all the people involved and therefore more fluid and efficient work.
- This design tool also has other benefits when the product/service is scaling, since the components, once created, can be reused, maintaining a uniform design. And if we need new components, we can add them to the existing Design System, and even have a history of changes, to document the different versions of the project.
Should I make an interactive prototype for all my projects?
In this case, the answer is not definitive, but what we can tell you in advance is that the more complex the product, the more necessary it is to prototype and have a test version that we can review with our client.
Even if you think that if you don’t do a prototype or test you are saving time and resources, in the long run, you could be wasting more time fixing things that could have been detected and corrected in the design phase.
In the event that we have little time or resources for the project, it would be interesting to prototype only the most relevant and decisive parts of the product, but it is always advisable to prototype and test.
Will an interactive prototype solve all my problems?
Here the answer is very clear, no, a prototype is not going to solve all my development problems.
An interactive prototype is a tool to improve the workflow, but documentation, meetings with both the client and the development team, etc. are still necessary. The prototype will help us make these other tasks easier and less time-consuming, thus avoiding misunderstandings and allowing us to optimize our working time to the maximum.
In summary, using an interactive prototype in our development can take more time than just doing the static design, yes, but it also brings huge benefits, especially when your product is complex.
With a prototype as real as the Web, App, or final product, both the client, the development team, and the possible users who are going to test it will know what each thing is and how it has to work, identifying possible errors or usability deficiencies, which we can correct before delivery.