Etëm UI

Etëm UI est un design system Figma multi-client construit sur Tailwind CSS et shadcn/ui. Il regroupe plus de 50 composants atomiques, 1'200 variants et une documentation technique embarquée pour déployer des interfaces cohérentes et accessibles sur chaque projet.

Services

Produit / App

Domaine

Design System

Année

2026

Lien

Preview Figma

Aperçu du Theme Preview présentant les composants en modes clair et sombre côte à côte

Challenge

Le système devait s'adapter visuellement à chaque client sans modifier la structure des composants. Il devait couvrir les besoins UI courants (formulaires, navigation, data tables, visualisation de données) tout en restant aligné avec Tailwind CSS et shadcn/ui pour garantir une intégration front-end sans friction. La documentation devait être exploitable par les équipes de développement comme par les agents IA (Cursor, Claude Code, Figma AI, v0).

Composant Button avec son playground de variants et sa documentation markdown, avec la phrase "Chaque composant embarque sa documentation markdown pour développeurs et agents IA"

Stratégie

L'architecture repose sur une hiérarchie de 5 couches de variables Figma (Primitives, Mode, Theme, Device, Brand) permettant de basculer d'un client à l'autre par simple changement de mode. Chaque composant est documenté via un fichier markdown embarqué dans le fichier Figma, structuré pour être lisible par les développeurs et les outils d'IA générative. Le choix de shadcn/ui comme référence garantit une parité directe entre la maquette et le code livré.

Solution

Le système comprend plus de 50 composants atomiques structurés en Auto Layout avec application systématique de variables, près de 300 patterns de composition réutilisables et un guide de style couvrant couleurs (OKLCH), typographie, espacements et radius. Un fichier brand.md centralise les paramètres client (palette, typographie, radius, contraintes spécifiques), seul ce fichier change d'un projet à l'autre. Le Theme Preview permet de visualiser l'impact des changements sur le thème en modes clair et sombre.

Mosaïque de composants du Design System avec la phrase "50+ composants et 1200+ variants structurés en Auto Layout et variables"

Résultat

Etëm UI est utilisé en production sur la majorité des projets clients. La mise en place d'une direction artistique sur un nouveau projet se réduit au paramétrage du fichier brand et au changement de thème. La documentation markdown intégrée permet aux développeurs et aux outils d'IA d'exploiter le système en limitant l'intervention du designer lors du hand-off.

Vidéo

Cette animation réalisée fin 2025 montre le fonctionnement du système grâce aux intrications de variables. Notez que le Design System évolue constamment, il se peut que des éléments de la version actuelle diffèrent avec ceux présentés dans la vidéos.

Pleine Surface

Projet précédent