Créer des tables dans Figma

Dans ce didacticiel, nous expliquerons comment créer des tables dans Figma en utilisant des composants et la méthodologie Atomic Design. Nous examinerons également les éléments de base de la présentation du tableau et la manière dont les composants peuvent être inclus dans la bibliothèque de composants afin de devenir partie intégrante du système de conception que vous utilisez.

Pour vous faciliter la tâche, je ' Nous avons préparé un exemple de maquette qui utilise tous les composants nécessaires à ce didacticiel.

Pour suivre, vous devez au moins comprendre un peu les concepts de base de Figma, son interface et comment. travailler avec des composants Figma. Cependant, si vous débutez dans Figma et que vous travaillez avec des données de table, je vous recommande de regarder la vidéo « Getting Started » pour vous aider à mieux comprendre Figma de bout en bout, ainsi que l'article « Comment créer une table Web complexe ”, publié récemment par Smashing Magazine.

Pour simplifier la portée de ce didacticiel, supposons que les couleurs, les polices et les effets existent déjà en tant que styles dans le projet Figma, vous êtes sur le point de commencer. En termes de conception atomique, il s'agit de atomes . (Pour en savoir plus, les gens de littleBits ont écrit un excellent article sur le sujet .)

Le public cible de ce tutoriel est constitué de designers (UX, UI) qui ont déjà Figma a adopté ses processus de travail ou envisage d’essayer Figma dans ses prochains projets de conception mais ne sait pas trop comment s'y prendre.

Alors, sans plus tarder, creusons!

Remarque rapide : En écrivant cet article, Figma a introduit les plugins . Au moment de la publication, il n’existait pas de solution idéale pour travailler avec des tables, mais les choses pourraient changer rapidement. Qui sait, peut-être que cet article aidera en fait un développeur de plug-ins Figma en devenir à créer un plug-in vraiment génial Figma Tables, ou du moins, j'espère qu'il le fera. ?

Introduction

Imaginez le tableau en tant qu'organisme. La cellule de tableau est alors une molécule composée d'atomes individuels. En termes de conception, il s’agit des propriétés de la cellule .

Commençons par la cellule. Il a trois propriétés:

1. Contexte
2. Border
3. Contenu

Nous allons maintenant examiner de plus près chacune d'entre elles.

Contexte

Le fond sera une composante distincte de Figma. . La taille importe peu, car nous pouvons étendre le composant à notre guise, mais commençons par définir la taille à 100 × 36 pixels.

Dans ce composant, ajoutez un rectangle de la même taille que le composant lui-même. Ce sera le seul objet à l'intérieur du composant. Nous devons attacher les bordures du rectangle aux bordures du composant en utilisant des contraintes (définir les contraintes sur «Gauche & Droite» et «Haut & Bas» dans le panneau de droite de la section Contraintes ), afin que le rectangle s'étire automatiquement à la taille du composant.

Si vous souhaitez voir ceci en action, regardez ce tutoriel sur le fonctionnement des contraintes dans Figma.

La couleur de remplissage du rectangle déterminera la couleur de fond de la cellule. Choisissons la couleur blanche pour cela. Je recommande de choisir cette couleur parmi les styles de couleur configurés au début du projet.

Bordure

Celle-ci est un peu plus compliqué que l'arrière-plan. Vous ne pouvez pas créer un seul rectangle avec un trait. Nous pouvons avoir besoin de différents types de bordures: une pour les cellules séparées (avec des bordures autour), une pour toute la rangée de cellules avec uniquement des bordures supérieure et inférieure, ou une pour l'en-tête de tableau que nous pourrions vouloir séparer des autres ligne plus large. Il existe de nombreuses options.

Propriétés de la bordure:

• Ligne de bordure (gauche, droite, haut, bas ou l'absence de l'une d'entre elles)
• Largeur de la ligne
• Couleur de la ligne
• Style de ligne

Chaque ligne de la bordure de la cellule peut avoir une largeur, une couleur et un style différents. Par exemple, celui de gauche peut être une ligne rouge continue et celui du haut, une ligne grise en pointillés.

Permet de créer un composant d’une taille de 100 × 36 pixels (identique à celui que nous avions auparavant). Dans le composant, nous devons ajouter 4 lignes pour chaque bordure. Faites maintenant attention à la manière dont nous allons procéder.

1. Ajoutez une ligne pour la bordure inférieure avec la longueur de la largeur du composant;
2. Définissez sa position sur la bordure inférieure et les contraintes d'étirement. horizontalement et respectez le bord inférieur;
3. Pour le bord supérieur dupliquez la ligne correspondant au bord inférieur, faites-la pivoter de 180 degrés et collez le haut du composant. (N'oubliez pas de changer ses contraintes pour coller au sommet et s'étirer horizontalement.);
4. Ensuite, pour la bordure gauche faites simplement une rotation de -90 degrés et définissez sa position et ses contraintes sur sur le côté gauche collant au bord gauche et s'étendant verticalement;
5. Enfin, vous pouvez créer le bord droit en le faisant pivoter de 90 degrés et en définissant sa position et ses contraintes. Définissez la couleur de trait et la largeur de trait de chaque ligne sur gris (choix dans les styles de couleur) et 1 pixel, respectivement.

Note : Vous vous demandez peut-être pourquoi nous avons pivoté la ligne pour la bordure inférieure. Eh bien, lorsque vous modifiez la largeur du trait d'une ligne dans Figma, celle-ci augmente. Nous avons donc dû définir cette direction de «montée» au centre de la composante. Modifier la largeur de trait de la ligne (dans notre cas, c'est la taille de la bordure) ne s'étendra pas à l'extérieur du composant (cellule).

Nous pouvons maintenant masquer ou personnaliser les styles séparément pour chaque bordure de la cellule. [19659043] Le composant Border « />

Si votre projet comporte plusieurs styles de bordures de tableau (quelques exemples de bordures illustrés ci-dessous), vous devez créer un composant séparé. pour chaque style. Créez simplement un nouveau composant principal comme nous le faisions auparavant et personnalisez-le à votre guise.

Le composant de trait séparé vous fera gagner beaucoup de temps et ajoutera une évolutivité . Si vous modifiez la couleur de trait à l'intérieur du composant principal, l'ensemble du tableau sera ajusté. Comme pour la couleur de fond ci-dessus, chaque cellule peut avoir ses propres paramètres de trait.

Contenu

C'est le composant le plus complexe de tous.

Nous devons créer toutes les variantes possibles du contenu du tableau dans le projet: texte brut, un texte avec une icône (gauche ou droite, alignement différent), des cases à cocher, des commutateurs, etc. autre contenu qu'une cellule peut éventuellement contenir. Pour simplifier ce didacticiel, vérifiez les composants dans le fichier de maquette . La création et l’organisation de composants dans Figma constitue un sujet pour un autre article.

Toutefois, les composants de contenu doivent répondre à quelques critères:

• Les composants doivent s’étirer facilement à la fois verticalement et horizontalement pour s’insérer dans une cellule; la taille minimale du composant doit être inférieure à la taille de cellule par défaut (notamment la hauteur, gardez à l'esprit le remplissage possible des cellules);
• Évitez les marges pour que les composants puissent s'aligner correctement à l'intérieur d'une cellule;
• Évitez les arrière-plans inutiles, la cellule elle-même l'a déjà.

Les composants de contenu peuvent être créés progressivement: commencez par ceux de base, tels que les composants de texte, et ajoutez-en de nouveaux à mesure que le projet grossit.

La raison pour laquelle nous voulons que le contenu soit dans les composants est la même que pour les autres éléments – cela permet d’économiser le temps de disponibilité. Pour modifier le contenu de la cellule, il suffit de le changer dans le composant.

Création d'une cellule Composant

Nous avons créé tous les atomes nécessaires: arrière-plan, bordure, contenu. Il est temps de créer un composant cellulaire, c’est-à-dire une molécule constituée d’atomes. Rassemblons tous les composants dans une cellule.

Définissez le composant arrière-plan comme couche inférieure et étirement. à la taille de la cellule entière (définissez les contraintes sur «Gauche & Droite» et «Haut & Bas»).

Ajoutez le composant de bordure avec les mêmes contraintes que le composant d’arrière-plan.

Passons maintenant à la partie la plus compliquée – la content content .

La cellule a des rembourrages, vous devez donc créer un cadre avec le contenu du composant. Ce cadre doit être étiré à la taille de la cellule entière, à l'exception des rembourrages. Le composant de contenu doit également être étiré sur toute la taille de l'image. Le contenu lui-même doit être privé de toute marge, de sorte que tous les marges soient définies par la cellule.

À la fin de la journée, les marges de cellules sont la seule propriété d'un composant que nous définirons une seule fois sans possibilité de changez-le plus tard. Dans l'exemple ci-dessus, j'ai créé 4 px pour tous les côtés.

Note : Comme solution, vous pouvez créer des colonnes avec des cellules vides (sans contenu ni largeur de 16px par exemple). et directement dans la colonne où une marge supplémentaire est nécessaire. Ou, si la conception de votre table le permet, vous pouvez ajouter des marges intérieures dans le composant de cellule. Par exemple, les cellules de Google Material Design ont des valeurs de remplissage de 16 px par défaut.

N'oubliez pas de supprimer l'option " Clip content " pour la cellule et le cadre (vous pouvez le faire à la panneau de droite dans la section Propriétés). Le contenu de la cellule peut sortir de ses frontières; Par exemple, lorsqu'un menu déroulant se trouve dans votre cellule et que vous souhaitez afficher son état par une fenêtre contextuelle.

Note : Nous utiliserons ce style de cellule comme principal. Ne vous inquiétez pas si votre table comporte des styles supplémentaires – nous couvrirons cela dans les sections Table States et Composants, pas des substitutions .

Options de cellule pour un tableau standard [19659002] Cette étape peut être facultative, mais si votre table a besoin d’états, vous ne pouvez pas vous en passer. Et plus encore s’il existe plus d’un style de bordure dans la table.

Créons donc des composants de cellule supplémentaires à partir desquels il serait plus facile de créer une table. Lorsque vous travaillez avec une table, nous allons sélectionner le composant approprié en fonction de sa position dans la table (par exemple, en fonction du type de bordures).

Pour ce faire, prenons notre composant de cellule et en créons huit autres maîtres. . Nous devons également désactiver les couches appropriées responsables des frontières. Le résultat devrait ressembler à l'image ci-dessous.

La rangée du haut correspond aux cellules situées en haut et au centre du tableau. La rangée du bas ne concerne que les cellules du bas. De cette façon, nous pourrons placer les cellules les unes après les autres sans laisser d'espace et conserver la même largeur de trait.

Quelques exemples:

Note : Pour chaque style de bordure créé ci-dessus, il serait bon d'ajouter des composants maîtres comme ceux décrits précédemment. 19659005] Nous avons donc exclu la nécessité de remplacer les instances de cellules (en désactivant les couches appropriées, pour être précis). Au lieu de cela, nous utilisons divers composants. Désormais, si, par exemple, une colonne utilise un style différent de celui par défaut (la couleur de remplissage ou la bordure), vous pouvez choisir cette colonne et simplement modifier le composant relatif. Et tout ira bien. De l’autre côté, changer une bordure de chaque cellule manuellement (en désactivant les bordures appropriées) est une douleur que vous ne voulez pas déranger.

Nous sommes maintenant prêts à créer des tableaux (en termes de conception atomique – organismes) à partir de les différentes composantes de la cellule (molécules) que nous avons fabriquées.

Personnalisation du tableau

Il est relativement facile de modifier la hauteur de la ligne dans tout le tableau: mettez en surbrillance le tableau, modifiez la hauteur de l'élément (dans ce cas, la hauteur de la cellule, H dans dans le panneau de droite de la section Propriétés), puis modifiez la marge verticale de l'élément à 0. C'est ça: changer la hauteur de ligne prenait deux clics!

Modification de la largeur de la colonne: mettez la colonne en surbrillance et modifiez la taille de la largeur. Après avoir déplacé le reste de la table en gros plan, sélectionnez la table entière en utilisant l'option Tide Up dans le panneau Alignement ainsi que le premier élément de la liste déroulante situé sous l'icône la plus à droite.

Note: Je ne recommanderais pas de regrouper les lignes et les colonnes. Si vous modifiez la taille de la colonne en prolongeant les éléments, vous obtiendrez des valeurs fractionnaires pour la largeur et la hauteur. Si vous ne les regroupez pas et que vous n'accrochez pas à la grille de pixels, la taille de la cellule restera un nombre entier.

La couleur d'arrière-plan, le type de trait et les données de contenu peuvent être modifiés dans le composant approprié ou dans l'un des les huit cellules maîtres composants (cellules qui avaient différents styles de trait). Le seul paramètre qui ne peut pas être modifié immédiatement est la marge des cellules, par exemple. rembourrages de contenu . Les autres sont facilement personnalisables.

Des composants, pas des substitutions

En regardant ce que nous avons eu à la fin, cela peut sembler excessif. Et c'est le cas s'il n'y a qu'une seule table dans votre projet. Dans ce cas, vous pouvez simplement créer un composant de cellule et laisser les composants d'arrière-plan et de contour désactivés. Incluez-les simplement dans le composant de cellule, créez le tableau et effectuez la personnalisation nécessaire pour chaque cellule distincte.

Mais si les composants sont inclus dans une bibliothèque utilisée par plusieurs autres fichiers, voici ce qu'il y a de plus intéressant. 19659005] Note : * Je ne recommande pas de changer la couleur d'arrière-plan et le trait dans les instances des composants. Changez-les uniquement dans le maître . Ainsi, les instances avec des remplacements ne seront pas mises à jour. Cela signifie que vous devez le faire manuellement et c’est ce que nous essayons d’éviter. Restons donc dans les composants maîtres. *

Si nous devons créer un type supplémentaire de cellules de tableau (par exemple, l'en-tête du tableau), nous ajoutons l'ensemble nécessaire de composants maîtres pour les cellules avec les styles appropriés (comme nous l'avons fait ci-dessus). avec les huit cellules qui avaient différents styles de trait) et l’utilisez. Oui, cela prend plus de temps que de remplacer les occurrences des composants, mais vous éviterez ainsi le cas de modification des maîtres qui appliqueront ces modifications à toutes les présentations.

Etats du tableau

Parlons maintenant des états des éléments du tableau. Une cellule peut avoir trois états: par défaut, survolé et sélectionné. Idem pour les colonnes et les lignes.

Si votre projet est relativement petit, tous les états peuvent être définis par des remplacements dans des occurrences de vos composants de table. Mais s'il s'agit d'un problème important et que vous souhaitez pouvoir modifier l'apparence des États à l'avenir, vous devrez créer des composants distincts pour tout.

Vous devrez ajouter les huit cellules avec différentes variantes de trait pour chacun des états (peut-être moins, cela dépend du style de trait). Et oui, nous aurons également besoin de composants distincts pour la couleur de fond et le trait pour les états.

En fin de compte, cela ressemblera à ceci:

Voici où quelques problèmes se posent. Malheureusement, si nous faisons tout ce qui est décrit ci-dessus (lors du changement d'état d'un composant), il y a risque de perdre le contenu de la cellule. Nous devrons le mettre à jour indépendamment du cas où le type de contenu est identique à celui de la cellule maître. À ce stade, nous ne pouvons rien y faire.

J'ai ajouté des tableaux dans le fichier maquette qui ont été créés de différentes manières:

• Utilisation de ce tutoriel (composants distincts pour les styles de cellules);
• Utilisation du composant de cellule (composants pour les bordures, l'arrière-plan et le contenu);
• Utilisation du composant de cellule qui unit tout (avec uniquement des composants de contenu en plus)

Essayez de jouer et de modifier les styles de la cellule.

Conclusion

Si vous utilisez la même bibliothèque de composants dans plusieurs projets et que vous disposez d'un nombre raisonnable de tables dans chacun d'eux, vous pouvez créer une copie locale. de composants (composants de cellules avec des styles de trait et, si nécessaire, de composants de cellules avec différents états), personnalisez-les et utilisez-les dans le projet. Le contenu de la cellule peut être défini en fonction des composants locaux

De même, si vous utilisez la table pour un grand projet avec différents types de tables, tous les composants susmentionnés sont facilement mis à l'échelle. Les composants de la table peuvent être améliorés à l'infini et au-delà, comme la création d'états de cellules lors du survol et d'autres types d'interactions.

Questions, commentaires, réflexions? Laissez un commentaire ci-dessous et je ferai de mon mieux pour vous aider!

Maquette de table Figma à télécharger

Comme promis, j'ai créé une version complète de la maquette de table Figma que vous pouvez utiliser à des fins d'apprentissage ou tout ce que vous aimez. Enjoy!

Lecture connexe

Ressources utiles

• Chaîne YouTube Figma
  La ​​chaîne officielle Figma sur YouTube – il s'agit de la première chose à surveiller si vous êtes nouveau dans Figma.
• Google Sheets Sync
  Un plugin Figma qui vous aide à obtenir des données Google Sheets dans votre fichier Figma. Cela devrait fonctionner avec les techniques de ce tutoriel, mais vous devrez investir un peu de temps pour renommer tous les calques de texte afin que cela fonctionne correctement.

(mb, yk, il)