2024 — Product design · Design system

2024 — Product design · Design system

Designing a design system with motion language and AI-assisted workflows for enterprise platforms

Designing a design system with motion language and AI-assisted workflows for enterprise platforms

Designing a design system with motion language and AI-assisted workflows for enterprise platforms

Overview

Pluxee (employee benefits platform, 5+ products) had a design system in place but adoption was struggling. I joined the Design System team (Akim : lead UI, Marie-Noémie : PM design system, Emmanuel Potdevin : lead product designer) as Product Designer for 2 years.

My focus: improve design/dev collaboration, build motion capabilities, and scale the token system.

Challenge

The design system existed but engineers weren't using it consistently. Handoffs were slow. No clear workflow between design and code. Additionally, the team lacked motion expertise, animations felt inconsistent. Token management was fragmented across tools (Token Studio), making it hard to sync across 3 different tech stacks (React, Flutter, Drupal).

Objective: Make the design system actually useful to devs + build motion capabilities + consolidate token infrastructure.

Approach

Migrated token infrastructure : Moved from Token Studio to Supernova to sync tokens across 3 dev languages (React, Flutter, Drupal). Used AI to validate exports and catch inconsistencies.

Created motion assets : Built reusable animated components in After Effects with specs (timing, easing, frame counts) that engineers could integrate directly.

Improved design/dev handoffs : Streamlined workflows using Supernova tokens + AI-assisted documentation. Reduced handoff time from 48h → 18h.

Unified the team : Organized first Design System webinar and created flow diagrams showing each stakeholder's perspective. Made the system visible and valuable to non-designers.

Automated with AI : Tested workflows to validate token consistency, generate documentation, identify unused tokens (~40% manual work saved).

Learnings

A design token isn't just a value, it's a promise of identical behavior across 3 different stacks (React, Flutter, Drupal), and that promise breaks easily if you don't test it in every environment before documenting it. But the real learning was elsewhere: a perfect design system nobody uses is worthless. The webinar and stakeholder diagrams drove more adoption than any component I designed. The real cost of a fragmented system isn't visible in Figma, it's the time each team wastes recreating what already exists. Finally, AI changed how I work, but not the way I expected: excellent at accelerating documentation, useless at deciding naming or architecture. I learned to use it as a lever for mechanical work, never as a substitute for judgment.

A design token isn't just a value, it's a promise of identical behavior across 3 different stacks (React, Flutter, Drupal), and that promise breaks easily if you don't test it in every environment before documenting it. But the real learning was elsewhere: a perfect design system nobody uses is worthless. The webinar and stakeholder diagrams drove more adoption than any component I designed. The real cost of a fragmented system isn't visible in Figma, it's the time each team wastes recreating what already exists. Finally, AI changed how I work, but not the way I expected: excellent at accelerating documentation, useless at deciding naming or architecture. I learned to use it as a lever for mechanical work, never as a substitute for judgment.

©Adrien Schaefers

©Adrien S

©Adrien.S