Figma Is Not Enough: Building UX Design Systems That Scale from MVP to Enterprise

Q: How does the System-as-Code approach help create scalable and consistent design systems across platforms?

The System-as-Code approach streamlines scalability and ensures consistency by relying on design tokens as a unified source for design elements like colors, spacing, and motion. These tokens are exported in JSON format, making it easy for design and development teams to stay in sync. When updates are made to the tokens, they automatically reflect across platforms, cutting down on inconsistencies and saving valuable time. This approach also incorporates versioned component libraries , which allow teams to roll out updates without interrupting production workflows. Additionally, automated accessibility checks are built in to ensure compliance with WCAG-AA standards. By organizing the design system in this way, teams can seamlessly scale from an MVP to large-scale enterprise applications, all while delivering a consistent user experience across web, mobile, and embedded platforms.

Q: What are the benefits of using design tokens in a scalable design system, and how do they improve collaboration between designers and developers?

Design tokens act as a single source of truth for design decisions, ensuring that elements like colors, spacing, and motion remain consistent across all platforms. This becomes especially important as products grow, evolving from a simple MVP into a complex enterprise solution. By connecting design and development, tokens allow teams to use shared, reusable values that can be easily translated into code. This streamlines communication, reduces errors, and speeds up workflows. When designers make updates, those changes can flow directly into the development process without extra steps. Tokens also help automate repetitive tasks, ensuring updates are applied correctly and efficiently. Incorporating design tokens enhances collaboration, cuts down on rework, and supports a scalable design system that can grow alongside your product.

Scaling a design system requires more than just Figma; adopting a System-as-Code approach enhances consistency and efficiency from MVP to enterprise.

Figma is great for starting small, but it can't keep up as your product grows. A sleek 3-screen MVP might work fine, but scaling to 300+ screens often leads to inconsistent buttons, mismatched colors, and design chaos. Why? Because Figma is not a complete design system - it's just a design tool.

Here’s how to fix it:

Adopt a System-as-Code approach. Convert your design elements (like colors and spacing) into code-based design tokens.
Automate updates. Sync changes across platforms instantly, cutting costs by 46% and speeding up delivery by 22%.
Focus on accessibility and governance. Build WCAG-compliant components and manage updates with version control.
Unify across platforms. Ensure consistency on web, mobile, and more with shared tokens.

For example, Ostrom, a German energy company, reduced UI development time by 45% and eliminated design inconsistencies by switching to a token-driven system. If you're relying solely on Figma, it's time to rethink your design system strategy.

Unlocking the Power of Design Tokens to Scale Enterprise Design Systems by Kevin Zolkiewicz

Problems with Using Figma as Your Only Design System

Figma

Relying solely on Figma for your design system may seem convenient at first, but it often struggles to keep up as your product grows. While Figma is fantastic for UI design and prototyping, treating it as a complete design system can lead to serious issues down the line. What starts as a simple, three-screen MVP can quickly turn into a chaotic mess of inconsistent components and inefficient workflows.

How Components Break and Lose Consistency

In Figma, components might look perfect in your design files but often fall apart when translated into production. Updates that should streamline workflows can unexpectedly break existing designs or misalign with the actual codebase. This mismatch creates headaches for both designers and developers.

Performance is another sticking point. Figma has a 2GB file size limit, but performance can start to lag when files reach about 60% of that capacity. As your component library grows, designers may find themselves spending more time waiting for files to load than actually designing.

On top of that, redundancy creeps in as teams duplicate components, leading to bloated libraries and confusion about which version to use. Without proper structure, Figma libraries require constant manual updates, which often results in misalignment between design and development teams. This misalignment forces developers to create their own components, further fragmenting the system.

The High Cost of Rebuilds During Growth

The real pain of a Figma-only approach becomes evident when your product scales - especially during critical growth phases like Series B funding. Small inconsistencies from the MVP stage can snowball into massive design debt, requiring expensive rebuilds and duplicated efforts. It’s not uncommon for teams to finalize designs in Figma, only for developers to rebuild every component from scratch in production.

The financial toll can be staggering. Companies without strong design systems report that 68% of users abandon products due to poor consistency or difficult navigation. In contrast, those with well-established systems see a 34% boost in design efficiency and up to 50% faster development cycles, with significantly less rework required.

