Figma Mirror App Redesign — a Product Design Case Study

With a quick search, you can find plenty of books and articles on UX on the Internet. However, as a designer how many times have we thought about our own experience during designing?

Cover photo

Introduction

In 2015, Figma was unveiled as a web-based design tool that empowers designers to have a collaborative and cloud-based design process. It also featured a straightforward tool to help designers create prototypes of their ideas or share them with others.

Where did it begin?

All three of us began our work with Sketch software. We carried out many projects using this software and designed numerous prototypes. In 2019, when Farshid and Zinat decided to work full-time on remote projects, they realized they were facing new sorts of requirements in their new role. The constant communication with employers and receiving feedback, the need for consecutive transfers, and speed were the three factors that made Farshid and Zinat switch from Sketch to Figma. Despite its challenges and the change in the design infrastructure, which is quite stressful, the decision to change their design software enabled them to improve their design process. Instead of long meetings with the employer, they could have better and faster communication using Figma’s commenting system: They were able to create a very fast design system without any complications and challenges for each project, and most importantly, they had access to all of their designs from any place and any computer.

Why were we interested in improving Figma Mirror?

We spend most of our time on Figma during the day. We work with Figma even more than we see our friends and relatives. During these daily uses we realized that despite all of its good features, this software does not meet some of our needs. We could not communicate with customers and other team members in the app environment, review our projects together or share our designs with each other.

Having a wrong hypothesis is better than having none!

If you have a hypothesis, even a wrong one, you can at least make sure that you are making a mistake. Finding out our mistakes and trying different solutions to resolve them helped us work more efficiently on the problems and their possible solutions.
  • There should be cloud access to all projects.
  • The details of the projects must be visible such as their design systems.
  • There should be some ways for communicating such as commenting system.
  • There should be the possibility of managing or sharing the projects without the need for a computer.

Who faces these problems?

We already knew that a large number of the Figma users are designers, however, there must be other people with different specialties who use this service. Therefore, just focusing on the designers could not work for us in describing the disparate aspects of the problem.

By designers we mean:

  • Designers who work full-time or part-time in a company. These designers might work individually or as a team.
  • Freelancers who work simultaneously on one or several projects.
  • Designers who develop their own designs.

By developers we mean:

  • Developers or teams of developers who work in a company.
  • Developers or teams of developers who work as freelancers.

By employers we mean:

  • Product or design managers who work in a company.
  • Business owners or people who outsource their projects.
  • Design or product consultants who help the companies to develop their products.

It was time to help others feel good!

Speed, interactive design, and being accessible have always been the center of focus of Figma company, but did Figma Mirror app include all of these properties as well?

  • They should be able to communicate with the stakeholders of their projects flexibly and at any moment.
  • They should be able to manage the progress of their projects and share them with ease.
  • Project Inspection & Management
  • Sending & Checking Comments
  • Audit log per Project
  • Sharing Projects & Details
  • Design System & Components Management
Competitive analysis: Figma Mirror vs Adobe XD and Sketch Mirror
Competitive analysis: Figma Mirror vs Adobe XD and Sketch Mirror

The way the new Figma Mirror will work!

During the process of designing the features of the new app, we tried to have a more idealistic view of the subject, and besides the basic features of this product, we wanted to utilize the benchmarks and our hypotheses. Our comprehensive vision enabled us to carry out the phased development approach procedure and on the basis of the precise results.

As a Figma user, I want to have access to the mobile version of Figma Mirror that is always available, independent from the desktop or web platform, so that I can have a more efficient and effective workflow.

We took this sentence as our initiative and by taking into account our data from the previous steps, made a list of Epics of this app:

  • Project Management Process: As a Figma user, I want to see my projects sorted so that I can check their status and manage them.
  • Commenting Process: As a Figma user, I want to have access to all comments about a project or open a new thread so that I can make a better decision concerning the project in the fastest way possible and based on the shared opinions.
  • Project Monitoring Process: As a Figma user, I want to have access to the history of any activity that occurs within a project so that I can have a better understanding of the process of my projects.
  • Project Details Management Process: As a Figma user, I want to be able to have access to the details of the project such as frames and components besides the general aspects of a certain project so that I can be aware of the details of the project.
  • Sharing and Access Management Process: As a Figma user, I want to share the whole project or a part of it with the team or outside the team or manage the current access so that I can have a goal-oriented and simpler interaction with them or manage other people present in the project at any moment.
  • Mirroring Process: As a Figma user, I want the ability to check my modifications on my projects on my mobile besides desktop and web versions of Figma so that I can be sure that my designs are aligned with the mobile design standards.
