Construire une bibliothèque de composants en utilisant Figma

J'ai travaillé à la création et à la maintenance de la bibliothèque principale de notre système de conception, Lexicon. Nous avons utilisé l'application Sketch pendant la première année, puis nous avons déménagé à Figma, où la gestion de la bibliothèque était différente à certains égards, ce qui rend le changement très difficile pour nous.

Pour être honnête, comme dans toute construction de bibliothèque, cela prend du temps, effort, et planification, mais cela en vaut la peine, car cela vous aidera à fournir des composants détaillés à votre équipe. Cela contribuera également à améliorer la cohérence globale de la conception et facilitera la maintenance à long terme. J'espère que les astuces que je vais donner dans cet article vous faciliteront également le processus.

Cet article décrit les étapes nécessaires à la création d'une bibliothèque de composants avec Figma, à l'aide de styles et d'un composant principal. (Un composant maître vous permettra d'appliquer simultanément plusieurs modifications.) Je vais également décrire en détail l'organisation des composants et vous donner une solution possible si vous avez un grand nombre d'icônes dans la bibliothèque.

[1965 Note: Pour faciliter l'utilisation, la mise à jour et la maintenance, nous avons constaté qu'il est préférable d'utiliser un fichier Figma séparé pour la bibliothèque, puis de le publier en tant que "bibliothèque" d'équipe au lieu de publier les composants individuellement.

Mise en route

Ce guide a été créé du point de vue du concepteur. Si vous avez au moins quelques connaissances de base de Figma (ou Sketch), il devrait vous aider à démarrer à créer, organiser et gérer une bibliothèque de composants pour votre équipe de conception.

Si vous êtes nouveau à Figma vérifiez les didacticiels suivants avant de passer à l’article suivant:

Conditions requises

Avant de commencer, nous devons couvrir certaines conditions pour définir les styles pour la bibliothèque. [1 9659014] Echelle de typographie

La première étape consiste à définir l'échelle de typographie. il est utile de se concentrer sur la croissance de la taille du texte et de la hauteur de ligne dans votre système, ce qui vous permet de définir la hiérarchie visuelle de vos textes.

Le type d’échelle dépend de ce que vous concevez. Il est courant d'utiliser un ratio plus élevé pour les conceptions de sites Web et un ratio plus faible lors de la conception de produits numériques.

La raison en est derrière l'objectif de la conception: un site Web est généralement conçu pour communiquer et convertir afin de vous donner une ou deux actions directes. . Il est plus facile dans ce contexte d’avoir 36px pour un titre principal, 24px pour un titre secondaire et 16px pour un texte descriptif.

Ressource associée: « Grille à 8 points: Typographie sur le Web » par Elliot Dahl.

D'autre part, les produits ou services numériques sont conçus pour apporter une solution à un problème spécifique, généralement avec plusieurs actions et flux possibles. Cela signifie plus d'informations, plus de contenu et plus de composants, le tout dans le même espace.

Dans ce cas, je trouve personnellement qu'il est rare d'utiliser plus de 24 pixels pour les textes. Il est plus courant d’utiliser des tailles réduites pour les composants, généralement entre 12 et 18 pixels, en fonction de l’importance du texte.

Si vous concevez un produit numérique, il est utile de commencer par parler aux développeurs. Il est plus facile de conserver une échelle de typographie basée sur EM / REM plus que de pixels réels. Il est toujours recommandé de créer une règle pour convertir les pixels en multiples EM / REM.

Ressource associée: « Définition d'une échelle de types modulaires pour l'interface utilisateur Web » de Kelly Dern.

Schéma de couleurs [19659015] Deuxièmement, nous devons définir le schéma de couleurs. Je pense qu’il est préférable de diviser cette tâche en deux parties.

1. Premièrement, vous devez définir les couleurs principales du système . Je recommande de garder les choses simples et d'utiliser un maximum de quatre ou cinq couleurs (y compris les couleurs de validation), car plus vous incluez de couleurs, plus vous devrez conserver d'éléments dans le futur.
2. Ensuite, en génère plus. valeurs de couleur utilisant les fonctions Sass telles que “Eclaircir” et “Assombrir” – cela fonctionne très bien pour les interfaces utilisateur. Le principal avantage de cette technique est d’utiliser la même teinte pour les différentes variantes et d’obtenir une règle mathématique pouvant être automatisée dans le code. Vous ne pouvez pas le faire directement avec Figma, mais tout générateur de couleur Sass fonctionnera parfaitement – par exemple, SassMe de Jim Nielsen. J'aime augmenter les fonctions de 1% pour avoir plus de choix de couleurs.

Astuce : Pour pouvoir appliquer des modifications ultérieures sans devoir renommer les variables, évitez d'utiliser la couleur dans le nom de la couleur. . Par exemple, au lieu de $ blue utilisez $ primaire .

Lectures recommandées : “ Comment appelez-vous couleur Variables? ”de Chris Coyier

Figma Styles

Une fois que vous avez défini l’échelle de typographie et le jeu de couleurs, vous pouvez les utiliser pour définir les styles de la bibliothèque.

C’est la première étape dans la création de bibliothèque. Cette fonction vous permet d'utiliser un seul ensemble de propriétés dans des éléments dans plusieurs éléments .

Exemple concret

Supposons que vous définissiez la couleur de votre marque comme un style, que vous l’appliquiez à 500 éléments différents. S'il est décidé par la suite que vous devez le changer pour un bleu plus foncé avec plus de contraste, vous pouvez mettre à jour tous les 500 éléments stylés à la fois, de sorte que vous n'ayez pas à le faire manuellement, élément par élément. 19659005] Nous pouvons définir des styles pour les éléments suivants:

