From Solo To Colab: How Figma is changing the app design world.
By: Subramanya C G
Tags: Dineoutdesignblogs, UX Design, Figma, UI Design, Ui Ux Design

Covid 19 led to a lot of innovation and change in lifestyle, including that of corporate life. People are still staying home and are working remotely. They collaborate with their colleagues without being physically present around each other and showing their work on their screens. What used to be a conference room meeting has now turned into a conference call. It stepped up the trend of software in the workspace and thanks to innovation in digital communication, the work has not been affected. You are doing the same things in your own personal space, with more time in hand. While Zoom Calls, Google Meets, Cisco Webex, Microsoft Teams have become the backbone of communication across all departments, for designers like me, Figma made a significant impact when it came to designing and collaborating.

Two users editing simultaneously. Source: Figam.com

I have been working as a UX designer for the last 7 years. There were days when I relied heavily on Adobe Photoshop, Illustrator and Sketch for my design projects. Until last year, I was doing most of my design work on Sketch. From my experience, Sketch had everything I needed until I could no longer work from the office and brainstorm with my colleagues in person. That’s when I started seeing the challenge. Collaborating with other team members online became a pain. If I had to share my screen, I would have to get on a call. Not all of them had Sketch downloaded in their systems, and not everyone had a Mac. Also, for developer handoff, we had to use a third party tool/plugin. The need of the hour was clearly a browser-based tool that had no device restriction. Multiple people should view and work on the same file, and file-sharing is as easy as sharing a link on chat. Figma met all these requirements, and we were delighted to see how much more it had to offer.

If you look at it, there was no customisable software before Figma came into play in 2016. It is one such tool that everyone can use even if they do not know how to code. It is a cloud-based designing tool that is similar to Sketch in various functions and features. Still, it highly simplifies the design process and is substantially more effective than any other program. Teams can collaborate and work proficiently on Figma with much ease and proficiency, including UX writers and developers.

Why do designers love Figma?

Figma is one-for-all software. It has all the attributes and features of Sketch, Abstract, Invision, Craft, Live share, Zeplin, Freehand, Dropbox, and a bunch more. At one point, I have seen people pair designs in Figma to meet their insane deadlines. In fact, I personally know people who never switched from Coreldraw to any other graphic design software and are now exploring Figma for its various attributes and tools. And let me tell you this, it is not comfortable to keep switching from one application to another. Once you get the hang of a tool and you like using it, most often, people stick to the same tool.

5 key features of Figma are:

Multi-user access and real-time action-

Figma has the feature of collaborative editing. People can edit a file together and see their teammates’ activities at the same time. Not just editing, I love how we, as in everyone involved with the product, can explore the maze together in Figma. One can program while the other can collaboratively design on a single project. This kind of feature is not easily found in any other application unless they have pulled up their socks recently and have released these as new features.

Platform diversity-

A drawback with Sketch was that it can only be used on Mac systems. Now, in India, not every employee gets a Mac. In a lot of places, Windows is the preferred choice for laptops and desktops. Since Figma has no such device restriction, it is ideal for companies who have a mix of all devices or are entirely on Windows or Linux. It’s genuinely freedom-enabling!

Commenting and tagging fellow members-

In Figma, anyone who has been given access to the project can comment and tag another member of the project. Something similar to Google docs. Just click on the part where you need to comment, type your comment and tag the person concerned. The person is notified immediately too. It becomes effortless to clear your doubts and get feedback on the go. Also, for UX writers, this comes in very handy when creating microcopies and proofreading the texts.

Access via web browser-

One of the reasons why collaboration is so easy on Figma is that it works on web browsers. People don’t even need to download the software. The work done on Figma is automatically saved to a shared space on the cloud, which helps organise the files efficiently. It can be accessed through a URL, and PNG can be uploaded and arranged in one single file. The seamless library components help profusely as well. Team members can design Wireframe, Prototype, Ship to devs, etc.

Mobile mirroring -

With Figma’s live device preview app, you can see how the changes are done on Figma; it will appear on your mobile screen. This app is currently available only on the iOS app store, which, umm… am not really happy about. But it is a great feature, nevertheless, and I hope the app comes out for Android users as well.

Figma has left both Sketch and Adobe’s XD too far behind to be considered reliable alternatives for real-time collaboration. It has the similar Sketch interface with some drawing tools and a similar clickable prototyping feature of Craft and Invision. Similar to Invision, on Figma people can comment, tag and mark on any design pane. Similar to Zeplin, developers can get styles, dimensions and download icons from the Project URL. But users are free from syncing their artboards whenever they update their design. You can also check out your timeline from the history section. Teammates can also collaborate in real-time, highlighting cursors of teammates on the screen, and they are free to draw things or make comments, a feature used in Freehand. So far, Figma has been a great application for quick designing, building, and exporting files for animation and prototyping. It has been wondrous for people as it solves problems in real-time collaboration.

