How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog (opens in new tab)

Crunchyroll’s global scale—15 platforms, 12 languages, and many legacy workflows—makes consistent product design difficult. Its Universal Design System helps standardize experiences and improve delivery speed, but outdated processes and fragmented documentation created confusion. Moving handoff and implementation guidance into Dev Mode has made design-to-development collaboration faster, clearer, and easier to maintain.

Crunchyroll’s Design Complexity

• Crunchyroll serves around 15 million fans across:
  • Web and mobile applications
  • Smart TVs, game consoles, set-top boxes, and Roku
  • Nine living-room platforms
• Supporting multiple languages and complex licensing requirements increases product complexity.
• The company also extends beyond streaming through the Crunchyroll Store and Game Vault.
• Its goal is to create a deeply relevant experience for anime fans rather than a generic service for everyone.

Measuring Design Success

• James Hsu defines successful design through two baseline criteria:
  • It looks good, using sound typography, grids, spacing, and visual hierarchy.
  • It works well, with clear content, thoughtful interactions, and no frustrating edge cases.
• A design can be visually polished but still fail if users become trapped in confusing flows or loops.

The Role of the Universal Design System

• The design system promotes consistency across devices, reducing cognitive load caused by inconsistent fonts, grids, spacing, or responsive behavior.
• Reusable components improve team efficiency, much like meal preparation:
  • Teams can build from existing solutions.
  • New components can be evaluated based on their cost and value.
• Shared patterns speed up product delivery and help product teams validate ideas quickly.
• Engineers also benefit from avoiding duplicated implementations, reflecting the “Don’t Repeat Yourself” principle.

Adapting the Design System to Reality

• Crunchyroll uses:
  • A foundational design layer
  • Separate component libraries for individual clients
• The system still contains many one-off components, numerous variants, and an underdeveloped type system.
• The team rejects treating the existing system as an unchangeable process.
• The design system should serve current product needs, not constrain teams because of decisions made by previous teams.
• Different designers are at different stages of understanding and adopting the system, making education and early investment important.

Problems with the Previous Workflow

• Design and code parity was managed through complicated Jira workflow triggers.
• Component changes generated automated alerts, but time-zone dependencies and convoluted processes meant stakeholders often lacked the latest information.
• Documentation was split across separate Zeplin projects for iOS, Android, tvOS, and Android TV.
• Finding the right flow required invitations, navigating branches, and comparing against outdated designs.
• Searching for a specific payment signup flow could take several minutes per artboard, making implementation research slow and frustrating.
• Handoff statuses were ambiguous:
  • Designers submitted work for review.
  • Reviewers moved it back to “in progress.”
  • Exported designs were not necessarily final.
  • Engineers had to rely on labels such as “ready for development.”

How Dev Mode Improved Handoff

• Dev Mode gives engineers direct access to design values and helps them identify the correct component.
• Designers now create a dedicated, organized page when work is ready for development.
• The page is labeled “ready for development,” and engineers receive a link directly to it.
• Engineers no longer need to sift through ideation or outdated explorations.
• Faster loading and parsing removed a major pain point from the previous tool.
• The team supported adoption through documentation and onboarding workshops for developers.
• Crunchyroll is also interested in integrating Code Connect to make its existing design-system code more accessible.

Crunchyroll’s experience suggests that a design system is most effective when paired with clear ownership, focused documentation, and a streamlined handoff process. Dev Mode helped replace fragmented legacy workflows with a faster path from approved design to implementation.