En tant designer UX/UI senior, j'ai piloté cette migration de Sketch vers Figma.
Cette transition répondait à plusieurs problématiques rencontrés par nos équipes design et développement : flexibilité limitée des composants, meilleur gestion du thème clair ou sombre et difficulté à maintenir une cohérence visuelle à grande échelle.
En tant designer UX/UI senior, j'ai piloté cette migration de Sketch vers Figma.
Cette transition répondait à plusieurs problématiques rencontrés par nos équipes design et développement : flexibilité limitée des composants, meilleur gestion du thème clair ou sombre et difficulté à maintenir une cohérence visuelle à grande échelle.
Ubstream (digital product publishing, SaaS)
Migration
Optimiser l’ensemble du processus de conception, de fluidifier le travail collaboratif et d’améliorer la fidélité des prototypes pour une meilleure projection des équipes produit et des parties prenantes.
• Structuration et optimisation des composants existants.
• Gestion du responsive et des variables.
• Administration des patterns.
• Formant et accompagnant les équipes pour une adoption efficace des nouvelles méthodologies de travail.
• Collaborant avec les développeurs afin d’améliorer la communication entre design et développement, en optimisant l’export et l’intégration des assets UI.
Utiliser des variantes et des auto-layouts avancés pour accélérer l’assemblage des interfaces et simplifier leur adaptation aux différents breakpoints et devices.
Grâce aux bibliothèques partagées et à la gestion des composants avancée, l’équipe design a pu renforcer la cohérence UI et simplifier les mises à jour futures.
Une immersion plus proche de l’expérience finale, facilitant la prise de décision des parties prenantes et réduisant le besoin d’ajustements tardifs.
Les développeurs ont pu accéder instantanément aux spécifications des composants et extraire les assets sans avoir à attendre des exports manuels.
Les feedbacks des parties prenantes ont été intégrés plus rapidement, accélérant les itérations et améliorant la qualité finale du produit.
Grâce aux propriétés de composants, il est possible d’adapter un composant principal à différentes variantes sans dupliquer inutilement les éléments, optimisant ainsi la conception et la maintenance du Design System.
Chaque composant peut contenir des sous-composants, qui possèdent leurs propres propriétés configurables. Ces propriétés permettent d’ajuster dynamiquement l’apparence et le comportement d’un composant sans le détacher de son instance principale.
Chaque couleur a une version claire et une version sombre, stockées sous forme de variables.
On organise ces variables en collections, ce qui permet de regrouper toutes les couleurs d’un même thème.
Au lieu d’utiliser une couleur hexadécimale statique, on applique une variable de couleur à chaque élément (ex. : le texte dans un bouton utilise --BU__txt, le fond d’un bouton --BU_bgNeutral).
Lorsqu’on bascule entre le thème clair et sombre, toutes les instances des composants mettent automatiquement à jour leurs couleurs selon les variables définies.
Mise en avant des zones clés d’un écran pour indiquer les éléments à intégrer.
Aide aux développeurs via des maquettes navigables pour mieux comprendre l’enchaînement des écrans.
Indication des icônes, illustrations et fichiers à utiliser avec leurs formats et résolutions.
Suivi des intégrations, validation des implémentations et ajustements si nécessaire.
Cette migration a marqué un tournant dans notre manière de concevoir les interfaces, rendant notre processus plus agile, plus cohérent et mieux aligné avec les exigences modernes du design produit.