Maîtriser la nomenclature des calques, variables, composants et jetons dans Figma n'est pas un luxe, mais une nécessité pratique. Un système de nommage bien pensé accélère les flux de travail, évite les confusions et fluidifie la collaboration entre la conception et le développement , notamment lorsque plusieurs personnes travaillent sur les mêmes fichiers.
Si vous travaillez dans le domaine de la conception d'interfaces et souhaitez perfectionner vos compétences, il est essentiel d'organiser vos fichiers de A à Z : quels noms sont utilisés, comment sont structurés les éléments et comment sont-ils documentés ? Ce guide vous propose des bonnes pratiques éprouvées, des exemples concrets et une approche cohérente pour standardiser tous les aspects de votre projet Figma , du nom de fichier à la page, en passant par les plus petites variables de couleur ou de police.
Principes fondamentaux : Pourquoi normaliser la nomenclature dans Figma
Avant d'entrer dans les détails, il est important de rappeler les fondamentaux : un système de conception est la référence absolue pour un produit numérique. Il s'agit de l'ensemble des composants et des styles qui définissent l'identité visuelle, l'accessibilité et la cohérence de votre interface , et Figma est l'outil sur lequel cette référence est créée, publiée et utilisée.
Dans ce système, les propriétés et leurs valeurs constituent les éléments de base. Couleurs, polices, espacements, tailles, effets et états nécessitent une nomenclature logique, lisible et évolutive pour l'ensemble de l'organisation, et non pas seulement pour la personne ayant conçu le premier composant.
Une norme commune évite toute ambiguïté. Nommer, ce n'est pas ajouter de jolies étiquettes, mais créer une taxonomie qui résiste à l'épreuve du temps et à l'évolution du produit , et qui permette à chaque membre de l'équipe de savoir quoi utiliser, où le modifier et comment cela affecte les consommateurs finaux.
Organisation des composants et des styles : des modèles qui fonctionnent
Il est recommandé que les noms décrivent la nature, le comportement et l'usage d'un objet. Cela implique de distinguer les noms sémantiques des noms purement descriptifs ou liés à l'apparence , et de veiller à leur cohérence.
Pour les composants interactifs, il est conseillé de définir l'élément et son état. Par exemple, un bouton peut avoir les états base, survol, focus, pressé et désactivé , et son nom doit clairement indiquer la convention de nommage que l'ensemble de la bibliothèque suivra.
- Boutons : Utilisez une convention cohérente, telle que Bouton principal, Bouton secondaire, Bouton tertiaire, et ajoutez l’état avec un suffixe, par exemple Bouton principal — Survol.
- Icônes : privilégiez des noms descriptifs tels que Icône Courriel, Icône Réseaux sociaux ou Icône Recherche. Évitez les caractères génériques qui ne servent à rien. et qui, à long terme, rendent la recherche plus difficile.
Si vous travaillez avec plusieurs systèmes ou marques, définissez clairement leur périmètre. Les termes « principal » et « secondaire » sont utiles lorsque deux systèmes de conception ou deux palettes principales coexistent ; ils permettent de maintenir la clarté au niveau des composants et des jetons.
L'intérêt des conventions de nommage ne réside pas uniquement dans l'esthétique ; leur véritable impact se fait sentir dans la collaboration. Lorsque les équipes de conception et de développement partagent les mêmes noms et la même structure, la communication s'améliore, les transitions sont plus fluides et les erreurs sont réduites, car chacun peut trouver la ressource adéquate du premier coup.
Comment configurer et maintenir votre système de conception dans Figma
L'établissement du système de conception dans un fichier dédié apporte structure et rigueur. Ce fichier doit servir de référence pour les bibliothèques, les composants principaux et les styles publiés ; idéalement, il doit être protégé et versionné.
- Inventaire initialÉnumérez les éléments clés. Définissez la palette de base et ses échelles, la typographie et ses niveaux, les modèles d'espacement et les styles d'effets.
- Fichier maître du système: crée un fichier dédié dans Figma pour le système de conception. Il s'agira de l'origine des composants et des styles, ainsi que de leur documentation..
- Composants organisésRegroupez les éléments par familles (Boutons, Formulaires, Navigation, Commentaires). Utilisez la convention d'appellation convenue et maintenez une hiérarchie claire dans les ressources.
- Styles bien définis: publie des styles de couleur, du texte, une grille et des effets. Nommez les styles en utilisant les mêmes critères que ceux utilisés pour les variables et les jetons. pour éviter les doublons.
- Documentation vivanteAjoutez des pages de guide utilisateur, des exemples et des consignes. Définissez les éléments modifiables, les personnes autorisées à publier et la procédure de gestion des versions.
Tout cela doit s'accompagner de processus. Il est conseillé de définir un flux de travail pour la publication des documents, une évaluation par les pairs et un calendrier de gestion des versions afin que les modifications soient diffusées de manière contrôlée et traçable.
Jetons et normes de conception : de JSON au dictionnaire de style W3C
Les jetons de conception sont la plus petite représentation des décisions visuelles et d'interaction dans un format portable. Le stockage des jetons au format JSON est devenu une pratique courante, et des outils comme Style Dictionary facilitent la communication entre les plateformes en générant des variables pour le web, iOS ou Android.
Bien que l'utilisation de JSON fasse consensus, il n'y a pas toujours d'accord sur la manière de l'organiser. Style Dictionary a popularisé la taxonomie CTI (Category, Type, Item) pour structurer les jetons , ce qui est très utile pour le filtrage et la transformation dans les pipelines automatisés.
En juillet 2023, un projet de spécification du groupe de travail du W3C visant à normaliser le format des jetons de conception a été publié. Cette spécification propose, entre autres, une propriété spéciale appelée `$type` pour catégoriser explicitement les jetons , s'écartant ainsi de CTI sur certains points.
Qu’est-ce que cela signifie ? Si vous exportez des jetons depuis Figma en utilisant la nouvelle spécification et que vous prévoyez de les traiter avec les configurations classiques du dictionnaire de styles, des incompatibilités peuvent survenir lors du filtrage ou de la transformation, car les règles attendent un format CTI (Continuously Variable Intake). Heureusement, le dictionnaire de styles est flexible : vous pouvez adapter les transformations, les filtres et les formats pour qu’ils soient conformes à la nouvelle norme.
En attendant l'élaboration de recommandations officielles, il est essentiel que la structure adoptée prenne en compte les besoins des utilisateurs : traçabilité des variables, clarté sémantique et compatibilité avec les outils de développement . Par ailleurs, il est conseillé de consulter les analyses et études de cas publiées par les leaders du secteur (par exemple, les taxonomies proposées pour les échelles d'interface ou les retours d'expérience de grands systèmes comme Salesforce) afin d'éviter de réinventer la roue.
Nommage des variables : couleurs et typographie sans prise de tête
De nombreuses équipes mélangent des noms comme « Bleu principal » avec des échelles comme « Bleu-500 » et des rôles typographiques comme « Grand titre » ou « Corps normal ». La solution la plus fiable consiste à séparer les couches : les jetons d’apparence de base et les jetons d’intention sémantique.
Couleurs. Définissez une palette de base à l'aide d'échelles (par exemple, Bleu 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) et des couleurs neutres distinctes. Ces couleurs constituent les éléments de base et ne doivent jamais être utilisées directement dans les composants si vous recherchez une flexibilité thématique. Créez ensuite des éléments sémantiques tels que Couleur d'arrière-plan principale, Texte secondaire ou Bordure interactive, qui correspondent aux éléments de base. Ainsi, modifier un thème ou une marque se fait par simple correspondance, et non par une intervention radicale.
Pour les états, ajoutez des suffixes cohérents : Survol, Focus, Actif, Désactivé et Sélectionné suffisent généralement. Si un contraste élevé est nécessaire pour une meilleure accessibilité, envisagez des variantes à contraste élevé associées aux rôles sémantiques.
Typographie. Déclarez les jetons de composition qui séparent la taille, la graisse, l'interlignage et le crénage, et créez des styles de texte avec des rôles. Utilisez des noms d'intention comme XL Titre , M Sous-titre, M Corps, S Pied de page, et indiquez clairement la graisse avec un suffixe standardisé, par exemple, M Corps Normal, M Corps Semi-gras. Si vous travaillez avec plusieurs marques ou produits, ajoutez un préfixe de contexte comme Web, iOS ou Marque A lorsque cela est absolument nécessaire.
L'utilisation conjointe de l'espagnol et des codes numériques est envisageable à condition d'être cohérente. Utilisez des tirets pour séparer les attributs, évitez les espaces problématiques et respectez l'ordre sémantique du macro au micro , par exemple : Couleur — Arrière-plan — Primaire — Survol ou Texte — Corps — M — Semi-gras. Si vous optez pour des échelles numériques (par exemple, Bleu-500), utilisez-les uniquement pour les jetons de base ; les rôles sémantiques ne doivent pas dépendre d'un nombre qui n'explique pas l'intention.
Remarque sur l'internationalisation : même si l'équipe parle espagnol, la standardisation des suffixes ou abréviations techniques (md, lg, sm, xl) facilite l'adoption des outils et l'intégration par les personnes d'autres équipes . L'essentiel n'est pas la langue, mais la cohérence et la traçabilité.
Architecture Figma : équipes, projets, fichiers et pages
La structure de Figma influe sur les autorisations, les recherches et les performances. Les comptes d'équipe Professionnels gèrent les projets, les fichiers et les pages ; les comptes d'équipe Organisation ajoutent la couche Équipes, utile dans les grandes entreprises et les structures complexes.
Autorisations. Vous pouvez accorder des droits de lecture seule, de modification ou d'administration au niveau du projet et du fichier. Il existe également des projets en lecture seule, où seul le créateur peut modifier, et des projets sur invitation uniquement, qui sont privés . Envoyez systématiquement les invitations à modifier afin de maintenir le contrôle du système.
Convention de nommage des projets. Établissez un modèle comme _ pour que tout soit identifiable et facile à organiser. Privilégiez les noms courts et fonctionnels afin qu'ils soient parfaitement visibles dans l'interface et évitent toute ambiguïté.
Types de fichiers. Différence entre le répertoire principal, le répertoire actif et le répertoire archivé. Le répertoire principal est la source de référence et n'est pas modifiable, sauf pour des raisons de gouvernance ; le répertoire actif est l'espace de travail ; le répertoire archivé est un fichier historique consultable. Lors de la publication de bibliothèques, utilisez le répertoire principal.
Couvertures et performances. Figma vous permet de sélectionner une image comme vignette (Définir comme vignette). Utilisez une image de 620 × 320 px pour une couverture nette et des couleurs homogènes entre les différents types de fichiers (par exemple, une couleur pour le fichier principal, une autre pour le fichier actif et une autre pour le fichier archivé). Évitez de surcharger le dossier avec des fichiers volumineux : répartissez-les par fonctionnalités et par produits.
Pages, enchaînements et numérotation des cadres : que chaque détail compte.
Nommage des pages. Un modèle efficace est `<titre>`, avec un identifiant incrémentiel et des zéros non significatifs pour un classement stable. Complétez le nom avec un code d'état dans le titre lui-même ou un emoji convenu pour indiquer si la page est terminée, en cours, en révision ou abandonnée.
Organisez vos flux et vos scénarios. Sur chaque page, utilisez des rangées de cadres représentant des récits utilisateurs ou des scénarios. Incluez un cadre de couverture au début de chaque rangée, avec le nom du flux et une brève description contextuelle, afin d'éviter les malentendus et de faciliter la relecture.
Numérotation des images. Une syntaxe comme _ est très efficace. Elle utilise des zéros non significatifs pour garantir un ordre naturel (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) et numérote les vues de gauche à droite sur la même ligne. Exemple : 01_100, 01_101, 01_102 pour la première ligne ; 01_200, 01_201, 01_202 pour la seconde.
Gestion des versions. Ne vous fiez pas uniquement à la sauvegarde automatique. Utilisez l'historique des versions pour générer des commits lors des étapes clés, notamment pour les systèmes de conception ou les fonctionnalités importantes , afin de fournir des messages clairs à l'équipe et de faciliter les audits futurs.
Équipements système et bibliothèques de gouvernance
Les bibliothèques transforment un fichier Figma en un ensemble de composants et de styles réutilisables. Elles sont publiées depuis le panneau Ressources et nécessitent le respect strict des autorisations et des révisions afin d'éviter toute rupture des conceptions dépendantes.
Dans les grandes organisations, il est judicieux de créer une équipe dédiée au système de conception. Cela permet un meilleur contrôle des droits de modification et de publication, tandis que le reste de l'entreprise accède au système en lecture seule . Cette séparation réduit les incidents et rend le cycle de changement plus prévisible.
Types d'équipes dans l'organisation : Ouverte, Fermée et Secrète. L'équipe Ouverte permet à tous de rejoindre l'équipe et de consulter la documentation ; l'équipe Fermée nécessite une invitation pour consulter le contenu ; l'équipe Secrète n'est visible que sur invitation . Choisissez en fonction de la sensibilité du projet et de la phase du système.
Analyse et administration. La console d'administration de l'organisation fournit des statistiques sur l'adoption des composants et des styles et permet d'activer les bibliothèques par défaut. Ceci est particulièrement utile pour les éléments de marque, les couvertures, les icônes ou les ressources communes qui doivent être facilement accessibles.
Automatisez le renommage avec Figma AI
L' IA de Figma permet de gagner du temps en attribuant des noms contextuels aux calques en masse. Elle analyse le contenu, la position et les relations entre les calques sélectionnés afin de suggérer un nom cohérent , et synchronise même les calques de niveau supérieur s'ils sont tous sans nom.
L'outil respecte les noms que vous avez déjà attribués. Il ne modifie que les calques qui conservent la convention de nommage par défaut de Figma , et si vous incluez des calques renommés dans la sélection, il les conservera intacts sauf si vous forcez l'action.
Les calques renommés comprennent : les cadres, les groupes, le texte, les instances conservant le nom par défaut du composant et les rectangles remplis d’une image. Pour les instances, seul le conteneur est concerné, et non les sous-calques , afin d’éviter tout effet indésirable.
Les calques non renommés, les calques déjà renommés, masqués ou verrouillés, les sous-calques des instances, les formes vectorielles individuelles (ellipses, étoiles, polygones, grilles vectorielles, etc.) et les rectangles sans remplissage d'image doivent être modifiés manuellement ou au niveau du composant.
Pour lancer l'opération : après avoir sélectionné les calques, vous pouvez utiliser le menu contextuel, le bouton Actions de la barre d'outils ou le menu Actions rapides. S'il n'y a rien à renommer, Figma affiche un avertissement et vous permet de forcer l'action avec Renommer quand même si vous souhaitez uniformiser les noms.
Meilleures pratiques spécifiques pour les couleurs et le texte dans les variables
Si vous utilisez actuellement Main Blue et Blue-500, passez à un modèle dual. Définissez les variables de base par échelle (de Blue-50 à Blue-900) et les variables sémantiques par fonction (Arrière-plan : principal, Texte : secondaire, Bordure : interactive) , puis faites correspondre les unes aux autres. Ce lien vous permettra de vous adapter aux changements de marque ou de thème.
Introduisez des suffixes uniformes pour les états : Survol, Focus, Actif, Désactivé, Sélectionné . Si vous travaillez avec des surfaces et des reliefs, ajoutez des variantes pour Surface surélevée ou Contenu sur fond discret, toujours sous l’égide sémantique.
En typographie, il convient de distinguer les alias et les éléments de composition. Les alias sont définis par leur rôle (Titre-XL, Sous-titre-M, Corps-M), tandis que les éléments de composition incluent la taille, la graisse, l'interlignage et l'approche . Lorsque les noms de polices changent ou que le produit évolue, il suffit de reconfigurer le mappage des caractères pour chaque écran.
Cette approche simplifie également la communication avec l'équipe de développement. Les développeurs apprécient souvent les variables stables et prévisibles , telles que `--color-text-primary` ou `--font-body-md`, plutôt que des noms esthétiquement plaisants qui changent au gré des tendances.
Plugins recommandés pour une meilleure organisation
L'utilisation d'outils auxiliaires permet d'éliminer les tâches répétitives et les erreurs humaines. Figma propose des plugins qui facilitent la gestion des noms, la synchronisation du contenu et le suivi des liens entre les écrans.
- Fonction Rechercher et remplacer : utile pour unifier en masse les noms de calques, les styles ou le texte.
- Bobine de contenu : Il vous permet d'insérer un contenu d'exemple cohérent et réutilisable. pour tester les états et les longueurs.
- Outil de tri : permet de trier les calques et les plans de travail selon des critères prévisibles.
- Synchronisation Google Sheets : synchronise les données tabulaires avec les mises en page, idéal pour les listes ou les tableaux.
- Flux automatique : tracer des flèches et des liens entre les cadres présenter des flux sans effort.
- Annotations : Génère des spécifications visuelles des mesures, des espacements et des styles.
Organisation de travail avec les clients et les comptes
Lors de collaborations avec des organisations externes, il est judicieux d'harmoniser la structure et les autorisations. Les comptes d'équipe de l'organisation permettent de créer des équipes par produit, d'activer les bibliothèques par défaut et de consulter les statistiques d'adoption , facilitant ainsi la gouvernance du système grâce aux données.
Les avantages des équipes distinctes : hiérarchie claire, séparation des produits ou des projets, permissions adaptées aux rôles, niveau d’organisation accru et collaboration facilitée. L’arborescence (Équipes, Projets) offre une représentation mentale immédiate qui simplifie l’accès aux fichiers.
Pour les opérations quotidiennes, conservez le même modèle que chez vous : des projets pour les éléments principaux, actifs et archivés ; des fichiers légers par fonctionnalité ; des pages avec des identifiants et un statut visibles ; et un système de versionnage avec des messages clairs à la fin de chaque étape pour laisser une trace.
Formation et développement professionnel
Pour approfondir et dynamiser votre carrière en UX/UI, envisagez une formation auprès de professionnels actifs. Des programmes intensifs comme le Bootcamp Full Stack UX/UI Design AI Driven de KeepCoding allient expérience pratique, expertise technique et technologies appliquées à la conception et au développement, avec des formateurs qui évoluent au quotidien dans le secteur.
Au-delà de la maîtrise de Figma, cette formation vous familiarise avec des études de cas concrets, les méthodes de travail en équipe et les décisions à fort impact. Cette combinaison de théorie et de pratique accélère votre employabilité et vous aide à constituer un solide portfolio sur un marché concurrentiel.
Grâce à une nomenclature et un cadre de processus clairs, un système de conception bien documenté et une stratégie de jetons conforme aux normes, votre équipe gagnera en rapidité, réduira les erreurs et pourra faire évoluer le produit sans rien perturber . L'essentiel est de s'accorder sur une convention, de la documenter et de l'appliquer à l'aide d'outils, de permissions et de revues : le reste consiste à itérer intelligemment.
