Lier la librairie sur Figma
Commencer
Pour pouvoir utiliser la librairie Figma du Design System de l'Autonomie, vous devez être ajouté à la licence de l’organisation. Pour ce faire, prenez contact avec un membre de l'équipe du Design System.
Liaison des composants
Dans la partie "Assets" vous trouverez une icône représentant un livre ouvert représentant la librairie. Dans la liste proposée vous trouverez le nom : ⚙️ Système de design CNSA. Cliquez ensuite sur le bouton "Add to file" pour lier la librairie à votre fichier.
Liaison des icônes
Les icônes utilisées par le système de design sont aussi à ajouter en même temps que librairie. De la même façon que pour la liaison des composants, allez dans le panneau librairie et recherchez le nom Material Design Icons. Cliquez ensuite sur le bouton "Add to file".
Utilisation
Lors de la création ou de l'ouverture d'un fichier de conception, vous pourrez désormais trouver les différents composants du DSA dans la colonne de gauche sur la partie "Assets".
Mise à jour
Assurez-vous de garder vos composants à jour. Lors des publications d'améliorations ou de création de composants, une invitation sur le fichier (dans le coin inférieur droit) vous demandera de mettre à jour la librairie.
Vous pourrez retrouver les dernières nouveautés publiées sur la page changelog.
Organisation du fichier
Une fois que vous avez créé un nouveau fichier Figma, il faut assurer une harmonisation au sein des produits de la CNSA. Ainsi quelques étapes sont à suivre pour faciliter la compréhension générale.
Cover
Commencez par créer une page intitulée "Bienvenue" et importer les éléments "Cover" et "À propos" du document du design system présents dans la page "Bienvenue".
La "Cover" peut revêtir différents statuts :
- En cours : le fichier est en cours de production, des modifications sont en cours.
- Playground : réservé à vos explorations et ateliers.
- Ready to dev : indique qu'une version du fichier est prête pour le développement.
- Archivé : signalant qu'une version du fichier n'est plus utilisée.
Ces statuts sont directement éditables dans les options du composant "Cover".
N'oubliez pas d'ajuster les informations sur la "Cover", notamment le titre du projet et, si nécessaire, une description spécifique à l'élément concerné par le fichier, le numéro de version du fichier ainsi que le mois et année de sa création.
Dans la section "À propos", fournissez une brève description de ce que le fichier contient. Mentionnez également les intervenants sur ce fichier, au cas où quelqu'un aurait besoin de les contacter ultérieurement.
Pour toute demande d'évolution n'hésitez pas à contacter un membre de l'équipe du système de design.
Nom du fichier
Le début de votre fichier doit comporter le nom de ton projet, suivi de manière facultative par le format du device cible (desktop, tablette, mobile...), et se conclure par une indication sur le contenu du fichier.
Exemple :
- SI APA - Mobile - Dépôt et instructions
- SIDOBA - Atelier de cadrages
Navigation dans le fichier
Si votre application comporte plusieurs parcours, pensez à créer une page de table des matières. Cela permettra aux personnes externes au projet de s'orienter plus facilement et d'accéder rapidement aux différentes sections.
De plus, il est recommandé de créer une page distincte pour chaque parcours. Cela évitera que la page ne devienne trop lourde à charger pour les autres designers et facilitera la navigation pour retrouver rapidement l'information souhaitée.
Exemple :
- Inscription
- Connexion
- Rechercher un utilisateur
- Traiter une demande
Afin de garantir une bonne compréhension pour toute personne qui n'aurait pas créé les écrans, nous recommandons de lier les écrans avec des flèches pour constituer tes parcours.
Vous pouvez utiliser les flèches disponibles dans FigJam, qui s'ajusteront automatiquement si tu modifies la disposition de tes écrans. Cela vous assurera également d'avoir créé tous les écrans nécessaires et d'éviter tout manque dans le parcours.
Utilisation des composants
Afin d'éviter tous problèmes de mise à jour des composants lors des futurs publications, quelques règles sont à prendre en compte :
Ne pas masquer les calques d'un composant
Les différents composants mis à disposition dans le système de design sont accessibles. En masquant certains calques, les critères d'accessibilités pourraient ne plus être respectés.
De plus les composants Figma sont développés. En cas de modifications des composants sur le fichier de design, ils ne pourront plus refléter les composants développés.
Ne pas surcharger les composants
Pour garder une cohérence et une harmonisation, il n'est pas autorisé de surcharger les composants, c'est à dire de modifier les styles de texte mais aussi de couleurs appliqués.
Ne pas copier les composants
Pour éviter d'utiliser des composants ayant eu des modifications, il est préférable de s'assurer de la propreté du composant en le prenant directement dans le panneau "Assets".
Détachement
Évitez de détacher les composants lorsque cela est possible. Utilisez plutôt les variants du composant. Si un composant ne fonctionne pas comme prévu, contactez-nous via le canal #design sur Teams.