Si vous avez des variantes du même style, pour faciliter leur recherche ultérieurement, vous pouvez nommer les styles individuels et les organiser à l'intérieur du panneau en groupes. Pour ce faire, utilisez simplement la formule suivante:

Nom de groupe / Nom de style

J'ai suggéré ci-dessous comment nommer les styles de texte et de couleur.

Styles de texte

Propriétés que vous pouvez définir dans un style de texte:

• Taille de la police
• Poids de la police
• Hauteur de ligne
• Espacement des lettres

Conseil : Figma réduit considérablement le nombre de styles à définir dans le fichier. bibliothèque, car les alignements et les couleurs sont indépendants du style. Vous pouvez combiner un style de texte et un style de couleur dans le même élément de texte.

Désignation des styles de texte

Je recommande l'utilisation d'une règle de dénomination telle que «Taille / Poids»
(par exemple: 16 / Régulier, 16 / SemiBold, 16 / Bold).

Figma n'autorise qu'un niveau d'indentation. Si vous devez inclure la police, vous pouvez toujours ajouter un préfixe avant la taille:
FontFamily Taille / Poids ou FF Taille / Poids
* (par exemple: SourceSansPro 16 / Normal ou SSP 16 / Regular ). *

Styles de couleur

Ce style de couleur utilise son valeur hexadécimale ( #FFF ) et l'opacité comme propriétés.

Astuce : Figma permet de définir un style de couleur pour le remplissage et un autre pour la bordure. dans le même élément, les rendant indépendants les uns des autres.

Désignation des styles de couleur

Pour une meilleure organisation, je recommande l'utilisation de cette règle «Couleur / Variante». Nous avons nommé nos styles de couleur en utilisant «Primaire / Défaut» pour la couleur de base, «Primaire / L1», «Primaire / L2» pour les variantes plus claires et «Primaire / D1», «Primaire / D2» pour les variantes plus foncées.

Effets

Lors de la conception d'une interface, vous devrez peut-être aussi créer des éléments utilisant certains effets tels que les ombres portées (le glisser-déposer peut être un exemple de motif utilisant des effets d'ombres portées). Pour contrôler ces détails graphiques, vous pouvez inclure des styles d'effet tels que des ombres ou des flous de calque dans la bibliothèque, ainsi que les diviser par groupes si nécessaire.

Grilles

Pour fournir quelque chose de très utile à votre équipe, incluez les styles de grille. Vous pouvez définir une grille de 8 pixels, une grille de 12 colonnes, des grilles flexibles pour que votre équipe n’ait pas besoin de les recréer.

Astuce : En profitant de cette fonctionnalité, vous pouvez fournir tous les points de rupture différents en tant que "styles de grille".

Composant principal

] Figma vous permet de générer plusieurs instances du même composant et de les mettre à jour via un seul composant principal. C'est plus facile que vous ne le pensez, vous pouvez commencer par quelques petits éléments, puis les utiliser pour faire évoluer votre bibliothèque.