Rebuilding is particularly grueling because teams must juggle maintaining the existing product while essentially starting over. This often involves creating new, clean files and reconstructing components, variants, and variables based on live systems. It also demands detailed UX audits, thorough documentation, and close collaboration with developers to ensure components behave as expected. This process doesn’t just slow production - it complicates timelines and erodes stakeholder trust as technical debt piles up.

Anton Polomkin, Lead Software Engineer at Eptura, puts it well:

"A design system is more than a style guide or a component library. It's a comprehensive framework that combines design patterns, shared practices, and engineering principles into a unified system."

Companies that understand early on that Figma alone can’t deliver this level of integration invest in tools like token management, version control, and cross-platform deployment. These proactive steps prevent scaling issues and costly rebuilds, highlighting the importance of adopting a dynamic, code-driven design system from the start.

4 Core Elements of System-as-Code Design

Scaling a design system beyond static Figma files can feel like a monumental task. The System-as-Code approach tackles these challenges head-on with four essential elements. By transforming design details into dynamic, code-driven systems, this methodology ensures your design system grows alongside your product. Let’s break down these elements and how they address common scaling hurdles.

Convert Design Elements to Code Tokens Early

Design tokens translate visual decisions - like colors, typography, and spacing - into structured data formats. This process creates a single source of truth that simplifies the handoff between designers and developers. Jina Anne puts it best:

"Design tokens are a single source of truth for design decisions that can be used across any platform or tool."

Here’s what makes tokens so powerful: when you update a single token, like switching a font from Montserrat to Roboto, that change ripples across your entire product. This concept is a cornerstone of major design systems like Google’s Material Design 3 and MUI, which rely on tokens to align teams and streamline workflows.

To get started, define your key design attributes in formats like JSON, YAML, or XML. Then, use token management tools to generate platform-specific versions. When naming tokens, focus on their purpose - names like "primary-action" are far more adaptable than something like "blue-500" as styles evolve.

Build Accessibility Into Every Component

Accessibility shouldn’t be an afterthought - it needs to be baked into your components from the start. This means embedding accessibility standards directly into your design tokens and component libraries. Pinterest’s Gestalt design system is a great example, offering detailed accessibility guidance and even a scorecard for components based on WCAG 2.2 compliance.

Why is this so crucial? Research shows that 67% of accessibility issues can be traced back to design decisions. To catch these issues early, automate accessibility checks using tools like Axe or Stark. You can also integrate linters into your CI/CD pipeline to enforce accessibility standards throughout development.

Use Version Control for Component Libraries

Version control isn’t just for developers - it’s a must-have for managing component libraries. Following semantic versioning (MAJOR.MINOR.PATCH) helps teams understand updates at a glance: major versions introduce breaking changes, minor versions add new features, and patches fix bugs.

Different teams handle versioning in ways that fit their workflows. For instance, IBM’s Carbon design system uses holistic versioning alongside detailed migration guides, while Twilio’s Paste system employs both core and component-level versioning for flexibility. The key is to document breaking changes clearly and set predictable timelines for deprecations to avoid surprises.

Deploy the Same Tokens Across All Platforms

A unified approach to tokens ensures consistency across web, mobile, and even IoT interfaces. By deploying tokens to generate CSS variables, Swift code, or XML resources from a single source, you eliminate redundant maintenance efforts.

Modern development workflows make this integration seamless. Tokens can feed into frameworks like Tailwind CSS, native platforms like SwiftUI, or even specialized hardware UI kits. Tools like Style Dictionary and Tokens Studio automate the synchronization between design files and codebases, keeping everything in sync. Start by focusing on your most critical tokens, document them rigorously, and maintain open communication across teams to ensure smooth evolution of your system.

Step-by-Step Guide to Building Scalable Design Systems

This guide dives into overcoming the limitations of Figma by embedding design decisions directly into code. By adopting a "System-as-Code" approach, you can transform design elements into dynamic, maintainable code that scales seamlessly.

Research and Planning Phase

Start by auditing your existing design assets to identify inconsistencies and determine which elements should be prioritized for tokenization. Engage with stakeholders to gather requirements, define success metrics, and document technical details like your tech stack, deployment processes, and CI/CD tools. Establish a clear understanding of the key visual attributes that will form your single source of truth.

Create a technical discovery document outlining your current tech stack, deployment processes, and platform requirements. If you're designing for web, mobile, or even IoT devices, your token structure must be flexible enough to support all these platforms right from the start.

