Comment organiser votre Design System sur Figma

Organiser les fichiers dans Figma pour l'ensemble de votre équipe de conception peut rapidement devenir désordonné, compliqué, et un véritable combat.

• Quelle est la meilleure façon d'organiser vos fichiers Figma ?
• Quelles sont les meilleures pratiques pour Figma ?
• Comment gérer l'organisation des interfaces/maquettes?
• Comment gérez-vous les différentes équipes/plateformes/produits avec une approche cohérente ?
• Enfin, que devez-vous faire pour que Figma fonctionne sans problème ?

Voyons comment vous mettre sur la bonne voie pour organiser correctement votre Figma, afin que vous puissiez vous concentrer sur votre travail et (espérons-le) laisser le désordre derrière vous une fois pour toutes.

Comprendre ce que vous avez dans Figma

Tout d'abord, pour s'assurer que tout le monde est sur la même longueur d'onde, il est utile de définir la structure de Figma, la signification de certains termes et les différences entre les différents plans.

Tout d'abord, nous avons la façon dont les fichiers sont organisés. Commençons par le haut :

• Organization - Il s'agit d'une couche très supérieure qui n'est visible et gérable que dans le plan d'organisation.
• Teams - Ce sont des collections de projets et les bibliothèques y fonctionnent à un niveau par défaut.
• Projects - Ce sont des collections de fichiers.
• Files - Il s'agit de fichiers Figma ou Figjam dans lesquels vous effectuez la majorité de votre travail.
• Pages - Ce sont les éléments que vous pouvez avoir dans vos dossiers pour différencier les différentes zones, états ou modes de travail.

‍

Il est important de comprendre la terminologie et la cascade de fichiers Figma, afin de s'assurer que vous corrigez les bons problèmes lorsque vous en parlez à votre équipe (ou à des personnes extérieures à votre équipe !).

Ensuite, nous avons les principaux éléments qui composent les fichiers de votre Design System :

• Libraries - Il s'agit d'un type de fichier Figma avec un flux de publication de base qui permet de partager des styles et des composants.
• Components - Il s'agit d'une conception réutilisable qui peut être gérée de façon centralisée et réutilisée dans l'ensemble de votre conception comme instances. Un seul composant peut avoir défini plusieurs variants, aet certaines propriétés peuvent être remplacées au niveau de l'instance. Si vous apportez des modifications au composant de base, celles-ci se répercuteront sur les instances une fois publiées.
• Styles - Les styles sont des propriétés prédéfinies, notamment les couleurs, les remplissages, les traits, le texte, les effets et les grilles de mise en page.

Organiser vos fichiers - “Teams” et “Projects”

Choisir le bon statut

Avant d'aborder les conseils spécifiques aux systèmes de conception, il est utile de se pencher sur l'organisation générale de votre configuration Figma. L'un des défis majeurs de toute structure, quel que soit l'outil, est de connaître le processus de conception : quels fichiers de conception sont en cours, lesquels sont des explorations ou des tests, lesquels sont obsolètes ou dépréciés et lesquels reflètent réellement le produit final. Il existe plusieurs façons d'organiser votre configuration Figma pour faciliter la tâche des personnes au sein de votre organisation.

Comment Spotify organise le travail sur Figma pour améliorer la collaboration

Organization plans

Si vous êtes sur un Organization plan, j'aime beaucoup la façon dont Spotify organise ses fichiers de conception. Ils utilisent la fonction "Teams" pour diviser les différents produits ou équipes au sein de Spotify.

Cela leur permet ensuite d'avoir des projets distincts pour "Travail en cours", "En développement" et "En production". Comme vous pouvez avoir plusieurs fichiers de conception dans chaque projet, cela signifie qu'il y a de l'espace pour que tout le monde puisse travailler ouvertement, et il est très facile pour quiconque arrive de savoir à quoi s'attendre en regardant dans chaque espace de projet. Cela permet également d'obtenir des autorisations granulaires pour les projets et les équipes, ce qui est très pratique lorsque vous avez une grande equipe.

