Home / Réalisations / Design System Migration & Structuring in Figma

Migration et structuration d’un Design System sur Figma

As the UBSTREAM SaaS platform continued to grow, its existing design system started to reach its limits. Inconsistencies between interfaces, increasing maintenance complexity, and collaboration issues between Design and Development teams made it clear that the system needed to be rethought. The goal of this project was to redesign the Design System architecture and make Figma the single source of truth for the product team. By doing so, we aimed to streamline the design process, improve collaboration, and deliver a more consistent user experience across the platform.

Context & Challenge As the product evolved, maintaining the UI became increasingly difficult: Components were duplicated and inconsistent. Variants had become difficult to manage. Documentation was missing. Design files no longer accurately reflected the implemented product. The challenge was to build a scalable Design System that both designers and developers could rely on, providing a shared foundation for future product development.

Client

Ubstream (digital product publishing, SaaS)

Type

Migration

Objectif

• Standardize the platform’s user interface.
• Improve collaboration between Design, Product, and Engineering teams.
• Reduce design time through reusable UI components.
• Build a scalable foundation for future product evolution.

Mon rôle

I led the complete migration of the Design System to Figma.

My responsibilities included:

• Auditing the existing Design System.

• Reorganizing and simplifying component libraries.

• Building a structured UI library using component variants, properties, and reusable patterns.

• Implementing Light and Dark themes using Figma Variables.

• Creating high-fidelity prototypes.

• Documenting component usage and best practices.

• Supporting designers and developers during adoption.

Throughout the project, I worked closely with Product Managers and Software Engineers to ensure that user needs, business requirements, and technical constraints remained aligned.

Why migrate the Design System?

Faster UI Design

Using component variants and advanced Auto Layout significantly accelerated screen creation while making interfaces easier to adapt across breakpoints and devices.

Better Maintainability & Scalability

Shared libraries and reusable components improved UI consistency while making future updates much easier to manage.

More Realistic Interactive Prototypes

High-fidelity interactive prototypes provided stakeholders with a much clearer understanding of the final product, leading to faster decisions and fewer late-stage revisions.

Stronger Collaboration Between Design & Development

Developers could instantly inspect component specifications and export assets directly from Figma without waiting for manual handoffs.

Stakeholder feedback was incorporated much faster, resulting in shorter iteration cycles and higher-quality releases.

Component Management

Using Component Properties, a single master component can generate multiple configurable variants without unnecessary duplication.

Each component includes nested components with configurable properties, allowing designers to modify appearance and behavior while keeping every instance connected to the source component.

This approach dramatically improves both scalability and long-term maintainability.

Color Variables

Centralized Color Tokens

Each color is defined as a variable with both Light and Dark mode values.

Variables are organized into collections, making it easy to manage entire themes consistently across the product.

Applying Variables to Components

Instead of using hardcoded hexadecimal values, every UI element references a design token.

For example:

• Button text → --BU__txt

• Neutral button background → --BU_bgNeutral

Switching between Light and Dark mode automatically updates every component instance throughout the Design System.

Developer Handoff Assets

To simplify implementation, the Design System also included dedicated assets for engineering teams.

Visual Documentation

Key interface areas are annotated to highlight implementation details and expected behaviors.

Interactive Prototypes

Clickable prototypes help developers better understand user flows and screen transitions.

Asset Management

Icons, illustrations, and graphical resources are referenced with the appropriate formats and resolutions.

Continuous Feedback

Design reviews and implementation validation ensure consistency between Figma and the final product.

Results & Impact

The project delivered a more robust, scalable, and maintainable Design System.

Key outcomes included:

• A consistent visual language across the platform.

• Faster screen creation through reusable components.

• Improved collaboration between Designers, Product Managers, and Developers.

• Simplified maintenance and future scalability.

• Shorter design and development cycles, enabling teams to iterate more efficiently.