Clivet Design System

Set up raw visual assets for scaling through Figma properties and semantic tokens.

Role

UX Designer
Documentation and organization of components.

Results

Increased prototyping speed
Component coherence and significant reduction in Time on Task for prototyping.

Client

Clivet
Major Italian HVAC manufacturer, part of Midea group.

01. The Audit

We started with a legacy Figma file of static frames lacking variables or components. This model created massive technical debt and introduced friction, slowing engineering handoff.

Auditing these disconnected screens allowed me to identify the unique source of truth, necessary to replace manual, layer-based design.

02. Atomic Foundation

I led the transition to a variable-driven architecture, introducing semantic tokens and reducing old assets in atomic components to create a scalable, tiered library.

By integrating complex component states, I enabled high-level prototyping that remained consistent across all instances and device models.

03. Documentation & Adoption

We moved from 'drawing' to 'building' by establishing a centralized documentation that paired every component with its functional logic.

This transition eliminated loose prototypes and inconsistent values, allowing the team to swap themes and modes instantly with full synchronization.

Conclusions & Lessons

The shift from flat frames to a variable-driven ecosystem proved that infrastructure is a force multiplier.

The result was a drastic reduction in the production time of new prototypes and elimination of inconsistent prototype values across new feature releases.