Pour mieux expliquer ce processus, j'utiliserai l'un des composants de base de toutes les bibliothèques: les boutons.

Boutons!

Chaque système dispose de types de boutons différents. pour représenter l'importance des actions. Vous pouvez commencer à avoir les boutons principaux et secondaires avec uniquement des textes et une taille, mais vous devrez probablement garder quelque chose comme ceci:

• 2 types de couleurs ( Primaire | Secondaire )
• 2 tailles de boutons ( Normal | Petit )
• 4 types de contenu ( Texte seulement | Icône seulement | Texte + Icône droite | Icône gauche + Texte )
• 5 états ( | Hover | Actif | Désactivé | Focus )

Cela nous donnerait jusqu'à 88 composants différents à maintenir

Commençons par étapes

La première étape consiste à inclure toutes les variantes ensemble au même endroit. Pour les boutons que nous allons utiliser:

• Une forme unique pour l’arrière-plan du bouton afin que nous puissions ensuite placer les styles de couleur pour le remplissage et la bordure;
• Le texte unique qui comportera à la fois du texte et styles de couleur;
• Trois composants d'icônes (placés à droite, au centre et à gauche) remplis avec le style de couleur (vous pourrez facilement échanger les icônes).

La deuxième étape consiste à créer le composant principal (utilisation le raccourci Cmd + Alt + K sur Mac, ou Ctrl + Alt + K sous Windows) avec toutes les variantes en tant qu'instances. Je suggère d'utiliser un style différent et neutre pour les éléments du composant principal et d'utiliser les styles réels des sous-composants. Cette astuce aidera l'équipe à n'utiliser que des sous-composants.

Vous pouvez voir la différence visuelle entre un maître. composant et un sous-composant dans l'étape suivante:

Dans la troisième étape, vous devez dupliquer le composant principal pour générer une instance. Vous pouvez maintenant utiliser cette instance pour créer un sous-composant, et à partir de maintenant toutes les modifications apportées. Le composant principal modifiera également le sous-composant que vous avez créé.

Vous pouvez maintenant commencer à appliquer les différents styles déjà vus aux éléments du sous-composant et, bien sûr, vous pouvez les masquer. vous n'avez pas besoin de ce sous-composant.

Alignement du texte

Comme je vous l’ai montré dans les styles, les alignements sont indépendants du style. Donc, si vous souhaitez modifier l'alignement du texte, sélectionnez-le simplement en appuyant sur Cmd / Ctrl et en le modifiant. À gauche, au centre ou à droite: tout fonctionnera et vous pourrez définir différents sous-composants, comme je le faisais avec les boutons.

Conseil : Pour vous aider à travailler plus rapidement sans avoir à trouver le résultat exact. couche d'élément, si vous supprimez un élément dans l'instance, il sera masqué au lieu de le supprimer réellement.

Organisation du composant

Si vous venez de Sketch, vous pourriez avoir des problèmes d'organisation des composants. Figma car il existe quelques différences essentielles entre ces deux outils. Ceci est un bref guide pour vous aider à bien organiser les composants afin que le menu d'instance n'affecte pas l'efficacité de votre équipe.

Nous sommes tous passés par là, la solution est plus facile que vous ne le pensez!

Voici ce que j'ai appris sur la manière d'organiser les composants.

Figma Naming [19659015] Alors que dans Sketch, toute l’organisation ne dépend que du nom du composant unique, à Figma cela dépend du nom Page du nom Frame et du nom unique Component name – exactement dans cet ordre.

Pour créer une bibliothèque bien organisée, vous devez la considérer comme une organisation visuelle. Tant que vous respectez l'ordre, vous pouvez personnaliser l'attribution de nom en fonction de vos besoins.

Voici comment je l'ai divisé:

