Building A Native Design System For iOS
Article Summary
Kevin Beaulieu from Thumbtack reveals how they built an iOS design system that balances strict consistency with real-world flexibility. The secret? Making standard usage effortless while keeping customization possible.
Thumbtack's engineering team extended their web design system (Thumbprint) to native iOS, creating a unified component library that maintains brand consistency across platforms. The article details their architectural decisions and principles for building reusable components that iOS engineers actually want to use.
Key Takeaways
- Standard button themes serve 99% of cases, custom themes handle the remaining 1%
- Design system components subclass UIKit to minimize cognitive load when switching contexts
- Cross-platform name parity prevents confusion (text field vs input across teams)
- Friction is proportional: breaking guidelines requires more work, serving as a guardrail
- Color tokens defined as JSON generate platform-specific code for iOS, Android, and web
Thumbtack's native design system increases both product quality and developer productivity by making compliant implementations easy and non-standard ones progressively harder.
About This Article
Thumbtack had a mature web design system, but native apps were left behind. iOS and Android didn't follow the same patterns as the web, which meant the brand looked different across platforms. Engineers kept rebuilding the same components over and over.
Kevin Beaulieu's team created a set of cross-platform principles. They defined components as Swift structs with public constructors. Engineers could use five standard button themes for most situations, and they could create custom Theme instances when they needed something different.
Instead of duplicating work on every page, Thumbtack standardized components once. This improved accessibility and product quality. Engineers also had an easier time switching between UIKit and Thumbprint components because the API design was consistent.