Wrap up this phase with a detailed roadmap that prioritizes token development. Typically, you'll begin with colors, then move on to typography and spacing. Make sure to set realistic timelines and include regular checkpoints for stakeholder feedback. With a solid plan in place, you can transition to building components using agile methods.

Build Components Using Agile Methods

Scaling design systems with traditional methods often leads to bottlenecks. Agile methodologies, particularly in user experience design, help address this by integrating design tasks into development sprints. This approach ensures faster iterations and continuous feedback.

Organize your tokens in a hierarchical structure to differentiate raw values from semantic assignments. For instance, a core token might define "blue-500" as #3B82F6, while a semantic token like "primary-action" references that blue. Build components in short, cross-functional sprints where designers and developers collaborate closely to meet both visual and technical standards.

Real-user testing is crucial. Test components immediately after they're created, gathering feedback from actual users instead of relying solely on internal reviews. This helps identify usability issues early and ensures the components perform well in practical scenarios.

Document everything in a centralized repository. Include clear usage guidelines, accessibility notes, and code samples for each token and component. Once the components are documented and refined, automation becomes the key to maintaining consistency across platforms.

Automate Design System Updates

As your design system grows, manual updates become inefficient and error-prone. Automation is essential to maintain consistency and reduce the workload for your teams.

Establish a governance team to conduct regular audits and oversee updates. Use version control tools like GitHub and adopt semantic versioning to track changes and revert them if needed. Integrate automated testing - such as accessibility checks, visual regression tests, and cross-platform compatibility tests - into your CI/CD pipeline.

Set up feedback loops to gather usage data from your components. Monitor how components are being used and collect user feedback to identify areas that need improvement. Analytics can help you determine which components are most effective and which might need redesigning or retiring. This data-driven approach ensures your design system evolves based on real needs.

Finally, integrate your design system with development tools like Storybook. These tools make it easier to document and test components, fostering better collaboration between designers and developers.

sbb-itb-e464e9c

Case Study: How Ostrom Cut UI Development Time by 45%

Ostrom

When Ostrom, a German energy company, started scaling its digital platform beyond the initial MVP, they faced a major roadblock: their design system was scattered across multiple Figma files. This fragmentation caused development teams to spend weeks on tasks that previously took just days.

How Ostrom Streamlined UI Development

To tackle these challenges, Ostrom embraced a System-as-Code approach. They began by converting core design decisions into design tokens, which were shared across platforms. By identifying their most frequently used design elements, they created JSON-based tokens that became their single source of truth. This move eliminated the guesswork that had been slowing down their development process.

"Design tokens are design decisions. Less decisions, less chaos." – Pratyush Gupta, UX Designer