Personnellement, je pense que cette approche fonctionne très bien si vous avez plus de 5 ou 6 équipes qui travaillent sur votre produit.

Professional plans

Le modèle ci-dessus est plus difficile à gérer, car vous ne disposez pas d'un lieu central pour gérer toutes vos équipes. Cela dit, il se peut aussi que votre organisation soit beaucoup plus petite et que vous n'ayez pas besoin d'un grand nombre d'équipes différentes. Dans ce cas, j'ai constaté que le fait d'avoir deux projets par équipe, un projet "en cours" et un projet "en développement", fonctionne très bien. Le projet "en cours" peut être un bac à sable désordonné que les Designers peuvent explorer et utiliser. Le projet "en cours de développement" est l'endroit où les fichiers sont mis en ordre et préparés pour le développement et pour être placés dans le Design System. Dans des organisations précédentes, nous avions également un projet "en production" dont les fichiers étaient très propres et reflétaient ce qui était actuellement dans le produit. Mais leur mise à jour était toujours une corvée.

Si vous souhaitez un niveau supplémentaire de catégorisation, nous avons constaté que l'utilisation d'une légende en forme d'emoji permettait aux gens de savoir où en était le fichier. 🔎 pour le début d’exploration ✍️ pour work in progress, 🥊 pour “à valider”, 🚀 prêt pour le développement. Ainsi, les gens savent tout de suite ce qu'ils regardent sans avoir à plonger dans le dossier.

Starter plans

Enfin, le starter plan. Si vous utilisez la version gratuite de Figma, vous ne pouvez pas faire grand-chose du point de vue de l'organisation ou du système de conception. Ce plan est adapté pour les freelances en début d’activité et les utilisateurs seuls.

Le bon fonctionnement qui convient à vous et à votre équipe de conception

Que vous soyez une start-up, une entreprise ou une agence, la manière dont vous organisez votre Figma peut être très différente selon votre processus de conception, votre équipe de conception, la manière dont vous réalisez les itérations, les prototypes, etc. Utilisez l'architecture Équipes, Projets et Fichiers pour configurer la meilleure façon d'organiser vos équipes afin qu'elles se sentent plus à l'aise. Ces suggestions nécessitent un plan d'organisation et sont présentées comme une configuration de départ. C'est à vous de l'améliorer et de la faire vôtre au final.

Configuration du produit

Travailler sur un seul produit est un excellent moyen d'afficher toutes les fonctionnalités d'un seul coup d'œil. Utilisez les équipes pour organiser vos fonctionnalités afin que votre équipe puisse y accéder rapidement. Vous pouvez ensuite utiliser les projets pour préciser ce qui est en cours d'exécution, en développement et en production.

Configuration de l'entreprise

Une étape au-dessus de la configuration du produit, vous pouvez utiliser les équipes pour afficher tous vos produits et projets pour les fonctionnalités ici. Dans les fichiers, vous pouvez préciser s'ils sont en cours de réalisation, terminés ou tout autre statut. Il se peut qu'à un moment donné, vous vous sentiez trop limité par cette configuration. Si c'est le cas, c'est peut-être le bon moment pour envisager d'avoir plusieurs organisations Figma pour votre entreprise.

Agency configuration

Pour les agences ou Freelances avancés on peut recommander d'utiliser les équipes pour organiser tous leurs différents clients. En naviguant directement parmi les clients, il sera plus facile de rechercher un projet. Organisez les différents projets des clients avec la fonction Projets et si vous avez l'impression qu'il vous manque une certaine hiérarchie, eh bien, peut-être que votre client a besoin de son propre plan d'organisation et d'arrêter d'utiliser votre plan.

Plateformes multiples

