Crunchyroll saves 146 hours per project by adoption Figma and Dev Mode

Time to read: 3 minutes

Summary: Crunchyroll, the global anime streaming service and the ultimate destination for anime fans leveraged Figma to find a solution to a unique challenge. After bringing together several smaller anime services under one ultimate brand – Crunchyroll – existing tools and workflows no longer fit. This impacted the team’s speed and efficiency, especially in the design-to-development process.

Switching to Figma and leveraging Dev Mode for implementation helped Crunchyroll save an estimated 146 hours per project while upholding higher design standards, building customer trust, and boosting cross-functional morale.

Challenge: Siloed, slower design-to-development workflows

Designers and developers at Crunchyroll were working with a multi-tool process that incorporated Sketch, InVision, and Zeplin. As the company grew and evolved, the overall workflow for design collaboration and handoff to engineering became increasingly complex, presenting new challenges for the team.

"With Zeplin, it was really hard to share work in progress with developers," says Keeley Laures, Staff Product Designer at Crunchyroll. "We had to save files and upload them to the tool, and repeat that cycle every time we updated a design." Documentation for designs would also consume entire sprints, diverting designers from more strategic work.

The use of multiple platforms for designs often led to misalignment between teams. Designers were meant to manually label design statuses, but this step was occasionally overlooked in the busy workflow, which could lead to uncertainty among developers about the current state of designs and what should be built.

"All the engineers were challenged because Zeplin took up a lot of RAM and was sluggish when you selected an element to inspect, like spacing," says Egor Neiluba, Senior Engineering Manager at Crunchyroll.

Another challenge was that components weren't linked to Crunchyroll's design system, which made it difficult for engineers to determine whether elements needed to be built from scratch. This sometimes led to situations where developers might rebuild existing components unintentionally.

"Even for a small component such as a button, that's wasted effort," says Egor. "Somebody has already tested the component, thought of all the different states, and verified that it works correctly on different devices. Then there's additional time for the change to be included in the app." If such duplication wasn't caught during code review, it could potentially lead to inconsistencies and additional testing requirements.

These challenges collectively impacted quality, and inconsistencies could be found in the app's global navigation, how buttons were used, and mismatched typography styles. This could affect user trust, says James Hsu, Director of Product Design at Crunchyroll. "When things aren't professionally designed or usable, people lose trust in them."

Solution: Figma as a shared source of truth

By switching to Figma and leveraging Dev Mode, Crunchyroll has unified its product development teams in a single workspace. This has made it easier for Crunchyroll to not only build better products together, but also increase developer efficiency. The team estimates they're saving about 46 hours per project on design annotations and another 100 hours per project by avoiding the need to navigate through layers to inspect designs. In total, that's 146 hours saved per project.

"Everything is in one place, so collaboration between designers and engineers happens much sooner, which is beneficial," says Egor. The added transparency enables early discussions about what's feasible to implement. "Developers can now see works in progress," says Susan Lin, Staff Product Designer at Crunchyroll. "I've had experiences where developers make great suggestions or point out things I missed."

With annotations in Dev Mode, designers can easily give engineers the clarity they need. "This has streamlined so much of the process," says Keeley. "We can call out specifics like a change to a component, and developers can see versioning, too." Making it easier for designers and developers to align has led to faster release cycles, and less reworks in production.

Working in Figma means files not only load faster, but there's also less friction at nearly every touchpoint. Instead of searching through multiple projects, developers have easy access to what they need, and are less likely to do duplicative work.

"Dev Mode helps engineers work smoothly because they don't need to switch between different tools," says Egor. "It also makes it easier to reuse code and see what parts we've already built." Dev Mode is view only, which helps with preventing accidental edits from engineers while maintaining transparency—and reducing administrative work. "Figma made my life a lot less complicated," says James. "I don't have to think about managing seats, permissions, or inviting people to the right project. Everything has healthy defaults set."

Crunchyroll’s success illustrates how unifying design and development in Figma can help teams level up how they build products together, in turn, elevate the user experience. With a more seamless process in place, they’re raising the bar for their passionate community of millions of anime fans worldwide.