Vijay Verma | May 31, 2019 | 4 min read
Why we switched to Figma as the primary design tool 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.

Multiple members working on the same file

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.

Feedback and critique on mocks

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.

Enable/disable options in team library

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.

facebooklinkedintwitter

More for you to read

Technology

introducing-pos-developer-platform-simplifying-integration-with-easy-to-use-tools
Sumit Taneja | September 10, 2024 | 2 min read
Introducing POS Developer Platform: Simplifying integration with easy-to-use tools

Read more about how Zomato is enabling restaurants to deliver best-in-class customer experience by working with POS partners

Technology

migrating-to-victoriametrics-a-complete-overhaul-for-enhanced-observability
SRE Team | August 12, 2024 | 11 min read
Migrating to VictoriaMetrics: A Complete Overhaul for Enhanced Observability

Discover how we migrated our observability metrics platform from Thanos and Prometheus to VictoriaMetrics for cost reduction, enhanced reliability and scalability.

Technology

go-beyond-building-performant-and-reliable-golang-applications
Sakib Malik | July 25, 2024 | 6 min read
Go Beyond: Building Performant and Reliable Golang Applications

Read more about how we used GOMEMLIMIT in 250+ microservices to tackle OOM issues and high CPU usage in Go applications, significantly enhancing performance and reliability.

Technology

zomatos-journey-to-seamless-ios-code-sharing-and-distribution
Inder Deep Singh | June 6, 2024 | 15 min read
Unlocking Innovation: Zomato’s journey to seamless iOS code sharing & distribution with Swift Package Manager

Read more to know about how we migrated Zomato’s 10-year-old iOS codebase to Apple’s Swift Package Manager. The blog highlights the process behind building a central syncing mechanism needed across multiple apps, the challenges encountered, and how we resolved them.