Android Nomad #63 - The Design Infra
Building a Foundation for Scalable Product Teams
In today’s fast-paced product development world, seamless collaboration between design and engineering is crucial. In my previous post, I covered how design and engineering teams can efficiently maneuver frictions. As product matures and teams grow, managing design tokens—the variables that define a product’s colors, typography, spacing, and more—becomes a core part of maintaining consistency and efficiency. This is where a robust “Design Infra” comes into play before implementing one into app’s codebase as discussed here.
Why do we need this?
Single Source of Truth
A design system should provide a single, reliable source for all design decisions. As highlighted in ServiceTitan’s journey, the debate between making design files or code the source of truth is central. While design teams often prefer design files as the source, engineering teams lean toward code. The ideal is a system where both stay in sync, but this requires strong process and tooling.
Proof of Work
Every change—whether in design or code—should be traceable. ServiceTitan’s approach emphasizes the importance of version control and auditability, ensuring that updates are visible and can be rolled back if needed.
Easy to Audit
With a modular infrastructure, it’s easier to review, update, or even replace parts of the system (like third-party libraries or documentation tools) without disrupting the whole.
The Design-to-Code Pipeline
Imagine multiple design teams—let’s call them Team A, Team B, and Team C—working on different features or platforms. Each team continuously iterates on design files, updating tokens as the product evolves. But how do these updates make their way into the codebase, ensuring both Android and iOS platforms stay in sync?
The clean way to manage this long-term is to maintain tokens as a separate entity, with methodical read and write rules. ServiceTitan’s experience shows that leveraging existing tools (like Figma, Sketch, or Abstract) and integrating them with code repositories can jumpstart adoption and reduce friction.
Source of Truth: Design, Code, or Both?
Design as Source of Truth:
Fast edits, but risks fragmentation if changes aren’t communicated to engineering.Code as Source of Truth:
Ensures what users see is always up to date, but can leave designers out of the loop.Two Sources of Truth:
Possible, but requires exceptional communication and discipline to keep both in sync.
Design Token Manager is a ready to use plugin in Figma that can be used to export tokens in a standardized JSON format that follows this spec which is widely adopted. There are many others, pick a mechanism that works the best.
Once you have them, version it as part of the manifest.json such that tokens are strictly tied to the version.
Automated Validation and Distribution
Once tokens are updated, a Continuous Integration (CI) process kicks in. The CI validates the new tokens, checking for errors or inconsistencies. If everything checks out, it automatically builds new platform-specific files for Android and iOS.
Developers then grab these token files from the repository. While the process may still involve manually copying the new tokens into the codebase for each platform, the path from design intent to implementation is clear and traceable.
Documentation and the Design System
Supporting this workflow is comprehensive documentation—a living design system. This documentation ensures that every stakeholder, from designers to developers, understands how tokens are structured, updated, and used across the product.
Why Invest in Design Infra?
A scalable design infrastructure bridges the gap between design and engineering. It reduces friction, minimizes inconsistencies, and accelerates the release of high-quality features. By investing in tools and processes that automate and document the flow of design tokens, teams can focus more on creativity and less on manual handoffs.
Design Infra Workflow
Here’s a visually representation of this post.
In short, a well-oiled design infra isn’t just a nice-to-have—it’s essential for any team aiming for speed, quality, and cohesion in their product development lifecycle.
Join the Conversation
How does your team manage the flow between design and engineering? Have you faced challenges with keeping your design tokens in sync, or found tools and workflows that really work? Share your experiences, questions, or lessons learned in the comments below—let’s learn from each other and keep improving our design infra together!