• Nom du fichier = Nom de la bibliothèque (par exemple, Lexicon);
• Nom de la page = Groupe de composants
• Nom de la trame = Type de composant (par exemple, carte image, carte utilisateur, carte de dossier, etc.);
• Nom du composant = État du composant (par exemple, Défaut, Survol, Actif, Sélectionné, etc.). [19659125] Affichage de la page principale intitulée 'Cartes', du cadre intitulé 'Image Card' et du calque intitulé 'Card Hover' « />

  Ajout de niveaux d'indentation

  Lors de la création de la bibliothèque Lexicon, j'ai constaté que j'avais besoin de plus de trois niveaux d'indentation pour certains composants, tels que les boutons que nous avons vus. auparavant.

  Dans ces cas, vous pouvez étendre le nommage en utilisant la même méthode que Sketch pour les symboles imbriqués (en utilisant les barres obliques dans le nom du composant, par exemple "Composant / Sous-composant"), à la condition de le faire uniquement. après le troisième niveau d'indentation, en respectant l'ordre structurel des trois premiers niveaux, comme expliqué au point précédent.

  Voici comment j'ai organisé nos boutons:

  • Nom de la page = Groupe de composants (par exemple Boutons);
  • Nom de l’image = Taille du composant (par exemple, Normal ou Petit);
  • Nom du composant = Style / Type / État (par exemple, Primaire / Texte / Survoler).

  

  Conseil : Vous pouvez inclure le nom du composant (ou un préfixe du nom) dans le dernier niveau, cela aidera votre équipe à mieux identifiez les couches lorsqu'elles importent les composants de la bibliothèque.

  Organisation des icônes

  L'organisation des icônes dans Figma peut s'avérer difficile si vous incluez un grand nombre d'icônes.

  Contrairement à Sketch qui utilise la fonctionnalité de défilement, Figma. utilise les sous-menus pour diviser les composants. Le problème est que si vous avez un grand nombre d'icônes regroupées dans des sous-menus, elles risquent à un moment donné de sortir de l'écran (mon expérience de Figma sur un MacBook Pro).

  

  

  Voici deux solutions possibles:

  • Solution 1
    Créez une page nommée "Icônes", puis un cadre pour chaque lettre de l'alphabet, puis placez chaque icône dans le cadre en fonction du nom de l'icône. Par exemple, si vous avez une icône nommée «Plus», elle se placera dans le cadre «P.».
  • Solution 2
    Créez une page nommée «Icônes», puis divisez-la par des cadres en fonction de la catégories d'icônes. Par exemple, si vous avez des icônes représentant un bateau, une voiture et une motocyclette, vous pouvez les placer dans un cadre nommé "véhicules".

  

  Conclusion

  Maintenant que vous savez ce qui se cache exactement derrière la construction de la bibliothèque d’une équipe à Figma, vous pouvez commencer à en construire une vous-même! Figma dispose d'un plan d'abonnement gratuit qui vous aidera à démarrer et à expérimenter cette méthodologie dans un seul fichier (toutefois, si vous souhaitez partager une bibliothèque d'équipe, vous devrez vous abonner à l'option «Professionnel»).

  Essayez-le, créez et organisez des composants avancés, puis présentez la bibliothèque aux membres de votre équipe afin de les épater – ou éventuellement de les convaincre d'ajouter Figma à leur ensemble d'outils.

  Enfin, permettez-moi de mentionner qu'ici, à Liferay, nous adorons les projets open-source et nous partageons donc une copie de notre bibliothèque de Lexicon avec d’autres ressources. Vous pouvez utiliser gratuitement les composants de la bibliothèque Lexicon et les autres ressources, et vos commentaires sont toujours les bienvenus (y compris les commentaires de Figma, si vous préférez).

  Grand aperçu )

  Si vous avez des questions ou avez besoin d'aide avec votre première bibliothèque de composants à Figma, demandez-moi dans les commentaires ci-dessous, ou envoyez-moi une ligne sur Twitter . [19659158] Ressources supplémentaires

  • “ Grille en 8 points: typographie sur le Web ,” Elliot Dahl, freeCodeCamp
  • Définition d'une échelle de type modulaire pour l'interface utilisateur Web “Kelly Dern ,
  • “ Palettes de couleurs relatives avec Sass ,” Ethan Muller, Sparkbox
  • SassMe (outil créé par Jim Nielsen qui vous permet de visualiser les fonctions de couleur Sass HSL en temps réel). time)
  • “ Comment appelez-vous les variables de couleur? ,” Chris Coyier, CSS-Tricks
  • ““ Meilleures pratiques: composants, styles et bibliothèques partagées ”Thomas Lowry, Figma
  • Chaîne YouTube de Figma
  • Articles d'aide de Figma
  (mb, yk, il)