Figma, or (How a prototype went from a crazy mess to an organized, professional-looking solution) Part 1
Beginning in 2020, I got myself hired as an intern on an EdTech startup that was working on the prototype for their new responsive website. When I arrived, the project was pretty much all over the place. Google docs were simulating sign-up pages, PNGs made on photoshop to simulate profile pages and a lot of print screens from other websites and solutions.
All of this was shared with, and by, the team that was supposed to actually code the solution, and, needless to say, they were completely lost in their project folders and solutions, and to be honest, even I was lost too when I got there, and I still get lost sometimes when I have to open the company’s utterly cluttered folders of old prototypes and files. It was hard for them to understand what had to be implemented exactly, and it was even harder for us to present all of this to the client or early adopter, and sell the idea.
Anyway, thing is, we urgently needed a way of decluttering and having an organized prototype that we could actually show and present to people and possible clients, in a way they would understand what was happening, in a clear, concise, and logical way, without us hopping around 15 files open at once, or a presentation that has clearly no pattern between the prototype’s pages.
The solution came as a simple and free tool called Figma.
In case you don’t know what Figma is, it is basically a drag ’n’ drop tool to prototype websites and apps. You could think of it as an interface and workflow similar to Keynote, Canva, or Powerpoint, but to simulate apps, instead of making presentations.
It’s no shame, no one of us has ever heard of this company or software either. But we decided to give it a try and see how it would work, and the results were strenuous. Our project finally had a website look and feel, with a prototype that we could export as a PDF or image format and show anyone, without much explanation on the lines of “this is a prototype” or “it’s supposed to work by …” And here goes a long explanation. Many times we showed an image of our homepage or a video about how it would work, and the listener asked “Is this running or just a prototype?”. It goes without saying that it was good enough to sell the idea.
But wait there, there’s a huge gap in this whole story. How did we go from a lot of files that nobody could understand a thing to a believable enough solution, that we were able to show and test with users? Did I miss something? Did I fell asleep?
No, you’re fine, and how this process happened (and still happens every day), is the theme of this series of stories that I’m about to write in the next days. Here we’re gonna take a look at how the software works, how we organized and created a design system for our first version, and how the tool helps us creating and testing out new ideas easily and quickly, leaving much more time and work available for actual creative decisions, instead of wasting our time using non-optimized software.
In part two we’re going to start exploring how we created a design system for the project, at the same time we designed responsive navigation for our prototype.