Apr 22, 2019
 in 
Design

Using Figma to Enable Collaborative Design Iterations

W

hen I was 12, I got my first book about Hyper Text Markup Language (HTML). I wanted to make websites, and everything was done by hand. If you wanted to use some sort of editor, it was more like a waste of time and added constraints.

So by the time I was 14, I was really into making websites. It remained a big undertaking, one that I could only do it when nobody was looking. I think it was because everything was new, and what made a design cool, acceptable, or terrible was a process of discovery.

1997 Book about HTML 3.2 - Notice the mention of Netscape Communicator :)

It was like seeing if I could pull something off that made sense to me in the moment, and then beating the complexity of commands and syntax, only to see hours later if the output was good or bad.

But many things have changed since 1997 to 2019. The tools we use are spectacular, and coding has become a lot easier. We use components and entire libraries that facilitate our projects, and the emphasis is more on design.

Thanks to these new tools and community-backed projects, we can spin up a complex website that is responsive and integrated with other services in a matter of hours.

So how do we take this into making web applications?

User experience is the name of the game, and a critical factor in making or breaking your project. We usually have a ton of information to display, and we want to give options for our users to interact with it, with behaviors that are often linked to searches, filters, sorting or configuring something.

Often times what we do deals with getting ourselves in the flesh of the task at hand. All this data we can display, how can we present it in a way that it helps decision making? That is, before it is treated by any feature that does precisely that. In a way, it is like shortening the distance to engineering, through a great design.

An upcoming flow for Strings, a network management service where you can create hardware containers

For this, I know no better way than to use Figma, a collaborative design tool that helps you make functional, interactive prototypes.

I use Figma to share specs with software developers, but also to design with others, and get fresh input on what I am doing.

It is a far cry from the intimacy of designing by myself, but I have found that failing & learning with others enables a lot of growth for the team, in skills, communication, affinity and quality as well as quantity of output.

But perhaps the biggest impact has been that Figma reduced the work cycles for us, so we are kept in the loop and excited about the findings on each iteration. Fast-paced without the mess, which is hard to get right.

Towards the end of a cycle, where we iterated to the point of being ready for signing off to engineering, I am always left with so much satisfaction because I can see so many details that I would have otherwise missed. New approaches I would have never attempted unless we made the iteration collaborative.

It is also fun! As you can leave comments precisely on design components that you are referring to.

Another screen from Strings, where we see statistics, status and network structure around a CMTS (CableModem Termination System).

And as a tool, I found that Figma is done with a facilitation approach, like when you select a shape, and you automatically get the dimensions displayed. The little things that make the difference.

The Dashboard for an upcoming SaaS (Software as a Service) for enterprise conflict management, named Assist HR.

With Photoshop, which I still use for other needs, UX Design felt more like those early days of HTML-coding. You have to fight the tool, defeat its quirks and capricious needs, and then you conquer your task. But with Figma, flow is almost guaranteed. If you somehow get stuck, there will be an inflection point, whether it comes from you or a teammate.

The tool does not get in the way, but it helps you realize where you can improve.

Organizing layers, groups and components is often the cause for peace of mind, order and insight. It does not feel like you are pleasing a system, but more like tidying up the concept.