Création de tableaux 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 disposition de la table et la manière dont les composants peuvent être inclus dans la bibliothèque de composants afin qu'ils puissent faire partie du système de conception que vous utilisez.

Pour vous faciliter la tâche, j'ai préparé un exemple de maquette qui utilise tous les composants dont nous avons besoin pour ce didacticiel.

Pour suivre, vous devrez avoir au moins une certaine compréhension des concepts de base de Figma, de son interface et de la manière de travailler avec les composants Figma. Cependant, si vous êtes nouveau sur 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 "How To Architect A Complex Web Table" qui a été publié il n'y a pas si longtemps ici sur 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 que vous êtes sur le point de commencer. En termes de conception atomique, ce sont des atomes . (Pour en savoir plus, les gens de littleBits ont écrit un excellent article sur le sujet.)

Le public cible de ce didacticiel sont les concepteurs (UX, UI) qui ont déjà adopté Figma dans leurs flux de travail ou envisagent d'essayer Figma dans leurs prochains projets de conception, mais ne savent pas par où commencer.

Alors, sans plus tarder, allons-y !

Note rapide : Lors de la rédaction de cet article, Figma a introduit des plugins. Au moment de la publication, il n'y en avait pas de bons pour travailler avec des tableaux, mais les choses pourraient changer rapidement. Qui sait, peut-être que cet article aidera réellement un aspirant développeur de plugins Figma à créer un plugin Figma Tables vraiment soigné, ou du moins, j'espère que ce sera le cas.

introduction

Imaginez la table comme un organisme. La cellule du tableau est alors une molécule composée d'atomes individuels. En termes de conception, ce sont des propriétés de cellule .

Alors, commençons par la cellule. Il a trois propriétés :

1. Contexte
2. Frontière
3. Contenu

Nous allons maintenant examiner de plus près chacun d'eux.

Contexte

L'arrière-plan sera un composant séparé dans Figma. La taille n'a pas vraiment d'importance puisque nous pouvons étirer le composant selon nos besoins, mais commençons par définir la taille sur 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 à l'aide de contraintes (définissez les contraintes sur « Gauche et droite » et « Haut et bas » dans le panneau de droite dans la section Contraintes ), de sorte que le rectangle s'étire automatiquement à la taille du composant.

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

La couleur de remplissage du rectangle déterminera la couleur d'arrière-plan de la cellule. Choisissons la couleur blanche pour cela. Je recommande de choisir cette couleur parmi les styles de couleurs configurés au début du projet.

Frontière

Celui-ci est un peu plus délicat que l'arrière-plan. Vous ne pouvez pas simplement créer un 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 en haut et en bas, ou une pour l'en-tête du tableau que nous pourrions vouloir séparer du reste avec un ligne plus large. Il existe de nombreuses options.

Propriétés de bordure :

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

Chaque ligne à l'intérieur de la bordure de cellule peut avoir une largeur, une couleur et un style différents. Par exemple, celui de gauche pourrait être une ligne rouge continue et celui du haut une ligne grise pointillée.

Créons un composant d'une taille de 100×36 pixels (le même qu'avant). À l'intérieur du composant, nous devons ajouter 4 lignes pour chaque bordure. Maintenant, faites attention à la façon 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 pour s'étirer horizontalement et coller à la bordure inférieure ;
3. Pour la bordure supérieure , dupliquez la ligne de la bordure inférieure, faites-la pivoter de 180 degrés et collez-la en haut du composant. (N'oubliez pas de modifier ses contraintes pour coller au sommet et s'étirer horizontalement.);
4. Ensuite, pour la bordure gauche , faites simplement pivoter de -90 degrés et définissez sa position et ses contraintes sur le côté gauche en collant à la bordure gauche et en s'étirant verticalement ;
5. Enfin, vous pouvez créer la bonne bordure en la faisant pivoter de 90 degrés et en définissant sa position et ses contraintes. Définissez la couleur et la largeur du trait pour chaque ligne sur gris (sélectionnez parmi les styles de couleur) et 1 pixel respectivement.

Remarque : Vous vous demandez peut-être pourquoi nous avons fait pivoter la ligne pour la bordure inférieure. Eh bien, lorsque vous modifiez la largeur du trait d'une ligne dans Figma, elle augmente. Nous avons donc dû définir cette direction de "montée" au centre du composant. La modification de la largeur du trait de la ligne (dans notre cas, il s'agit de la taille de la bordure) ne s'étendra pas en dehors du composant (cellule).

Nous pouvons maintenant masquer ou personnaliser les styles séparément pour chaque bordure de la cellule.