Si vous avez plusieurs plateformes (web, iOS, Android), vous pouvez envisager d'utiliser les Projets pour spécifier chaque plateforme et ajouter les statuts, en développement et en production directement dans le nom du fichier. Vous pouvez également diviser les équipes par plateformes (Produit A- iOS, Produit A - Web...) si cela vous aide. Utilisez ces meilleures pratiques comme des lignes directrices et améliorez votre organisation et votre workflow spécifiques à partir de celles-ci.

Organiser vos bibliothèques pour votre équipe

Emojis pour le rappel visuel

Comme nous l'avons déjà mentionné à plusieurs reprises, les émojis sont un excellent raccourci à utiliser avec les noms pour donner aux gens un aperçu de leur statut. Cela peut être fait sur les projets et les fichiers et sur les pages individuelles dans les fichiers Figma. Pour ce qui est de votre système d'emojis, la meilleure façon de décider est en équipe, mais voici quelques suggestions :

• Les conceptions sont terminées et prêtes à être dévelopées : ✅ ☑️ 🚀
• En cours d'édition ou en cours de réalisation : ✏️🛠🖊 🖋 ✒️ 🖌 🖍 📝
• Archivé : ⌛ 🛑 ⛔️ 📛 🚫❌

Cependant, il faut faire attention à l'utilisation des emojis. C'est un excellent moyen de rendre attractifs vos fichiers mais n'en abusez pas. Cela est particulièrement vrai pour les noms de calques et de composants.

Thumbnails

Avoir une vignette personnalisée permet de mieux communiquer. N'hésitez pas à créer des vignettes visuelles pour vos fichiers de conception et vos prototypes afin d'aider vos utilisateurs à comprendre ce qu'ils recherchent en un coup d'œil. Utilisez les vignettes pour afficher des informations, le statut ou toute autre information supplémentaire utile à votre équipe. C'est également un excellent moyen d'obtenir une plus grande cohérence visuelle, et c'est plus facile à lire. Tout le monde vous en remerciera. Voici quelques plugins qui vous aideront à générer une couverture pour vos fichiers :

An example file thumbnail

S'il n'existe pas, construisez-le

Un autre avantage de l'utilisation de Figma est la taille et la puissance de l'écosystème. Si l'utilisation de plugins externes pour améliorer l'efficacité est une option pour vous, gardez à l'esprit que plus vos fichiers Figma sont simples à utiliser, mieux c'est. De plus, le maintien de toute une organisation Figma est déjà assez difficile, ne vous fiez pas trop aux solutions externes, car vous pourriez devenir trop dépendant des mises à jour et de la maintenance. Cependant, une option intéressante serait de construire vos propres plugins pour maintenir vos prototypes et votre système et accélérer votre flux de travail. C'est un excellent moyen d'avoir exactement ce qui correspond à vos besoins et de contrôler l'évolution et la maintenance. Et en prime, si cela peut aider la communauté, n'hésitez pas à le partager et à obtenir de la visibilité !

Réflexions finales

Il n'y a pas une seule façon idéale d'organiser vos fichiers Figma, et vous trouverez peut-être une autre approche qui conviendra mieux à votre propre organisation. Mais si vous ne devez retenir que quelques conseils de cet article, voici les points essentiels à retenir :

• Restez simple et ne rendez pas les choses trop compliquées en termes de dénomination, de plugins ou de lisibilité. Il doit être à la fois facile à maintenir et à utiliser.
• Fractionnez vos fichiers de conception autant que possible. Gardez vos composants séparés de vos projets, ainsi que vos styles.
• Conservez la même convention de dénomination partout : dans vos fichiers Figma, lorsque vous parlez à vos collègues, etc.
• Choisissez la configuration qui vous convient, que vous soyez un produit, une agence ou toute autre organisation complexe. La façon dont vous organisez votre Figma doit représenter la façon dont vos équipes de conception sont organisées.

J'espère que cela vous a donné quelques idées pour vous aider à visualiser la façon de configurer vos fichiers et vos équipes dans Figma. Tout est particulier à votre entreprise et à la façon dont vous êtes organisé, donc vous trouverez peut-être qu'une autre approche est plus adaptée à votre organisation.

‍