Collaboration- harping on the same string, but it is totally worth it!

Well, yes! I have praised the live collaboration tool of Figma already, but the truth is, it is a big deal!

It is never too easy to build an entire application. For a product or even a feature to go live, multiple specialists work together to take the product/feature live. To avoid last-minute correction and fixes, it is essential that they be involved from the beginning, usually the design phase. In Figma, the design lives in the cloud and has an exclusive URL that provides certainty for the entire team. The design file acts as a venue to meet up and have discussions about the designs. Ux writers can share microcopies for the UI and CTAs, and developers can spot and voice technical concerns easily and rapidly. Every stakeholder, project manager, or anyone with the link provided can view and access the files to know how the design is unfolding from a plan to a detailed version with explained visuals. People are now informed at the early stages, which helps them in making corrections regularly. They can come to a single point to collaborate and brainstorm instead of working in multiple files.

Multiplayer in action. Source: Figma.com

In Figma, users have access to frames instead of artboards. In frames, teammates can easily nest another frame inside a particular frame. When you situate a smaller frame over a larger frame, the two frames are by design grouped, and the smaller frame becomes the child of the parent frame. Even for dividing the screen, users can group it into content areas and the nest components. This slant is united with auto-grouping, comparative positioning, and constrictions that help to make responsive designs. Developers are affirmative in using the frame layout as Figma is similar to the HTML container. While inspecting their designs, developers can see their UI elements placed in their containers. This gives them a more detailed blueprint to view.

In the early days, many people referred to Figma as a Toy instead of a simple tool. Figma’s perception has changed massively after shipping countless new features and updates to simplify the workflow and focusing on performance. Organisations like Microsoft, Spotify, and Uber are now part of Figma’s global user base.

The challenges with Sketch

Apart from the differences that I have already mentioned earlier, there are few more distinctive features in Sketch that make it less attractive than Figma (Sketch, by all means, is a superior tool, losing out points in just a few parameters). While using Figma, you would realise that it has components, whereas Sketch has symbols. Components are considered more flexible in usage than any symbol. In Figma, you can retrieve and amend any stratum’s properties in a component without removing it from the master. Similarly, it is with nested components. Suppose people change any layer’s property in the main component; Figma will automatically reflect these changes to all the instances in that file.

When you have to create a button in Sketch, you have to make a bunch of colour symbols, include them in your button, and create a mask using a “background” layer. This works fine but creates double work when we have to add the same colour to the Document Colors. Figma allows us to create Color Styles that can be applied to any shape. So you can create a “background” shape, fill it with a colour style, and you’re good to go! Those colour styles are available across the entire file without having to do any mask magic with nested symbols.

How Figma is helping us?

With the fast and forward ritual of the world, I realised people are switching to Figma at a much quicker rate. Figma has been one of the best alternatives for people to design, sketch and collaborate and has exceptionally refined its UI design approaches. People have made a positive remark on its usage as the platform has really shaped up and replaced Sketch in day to day’s workflow of people.

Especially during the lockdown in 2020, we were piled up with a lot of hefty work, and collaboration was the only way to complete these projects. The whole world was witnessing change management, and so were we, with some of our products. We landed on a notion of collaborating while working, and it was only possible with the usage of Figma. Product managers, UX writers, and the development team were all involved in the same project and had minimal time to deliver. Some of them along the line were Windows users, but all worked together to reach the desired results. We used Figma extensively and benefitted from the link-sharing feature to let everyone work as one unit, contributing towards the design, adding/editing content, leaving comments and downloading assets.

Presentation mode in action. Source: Figma.com

The reason I can compare both Figma and Sketch is that I have worked on both. So I can also tell you the challenges I faced when I made the switch if you are considering doing the same. Initially, it was extremely troublesome to switch between the frames. I used to get confused in resizing the frames with the command keys. Also, most of our working files were in Sketch and moving it to Figma was not a smooth transition. Getting the icons set from Sketch to Figma was the biggest challenge. However, it gets better with resources, where we can open a link for an icon set in Figma. It really reduces the friction for accruing design assets when the previous process involved downloading SVG icons, finding the appropriate icon, importing into the design app, etc.

It’s tough to not look at the intricate yet simplistic feature of Figma and not boast about it. Its collaborative nature makes it a fantastic tool for app designers, project managers and content creators to come together and create a unique user-friendly design. Just give the tool some time, it will grow on you, and maybe you’ll also be able to master the art of navigation. At Dineout, we aim to create a unique product design and solve our customer’s problem in a few clicks.

We understand that a great product cannot be made by one person working in silos, and great products are what we desire to make.

Figma helps us in standing up to that aim. What looks like an online web-based tool can revolutionise the entire app designing community and create some of the best user experiences possible.