HE
Let's create

From Styles to Variables: Design System Upgrade

From Styles to Variables: Design System Upgrade
Build a token-based design system ready for AI-powered workflows.

About the service

A good design system is no longer just a Figma library.
To support AI-powered workflows, vibe coding, and more accurate front-end implementation, it needs to be built with variables and design tokens.

With Figma’s growing connection to external AI and development tools, design settings can be pulled directly from the design file into the development workflow. But for this to work well, the system must move from static styles to a structured, token-based foundation.

In this service, we help teams upgrade an existing design system – or build a new one from scratch – so it becomes scalable, consistent, and ready for AI-powered design and development.

The process includes:

  • Defining variables for core settings such as typography, spacing, radius, borders, and colors
  • Building design tokens based on those variables
  • Updating components and screens to use tokens instead of static styles
  • Preparing the system for smoother handoff, faster implementation, and more accurate front-end results

This work requires precision, consistency, and a clear methodology.
We’ve already done this conversion across multiple design systems and developed efficient ways to shorten the process, reduce effort, and improve implementation quality.

The main advantages:

AI-Ready Design System

Automating front-end development starts with MCP, variables, and design tokens. When code is generated from the same values used in design, consistency becomes built in – and design-dev friction is dramatically reduced.

Accelerate Design Work

Moving to tokens and variables is a one-time infrastructure upgrade that requires precision.
After many successful conversions, we’ve developed a faster, more accurate method – so your designers can keep focusing on roadmap work instead of getting stuck in design debt.

Reduce Costs

Ultimately, working faster with fewer rounds of revisions will save a lot of money. It will also greatly reduce the frustration of everyone involved, especially the designers and developers.

Unlock the Full Value of Your Design System

  • Faster Time-to-Market
    Shorter development cycles from approved design to live product.

  • Complete Consistency
    A unified visual language across the system, without local inconsistencies or one-off fixes.

  • Flexibility & Scalability
    Update one variable or token, and the change is reflected across the entire system — and in the code.

This service is ideal for companies that:

  • Have a style-based Design System and want to make it AI-ready
  • Started moving to variables and tokens but found the process too long or complex
  • Manage multiple products, brands, or platforms
  • Are planning a rebrand or Design System refresh
  • Want designers to keep working on roadmap tasks instead of stopping for infrastructure work
  • Need faster development, stronger consistency, and clearer system rules
  • Want to build or upgrade their Design System once – properly, scalable, and ready for AI-powered development

Who is it for?

  • AI-ready component library in Figma
    A smart component library rebuilt with variables and tokens instead of static styles – ready for Figma MCP and AI-powered development workflows.

  • Complete variables & tokens setup
    A structured system covering typography, spacing, layout, borders, radius, modes, and responsive behavior.

  • AI-ready screen files
    Existing screens updated to use the new token-based library, so design values can be passed more accurately into development.

  • Design System cleanup
    Minor fixes, polishing, and organization improvements, so the final system is cleaner, tighter, and easier to maintain.

Deliverables

Our Process

A Success Story

A Success Story

The Challenge

ISCAR hired us to define and redesign its enterprise ERP platform — a critical, large-scale system that had served the company for many years.

The challenge was twofold: creating a modern user experience for a data-intensive system, while also building a design infrastructure that would enable the development team to produce hundreds of screens quickly, consistently, and as part of an AI-powered workflow.

The Solution

From the beginning, we built ISCAR’s Design System with variables and design tokens.

The system was adapted to the Kendo UI component library and structured to support advanced development workflows, including AI-assisted front-end implementation.

Thanks to the precise setup in Figma, Claude Code can read the tokens and design settings and translate them into clean, consistent front-end code.

We also created a scalable infrastructure of templates and smart components, allowing ISCAR’s team to continue building additional screens independently while maintaining consistency across the system.

The process included a learning curve, but it helped us refine a practical methodology for building AI-ready design systems in complex enterprise environments.

The Result

We delivered more than a redesigned ERP experience.
We created a smart design and development infrastructure that enables ISCAR’s product and development teams to move faster, build new screens more efficiently, and maintain a consistent, scalable, and future-ready product over time.

The Impact, in Their Words

Tal Rosenfeld
Product Manager
״

Working with UI was a game changer for us – their team combined creativity with strategic thinking and precise results.

Clalit Health Services
PMO
״

Update: We went live this week with the new menu module, and the feedback is great!!! I’ll quote the users: “Wow…I have to say the system looks great, is super convenient and meets all my expectations”

Ituran
PM
״

The UX team demonstrates exceptional problem-solving skills, attention to detail, and a deep understanding of user needs. Their expertise and dedication are invaluable to us and we are confident that this will lead to the success of the project.

Lightbits
Product Manager
״

I would like to express my sincere appreciation for the professionalism and commitment demonstrated by each member of the team throughout this journey.

Elbit
Dev
״

I can’t believe we didn’t build it like this until today! This is exactly how it has to look.

Clalit Health Services
PMO
״

The new version of the system went live yesterday. User responses were overwhelmingly positive, as the system is now more accessible, more convenient, and streamlines work processes.

Discount Bank
VP Product
״

This week we completed an extraordinary Design Sprint workshop (a busy two days), hosted by UI Company. A workshop that brings to light a joint brainstorming of the business people, our excellent developers, and us, the product managers. Thank you to all those who took part in this exciting effort and opening shot.

Tell Us More

    contact form