Si votre projet comporte plusieurs styles de bordures de tableau (quelques exemples de bordures illustrés ci-dessous), vous devez créer un composant distinct pour chaque style. Créez simplement un nouveau composant maître comme nous l'avons fait auparavant et personnalisez-le comme vous le souhaitez.

Le composant de course séparé vous fera gagner beaucoup de temps et ajoutera de l'évolutivité . Si vous modifiez la couleur du trait à l'intérieur du composant principal, l'ensemble du tableau s'ajustera. Comme pour la couleur d'arrière-plan ci-dessus, chaque cellule individuelle 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 : du texte brut, un texte avec une icône (gauche ou droite, alignement différent), des cases à cocher, des commutateurs et tout autre contenu qu'une cellule peut éventuellement contenir. Pour simplifier ce tutoriel, veuillez vérifier les composants dans le fichier de maquette. Comment créer et organiser des composants dans Figma est un sujet pour un autre article.

Cependant, il existe quelques exigences pour les composants de contenu :

• Les composants doivent s'étirer facilement à la fois verticalement et horizontalement pour s'adapter à l'intérieur d'une cellule ;
• La taille minimale du composant doit être inférieure à la taille de cellule par défaut (en particulier la hauteur, gardez à l'esprit les éventuels rembourrages de cellule) ;
• Évitez les marges afin que les composants puissent s'aligner correctement à l'intérieur d'une cellule ;
• Évitez les arrière-plans inutiles car une cellule elle-même l'a déjà.

Les composants de contenu peuvent être créés progressivement : commencez par les composants de base comme les composants de texte et ajoutez-en de nouveaux au fur et à mesure que le projet grandit.

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 du temps de disponibilité. Pour changer le contenu de la cellule, il suffit de le basculer dans le composant.

Création d'un composant de cellule

Nous avons créé tous les atomes dont nous avons besoin : arrière-plan, bordure, contenu. Il est temps de créer un composant cellulaire, c'est-à-dire la molécule faite d'atomes. Rassemblons tous les composants dans une cellule.

Définissez le composant d'arrière-plan comme calque inférieur et étirez-le à la taille de la cellule entière (définissez les contraintes sur « Gauche et droite » et « Haut et 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 — le contenu content .

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

En fin de compte, les rembourrages de cellule sont la seule propriété d'un composant que nous ne définirons qu'une seule fois sans possibilité de la modifier ultérieurement. Dans l'exemple ci-dessus, je l'ai fait 4px pour tous les côtés.

Remarque : En guise de solution, vous pouvez créer des colonnes avec des cellules vides (sans contenu et largeur de 16 pixels par exemple) à gauche et à droite de la colonne où une marge supplémentaire est nécessaire. Ou si la conception de votre tableau le permet, vous pouvez ajouter des rembourrages horizontaux à l'intérieur du composant de cellule. Par exemple, les cellules de Google Material Design ont des rembourrages de 16 pixels par défaut.

N'oubliez pas de supprimer l'option « Clip content » pour la cellule et le cadre (cela peut être fait dans le panneau de droite dans la section Propriétés). Le contenu de la cellule peut sortir de ses frontières ; par exemple, lorsqu'une liste déroulante se trouve dans votre cellule et que vous souhaitez afficher son état avec une fenêtre contextuelle.

Remarque : Nous utiliserons ce style de cellule comme principal. Ne vous inquiétez pas si votre table a des styles supplémentaires - nous couvrirons cela dans les sections États de la table et Composants, pas de remplacement.

Options de cellule pour un tableau standard

Cette étape peut être facultative, mais si votre table a besoin d'états, vous ne pouvez pas vous en passer. Et encore plus s'il y a plus d'un style de bordure dans le tableau.

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

Pour ce faire, prenons notre composant de cellule et créons-en 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 est pour les cellules en haut et au milieu du tableau. La ligne du bas est uniquement pour les cellules du bas. De cette façon, nous pourrons placer les cellules les unes après les autres sans aucun espace et conserver la même largeur de trait.

Quelques exemples :

Remarque : Pour chaque style de bordure créé ci-dessus, il serait bon d'ajouter des composants maîtres comme ceux décrits précédemment.

Nous avons donc exclu la nécessité de remplacer les instances de cellule (en désactivant les couches appropriées, pour être précis). Au lieu de cela, nous utilisons divers composants. Maintenant, 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 changer simplement le composant relatif. Et tout ira bien. De l'autre côté, changer manuellement une bordure de chaque cellule (désactiver les bordures appropriées) est une douleur dont vous ne voulez pas vous soucier.

Nous sommes maintenant prêts à créer des tableaux (en termes de conception atomique - organismes) à partir des différents composants cellulaires (molécules) que nous avons fabriqués.

Personnaliser le tableau

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

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

Remarque : Je ne recommanderais pas de regrouper les lignes et les colonnes. Si vous modifiez la taille de la colonne qui étend les éléments, vous obtiendrez des valeurs fractionnaires pour la largeur et la hauteur. Si vous ne les regroupez pas et ne vous alignez pas sur 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 huit composants principaux de cellules (cellules ayant des styles de trait différents). Le seul paramètre qui ne peut pas être modifié immédiatement est les marges des cellules, par exemple les rembourrages de contenu . Le reste est facilement personnalisable.

Composants, pas de remplacement

En regardant ce que nous avons obtenu à la fin, cela peut sembler exagéré. 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 des composants sont inclus dans une bibliothèque utilisée par un certain nombre d'autres fichiers, voici les éléments les plus intéressants.

Remarque : *Je ne recommande pas de changer la couleur d'arrière-plan et le trait dans les instances des composants. Modifiez-les uniquement dans le master . Ce faisant, ces instances avec des remplacements ne seront pas mises à jour. Cela signifie que vous devrez le faire manuellement et c'est ce que nous essayons d'éviter. Alors restons-en aux composants principaux.*

Si nous devons créer un type supplémentaire de cellules de tableau (par exemple, l'en-tête de tableau), nous ajoutons l'ensemble nécessaire de composants principaux pour les cellules avec les styles appropriés (tout comme nous l'avons fait ci-dessus avec les huit cellules qui avaient des styles de trait différents), et utilise le. Oui, cela prend plus de temps que de remplacer les instances de composants, mais de cette façon, vous éviterez le cas où la modification des maîtres appliquera ces modifications à toutes les mises en page.

États du tableau

Parlons des états des éléments de la table. Une cellule peut avoir trois états : par défaut, survolée et sélectionnée. Idem pour les colonnes et les lignes.

Si votre projet est relativement petit, tous les états peuvent être définis par des remplacements à l'intérieur des instances de vos composants de table. Mais s'il s'agit d'un gros problème et que vous souhaitez pouvoir modifier l'apparence des états à l'avenir, vous devrez créer des composants séparés 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 séparés pour la couleur d'arrière-plan et le trait pour les états.

Au final, ça ressemblera à ça :

C'est là qu'intervient un peu de mal. Malheureusement, si nous faisons tout comme décrit ci-dessus (lors du changement d'état du composant de l'un à l'autre), il y a un risque de perdre le contenu de la cellule. Nous devrons le mettre à jour sauf dans le cas où le type de contenu est le même que dans la cellule maître. À ce stade, nous ne pouvons rien y faire.

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

• Utilisation de ce didacticiel (composants séparés pour les styles de cellules) ;
• Utilisation du composant de cellule (composants pour les bordures, l'arrière-plan et le contenu) ;
• Utiliser le composant cellule qui fédère le tout (avec uniquement les composants contenus en plus).

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

Conclusion

Si vous utilisez la même bibliothèque de composants dans plusieurs projets et que vous avez un nombre raisonnable de tableaux dans chacun d'eux, vous pouvez créer une copie locale des composants (composants de cellules avec des styles de trait et, si nécessaire, des 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 plus, si vous utilisez la table pour un grand projet avec différents types de tables, tous les composants mentionnés ci-dessus sont facilement mis à l'échelle. Les composants du tableau peuvent être améliorés à l'infini et au-delà, comme la création des états de cellule lors du survol et d'autres types d'interactions.

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

Téléchargement de la maquette de la table Figma

Comme promis, j'ai créé une version complète de la maquette de table Figma que vous êtes invités à utiliser à des fins d'apprentissage ou pour toute autre chose que vous aimez. Prendre plaisir!

Lecture connexe

• "Conception atomique", Brad Frost
• "Comment concevoir une table Web complexe", Slava Shestopalov, Smashing Magazine
• "Création de composants atomiques dans Figma", équipe de conception et d'ingénierie, littleBits
• "Tables Figma: conception de grille de données par un composant de cellule unique", Roman Kamushken, Setproduct

Ressources utiles

• Chaîne YouTube Figma
  La chaîne officielle Figma sur YouTube - c'est la première chose à regarder si vous êtes nouveau sur Figma.
• Synchronisation des feuilles Google
  Un plugin Figma qui vous aide à obtenir des données de Google Sheets dans votre fichier Figma. Cela devrait bien fonctionner avec les techniques de ce didacticiel, mais vous devrez investir du temps pour renommer tous les calques de texte pour que cela fonctionne correctement.