Design

Organisation des fichiers Figma : Comment structurer les fichiers Figma pour une collaboration optimale et une meilleure gestion des projets.

Une organisation méthodique des fichiers Figma est essentielle pour une collaboration fluide entre designer·euse·s et développeur·euse·s. Elle facilite la lisibilité, le suivi des versions et l’implémentation des designs. Cet article propose des recommandations pour structurer vos fichiers de manière claire et intuitive, améliorant ainsi la navigation et la compréhension du contenu. En adoptant ces bonnes pratiques, vous simplifierez le travail de vos collaborateurs et réduirez le temps nécessaire à l’exploitation des informations. L’objectif : créer un environnement de travail efficace où l’information est facilement accessible et compréhensible.

Garder son fichier de travail propre et facilement exploitable

✅ Nommer les pages de son fichier

Utilisez une nomenclature claire et descriptive pour les pages de votre fichier Figma. Des noms explicites comme “Wireframes”, “Mockups”, “Composants” ou “Spécifications” facilitent la navigation et la compréhension de la structure du projet pour tou·te·s les membres de l’équipe.

Cette pratique améliore la communication et maintient une vue d’ensemble cohérente du projet, réduisant les risques de confusion.

✅ Nommer les calques, les frames et les artboards de manière cohérente

Adoptez une convention de nommage cohérente pour tous les éléments de votre fichier Figma. Créez un guide de nommage dès le début du projet et partagez-le avec toute l’équipe.

• Utilisez des préfixes pour indiquer clairement le type d’élément, comme “btn_” pour les boutons ou “ico_” pour les icônes. Cela permet une identification rapide et facilite les recherches dans le fichier.
• Intégrez des informations sur l’état ou la variante dans le nom des éléments, par exemple “btn_primary_hover” pour un bouton principal au survol. Cela aide à comprendre immédiatement la fonction et le contexte de chaque élément.

✅ S’assurer que toutes les couleurs et les textes soient reliés à des styles

Appliquez systématiquement des styles pour toutes les couleurs et tous les éléments textuels dans votre fichier Figma. Cette pratique garantit non seulement l’uniformité à travers le projet, mais facilite également les mises à jour rapides.

• Créez une bibliothèque de styles partagée, accessible à toute l’équipe. Cela assure une utilisation cohérente des éléments visuels dans tous les projets de l’entreprise.
• Utilisez des plugins spécialisés pour faciliter la tâche. Ils peuvent vérifier et appliquer automatiquement les styles manquants, réduisant ainsi le risque d’oublis ou d’incohérences.
• Documentez la signification et l’usage de chaque style, soit directement dans le fichier Figma, soit dans un guide de style séparé. Cette documentation permet à tou·te·s les membres de l’équipe de comprendre le contexte et l’intention derrière chaque choix de design.

✅ Archiver les versions des artboards non sélectionnés

Gérez efficacement les versions de votre fichier pour maintenir un historique clair du développement du design tout en gardant le fichier principal propre et focalisé sur la version actuelle.

• Utilisez la fonction de versioning intégrée de Figma. Elle permet un suivi formel et structuré des changements majeurs apportés au projet.
• Créez une page dédiée aux archives, avec une nomenclature claire comme “Archive_V1” ou “Archive_V2”. Cela offre un espace organisé pour stocker les versions antérieures des artboards.
• Ajoutez des notes ou des commentaires expliquant les raisons des changements pour chaque version archivée. Cela facilite la compréhension de l’évolution du design pour tou·te·s les membres de l’équipe.

Cette approche méthodique de l’archivage aide non seulement à garder une trace de l’évolution du design, mais fournit aussi un contexte précieux pour les décisions de design passées.

✅ Supprimer les calques non utilisés ou masqués

Nettoyez régulièrement votre fichier Figma en supprimant les calques inutilisés ou masqués. Cette démarche réduit non seulement l’encombrement visuel, mais améliore également les performances du fichier.

• Effectuez des “nettoyages” à la fin de chaque sprint ou phase de projet.
• Utilisez des plugins spécialisés pour identifier et supprimer les calques inutilisés.
• Créez une checklist de nettoyage à suivre avant de partager le fichier.