The list of product Epics

User Flow & Information Architecture

Now it was time to define the high-level structure of the new version of Figma on the basis of mentioned Epics. First, we decided to define the position of each feature and its relationship with other parts of the app before designing the wireframes.

The complete User Flow of Figma Mirror Redesign
The User Flow of the project

Wireframes

Now that we knew the functions and identified the relationship between the sections, we should discover which function and with what layout and structure are going to have interaction with the user.

Wireframes of the project
Wireframes of the project
Authentication process alternatives
Authentication process alternatives
Project management alternatives
Project management alternatives
  1. Inserting New Comments
Commenting alternatives
Commenting alternatives
Adding new comment alternatives
Adding new comment alternatives

Final Design

After ensuring the layout and function of the features of the new app, the time had come to design the details of the features using all information and documents we had obtained or produced up to that time.

Final Designs
  • Figma Mobile App Design Language
  • OS Design Language
  • Project Management Process
  • Commenting Process
  • Project Monitoring Process
  • Project Details Management Process
  • Sharing and Access Management Process
  • Mirroring Process

Authentication

If the user is not logged in, this section will be displayed for the user right after Splash and Onboarding pages (when opening the app for the first time) and shows the Login and Sign Up touchpoints. We were aware that the largest group of users of this app are designers who already have used the web or desktop versions. Therefore, a great number of users must already have user accounts, and thus, the Login touchpoint was more important than the Signup.

Onboarding and welcome screens of Figma Mirror Redesign
Onboarding and welcome screens
Login and Sign up flows of Figma Mirror Redesign
Login and Sign up flows

Project Management

After the Login or Sign Up flows, we considered a page for project management. On this page, the user can have easier access to their projects through different Sorting and Filtering methods. The user can also search them based on the project name or people involved in a specific project and see its name, cover, time of the last change, and the number of unread comments.

Project management details of Figma Mirror Redesign
Project management details
Micro interactions of Figma Mirror Redesign
Micro-interactions
Scheduled maintenance feature of Figma Mirror Redesign
Scheduled maintenance feature

Commenting

In the comment tab, the user can see all comments and can swipe to Pin or Unpin the important comments, last but not least can mark the desired comments as Read or Unread without opening them.

Comments monitoring process of Figma Mirror Redesign
Comments monitoring process
Comments reading and writing process of Figma Mirror Redesign
Comments reading and writing process
Comment Mode feature of Figma Mirror Redesign
Comment Mode feature

Project Monitoring

This section includes a list of all activities of the user or other people involved in the project. Here, the user is able to see the changes made in different projects, have a list of new comments, and manage new project invitations.

Activities and logs
Activities and logs

Project Details Management

During the design of this section, we checked similar apps, especially Sketch many times. We have always been fascinated with the interesting way that Sketch presents various Artboards. When designing the new Figma Mirror, we tried to develop our ideas based on what we saw on Sketch mobile app and facilitated the navigation methods between Frames, especially on big projects.

Project details management
Project details management
  • Sharing through Screen Shots
  • Saving each Frame as PNG

Sharing and Access Management

The sharing and access management section in the new version of Figma Mirror is designed quite similar to its web and desktop versions. We believed that almost all aspects of this section in the web or desktop versions are applicable and can be duplicated in the mobile version. Therefore, there was no need to invent the wheel again.

  • Management of existing people or Inviting new people
  • Project link access management
Sharing methods and access management
Sharing methods and access management

Mirroring

Finally, the last section of this app is the Mirroring process. A familiar feature that its limitations made us start this project in the first place!

Mirroring process
Mirroring process

The Outcomes of This Redesign

For us, the outcomes of this conceptual redesign can be seen from two aspects. First, doing this project as a team during our free time, helped us to spend more time with each other again after a long time. Considering that Farshid, Zinat, and Hooman live in different countries, the team communications were happened using Skype or Figma commenting system. Sometimes, we designed or ideated a specific part of the project together and sometimes, we just turned our cameras on to replicate work in the same place.

Thanks for reading!

You can check out the animated presentation on Behance or read the Farsi version of this case study on Virgool.

Problem solvers

Director of Design at Snapp!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store