Jonathan Duclos
Design system
Améliorer, maintenir et faire évoluer le design system chez WeCook. J'ai introduit les nouvelles fonctions comme, claude code et j'ai connecté nos composantes au Github afin de facilité et améliorer les handoff.
Mon champ d'activité
Rendre le design system plus flexible et évolutif afin de faciliter son utilisation, mais également la transition entre le design et le développeur. J'ai introduit une nomenclature compréhensible. Introduit les nouvelles fonctions de figma et connecter le tout à notre Github et à Claude.
Fondation
La sémantique a été conçue pour être simple, intuitive et évolutive. Structurée autour du contexte, du ton et de l'usage, elle permet de créer des interfaces cohérentes tout en offrant la flexibilité nécessaire pour répondre à différents besoins. Cette approche favorise la maintenabilité du système et facilite son évolution à mesure que le produit grandit.
La typographie repose sur une hiérarchie clairement définie de tailles, poids et espacements. Standardisée, elle améliore la lisibilité, assure la cohérence des interfaces et facilite la création de nouvelles expériences tout en soutenant l'évolution du produit.
Il s'appuie sur une grille de 4 points afin d'assurer une cohérence visuelle à travers l'ensemble du produit. Les gouttières par défaut sont définies à 16 px, les composantes de type carte utilisent un espacement interne de 24 px, tandis que les sections marketing bénéficient d'espacements plus généreux de 64 à 80 px. Cette approche crée un rythme visuel équilibré, facilite la prise de décision lors de la conception et contribue à la scalabilité du système.
Composantes
Les composantes permettent de créer des interfaces cohérentes, évolutives et faciles à maintenir. Basées sur une approche atomique, elles s'appuient sur des fondations clairement définies par les couleurs, la typographie, les espacements et les dimensions. Le tout assure une expérience uniforme tout en accélérant le travail de conception et de développement.
Accessibilité
L'accessibilité a été intégrée dès la conception du système afin de garantir des interfaces inclusives. Les couleurs, les contrastes, les états interactifs et les hiérarchies visuelles ont été définis selon les bonnes pratiques d'accessibilité selon le WCAG.