Meilleures pratiques pour nommer les jetons de conception, les composants, les variables, etc. —

Nommer est difficile. En tant que concepteurs et développeurs, nous avons souvent du mal à trouver le bon nom : pour un jeton de conception, des couleurs, des composants d’interface utilisateur, des classes HTML et des variables. Parfois, les noms que nous choisissons sont trop générique, il est donc difficile de comprendre ce que cela signifie exactement. Et parfois ils le sont trop spécifiquelaissant peu de place à la flexibilité et à la réutilisation.

Dans cet article, nous voulons aller au fond des choses et explorez comment nous pouvons rendre la dénomination plus simple. Comment choisir les bons noms ? Et quelles conventions de dénomination fonctionnent le mieux ? Regardons de plus près.

Inspiration pour le nom

Si vous cherchez de l’inspiration pour nommer des classes HTML, des propriétés CSS ou des fonctions JavaScript, Noms de classe est une merveilleuse ressource remplie d’idées qui vous incitent Sortir des sentiers battus.

Le site propose des listes de mots regroupés par thème, parfaits pour nommer. Vous trouverez des termes pour décrire différents types de comportement, la ressemblance entre les choses, l’ordre, le regroupement et l’association, mais aussi collections thématiques de mots cela ne viendrait pas instantanément à l’esprit lorsqu’il s’agissait de code, parmi lesquels des mots issus de la nature, de l’art, du théâtre, de la musique, de l’architecture, de la mode et de l’édition.

Conventions de nommage

Qu’est-ce qui fait un bon nom ? Javier Cuello a résumé un ensemble de nommer les meilleures pratiques qui vous aident à nommer votre calques, groupes et composants de manière cohérente et évolutive.

Comme le souligne Javier, un bon nom a une structure logique, est court, significatif et connu de tous, et n’est pas lié à des propriétés visuelles. Il partage faire et ne pas faire pour illustrer comment y parvenir et examine également de plus près tous les petits détails que vous devez prendre en compte lors de la dénomination des tailles, des couleurs, des groupes, des calques et des composants.

Manuel de dénomination des jetons de conception

Comment nommer et gérer les jetons de conception ? Pour améliorer vos compétences en matière de dénomination de jetons de conception, Romina Kavcic a créé un site interactif Manuel de dénomination des jetons de conception. Il couvre tout, de différentes approches de la structure de dénomination à la création de bases de données consultables, à l’organisation d’ateliers de dénomination et à l’automatisation.

Le playbook comprend également un nommer un terrain de jeu où vous pouvez jouer avec les noms simplement par glisser-déposer. Pour plus d’exemples visuels, assurez-vous également de consulter le Modèle Figma. Il comprend des composants pour toutes les catégories, vous permettant d’expérimenter différentes structures de dénomination.

Taxonomie des jetons de conception flexible

Comment créer une taxonomie de jetons de conception flexible qui fonctionne sur différents produits ? C’était le défi auquel l’équipe d’Intuit a été confrontée. La société mère de produits tels que Mailchimp, Quickbooks, TurboTax et Mint a développé un système de jetons flexible cela va au-delà du thème de la marque pour servir de système fondamental pour une large gamme de produits.

Nate Baldwin a écrit un étude de cas dans lequel il partage des informations précieuses sur la réalisation de Taxonomie des jetons de conception d’Intuit. Il approfondit les problèmes de l’ancien système de taxonomie, les critères qu’ils ont définis pour le nouveau système et comment il a été créé. De nombreux points à retenir pour créer votre propre taxonomie de jetons robuste et flexible sont garantis.

Nommer les couleurs

Lorsque vous créez un système de couleurs, vous avez besoin de noms pour toutes ses facettes et utilisations. Des noms auxquels tous les membres de l’équipe peuvent donner un sens. Mais comment y parvenir ? Comment tu apporter de la logique à un sujet subjectif comme la couleur ? Jess Satell, conceptrice de contenu pour le système de conception Spectrum d’Adobe, partage comment ils relèvent le défi.

Comme Jess l’explique, la nomenclature des couleurs Spectrum utilise une combinaison de classificateurs de familles de couleurs (par exemple, bleu ou gris) associés à une échelle de valeur de luminosité incrémentielle (50-900) pour nommer les couleurs d’une manière qui est non seulement logique pour toutes les personnes impliquées, mais également. évolutif et flexible à mesure que le système se développe.

Une autre petite aide pratique pour nommer les couleurs est Perroquet de couleur. Le robot Twitter est capable de nommer et d’identifier les couleurs d’une image donnée. Mentionnez simplement le bot dans une réponse et il répondra avec une palette de couleurs.

Noms communs pour les composants de l’interface utilisateur

Regarder ce que les autres appellent des choses similaires est une excellente façon de commencer lorsque vous êtes j’ai du mal à nommer. Et quelle meilleure source que d’autres systèmes de conception ? Avant de vous retrouver dans le terrier du lapin du système de conception, Iain Bean a fait la recherche pour vous et a créé le Galerie de composants.

La galerie de composants est une collection de composants d’interface issus de systèmes de conception réels. Il comprend de nombreux exemples pour plus de 50 composants d’interface utilisateur – de l’accordéon à visuellement caché – et répertorie également les autres noms utilisés par les composants d’interface utilisateur. Une ressource fantastique, pas seulement en matière de dénomination.

Carte de taxonomie des variables

Un merveilleux exemple de directives de dénomination pour un système de conception complexe multimarque et multithème vient de l’équipe Vodafone UK Design System. Leur Carte de taxonomie des variables décompose le anatomie et catégorisation d’un jeton de conception dans un système de collections bien orchestré.

La carte illustre quatre collections nécessaires pour prendre en charge le système et les connexions entre les jetons : de la marque et des primitives à la sémantique et aux pages. Il s’appuie sur Le travail de Nathan Curtis sur la dénomination des jetons de conception et permet à chacun d’avoir un aperçu de l’endroit où un jeton est utilisé et de ce qu’il représente, simplement à partir de son nom.

Si vous souhaitez explorer d’autres approches pour nommer les jetons de conception, Vitaly a compilé un liste des kits et ressources Figma utiles qui valent le détour.

Inventaire des noms de jetons de conception

Romina Kavcic a créé une petite ressource pratique qui ne manquera pas de donner un coup de pouce à votre flux de travail de dénomination de jetons de conception. Le Feuille de calcul d’inventaire des noms de jetons de conception non seulement il est facile de assurer une dénomination cohérente mais se synchronise également directement avec Figma.

La feuille de calcul a une structure simple avec quatre niveaux pour vous donner une vue d’ensemble de tous vos jetons de conception. Vous pouvez facilement ajouter des lignes, des thèmes et des modes sans perdre le fil et filtrez vos jetons. Et même si le tableur lui-même constitue déjà une excellente solution pour que tout le monde reste sur la même longueur d’onde, il déploie sa véritable force en combinaison avec le Plugin Google Spreadsheets ou la Plugin noyau. Une fois installé, les modifications que vous apportez dans la feuille de calcul sont reflétées dans Figma. Un vrai gain de temps !

Vous voulez plonger plus profondément ?

Nous espérons que ces ressources vous seront utiles lorsque vous aborderez la dénomination. Si vous souhaitez approfondir vos connaissances sur les jetons de conception, les composants et les systèmes de conception, nous en avons quelques-uns. ateliers en ligne et Conférences fracassantes à venir :

Nous serions absolument ravis de vous accueillir dans l’une de nos expériences spéciales Smashing, que ce soit en ligne ou en personne !