Using Figma for Collaborative App Design

 

When you get to the heart of it, Asymm is a collaborative software company. How we work on development projects with our customers is just as important as the product we build. The development models we use, whether nearshore staff augmentation or outsourcing, are flexible options that allow customers to collaborate in a way that makes sense to them.

Every decision we make is based around delivering quality and promoting collaboration, down to the software we use for our own development needs. I think a great example of this is how we use Figma for mobile app design.

 

A Quick Overview of Figma

Figma is a cloud-based design and prototyping tool that is perfect for designing websites, mobile apps, and other user interfaces.

 

Design and Prototyping Tools

It’s a highly effective tool for designing and prototyping, allowing the designer to have complete control over the look and usability of the app. These design tools include vector editing – which are digital images that are created using a series of points, lines, and shapes – as well as typography controls, grids, and other alignment tools. 

Beyond the design itself, it also offers prototyping capabilities, empowering the designers to create prototypes that are interactive, such as animations, transitions, and user flows.

 

Component-based Design

Figma promotes a component-based design. At a high level, this refers to designing the systems the app is made of, rather than simply creating pages or screens. It enables the designer to divide the user interface into a collection of manageable, reusable parts. 

The benefit of this is in ensuring consistency and efficiency during the design process so that any changes to a particular component are automatically reflected throughout the design.

 

Design System Management

Because it favors component-based design, it’s easier for designers to create and maintain design systems made up of reusable UI components, styles, and guidelines. These design systems help ensure consistency across multiple projects and facilitate faster design iterations.

 

Figma Collaboration: The All-important Edge

The point is, Figma is a truly powerful tool for designers, allowing skilled users to create beautiful, user-friendly apps that achieve a specific business purpose. 

However, no app is created alone. It takes multiple stakeholders – from designers and clients to project managers, developers, and beyond – to bring an application to life. It’s in this context that Figma really stands out to us at Asymm. That is, because of its ability to facilitate collaboration. 

 

Cloud-based Collaboration

As we mentioned, Figma is a cloud-based software, meaning that anyone with the correct credentials can login remotely to view a particular file. In this way, multiple designers can work on the same file simultaneously, collaborating through comments or feedback. 

The same holds true for any other stakeholder, such as clients or project managers, who can be involved in every step of the design process as necessary.

 

Developer Handoff

When the time comes for the designers to pass the project on to the developers (or vice versa), Figma has built-in tools for simplifying the process. It allows you to generate design specifications, design assets, or code snippets, which streamlines the communication and collaboration processes between design and development teams.

 

How We Use Figma to Design an App

This mixture of enhanced design tools and powerful collaboration potential is why we always use Figma for mobile app design at Asymm. We find that its features fit with our approach, which is built around a highly collaborative process. 

Here are a few of our best practices we implement when using Figma to design and develop a project.

1. Communication From Day One

We begin every relationship with a consultation, where we talk about the client’s specific needs, focusing on two key areas. 

The first is the hard features and goals, which most clients have already thought about by this stage. With Facilitron, they knew what features they wanted on their “Works” app and were able to communicate these needs to us in this meeting. 

But we also take time to talk about the “how”. As mentioned at the beginning, we operate using a nearshore model, which involves sourcing top talent from Mexico. Depending on the project needs, this could take the form of outsourcing or staff augmentation. 

In either case, collaboration is essential to ensure smooth ongoing operations, which is why we find using Figma to design an app so helpful.

 

2. Creating Initial Wireframes

Once the preliminary consultations and project-scoping processes have been taken care of, the team moves to the wireframing stage. This step allows the client to get a visual idea of what the app will look like, so they can provide feedback. 

We use Figma’s collaboration features, such as real-time editing, comments, and design system libraries heavily at this stage and moving forward. It enables us to create a healthy feedback loop and effective teamwork processes. 

Wireframes are generally considered the design-less flows of an application. Consisting of grey boxes as place holders for things like sign up, login, and other user actions, stakeholders can use wireframes to understand the features and functionality of an application before it is designed.

 

3. Mockups and Prototyping 

Once wireframes have been approved, the team moves on to creating mockups and prototypes – which is different from wireframes. Using Figma's design tools for designing mobile app screens, the client is able to review and approve the definitive layout, structure, and design that an app will consist of. 

The same level of collaboration and iteration continues with the prototyping. At this stage, it’s common to bring outside user opinions to test how well the UX and navigation has been designed within the app. As ever, this is subject to a continual feedback loop to reach the optimal designs through several rounds of feedback. 

 

It Takes a Team to Unlock Figma’s Potential

Figma is a powerful program to create beautiful, user-friendly, and effective designs for apps. But its true potential is in the collaborative capabilities. With Figma, multiple stakeholders – whether clients, designers, developers, or more – can work together to bring a particular vision to life. 

If you’re interested in using Figma to design a mobile app, contact us today to find out how we can help.