OBJECTIF
OBJECTIF
Migrer et mettre à jour un UI kit de Sketch vers Figma
Migrer et mettre à jour un UI kit de Sketch vers Figma
CONTEXTE
CONTEXTE
Une transition importante
Une transition importante
Chez Yeap, l'équipe Design travaillait sur Sketch depuis des années. Après un an dans l'entreprise, j'ai pensé qu'il faudrait envisager de migrer vers Figma. Les limites de Sketch devenaient trop handicapantes et les développeurs sous Windows devaient passer par Zeplin pour accéder aux maquettes. Nous avons donc migré l'ensemble de notre travail, en rafraichissant notre UI kit.
Chez Yeap, l'équipe Design travaillait sur Sketch depuis des années. Après un an dans l'entreprise, j'ai pensé qu'il faudrait envisager de migrer vers Figma. Les limites de Sketch devenaient trop handicapantes et les développeurs sous Windows devaient passer par Zeplin pour accéder aux maquettes. Nous avons donc migré l'ensemble de notre travail, en rafraichissant notre UI kit.
COLORS
COLORS
Créer une palette accessible
Créer une palette accessible
Nous avons commencé par l'essentiel, à savoir les couleurs. Nous avons établi une palette assez complète car nous avions besoin d'un assez grand nombre de couleurs pour les composants. Les couleurs sont alors traduites en variables, facilitant leur gestion et leur modification.
Nous avons commencé par l'essentiel, à savoir les couleurs. Nous avons établi une palette assez complète car nous avions besoin d'un assez grand nombre de couleurs pour les composants. Les couleurs sont alors traduites en variables, facilitant leur gestion et leur modification.
TYPOGRAPHY
TYPOGRAPHY
Hiérarchiser l'information
Hiérarchiser l'information
Nous avons également établi l'ensemble de nos styles de textes. En gardant la police Poppins, déjà mise en place sur Sketch.
Nous avons également établi l'ensemble de nos styles de textes. En gardant la police Poppins, déjà mise en place sur Sketch.
ELEVATIONS
ELEVATIONS
Mettre en perspective les éléments
Mettre en perspective les éléments
Pour que les interfaces paraissent le plus naturel possible, nous avons mis beaucoup d'effort dans nos elevations (ombres). En effectuant cet échelle de perspective des éléments, chaque composant possède son niveau d'élévation sur l'interface.
Pour que les interfaces paraissent le plus naturel possible, nous avons mis beaucoup d'effort dans nos elevations (ombres). En effectuant cet échelle de perspective des éléments, chaque composant possède son niveau d'élévation sur l'interface.
SPACINGS
SPACINGS
Rendre l'interface légère
Rendre l'interface légère
Afin de rendre les interfaces le plus accessible et lisible possible, il est essentiel de laisser de l'espacement entre les éléments. C'est ce que nous faisons en utilisant notre échelle de spacings, adaptée à nos écrans.
Afin de rendre les interfaces le plus accessible et lisible possible, il est essentiel de laisser de l'espacement entre les éléments. C'est ce que nous faisons en utilisant notre échelle de spacings, adaptée à nos écrans.
ICONS
ICONS
Illustrer les actions
Illustrer les actions
Construire un logiciel de paie, c'est travailler avec des termes complexes et précis. Pour ça, il est essentiel de faire les bons choix d'icon afin que l'utilisateur sache où cliquer d'un simple coup d'oeil. Tous nos icons sont triés par catégories et disponibles en plusieurs tailles, ainsi qu'en style rempli ou vide.
Construire un logiciel de paie, c'est travailler avec des termes complexes et précis. Pour ça, il est essentiel de faire les bons choix d'icon afin que l'utilisateur sache où cliquer d'un simple coup d'oeil. Tous nos icons sont triés par catégories et disponibles en plusieurs tailles, ainsi qu'en style rempli ou vide.
COMPONENTS
COMPONENTS
Créer des composants performants
Créer des composants performants
Avec tous les éléments cités précédemment, nous avons pu commencer la création des composants. Nous avons d'abord créé les composants essentiels, et quand une nouvelle fonctionnalité nécessitant un nouveau composant était validée, ce dernier était ajouté et optimisé dans notre UI kit.
Voici quelques exemples de composants que nous avons pu créer :
Avec tous les éléments cités précédemment, nous avons pu commencer la création des composants. Nous avons d'abord créé les composants essentiels, et quand une nouvelle fonctionnalité nécessitant un nouveau composant était validée, ce dernier était ajouté et optimisé dans notre UI kit.
Voici quelques exemples de composants que nous avons pu créer :
Alert
Buttons
Checkbox
Radio
Input
Date picker
Content switch
Drop zone
Chip
Popover
Tabs
Snackbar
Tag