Ostrom defined two types of tokens: core tokens (e.g., energy-blue-500: #1E40AF) and semantic tokens (e.g., primary-action-color). This setup allowed them to make updates uniformly across platforms. The integration of these tokens into their workflow was a game-changer. Their web application used the tokens via CSS custom properties, while their mobile app consumed the same tokens in platform-specific formats. Automated distribution ensured design and code stayed perfectly aligned, removing inconsistencies that had previously caused delays.

They also took accessibility seriously. Ostrom built automated accessibility checks into their token system. Colors were automatically tested for WCAG-AA compliance, and spacing tokens were designed to meet touch target requirements across devices. This proactive approach ensured accessibility issues didn’t become roadblocks during development.

Results: Boosting Productivity and Delivery Speed

The switch to a token-driven system had a profound impact. UI development time for new features dropped by 45%, as developers could now use pre-built, token-driven components instead of creating custom solutions for every feature.

The benefits didn’t stop there. Technical debt saw a sharp decline because token-based components stayed consistent with the overall design system. When Ostrom updated its visual identity, the changes propagated across the platform instantly - no need for manual updates to individual components.

Collaboration across teams improved significantly. Designers could dedicate more time to solving user experience challenges, while developers relied on tokens for clear guidance on spacing, colors, and typography. This clarity eliminated the back-and-forth over minor styling details.

The token-based system also cut down on quality assurance overhead. Visual inconsistencies, which previously required multiple review cycles, were addressed at the source. QA teams could focus on functionality and user experience rather than chasing down mismatches between design mockups and final implementations.

Perhaps most importantly, Ostrom’s feature release velocity skyrocketed. The 45% reduction in UI development time allowed them to deliver features to users faster and take on more ambitious projects without extending timelines. The approach not only sped up releases but also reduced technical debt, making the development process more efficient overall.

Ostrom’s journey highlights the power of adopting a System-as-Code strategy. Their experience shows how moving beyond Figma-based design systems can lead to major productivity improvements. By bridging the gap between design and development with design tokens, Ostrom laid the groundwork for scalable and efficient product development.

Design System Readiness Checklist

Using a Figma-based design system might work fine for smaller projects, but as your needs grow, cracks often start to appear. Many teams find their design systems struggling to keep up when scaling from a few simple components to the complexities of enterprise-level demands.

The gap between a basic Figma file and a scalable design system becomes obvious when you evaluate your setup against enterprise-grade requirements. By leveraging the System-as-Code approach, this checklist will help you determine if your design system is prepared for large-scale challenges.

What to Check in Your Current System

An audit can reveal whether your design system is truly built to scale. Here are five key areas to examine that distinguish a basic setup from one that’s enterprise-ready:

Design Token Infrastructure
Your colors, spacing, and typography should be defined as exported tokens - not hard-coded values. These tokens should exist in a format like JSON or YAML, making them accessible to both designers and developers.

Accessibility Compliance
Automated contrast checking should be built into your workflow. This ensures every color token meets WCAG-AA standards and touch target requirements. Relying on manual audits alone makes it nearly impossible to maintain consistency across a growing library of components.

Version Control and Updates
A solid component library uses semantic versioning to manage updates safely. This allows teams to preview changes, roll back updates if needed, and clearly track what’s been modified. If updates are unpredictable or frequently cause issues, it’s a sign your versioning process needs work.

Cross-Platform Consistency
Your design tokens should automatically export into platform-specific formats, ensuring a unified experience across web, mobile, and desktop applications.

Component Governance
There should be clear processes for adding new components, updating existing ones, and retiring outdated patterns. Without proper governance, you risk multiple teams creating redundant versions of the same component, undermining the system's cohesion.

System Element	Enterprise Ready	Needs Work
Design Tokens	Exported as JSON/YAML, used across platforms	Hard-coded values, manual entry
Accessibility	Automated WCAG-AA compliance checks	Manual testing, inconsistent results
Version Control	Semantic versioning, safe rollbacks	No versioning, frequent breaking changes
Cross-Platform	Unified tokens for web, mobile, desktop	Inconsistent values between platforms
Governance	Clear ownership and structured processes	Ad-hoc additions, no oversight

How to Fix the Gaps You Find

If your audit reveals weaknesses, here’s how to address them step by step. Start with the basics and gradually tackle more advanced improvements.

Convert to Design Tokens Immediately
Identify commonly used design elements like colors, spacing, and typography, and turn them into JSON tokens to serve as your single source of truth. As design system expert Dan Mall says, “three times is a pattern”. If you’re repeating the same design choice across multiple places, it’s time to make it a token.

Implement Automated Accessibility Checks
Build automated contrast validation directly into your token definitions. This prevents designers from accidentally creating inaccessible color combinations. Set up automated tests to run with every pull request to catch issues early, saving time and avoiding expensive fixes later.

Establish Component Governance Early
Create a structured process for managing components. For instance, The Weir Group uses a "contribution model" where design teams develop components based on real needs and contribute them to a central library. Ryan Kane, Head of UX Design at The Weir Group, explains:

"With UXPin Merge, we've removed duplication and created efficiency where we've got empowered teams contributing to one central library–the design system's repository–with a corporate function managing and maintaining it".

Focus on Demand-Driven Development
Develop components based on actual team needs instead of guessing what might be useful. Research shows that when teams focus on building components requested by multiple groups, adoption rates jump from 35% to over 70%. Build what’s needed, not what you think might be nice to have.

Create Migration Paths Instead of Mandates
Avoid forcing teams to adopt new components abruptly. Instead, provide gradual migration paths that make it easier for them to transition. Highlight real-world examples from other teams to encourage adoption through demonstration rather than overwhelming documentation.

Measure Component Adoption
Track how often components are used versus those that sit idle. For example, one fintech company discovered that its form components were quickly adopted by six product teams, while a complex card-sorting interface was used by only two. Use this data to prioritize future development efforts effectively.

Conclusion: Design Systems That Scale with Your Business

Figma files may serve well in the early stages of product development, but as the number of screens grows, their limitations become clear. While Figma excels at fostering early-stage collaboration, scaling enterprises need a more robust solution. Enter System-as-Code, a method designed to handle the complexities of growing products.

Key Advantages of Scalable Design Systems

When built with scalability in mind, design systems can transform product development. Research highlights that designers working with unified systems can increase their speed by 34%. This boost is even more impactful when combined with automation and consistent cross-platform implementation.

Cut Development Time and Costs: Reusing standardized components eliminates the need to recreate them repeatedly. By formalizing design decisions into reusable assets, teams save both time and money.
Enhance User Experience: Consistency across components leads to a smoother and more reliable user experience. Standardized designs foster familiarity and accessibility, improving customer interactions at every touchpoint. A great example is Ostrom, which reduced UI development time by 45% through systematized design.
Streamline Accessibility Compliance: Accessibility becomes a built-in feature rather than an afterthought. By embedding WCAG-AA compliance into design tokens, teams can prevent issues like poor contrast or improper touch targets before they arise.
Simplify Team Onboarding: A single source of truth, complete with clear documentation and standardized components, allows new team members to ramp up quickly. Less time explaining, more time building.

Next Steps for Your Team

To get started, revisit the Design System Readiness Checklist from the previous section. Evaluate your setup: Are your design tokens stored as JSON or YAML files? Do you have automated accessibility checks in place? Are library updates managed with semantic versioning?

If you notice repetitive design elements across your projects, it’s time to convert them into tokens. This small step can significantly improve consistency.

Begin automating processes one step at a time. For example, start with automated contrast validation in pull requests, then expand to tracking the usage of components to identify which are most valuable to your system.

Collaboration is equally crucial. Establish clear communication channels for design system updates. Automation may reduce errors and save time, but effective communication is still essential, particularly during major updates. As one expert points out, automation can be a game-changer, but it works best when paired with strong collaboration.

Building a scalable design system requires expertise in both design and technical implementation. If your team needs assistance, consider working with specialists in UX design & innovation. They can help you implement System-as-Code and accelerate your design system's development.

Investing in a well-architected design system now will pay off as your product grows. Teams that prioritize scalability from the start avoid the headaches and costs of rebuilding later. By adopting System-as-Code, you’ll ensure your design system evolves alongside your business.

FAQs

Why isn't Figma alone enough to scale a design system from MVP to enterprise level?

Relying entirely on Figma for your design system can become a stumbling block as you scale from an MVP to a full-fledged enterprise product. As teams grow and projects multiply, keeping everything consistent gets tricky. Often, team members tweak components to fit specific needs, which can lead to duplication and an unwieldy system. Take a card component, for example - it might start simple but eventually branch into countless variations, making updates a headache and slowing down workflows.

Figma’s flexibility is one of its strengths, but it can also be a double-edged sword. Without a clear structure, components can stray from core design principles and brand guidelines, creating inconsistent user experiences. Over time, this lack of cohesion can bog down collaboration and make it challenging to deliver a unified product as your organization expands. While Figma is undoubtedly a powerful tool, it’s not a one-size-fits-all solution for creating a scalable and maintainable design system.

How does the System-as-Code approach help create scalable and consistent design systems across platforms?

The System-as-Code approach streamlines scalability and ensures consistency by relying on design tokens as a unified source for design elements like colors, spacing, and motion. These tokens are exported in JSON format, making it easy for design and development teams to stay in sync. When updates are made to the tokens, they automatically reflect across platforms, cutting down on inconsistencies and saving valuable time.

This approach also incorporates versioned component libraries, which allow teams to roll out updates without interrupting production workflows. Additionally, automated accessibility checks are built in to ensure compliance with WCAG-AA standards. By organizing the design system in this way, teams can seamlessly scale from an MVP to large-scale enterprise applications, all while delivering a consistent user experience across web, mobile, and embedded platforms.

What are the benefits of using design tokens in a scalable design system, and how do they improve collaboration between designers and developers?

Design tokens act as a single source of truth for design decisions, ensuring that elements like colors, spacing, and motion remain consistent across all platforms. This becomes especially important as products grow, evolving from a simple MVP into a complex enterprise solution.

By connecting design and development, tokens allow teams to use shared, reusable values that can be easily translated into code. This streamlines communication, reduces errors, and speeds up workflows. When designers make updates, those changes can flow directly into the development process without extra steps. Tokens also help automate repetitive tasks, ensuring updates are applied correctly and efficiently.

Incorporating design tokens enhances collaboration, cuts down on rework, and supports a scalable design system that can grow alongside your product.