SLC Design Teams Ditch Figma Variables for Custom Tokens
Silicon Slopes design teams are abandoning Figma Variables for custom token pipelines. Learn why SLC's B2B SaaS companies are making this strategic shift.
SLC Design Teams Ditch Figma Variables for Custom Tokens
Design teams across Silicon Slopes are quietly abandoning Figma Variables in favor of custom token pipelines, and the shift reflects the maturing needs of Salt Lake City's B2B SaaS ecosystem. As local companies scale their design systems beyond simple UI components, they're discovering that Figma's built-in variable system can't match the flexibility and control of purpose-built token architectures.
This trend mirrors the broader evolution of Utah's tech scene—from scrappy startups to sophisticated software companies serving enterprise clients who demand consistency across complex product suites.
The Figma Variables Promise vs. Reality
When Figma launched Variables in 2023, the design community celebrated the native token support. Finally, designers could manage colors, typography, and spacing without third-party tools or complex workarounds. The promise was simple: centralized design decisions that automatically propagate across files and teams.
But Silicon Slopes design teams quickly hit limitations:
- Limited token types: Figma Variables support colors, numbers, strings, and booleans—but not complex tokens like typography scales or animation curves
- No semantic layering: You can't easily separate brand tokens from component tokens from application-specific overrides
- Platform constraints: Exporting tokens for iOS, Android, and web requires manual mapping or fragile plugins
- Collaboration friction: Non-designers can't easily contribute to or consume token changes without Figma access
Why Custom Pipelines Win for Growing Teams
Salt Lake City's B2B SaaS companies operate differently than consumer app startups. They're building complex software for enterprise customers who expect polished, consistent experiences across web applications, mobile apps, and sometimes hardware interfaces—think the outdoor tech companies dotting the Wasatch Front.
Platform-Agnostic Token Management
Custom token pipelines treat design tokens as data, not Figma artifacts. Teams store tokens in JSON, YAML, or specialized formats that can generate platform-specific code:
- CSS custom properties for web applications
- Swift extensions for iOS apps
- Kotlin objects for Android
- Design tool imports for Figma, Sketch, or Adobe XD
This approach lets engineering teams consume tokens directly without depending on design tool exports or manual synchronization.
Semantic Token Architecture
Mature design systems need multiple token layers:
1. Primitive tokens: Raw values like `#FF6B6B` or `16px`
2. Semantic tokens: Purpose-driven aliases like `color-error` or `spacing-small`
3. Component tokens: Specific mappings like `button-padding-horizontal`
4. Theme tokens: Context-specific overrides for dark mode, high contrast, or brand variations
Figma Variables can't elegantly represent these relationships. Custom pipelines use tools like Style Dictionary or Token Studio to transform simple token definitions into complex, layered systems.
Developer Experience Matters
Silicon Slopes companies compete for engineering talent with tech hubs worldwide. Developer experience isn't just about APIs and documentation—it extends to how front-end teams consume design decisions.
Custom token pipelines integrate with existing development workflows:
- Tokens live in version control alongside code
- Pull requests can include both design and engineering changes
- CI/CD pipelines automatically validate token changes
- Documentation generates automatically from token metadata
Local Adoption Patterns
The shift toward custom token pipelines reflects Salt Lake City's unique position in the tech ecosystem. Unlike pure consumer companies that might prioritize design tool integration, local B2B SaaS teams balance design efficiency with engineering requirements.
Several factors drive adoption:
- Enterprise customer expectations: B2B software needs consistent branding across complex product suites
- Multi-platform requirements: Many local companies build web, mobile, and sometimes embedded applications
- Engineering-heavy culture: Silicon Slopes has strong technical leadership that prioritizes sustainable, scalable solutions
- Remote-first teams: Custom pipelines work better for distributed teams than Figma-dependent workflows
Implementation Approaches
Successful transitions from Figma Variables to custom pipelines follow similar patterns among local teams:
Start Small, Think Big
Begin with color and spacing tokens—the easiest to migrate and most impactful for visual consistency. Typography and component tokens can follow once the pipeline proves stable.
Choose Your Tools Carefully
- Style Dictionary: The most established token transformation platform
- Theo: Salesforce's token conversion tool
- Token Studio: Figma plugin that bridges design tools with custom pipelines
- Custom scripts: Many teams build lightweight solutions for specific needs
Maintain Design Tool Integration
Abandoning Figma Variables doesn't mean abandoning Figma. Successful teams maintain two-way sync between their token pipeline and design tools, often using plugins or automated imports.
The Trade-offs Are Real
Custom token pipelines aren't universally better than Figma Variables. They require:
- Engineering investment: Someone needs to build and maintain the pipeline
- Process overhead: Token changes might require code reviews and deployments
- Tool complexity: More moving parts mean more potential failure points
- Team coordination: Designers and engineers must collaborate more closely
For small teams or early-stage products, Figma Variables might still make sense. The tipping point seems to be around 3-5 engineers working on front-end code, or when you're supporting multiple platforms.
Looking Forward
As Salt Lake City's tech scene continues maturing, expect more teams to adopt sophisticated design infrastructure. The outdoor recreation and B2B SaaS companies that define Silicon Slopes are building increasingly complex products that serve demanding customers.
Custom token pipelines represent a broader trend toward treating design as a technical discipline, not just a creative one. Teams that invest in proper design infrastructure today will move faster and more confidently as their products grow.
For designers and engineers interested in exploring these topics, Salt Lake City tech meetups regularly feature design system discussions, and Salt Lake City developer groups often cover front-end tooling innovations.
FAQ
When should a team switch from Figma Variables to custom tokens?
Consider custom tokens when you're supporting multiple platforms, have 3+ front-end engineers, or need token types beyond Figma's basic offerings. Early-stage teams should stick with Figma Variables until these needs emerge.
What's the maintenance overhead of custom token pipelines?
Expect 10-20% of a front-end engineer's time initially, decreasing to 5% once the system stabilizes. The investment pays off through faster development and fewer design-engineering sync issues.
Can you use both Figma Variables and custom tokens?
Yes, many teams use hybrid approaches—Figma Variables for design exploration and custom tokens for production code. The key is maintaining clear ownership and sync processes between the two systems.
Ready to level up your design and engineering skills? Find Your Community and connect with other Silicon Slopes professionals tackling similar challenges.