Titan Design System
One bloated Figma file turned into a governed design system. Design turnaround dropped by half.
- role
- Product Designer
- skills
- Systems Thinking, Asset Management, Design Tokens
outcome
Reduced design turnaround by 50% — proven by timed tests on design tasks — and improved consistency across the design-to-development hand-off process.
As the product designer at Titan C-UAS, I had the idea that an organized design system would help us move faster and increase consistency within the software. When I joined, I inherited an under-documented Figma file that lacked proper organization, with assets from the legacy system. Through this endeavor, I established documentation and a practice of regular governance on the design side to evolve the system, and kick-started the process on the engineering side to make the design system a shared priority between design and engineering.
audit
When I joined Titan, I inherited a bloated, undocumented Figma file. Only a single designer had been working on it, and it had not been updated regularly. The existing system relied heavily on screenshots and static images, leading to inefficiencies and miscommunication during hand-off. Developers faced significant technical debt in an outdated codebase, where small changes could have significant unintended consequences. The absence of documentation made onboarding new team members challenging.
The components themselves were complicated: they did not cascade, so any variation required breaking the component or adding to a long list of properties.
How might I streamline the design-to-development workflow, enhance consistency, and ensure scalable efficiency?
I began with a thorough audit of the existing component library, assessing whether a design system was even the appropriate solution and justified the investment. The findings highlighted significant opportunities: the system needed to evolve from a mere component library into a true design system and source of truth. In conjunction, I audited and aligned the asset systems for both Citadel and Titan across Adobe Creative Cloud and Figma.
development
With Figma's release of variables in the summer of 2023, I translated the existing styles into variables to account for both light and dark mode. For naming conventions I compared token-naming from Material, Atlassian, Carbon, and Apple's systems to find what worked best with the conventions our engineers already used.
While I avoided rebuilding when possible, many of the more complicated components had to be refactored because of inaccuracies in documentation. I pulled in developers to understand how and when we used different variations, and thoroughly audited the UI to determine which properties to group, which components to join as variants, and which to nest.
documentation
Once the components and documentation were stable, I focused on the processes that would let the team evolve the system together: Figma prototypes housing clear, navigable documentation — deep dives into each component's use and constraints, plus general guidance on contributing — and a critique-and-review cadence where every software release triggered a pass over UI components, behaviors, and style changes to keep everything current.
lessons learned
Much of the focus in design systems tends to be on the "atoms": components, libraries, styles. But the true success lies in how the system is used, how it evolves, and understanding why it matters. Design flourishes best when it works closely with engineering through a shared roadmap that goes beyond Figma components — it's this shared ideology that makes everything work.