✅ Communiquer l’état d’avancée des différentes pages de votre fichier

Utiliser la fonctionnalité “Ready to dev” de Figma, accessible en haut à droite de chaque frame. Elle offre un moyen simple et visuel d’indiquer quels éléments sont prêts pour le développement. Cette feature permet une communication instantanée sur le statut de chaque composant, réduisant ainsi les malentendus et accélérant le processus de développement.

Pour enrichir cette approche, il est judicieux d’implémenter un système de codes couleur complémentaire, utilisant par exemple le vert pour les éléments prêts, le jaune pour ceux en cours de finalisation, et le rouge pour les éléments nécessitant une révision. Cette méthode visuelle permet une compréhension rapide de l’état global du projet.

Intégrer un tableau de bord ou une page de statut au début du fichier Figma. Cela offre un aperçu instantané de l’avancement du projet, facilitant ainsi la gestion et le suivi pour toute l’équipe.

Pour optimiser la communication, la mise en place de notifications automatiques informant l’équipe des changements de statut importants peut grandement améliorer la réactivité et la coordination au sein du projet.

Si la fonctionnalité “Ready to dev” n’est pas disponible (comme sur Sketch, par exemple), créer des cartouches d’états personnalisés suivant le même principe. Cela assure une communication claire et cohérente sur l’état d’avancement du design à travers différentes plateformes.

💡 Conseil supplémentaire

Concentrez-vous sur l’essentiel dans votre fichier Figma pour optimiser l’efficacité du processus de développement. N’incluez que les éléments de design — tels que les couleurs, polices et autres styles — qui sont concrètement utilisés dans le projet en cours. Évitez d’intégrer l’ensemble de la charte graphique si certains éléments ne sont pas pertinents pour le projet actuel. Cette approche ciblée permet de réduire la complexité du fichier, facilitant ainsi le travail des développeur·euse·s et accélérant l’implémentation.

En vous limitant aux composants réellement nécessaires, vous créez un environnement de travail plus clair et plus focalisé.

TL;DR

Une organisation structurée des fichiers Figma est essentielle pour une collaboration fluide. Voici quelques pratiques pour garder vos fichiers clairs et efficaces :

1. Nommer clairement les pages : Utilisez des noms descriptifs pour faciliter la navigation.
2. Nommer les calques de façon cohérente : Adoptez une convention de nommage avec des préfixes et états pour chaque élément.
3. Utiliser des styles pour les couleurs et les textes : Appliquez des styles globaux pour assurer la cohérence.
4. Archiver les versions : Archivez les anciennes versions pour garder le fichier principal propre.
5. Supprimer les calques inutilisés : Nettoyez régulièrement pour améliorer les performances.
6. Communiquer l’avancement : Utilisez des indicateurs comme “Ready to dev” ou des codes couleurs pour informer l’équipe sur l’état des éléments.

Explorez toute la série d’articles :

• (1/5) — Optimisation des images : Comment choisir, optimiser et transmettre les assets graphiques
• (2/5) — Gestion des polices de caractères : Les meilleurs pratiques pour sélectionner, utiliser et partager les polices de caractères
• (3/5) — Animations et interactions : Les cas, états et interactions à prévoir pour une expérience utilisateur sans faille
• (4/5) — Documentation design : L’importance d’une documentation claire et détaillée pour faciliter la compréhension et l’implémentation des designs

Qui sommes-nous ?

Nous sommes Chloé, UX/UI Designer et Julien, UI Designer, travaillant au sein de l’agence web ekino. Cette série d’articles a été réalisée dans le cadre d’un chantier interne visant à améliorer la qualité de nos livrables et nos méthodes de travail entre designer·euse·s et développeur·euse·s.

Nous tenons à remercier celles et ceux ayant participé et contribué à nos tables rondes : Martin, Lucie, Marie, Joana, Jonathan, Yohann.

Créer une synergie durable entre Designers et Développeurs (5/5) was originally published in ekino-france on Medium, where people are continuing the conversation by highlighting and responding to this story.