Skip to main content

How Truecaller scaled securely and efficiently with Figma

Recruiting Figma for the fight against spam

Truecaller is a leading caller ID and spam-blocking app, trusted by more than 450 million users worldwide. Founded in 2009 in Stockholm, Sweden, the company helps people manage calls and messages safely by identifying and blocking telemarketers and scammers.

As an app that trades in trust and transparency, providing a reliable, consistent, and intuitive UX is fundamental to maintaining customer confidence. Discover how Truecaller uses Figma to improve collaboration, accessibility, and security, and to scale its product for hundreds of millions of users.

Moving to Figma was a turning point for our team - it made collaboration effortless and helped us bring more structure and discipline into the design process. This helped us maintain a high-quality, trusted app experience as we exponentially grew our user base.

Tushar Satyanath, Principal Product Designer, Truecaller

Spam caller message on phone screenSpam caller message on phone screen
Figma helps Truecaller to serve millions of users with a relatively small team and deliver consistent design across every version of its app.

The challenge

Truecaller’s design team is lean and geographically dispersed, with people based in three different time zones. This means collaboration and design discipline are critical. For a long time, its design system was held together with core components that were documented and centralized. But to use them, designers were duplicating and detaching files. So, as the business scaled, the design system had started to drift. Collaboration was happening, but on calls, not in files. It was becoming hard to keep a single source of truth.

The old tools were not exactly broken, but they were starting to creak under the pressure. Then in 2019, the business transitioned to Figma.

Solution

Figma enables Truecaller to serve millions of users with a relatively small team and deliver consistent design across every version of its app. Some of the key benefits for Truecaller include:

Real-time collaboration

Using Figma, designers located in Europe and Asia can now work simultaneously in the same file in real time. With instant feedback, review cycles are much faster and version conflicts are eliminated.

As an additional upgrade to its collaboration capabilities, Truecaller now uses FigJam, the online digital whiteboard, as a creative hub for design brainstorming, planning, and other interactive sessions.

We instantly saw the benefit of having something so collaborative, where we can literally just do things in the same space, even though we're not physically next to each other … we can simply jump into a file and see what someone's up to or give feedback directly on the working file.

Tushar Satyanath, Principal Product Designer, Truecaller

Scalable design system

After migrating to Figma, the Truecaller design team set about rebuilding the design system to create a set of consistent core components. Changes made to one component are cascaded throughout the design system instantly, making it easier to create a global style and to maintain a consistent system.

A robust design system speeds up updates and ensures every new feature looks and behaves consistently across devices and app version upgrades.

Accelerated accessibility

With variables in Figma, designers can instantly switch between light and dark themes, adjust colors, and verify Web Content Accessibility Guidelines compliance.

Figma’s variables feature made designing for accessibility much simpler. Previously, the team relied on plugins to test color contrast or how the app appeared in dark mode. With variables, designers can instantly switch between light and dark themes, adjust colors for readability, and verify WCAG (Web Content Accessibility Guidelines) compliance.

We built this exercise where we looked at accessibility, figuring out the right kind of grade of a color and scoring it, and we used Figma to make sure that things were following WCAG standards. Now we have a base inventory, pick from those, and then assign the color to the design system.

Tushar Satyanath, Principal Product Designer, Truecaller

Upgrading from Pro to Org

After using Figma for a couple of years and feeling its positive impact, Truecaller switched from Figma Professional to Figma Organization. This brought additional security, collaboration, and developer benefits to Truecaller, such as:

Security for customer confidence

As a company whose mission revolves around safety and trust, Truecaller can’t compromise on security. Moving to Figma’s Organization plan gave it ISO27001 and SOC 2 Type 2 compliance, and gave its IT security teams full administrative control, including Single Sign-On (SSO) and centralized permissions.

From a security point of view, because we get SSO with it, it just seemed like a no-brainer. I would say that was probably the biggest reason why we wanted to upgrade.

Tushar Satyanath, Principal Product Designer, Truecaller

Bringing developers into design

Design-to-development alignment helps speed and quality when shipping a new release. Using Dev Mode, developers can now inspect and extract specs directly from design files - streamlining implementation and reducing friction.

Using Dev Mode, developers can now inspect and extract specs directly from design files

Figma bridges the gap between design and engineering. Dev Mode has brought our teams closer, making our design-to-code workflow faster and more consistent.

Tushar Satyanath, Principal Product Designer, Truecaller

Seizing new opportunities

For years, Truecaller’s iOS experience was limited by system restrictions. Now, with new Apple APIs, the app can display caller information directly on the incoming call screen, as it does on Android. This change means a massive step up in the quality of the product on iPhone.

Using Figma - by taking advantage of the speed of a robust design system, the cybersecurity certifications, and the alignment between designers and developers - Truecaller could get a high-quality iOS product shipped quickly and securely.

A design-led future

Today, Figma is helping to establish design as a strategic discipline at Truecaller, and it’s where global product development happens - from early ideas in FigJam and Slides to final design systems in Figma and developer handoff in Dev Mode.

What Figma shows is that one small team can make a huge difference to millions of users. By following the right processes, we can ship really viable, user-friendly solutions that actually help people globally.

Tushar Satyanath, Principal Product Designer, Truecaller

See how Figma can help you scale design

Great design has the potential to differentiate your product and brand. But nothing great is made alone. Figma brings product teams together in a fast and more inclusive design workflow.

Get in touch to learn more about how Figma can help companies scale design.

We’ll cover how Figma can help:

  • Bring every step of the design process—from ideation, to creation, to building designs—into one place
  • Accelerate design workflows with shared company-wide design systems
  • Foster inclusivity in the product team process with products that are web-based, accessible, and easy to use

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.