(Table des matières)
Cours de conception Figma : Comment bien organiser vos fichiers et équipes
Comprendre ce que vous avez dans Figma
Le bon fonctionnement qui convient à vous et à votre équipe de conception
Organiser vos bibliothèques pour votre équipe
Réflexions finales
Articles suggérés
Analytics & RGPD – Matomo pour Webflow
Ajouter un effet “typewriter” automatique sur un site webflow
Une forte inflation peut réduire votre dette hypothécaire
Ajouter un effet “typewriter” automatique sur un site webflow
Mettre en place de l’AB Testing sur un site Webflow
Les dernières tendances UX/UI pour 2023 avec les différentes pratiques et effets à ne pas rater !
Organisation des fichiers dans 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. 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.
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 :
- Organisation des équipes et des projets
- Hiérarchie du Design System
- Flux de travail de conception
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 :
- Styles
- Composants
- Ressources externes
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. Si vous êtes sur un , 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 équipe.
Personnellement, je pense que cette approche fonctionne très bien si vous avez plus de 5 ou 6 équipes qui travaillent sur votre produit. 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.
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.
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.
Plateformes multiples
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. 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.
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. 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 :
- 🔎 pour le début d’exploration
- ✍️ pour work in progress
- 🥊 pour “à valider”
- 🚀 prêt pour le développement.
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. 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.
Services
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é !
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 :
- Comprenez la terminologie et la structure de Figma.
- Organisez vos fichiers en fonction de votre processus de conception.
- Utilisez les équipes, les projets et les fichiers pour organiser votre travail.
- Utilisez des légendes et des emojis pour indiquer l’état des fichiers.
- Personnalisez les vignettes pour une meilleure communication.
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.
