Prototyping in Figma sucks but you shouldn’t care

Organized chaos in Figma. Image by Luke Dowding.

As a product designer who has been using Figma for a while, I must say that the tool has been incredibly helpful in speeding up my workflow and streamlining my design process. However, there are a few things that I miss when it comes to Figma’s prototyping functions. As someone who used to be proficient in Axure RP 7 back in 2017, I don’t quite understand why people prefer prototyping in Figma.

Here is my wish list of features I would like to see in Figma prototypes. If I had to pay for these features, these would be my top 5 choices:

1. Conditional interactions: Figma’s interactions are fairly simple and straightforward, but they don’t allow for conditional interactions. For example, it would be great to have the ability to show a different element based on a user’s previous actions if they click on a button.
2. Customizable transitions: Figma has a decent selection of transitions to choose from, but they are limited in terms of customization. It would be great to have more control over the timing, easing, and direction of transitions.
3. Advanced interaction triggers: It would be great to have more mobile gestures and add “on scroll” triggers in Figma.
4. Multiple interactions for one element: Currently, components can only have one action per trigger type. For example, you can only specify one action on tap, such as opening an overlay. However, it would be great to have multiple actions on click, for instance.
5. Predefined interactive components: It would be helpful to have predefined interactive components, such as scrollboxes with predefined behavior, interactive inputs, tabs, etc. This is partially addressed by interactive components.

It’s not only me. You can find these requests in Figma forums as feature requests. So hopefully we are getting there. However, in 2023 Figma’s statement “Create prototypes that feel like the real experience” doesn’t sound true. I would say the right words are: “Prototype small chunks of functionality that feel more or less like the real experience”. We are not there yet. But don’t be worried I have the remedy.

The most important thing you should remember: most likely you don’t need a prototype that feels like the real experience. I mean to get consensus in your team and for most of the research projects you just don’t need it. Building the advanced prototype tickling your ego but it’s not your minimal learnable prototype, sad but true — you are wasting your time on it.

In my practice advanced prototyping was needed only two times: one for the real study or I would say a pilot and another to communicate complex B2B interface. And at a certain point in these b2b tool development when we had a design library in place, complex prototypes became redundant. The advanced version entails full data and a lot of interaction. Usually when you hear “advance prototype” it means it’s show time, you need to impress someone. Most likely Figma is not the right tool for that.

If you still have a solid reason to create an advanced prototype, I have four tiers of tools and approaches that might be helpful: engineering support, no-code, advanced prototyping tools, and nice-picture tools.

Find developers

It may not work in every situation. For example, in a corporation, it might be difficult to get buy-in to accommodate engineers to support your demo or research goals. However, in a startup, you could sell the idea of having a front-end engineer to make your mocks more realistic. This team approach can be a true win.

No-code, low-code

Webflow, Bubble, Adalo, and others are platforms for building applications for the web and mobile. I have experience building an App Store application using Bubble, which was a great way to create a test pilot for some of our ideas. However, after 1 month and based on user feedback, we increased the complexity of the interface and interactions. At that point, I decided to find a proper Bubble developer to do the work.

Pros:

1. You can create a real website or, even more exciting, a real app using some of these no-code tools. You can publish your app in the App or Play Store.
2. This prototype can serve as an MVP to test your ideas and gain traction. Webflow is becoming a standard for creating landing pages and content pages.
3. Most of these tools allow you to connect to Figma and import designs. However, the process may not be as fancy as it sounds.
4. These tools are perfect for conducting research as they eliminate many biases and related explanations about what works and what doesn’t.
5. You can use analytics tools and conduct quantitative research.
6. There are plenty of templates available to get you started.

Cons:

1. There is a learning curve to using this tool effectively, and it takes effort to learn how to build things correctly. However, there is a good community and plenty of resources available to help you along the way. Additionally, keep in mind that this is just another tool that you may not use frequently.
2. If you want your designs to look stunning, you may need to hire someone to do the job.
3. There are certain limitations to the tool’s functionality.
4. Some coding skills are necessary to use the tool effectively.
5. It is important to have some form of support, as it is software and may fail at times.

Advanced prototyping tools.

I have experience using Axure RP, Protopie, and other similar tools. Of these, Axure RP is my favorite. While I used to believe that Axure prototypes were essential for every project, I now realize that this may not always be the case. In the past, I enjoyed the feeling of solving challenging engineering problems and creating complex prototypes in Axure. However, I now know that not all of these efforts were 100% efficient.

Pros:

1. Offers a lot of functionality and interactions.
2. Provides conditional logic.
3. Allows connecting to a database to some extent.
4. Supports importing designs from Figma, although the process may not be perfect.
5. The result can feel like a real experience.
6. It can be used for research purposes.

Cons:

1. The functionality has plenty of limitations, but they should not be considered a real obstacle.
2. The experience may be clunky.
3. These limitations need to be supported.
4. They create confusion in defining the source of truth.
5. There is a learning curve to overcome.

Nice-picture tools

There are tools like Principle, Aninix, and others that can help you create stunning demo videos. You can even test some small interactions with them. However, they are not suitable for prototyping A-Z flows. I won’t go into detail about this group, so explore at your own risk :)

Conclusion

In conclusion, while Figma’s prototyping functions may be lacking in some areas, it is still a valuable tool for Product Designers. Creating advanced prototypes can be time-consuming and unnecessary for many projects, and there are alternative tools available for those who need them. Ultimately, the most important thing is to use the right tool for the job and not get bogged down in trying to make a tool do something it’s not designed for.