Design System Template
Découvrir le projet
1. Rendez-vous simplement à l'adresse https://www.figma.com/community/file/1138536667412748419
2. Copier le fichier localement sur votre device
3. Importez le fichier sur votre espace Figma et le tour est joué !
4. Note importante de mise à jour : le 16 août 2023, le fichier a été mis à jour vis-à-vis des différentes avancées sur Figma.
Eh oui ! Designer, c'est aussi savoir se remettre en question, et à la vue de ce que je proposais pour les boutons dans le kit interactif Figma, je me suis dis qu'il était temps de profiter des nombreuses mises à jour du logiciel pour faire du nettoyage, et améliorer la logique des composants boutons, parce que ça devenait trop complexe à utiliser (TIPS : et en plus les composants cachés alourdissent la mémoire du fichier)
Dans une version 2.0, je vous propose un composant de base avec 3 variantes : le type, la taille et le radius, et une valeur booléenne vis-à-vis du loader.
J'insère cette base dans un autre composant avec 2 autres variantes : le style (outline, plain) et l'état (default, hover, pressed, disabled).
De cette façon, on évite de définir les propriétés deux fois : sur la base, et sur le composant final (ce qui demande plus d'efforts à un designer).
Et forcément, puisque les boutons sont utilisés pour d'autres composants, ça allège aussi la mémoire du fichier (on passe de 8% à 4% 😎).
Je vois pour améliorer les éléments de formulaire dans une version 2.1 ultérieurement et en attendant, le lien vers la version 2.0 : https://www.figma.com/.../1273666164.../ailomut-snippets-2.0
Après la proposition de composants de formulaire Figma en Août 2022, retrouvez un Kit UI Figma qui se base sur les composants du framework Bootstrap. Promis, il est gratuit, et mis à jour régulièrement (Figma évolue tellement vite aussi 🥵)
Mars 2023
Figma
https://www.figma.com/community/file/1273666164902950030/ailomut-snippets-2.0