Why we switched to Figma as the primary design tool at Zomato
Figma makes it so much easier to design together at Zomato.
I got the opportunity to be a part of Zomato’s kickass design team in 2018. What absolutely struck me was an extremely talented design army of independently different mindsets, all under one roof. There was a lot for me to learn and lots to share.
Back then we had the following tools in our design stack —
- Sketch App: for interface design and UI kit
- Abstract or Github: for version control
- Invision or Marvel: for creating prototypes of mobile and web projects
- Adobe CC: for illustrations, design assets, and animation
- Principle App: for animated design and interactive user interfaces for demos
- Zeplin: for developer hand-off
Using all these tools and maintaining the design ecosystem sanity was not an easy task. Even though we had a repository of design files saved on the cloud, but other team members had a hard time finding files they were looking for and this lead to a lot of to and fro between the design team and other people. After a few months of struggle, we realized that maintaining design guidelines and UI kits was a constant effort and so we required a better solution for this.
I remember for the longest period, ‘Sketch’ had been the most popular and beloved design tool and there was a time when everyone was migrating from Photoshop to Sketch. When this new tool called ‘Figma’ arrived, it was considered a free alternative. Since its inception, it has massively evolved and now has plenty of useful features. I started using Figma for a very small project and soon realized that it could also be used to replace our current design stack.
The design team at Zomato (including myself) has been using Figma for a few months now and here’s why I recommend it to my fellow design community.
Figma is not just a free version of Sketch!
Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better for team collaboration. A plus feature on Figma is that people using Sketch currently can easily import their Sketch files on Figma, hassle-free.
1. Platform independent
We know designers love Mac whereas developers love Linux. Few other teams in an organization also have Windows OS. What’s brilliant is that Figma can bring everyone together when it comes to getting feedback or sharing specifications. And that’s because Figma works on any operating system that runs a web browser — Mac, Windows, Linux machines or even the iPad.
2. Team Collaboration and Feedback
Figma has the same collaboration feature as any Google doc. Since it runs on the cloud, anyone can be given access to a design file via its URL. Because of this, teams can share files, gather feedback, and iterate faster to come up with the best version.
Other teams outside the design territory can also work on the same file and share feedback. For example, one could invite the content team to proof-read all the copies instead of having it done on a separate document or sheet.
The platform also gives unlimited view-only accounts (which are absolutely free!), where viewers can leave comments as their feedback.
3. Team library
Figma has a Team Library feature similar to Sketch’s shared symbol library but is more flexible and easier to design with. Team library helps to create a robust design system. This is usually a file, or a series of files, that contains all of a team’s master components and styles. Anyone from the design team can enable or disable assets on the fly if need be.
4. Prototyping
Many prototyping tools that allow us to import our mockups are extremely fruitful, and these come with some really cool features. But if one requires a quick prototype without having to waste time by switching to another tool, then Figma is a good option. Its prototyping feature allows us to create interactive flows that simulate how a user may interact with our designs. Hence, it eliminates the need for a separate prototyping tool.
5. Handoff
Figma also contains a design specification feature that helped us move away from Zeplin. It displays code snippets on any selected frame or object in CSS, iOS, or Android formats for developers to use when reviewing a design file. The design components in any file can then be inspected by developers.
Note: Figma does enable full integration with Zeplin as well.
What do we conclude?
Before Figma, several other tools (mentioned above) were used to facilitate the exchange of design mockups and updates. The iteration cycle was a series of back and forth file updates, for teams to review and implement the design.
After Figma, the need of using other tools and services gets killed as everything comes in one single package. Third-party tools are no longer necessary (but could be used if required).
All in all, we could say that this switch has simplified the design process and is more effective than other programs at helping designers and teams work together efficiently.
Note: Figma is not paying us for this, nor did we get a discount in exchange for this post. We think Figma is a great tool, and your organization will benefit from what it brings to the table.
