Why we chose Figma as our prototyping tool.

The end of March marked the end of Q1 here at GetPaid Africa. As the only designer in the team, one of the things that I did during Q1 was to try different prototyping tools to find the one that will fit my design workflow and help me produce prototypes that the development team and business team could use to evaluate the product. The team wanted clickable prototypes that can handle dynamic data from a JSON file, an API, or google sheets file, and one that can handle input, states, and logic. Here are the prototyping tools that I tried and my experience while using them.

Framer

My first impression of Framer was that this is the prototyping tool of the future. I was so excited to use it especially when I found out that you can code your own interactive components and add them to a component library. I remember thinking, the design team and the development team will be using the same component library, wow! But that wasn’t the case because you can’t import most npm packages to Framer, at least not yet and our component library in Bit.dev depends on antd.

Another option will be to recreate the UI components the no-code way, and that didn’t seem like a good usage of my time since I have UI components done in Figma already with hovers states and auto layout, and also the components that I’ll recreate won’t have that interactivity that Framer has with their built-in components. And don’t get me wrong, Framer has great animations and transitions for clickable prototypes, but that’s wasn’t the priority. We wanted prototypes that have states, can handle dynamic data, can capture input data and pass it to another screen, and can use if-then logic and Framer wasn’t going to do that for us.

I think Framer is a great tool, with a bright future ahead of it but it's not a tool that can be used by the GetPaid team for now, maybe until they are able to support npm packages that are used in our components library in bit.dev.

Axure RP

Axure RP seemed promising, it had most of the things that we needed including if-then conditioning which was huge. The challenge with Axure is that I found the learning curve to be very steep. It was a bit different compared to other tools that I have learned and used before. It took me a while to get it, and when I finally did, I realized that it is not a good design tool, takes too much effort to add basic design details, and you can’t even do blending modes in there. So that combined with steep learning equaled settling for Figma clickable prototypes.

Conclusion

I think that those tools didn’t fit in my work flow because in most instances I had to redo the design work that I had done in Figma already and I would most of the times get results that weren’t worth the hustle. With Figma’s prototyping tool, I was able to implement good clickable prototypes that we would use as the whole team and even show some of them to our users during our launch event. The design file is still messy, lots of prototype wires going around and I hope that if-then conditioning is something that Figma could implement in the near future.