Design like a pro : les jetons Figma pour la cohérence et l'efficacité pour le système de design

1. Introduction: Travaillez-vous d'arrache-pied pour corriger les incohérences de votre design et cherchez-vous à unifier votre expérience utilisateur sur toutes les plateformes ? Si vous souhaitez augmenter l'évolutivité de votre système, vous êtes au bon endroit Dans ce cours, nous utiliserons le jeton de conception pour uniformiser l'ensemble de notre projet Dans un premier temps, nous dirons au revoir à notre mise à jour TDS. Comme pour le jeton de design, nous changerons un jeton et regarderons se répercuter sur les designs Nous arrêterons également de réinventer la baleine, comme nous allons promouvoir avec les jetons afin de réutiliser et de rationaliser le Idéal pour les concepteurs UIUX, les concepteurs de produits ou les particuliers qui souhaitent améliorer l'efficacité et normaliser leur processus de conception avec les jetons Figma Aucune connaissance préalable du jeton n'est requise, mais une compréhension de base de Figma est utile Enfin, nous allons également combler le fossé entre la communication de conception en créant un langage commun pour votre équipe. Commençons. 2. Votre projet de cours: Au fur et à mesure que vous progresserez dans le cours, vous vous entraînerez en créant votre propre jeton de design dans Figma Veuillez télécharger le fichier Figma pour le jeton de conception fortuden point. Ce fichier a une approche pratique qui vous permet d'acquérir des compétences en temps réel et de vous assurer maîtriser chacun des concepts tels qu'ils sont enseignés. Donc, une fois que vous avez ouvert le fichier, voici à quoi il ressemble. Vous pouvez lire le nom du fichier en haut, créer des jetons entre crochets pour les étudiants, et si je zoome un peu sur le fichier, vous en ferez l'expérience. J'ai volontairement fait en sorte que celui-ci soit gris afin que vous puissiez créer le jeton et l'appliquer au fur et à mesure que nous progressons dans le cours. 3. Qu'est-ce que les jetons de design: Qu'est-ce que les Design Tokens ? Le jeton de conception consiste à gérer les propriétés de conception et la valeur d'un alignement différent entre les systèmes de conception. Si vous regardez la carte en ce moment, certains éléments de l'interface utilisateur sont présents dessus. L'un d'eux est la carte elle-même. Le second est le texte. Le troisième est le bouton. Désormais, chaque lamentation de l'interface utilisateur est associée à une propriété Une carte peut être ronde, un texte qui a une couleur, une taille, etc. Un bouton possède également une couleur, taille, un espacement, un rembourrage, etc. Chacune de ces valeurs se trouve à l'intérieur du jeton. Cette valeur peut être représentée sous forme de couleur, de nombre, de déformation ou de booléen En général, nous avons trois types de jetons. L'un est le jeton primitif, jeton eeny et les jetons composants Voyons les jetons primitifs en détail. 4. Jetons primitifs: La couleur est l'un des jetons primitifs les plus couramment utilisés dans tout système de conception. Il est également connu sous le nom de jetons globaux. Créons des jetons primitifs. Nous pouvons le créer de deux manières. L'une est manuelle et la seconde est une couche automatique. Cliquez n'importe où sur le canevas et nous irons sur la droite à l'intérieur et cliquerons sur celui-ci, ken variables. Vous pouvez cliquer n'importe où dans cet espace. Je vais ouvrir la même boîte d'accès à distance. Vous le créez manuellement, cliquez sur la variable de grade, sélectionnez la couleur. Je vais vous donner un nom qui compte 500 ici. C'est sur celui-ci. Si nous ouvrons ce pilote de couleur, nous pouvons simplement sélectionner n'importe quelle couleur, perdre celle-ci et la variable est alors créée. Maintenant, créer ce topen de cette manière prend du temps. Cliquez avec le bouton droit de la souris et supprimons ce truc. Au lieu de cela, nous le ferons de manière intelligente. Accédez à la barre d'outils et sélectionnez ce bouton d'appel à l'action. Vous pouvez utiliser un raccourci Control K ou si vous êtes sur Macintosh, vous pouvez utiliser Command K. Accédez au plugin et vous pouvez utiliser ce plugin appelé Te unCSS Vous pouvez utiliser n'importe quel plugin dans la mesure où il vous permet de générer les variables. J'ai la couleur Ph à portée de main. Copiez cette première couleur. Entrez le guide des couleurs et effacez les variables. C'est le premier. Faisons cet exercice pour la deuxième couleur, Bightd, copy, faced et created . Maintenant, que se passe-t-il ? Quand je clique sur la variable locale, on ne trouve rien. Mais si vous cliquez sur cette liste déroulante, elle contient une section appelée couleurs et elle crée automatiquement toutes les variables que nous recherchons. Ce sont tous nos jetons primitifs. Maintenant, je vais renommer ce truc en primitif pour qu'il soit facile à comprendre Je vais double-cliquer sur celui-ci, dire principal, et sur celui-ci, double-cliquer sur secondaire. Nous avons créé nos premières ouvertures primitives. 5. Découverte des jetons de déplacement: Nous voulons créer des jetons Sal primitifs pour notre système de conception qui nous aideront à prendre en charge les messages d'avertissement, messages d'information, les messages de réussite et les messages lm. Pour ce faire, nous allons suivre la même procédure, mais il y a un hic. Voir dans nos variables locales, actuellement tous nos jetons primitifs, nous essayons de les regrouper dans une collection appelée primitive. Quels que soient les nouveaux jetons primitifs que nous créons, ils font également partie de cette collection particulière. Mais si je pars d'ici et que je fais cet exercice une fois de plus, en copiant, nous allons utiliser ce ton appelé action, sélectionner le générateur de couleurs CSS Tin, faire un collage et créer des variables. Maintenant que les variables sont créées, je vais sortir X d'ici. Si je reviens encore une fois, à la variable locale, je ne verrai pas ces jetons apparaître ici. Au lieu de cela, il a créé un groupe de collection supplémentaire, dont le nom est une couleur en haut. Ici, vous pouvez voir toutes les variables que nous recherchons. Au moment de l'enregistrement, il n'existe aucun mécanisme permettant de déplacer une collection de variables ou de jetons d'un groupe à autre ou d' une collection à une autre. Maintenant, pour résoudre ce problème, j'utilise une solution de contournement que j'aimerais partager Je vais d'abord supprimer ce truc. Bien, je vais renommer Pim en deux couleurs car c'est ce que le dossier de collection B Deford est entré par le CSS tailwind Si je pars d'ici et que je fais le même exercice, que j'ai fait collant et en créant à nouveau des variables et que c'est fait, la création est terminée. Maintenant, si je passe aux variables locales, vous pouvez voir qu' partie de la même collection que celle que nous recherchons. Je vais répéter cet exercice un par un pour tout cela. Je vais double-cliquer et dire « avertissement ». Et une fois cela fait, je le renommerai en primitif Ce faisant, tous les jetons primitifs sont regroupés dans une seule collection et c'est exactement ce que nous recherchons. J'ai terminé cet exercice et je vais renommer cette collection en primitif 6. Déplacer n'importe quel jeton: Avec les derniers délais de Wigma, vous devriez désormais pouvoir déplacer une variable d' une collection à autre ou un jeton d'une collection à une autre Auparavant, cela n' était pas possible. Cependant, ce n'est pas si simple, mais nous pouvons y jeter un œil. Accédez à la variable locale, cliquez dessus. Je vais créer deux collections ici. Il s'agit de la collection A. Fine. Et je vais également créer une variable ici, qui est une couleur. Je vais mettre une couleur A ici. Je vais créer une autre collection. Créez une collection et je dirais celle-ci sous la forme B. Maintenant, l'un des points que je veux souligner ici est que vous ne pouvez que copier-coller , sauf s'il y a un jeton ou une variable à l'intérieur. Disons, par exemple, que j'ai une collection A, j'ai une valeur ici, une copie de droite. Si je vais à la collection B, je n'ai rien ici. Je ne peux pas faire un clic droit et faire un collage. Vous devez avoir au moins une valeur dans cette collection particulière. Bien. Maintenant, si j'écris « click and paste », cela me permettra de coller la couleur A de la collection A. Cela ne se limite pas à la couleur. Dans ce cas, vous pouvez utiliser n'importe quelle variable. Disons que je descends et que je clique sur Créer une variable et que cette fois je crée un nombre. J'ai créé cette variable ou ce jeton dans la collection A. Je peux cliquer avec le bouton droit , le copier, accéder à la collection B et le coller de la même manière. L'un des inconvénients est qu'une fois que vous avez copié et collé, vous devez supprimer cette valeur de la collection A. Pendant l'enregistrement, nous n'avons pas d'option de découpe dans ce menu en particulier. Il ne fait aucun doute qu'ils l'ajouteront à l'avenir. Elle évolue très rapidement. OK. 7. Jeton sémantique: Les jetons synctiques font généralement référence un jeton et à un nom primitifs en fonction du contexte de leurs vues Ils sont également appelés couche abstraite des jetons. Apprenons avec une analogie avec le carnet de contacts. Chaque fois que vous souhaitez enregistrer un numéro dans votre répertoire, vous donnez généralement un nom à ce numéro en particulier. Vous pouvez facilement effectuer l'action, comme un appel téléphonique, un messa ou un appel vidéo Ce nom n'est rien d'autre qu'un jeton syntique que nous avons créé. Cela s'explique par le fait que pour James, s'agit du numéro et qu'à l'avenir, si le numéro est changé, vous ne changez pas le nom de la personne, vous mettez à jour le numéro indiqué dans ce jeton. Commencez par donner un jeton principal ou je dis un élément CO de jetons primitifs. Je vais sélectionner l'élément, passer à la section fin. Sélectionnez la centaine principale. Nous allons faire la même chose pour le bouton et nous allons appliquer une bordure ici. Dans le trait, je vais sélectionner 100. Le jeton primitif lui-même n'a aucun contexte. Qu'entendez-vous par cent primaire ? Nous ne savons pas où l'utiliser. Nous allons donc créer un jeton sémantique. Pour cela, je vais accéder à la variable locale. En haut, je vais créer une collection et lui donner un nom en tant que semanti Dans ce cadre, je vais créer une variable, une variable de couleur, je donnerai une surface primaire et je donnerai une valeur. Au lieu de le taper, je vais cliquer sur celui-ci, sélectionner la bibliothèque et sélectionner centdwd Cela indique maintenant que pour ce jeton en particulier, je fais référence au cent primaire qui est l'une des variables Faisons ça pour la frontière. Je vais créer une autre bordure variable et je ferai référence à la centaine primaire. Maintenant, je vais revenir en arrière et changer cette couleur. Ici, au lieu de 100, j'utiliserai notre jeton sémantique. Je vais faire défiler la page vers le bas. C'est notre jeton sémantique, nous avons également créé Surface primary ici, je vais sélectionner Surface primary Celui-ci, je vais sélectionner une bordure, faire défiler la page vers le bas, et celui-ci est une bordure. Comme nous avons déjà appliqué nos jetons sémantiques, il est facile de les gérer Maintenant, je veux changer la couleur de fond de ces deux UIL Mn. L'un est la carte, l'autre le bouton, mais je ne veux pas changer la bordure. Auparavant, cela n'était pas possible car tous ces trois étaient connectés au 100 principal. cause du jeton sémantique, je n'ai qu'à aller ici au lieu de 100, je vais juste dire que je vais cliquer sur celui-ci Supposons que je veuille le changer en 400. C'est ça. Cela changera partout dans le système. Vous n'avez pas à le faire manuellement et c'est facile à gérer. 8. Pratique des jetons sémantiques: En regardant cet écran maintenant, je veux que vous preniez une pause et que vous vous demandiez quelles sont les différences entre jetons sémantiques que nous pouvons créer ? Nous avons un texto. Nous pouvons créer un jeton pour les icônes, un arrière-plan, la rondeur et l'espacement Chaque fois que vous créez un jeton sémantique ou un jeton d'alias, il doit être associé à un contexte clair Le jeton doit être suffisamment précis pour indiquer comment, où et quand il est destiné à être utilisé. J'ai créé un nom de jeton sous forme de texte, mais ce jeton est trop génétique et manque de valeur. Vous ne savez pas simplement où utiliser ce texte. Voulez-vous l' utiliser comme primaire ? Voulez-vous l'utiliser en tant que secondaire ? Cela n'a aucun sens. Quand allez-vous créer un jeton sémantique, assurez-vous d'y ajouter un contexte J'ai ajouté de la valeur à notre jeton sémantique, et voici à quoi il ressemble Donc, en ce qui concerne le texte principal, nous savons qu'il peut être utilisé comme texte principal. Nous avons également un texte secondaire comme PM et SNI. Cela figure tous les deux dans le texte secondaire. J'ai donc un texte qui n'est pas secondaire. En dehors de cela, j' ai un arrière-plan me permet d'utiliser la surface sous carré principal pour donner plus de contexte à l'icône . Je peux utiliser l'icône météo qui est SNI parce que dans ce n' est pas une application, si nous voulons créer, j'ai une catégorie d'icônes une catégorie d'icônes spécifiquement utilisée pour la météo J'ai utilisé la noménuclature, la météo, en tant que membre du groupe, puis l'élément et ensuite le contexte dans lequel il se trouve Essayons de créer les jetons sémantiques et de les appliquer. Je vais accéder à ma variable locale, cliquer sur combat. Nous avons déjà créé deux jetons sémantiques. Actuellement, je fais partie d'un groupe de collecte de jetons sémantiques et nous essaierons d'en créer trois autres L'un est le texte principal. Gâteau, duplicata. Nous pouvons rendre cela secondaire. Encore un duplicata, et nous en ferons un Weather Dash, une icône Dash Sunny. Lions celui-ci. Donc, pour le texte principal allez dans la bibliothèque et allez dans la section où nous avons la couleur grise. C'est pourquoi c'est facile à trouver. Marquons celui-ci comme 950 pour le texte secondaire. Encore une fois, optez pour le gris que nous avons et pour cela, je pense que 500 devraient suffire. Pour ce qui est de la météo, je pense que 500 dans la section de réchauffement, ça devrait suffire. Ouais. Sélectionnons celui-ci. Allez dans la section de remplissage des couleurs, est-ce que c'est ici ? Nous pouvons appliquer ici le défilement en bas, nous avons la surface principale, sélectionner celle-ci, descendre, la surface primaire pour celle-ci, pour celle-ci, ainsi que ce numéro, ainsi que ceci ou ces quatre éléments en appuyant sur la touche Ctrl, je peux les sélectionner un par un. Maintenant, nous le donnons à text primary, PM, ainsi qu'à Sunny. Je veux faire de ces deux éléments une option secondaire. Laisse-moi aller ici, envoyer un texto au secondaire. C'est très bien Nous nous référons à cette icône. Je pense que je peux descendre, le sélectionner et donner une couleur qui soit l'endroit idéal. Nom Ici, je pense que cet outil a l'air différent. Bien. Copions ce truc, cliquons avec le bouton droit de la souris, copions la propriété, sélectionnons-la, cliquons avec le bouton droit de la souris et créons votre propriété de collage. Ça a l'air bien. Au lieu d'une condamnation à mort, nous avons besoin d'une condamnation. vous suffit de sélectionner celui-ci, aller en bas à droite et de faire que celui-ci ensoleillé et qu'il ait l'air bien, et je pense qu'ils sont bons. 9. Nom des jetons: Notre système de conception ne cessant de croître au fil du temps, nous avons besoin d'une convention de dénomination améliorée pour le gérer efficacement. dénomination des jetons de conception est essentielle pour notre système de conception car elle favorise la clarté, la cohérence, la maintenabilité et une collaboration efficace Clarté qui vous permet de communiquer instantanément , ainsi que son objectif et sa fonction. Cohérence, vous devriez pouvoir naviguer facilement dans le système de conception qui augmente votre efficacité. Vous devez vous permettre de gérer facilement le système de conception, afin de le mettre à jour facilement à long terme. En ce qui concerne la collaboration, cela vous permet de promouvoir une meilleure communication et une meilleure collaboration. Donc, chaque fois que je veux donner un nom à mes jetons, c'est ce que j'utilise. Je commence par la catégorie, puis par le concept, la propriété et le modificateur. catégorie et la propriété fournissent une base solide à la plupart des conventions relatives aux noms de jetons. Par exemple, couleur primaire, où la couleur est une catégorie et primaire est l'une des propriétés. Au fur et à mesure que nous avançons, nous souhaitons élargir notre collection de jetons au fur et à mesure que notre système de conception se développe. Par conséquent, nous devons diviser nos jetons en sous-ensembles. C'est ce que nous organisons dans les concepts. Et les modificateurs sont le dernier niveau de notre hiérarchie de dénomination des jetons. Il peut être utilisé indépendamment ou peut être associé à la catégorie, concept et à la propriété pour donner une signification précise à nos jetons Nommer un jeton peut être difficile, mais j'adopte une approche systématique selon laquelle vous pouvez l'affiner en fonction de vos besoins. Il n'y a pas de taille unique adaptée au format. C'est à vous de décider en fonction de vos besoins, vous pouvez le faire évoluer. Mais tant que vous établissez une compréhension commune au sein de l'équipe interfonctionnelle, vous êtes sur la bonne voie. J'ai regroupé la catégorie, le concept et la propriété dans une base, tandis que le rôle, l'état de la variante, l' échelle et le mode étaient des modificateurs. Pour apprendre cela, nous allons jouer à un petit jeu. Dans ce jeu, votre tâche consiste à placer le jeton correspondant dans un compartiment correspondant. Pour ce faire, dans un premier temps, je vais sélectionner la couleur, et je vais la placer dans la catégorie car j'ai également une élévation en tant que catégorie, je vais donc la mettre là. J'ai donc deux catégories à présent. Pour une surface, c'est plus probablement une propriété, comme un arrière-plan, donc je vais la garder ici. Pareil, celui-ci va également ici. Cela est interprété comme un rôle. Je vais donc le placer à cet endroit, et la superposition peut également servir de rôle, je vais donc le placer ici Et o est une variante d'une surface que je suis sur le point de créer. Il n'y a pas de bonne ou de mauvaise réponse ici. C'est à vous de décider comment vous voulez le placer. Mais au fil du temps, il deviendra automatiquement évident de savoir comment l' utiliser de cette façon. Dans le précédent, nous n'avions pas utilisé le concept. Nous allons prendre un exemple avec un concept. Je vais me rendre dans cet endroit précis. Maintenant, j'ai une couleur, je vais donc la faire glisser et la mettre dans la catégorie des couleurs. Je vais le mettre dans une catégorie de concept, et toutes ces choses, je peux les faire glisser et les placer sous la propriété. Mon objectif ici est de montrer un message de feedback à mon utilisateur. est pourquoi je les regroupe dans un concept appelé feedback. Nous avons également plusieurs textes sur notre écran. Un texte peut être principal, mais un autre texte peut être secondaire. Nous avons donc besoin de deux jetons pour cela. Donc, là encore, la couleur peut également être appliquée sur du texte, je vais la mettre dans une catégorie de couleurs. Dans ce contexte, au lieu de l'arrière-plan, nous ciblons cette fois le texte, donc je vais le garder ici. Le rôle serait principal et il y aurait un autre rôle secondaire. Maintenant, notre jeton ressemble à ceci. Auparavant, il s'agissait d' une surface primaire. Maintenant, nous pouvons l' écrire de cette façon. Couleur de la surface du tableau de bord, tableau de bord principal, lo. 10. Variante et taille: Les variantes sont d'où la créativité du design, tout en permettant flexibilité et évolutivité au sein de notre système de jetons Chaque fois que vous créez une variante, il est plus probable qu'il s'agisse de l'un de ces modificateurs, qui se répète plusieurs fois. Nous avons une variante de notre parcours. J'appelle généralement l' arrière-plan une surface, c'est pourquoi j'ai écrit comme une surface plutôt que comme un arrière-plan. Il existe quatre variantes différentes. L'un est le plus bas, qui est par défaut, l'autre est le plus bas, hi et le plus élevé. Créons ce jeton sémantique dans notre système. Je vais cliquer sur les variables locales et commencer à renommer ce truc Couleur, das surface, dT est le plus bas. Je peux copier ou dupliquer ce truc quatre fois et je vais le renommer L'un est le plus bas, le plus bas, le plus haut et le plus haut. C'est élevé, et c'est le plus élevé. Au minimum, nous en garderons 100. Ce gamma 200, je vais donner 300, pour celui-ci, je vais plus probablement nous donner un 400. Sortons de là et essayons d'appliquer ce truc à notre design. Je vais sélectionner le premier. Le cadre est sélectionné. B, je peux donc appliquer la valeur la plus basse ici. Ici, je peux essayer de renforcer la créativité. Je peux faire défiler la page vers le bas et sélectionner. Au lieu du plus bas, nous pouvons utiliser le plus bas. Ici aussi, je peux sélectionner les couleurs grises et je peux appliquer la même chose ici. Probablement le plus élevé, et celui-ci que nous pouvons faire est l'un des plus élevés. De cette façon, vous pouvez améliorer votre créativité en utilisant les variantes. Comprenons le dimensionnement en détail. Voici une analogie simple. Imaginez trois tasses à café de tailles différentes devant vous. Chaque étiquette indique la quantité de café qu'ils peuvent contenir 250 405 ml. Mais si vous devez modifier la quantité de café, ces étiquettes imprimées ne fonctionneront pas car elles ne sont pas évolutives. Au lieu de cela, si nous étiquetons la tasse comme petite, moyenne ou grande, nous pouvons facilement modifier la quantité de café sans nous soucier de l'étiquette fixe. Cela rend les choses beaucoup plus faciles à ajuster et à gérer au fil du temps. La même analogie s'applique à notre système de conception. Vous pouvez appliquer des caractères petits, moyens et grands, pas seulement à la police, mais aussi à n'importe quel autre élément de notre système de conception. Par exemple, nous avons une taille de police comme 24, 28 et 32. Mais au lieu de donner une taille fixe comme nous l' avons en bas, nous pouvons utiliser notre analogie petite, moyenne et grande. Nous pouvons considérer ceci comme le premier comme une catégorie, celui-ci comme une propriété, et celui-ci comme l'une des variantes de celle-ci. 11. Jetons typographiques: Il existe plusieurs manières de créer nos jetons de typographie L'une des méthodes est manuelle, tandis que la seconde est un peu automatique. Tu le fais manuellement. Tout d'abord, vous devez sélectionner celui pour lequel vous souhaitez créer une typographie, j' ai sélectionné celui-ci Ensuite, accédez à la section typographie et cliquez sur cette icône qui indique Appliquer le style Cliquez sur le bouton Plus qui vous permettra de créer du style. Ici, vous pouvez l'écrire ici sous forme d'affichage tel qu'il est écrit en haut, avec une barre oblique large En mettant une barre oblique, une hiérarchie sera automatiquement créée Permettez-moi de cliquer sur le style de création une fois que c'est fait . Si je clique dessus, vous verrez un style aussi grand dans la section d'affichage. Vous pouvez faire cet exercice un par un pour tout , mais il s'agit d'un processus TBS Créons le style de manière intelligente. Tout d'abord, je vais supprimer le style existant en faisant un clic droit et c'est un style de suppression. Sélectionnez tous les styles, je vais donc cliquer et faire glisser pour faire une sélection. Je vais utiliser un plugin pour cela, descendre et cliquer sur ce bouton d'action ou appuyer sur Ctrl K si vous êtes sous Windows. Accédez au plug-in Text Style Generator. Une fois que vous aurez terminé, il créera automatiquement un déstylé pour Cliquez n'importe où sur le canevas et nos styles de texte sont créés. Ouvrez la boîte de dialogue des variables. Pour cela, allez dans la variable locale, cliquez dessus. Nous avons deux collections. L'un est primitif, le second est sémantique. Je vais créer une autre collection ici en cliquant sur ces trois points et en cliquant sur le bouton Créer une collection. Je vais donner un nom comme typographie. X sort d'ici. Nous allons maintenant passer à l'action. Je vais aller sur le bouton d'action ici, cliquer dessus, et je lancerai un plugin appelé variableiz X styles. Cliquez dessus. Je vais sélectionner la collection que nous avons récemment créée, à savoir la typographie, et je veux que tous les paramètres soient stockés dans le jeton et je vais appuyer sur le bouton Créer Tout est fait. Laisse X sortir d'ici. Revenons à la variable et vérifions-la. Ici, dans notre collection, qui est la typographie, nous avons toute la valeur créée Faisons sortir X d'ici. Premièrement, le plus étonnant, c'est qu'il ne se contente pas de créer la typographie qu'il représente pour nous Au lieu de cela, cela s'applique également à elle. Si je sélectionne celui-ci, le texte et que je passe sur le côté droit, vous pouvez voir que cela ne vient pas du style, il s'applique directement à partir du jeton lui-même Vraiment vraiment incroyable. 12. Jetons d'espacement: Dans le design, l'espacement fait référence à une zone vide entre les éléments, telle que du texte, des images ou un composant d'interface utilisateur Il joue un rôle essentiel pour rendre un design esthétique, agréable, lisible et utilisable. Créons notre jeton d'espacement global. Je vais passer à la variable locale. Et nous avons ici trois collections, primitive, sémantique et typographique Je vais donc passer au primitif. Dans ce cadre, nous voulons créer nos jetons d' espacement primitifs, et nous ajouterons une sous-catégorie à cette collection appelée Au lieu de le faire manuellement, nous allons automatiser cette opération. Alors laissez X sortir d'ici, passez à l'action, cliquez dessus et recherchez le plugin appelé générateur de variables en vrac. Nous avons déjà notre collection, je vais donc sélectionner l'existant et nous allons sélectionner le primitif. Et le nom de la variable, vous pouvez le voir sur le côté droit est très subtil. Mais nous voulons créer une sous-catégorie Je vais donc utiliser l'espacement comme nom et faire une Cette barre oblique permet à Figma de créer une sous-catégorie au sein Nous allons partir de zéro, et ici nous allons passer à quatre car nous avons besoin de plus de possibilités pour pouvoir l'affiner dans notre jeton sémantique Maintenant, tout semble aller pour le mieux. Nous voulons le faire jusqu'en 128, je pense que c'est bien. Et cliquons sur le bouton Générer. Une fois cela fait, passons à la variable locale, encore une fois, passons à la primitive, et nous avons ici l'espacement comme sous-catégorie Et toute la valeur ou tous les jetons que nous voulons sont là en un rien de temps. J'ai apporté ici une valeur ajoutée, que nous avons récemment créée. Maintenant, je ne les ai pas tous ajoutés, seulement les points qui nous préoccupaient vraiment. Nous voulons donc ici donner une taille à nos jetons. Supposons donc que je veuille dimensionner quelque chose comme ça. Je tiens à dire que le jeton, espacé de huit , est petit Si c'est moins que cela, je veux le dire en très petit, et pour deux, je vais le dire en très petit. De même, si je passe par le haut, je dirais que, d' , je dirais que, accord, pour 16, je veux faire de celui-ci un espacement de taille moyenne 24 est un grand, 32 un très grand. Et si je vais un peu plus loin, 64 c'est le double d'Excel. Créons maintenant ce jeton sémantique. Pour ce faire, je vais accéder à notre variable locale, cliquer dessus, passer à la sémantique, et ici nous allons essayer de créer une sous-catégorie à l'intérieur Créez une variable. Et cette fois, nous allons sélectionner le numéro. Nous voulons lui donner une couleur. Désolé, nous voulons donner ici un espacement Je vais donc mettre des espaces très petits et appuyer sur Entrée Vous voyez sur le côté gauche que la catégorie a été créée. Cliquez dessus. À droite, cliquez sur cette valeur et dupliquez-la. Vous voulez donc le dupliquer au moins cinq à six fois, je vais donc faire cet exercice rapidement. Nous en avons donc ici de très petits. Je vais en faire un capital. Très petit, alors nous avons le très petit, le petit, le moyen, le double clic, le grand, le très grand. Et le double extra large. C'est suffisant pour le moment. Vous pouvez même en ajouter d'autres au fur et à mesure que vous avancez dans votre parcours de conception. Donc, sur le côté droit, nous allons accéder à cette icône où nous allons sélectionner notre variable. Donc, dans la liste des très petits, nous voulons en faire deux que nous n'avons pas pour le moment, nous allons donc les laisser. Pour les plus petits, nous en ferons quatre. Cela devient pour petit, nous avons une valeur égale à huit. Pour la valeur moyenne, nous avons une valeur égale à 16. Pour les grands, nous en ferons 24. 32, je crois que 32, vérifions-le d'abord. Donc, pour les grandes, nous en avons 24. OK, vas-y par derrière. C'est la raison pour laquelle nous faisons cet exercice. 24 pour ne rien manquer. 32, c'est donc très grand. En voici donc 32 qui deviennent très grands. Et pour le double Excel, nous allons faire en sorte que celui-ci soit 64. Cependant, celui-ci reste, donc je vais aller sur le côté gauche, passer au jeton primitif, passer à l'espacement, et je vais en créer un ici Je vais donc aller en bas, cliquer avec le bouton droit de la souris, créer un doublon, et celui-ci serait 002, et le numéro est également là, je vais le mettre sous forme de deux. Accédez au jeton sémantique et nous mapperons cette valeur ici. Donc voilà, faites défiler la page vers le bas et nous devrions avoir 002 dans la liste ici et là. C'est ainsi que nous créons notre jeton sémantique pour notre espacement Alors sortons-en X et appliquons-le à notre design. Sélectionnez l'alignement dans lequel vous souhaitez ajouter de l'espacement. Je vais donc sélectionner cette carte. Et dans cette carte, je vais aller sur le côté gauche pour sélectionner le contenu. Sur la mise en page automatique, nous avons un peu d'espacement ici Sélectionnez cette icône, qui indique Appliquer une variable, cliquez dessus, faites défiler l'écran vers le bas et sélectionnez 16. De la même manière, nous allons faire cet exercice. Assurez-vous de ne pas le sélectionner dans la primitive. Je vous expliquerai dans un moment comment gérer celui-ci, mais faites défiler l'écran vers le bas et sélectionnez 16 ici. Et de même ici, dans celui-ci, vous verrez une liste déroulante. Cliquez dessus. Ensuite, vous verrez une valeur appelée variable Ople. Donc, une fois que vous avez cliqué sur Appliquer la variable, faites défiler la page vers le bas et sélectionnez Medium ici. À l'avenir, si vous voulez changer la définition du médium, disons que si je reviens en arrière, c'est ce qu'était notre support. Maintenant, je dis que nous ne voulons pas dire 16 pixels comme support. Nous voulons dire 20 en tant que médium. Dans ce cas, il vous suffit de me laisser zoomer un peu sur celui-ci pour que vous puissiez le voir plus clairement. Accédez à la variable locale. Je vais l'éloigner légèrement d' ici pour que vous puissiez réellement voir ce qui se passe. Donc, si je passe à Medium, laisse-moi sortir de toi. Et ici, nous avons une valeur de 16. Tout ce que je veux dire, c'est qu' au lieu de 16 comme médium, considérez 20 comme un médium. Et dès que je fais ce truc, ça change. Imaginez maintenant que vous avez utilisé ce type de choses dans le système de conception. C'est là que les jetons deviennent très puissants. Il n'est pas nécessaire de le modifier manuellement. Il vous suffit de modifier la définition du support en vous basant sur l'analogie avec la tasse, et vous pouvez facilement la modifier dans l'ensemble du système. Je vais donc revenir sur les 16 à ce stade. Vous pouvez même l'appliquer au bouton également. Donc, dans ce cas, laissez-moi aller sur le côté gauche, sélectionner le bouton, et sur le côté droit, nous pouvons simplement dire : OK, ici, nous lui avons déjà donné 16 pixels. C'est très bien. Ici, nous pouvons rapidement redescendre et faire le même exercice rapidement. Et voici huit, je vais donc faire défiler la page vers le bas et sélectionner ce huit. 13. Gestion des jetons: Ainsi, lors de la conférence précédente, nous avons indiqué notre espacement, mais nous voulons gérer notre jeton de manière plus efficace Voyons voir avec un exemple du monde réel. Je vais sélectionner la carte, aller dans le contenu et passer sur le côté droit dans l'espacement. Je vais cliquer à la fin. Vous verrez que le curseur clignote. Je supprimerai cette valeur de jeton que j'ai donnée et je donnerai une valeur fixe pour time bean. Maintenant, lorsque je clique sur cette variable d'application, vous pouvez voir que je vois déjà une primitive, ainsi que mon jeton sémantique Maintenant, je veux que le membre de mon équipe ne voie que ce jeton sémantique, car dans le passé, plusieurs fois, sciemment ou inconsciemment, l'équipe a sélectionné l'une des valeurs d'ici et celles que nous avons lancées Maintenant, pour éviter cela, il existe l'une des fonctionnalités intéressantes de Figma, appelée Alors laissez-moi cliquer à l'extérieur. Accédez à la variable locale, allez à la primitive, à notre collection et à l'endroit où nous avons l'espacement. Maintenant, ici, sur le côté droit, vous pouvez voir que lorsque je survole, je reçois une icône de réglage lugubre, qui est une variable d'édition Lorsque je clique sur celui-ci, j'obtiens une portée, et elle indique où vous voulez que cette variable soit visible. Alors laisse-moi sortir X d'ici. Je vais donc sélectionner le premier. Faites défiler l'écran vers le bas, appuyez sur la touche Shift et sélectionnez le dernier. Et je vais aller ici et cliquer sur Modifier la variable. Maintenant, actuellement, il s' affiche partout, je vais donc le décocher et nous assurer que la portée est sélectionnée partout. Alors maintenant, si je vais en haut et que je vérifie la portée, elle devrait être désélectionnée, et c'est très bien Donc, ce que nous venons de faire, c'est que nous indiquons à la Figma de ne pas afficher cette valeur chaque fois que le menu déroulant s'ouvre lorsque je sélectionne mon espacement Voyons donc X partir d'ici, accédons à cette carte et sélectionnons le contenu. Maintenant, si j'essaie d'appliquer ici une valeur variable, vous verrez que les seuls jetons sémantiques arrivent Il n'y a pas de jeton primitif. Ainsi, même accidentellement, les utilisateurs ne pourront pas le sélectionner. 14. Jetons radius: Il se peut que nous n'ayons pas besoin du nombre jetons que nous avons utilisés dans notre espacement. C'est ici que nous avons utilisé le jeton d'espacement. Nous en avons un, deux, trois, quatre, cinq, six et sept. Pour le rayon, je ne pense pas que nous ayons besoin de plus de petit, donc je vais supprimer celui-ci et je ne pense pas avoir besoin de celui-ci aussi, double Excel. Je vais supprimer celui-ci. Pour notre jeton de rayon, je pense que cette valeur de cinq devrait être suffisante, mais vous pouvez toujours la modifier. Il n'y a pas de chemin difficile sur ce point. Je vais donc passer à ma variable locale, et ici au jeton sémantique Au revoir, je vais créer. Alors laissez-moi faire défiler la page vers le bas. Je vais créer une variable cette fois encore un nombre, mais je vais l'écrire sous forme de rayon très petit. Allez sur le côté gauche, cliquez sur celui-ci. Maintenant, cliquez avec le bouton droit de la souris pour dupliquer cette fois WiFi. Nous allons le faire rapidement. Très petit, très petit, petit, moyen, grand et très grand. Et nous pouvons le cartographier comme nous avons fait l'espacement. Nous allons donc utiliser ici le même jeton global primitif que nous avons. Nous allons donc en faire quatre. Celui-ci en a huit. Celui-ci en a 16. C'est peut-être le 24. Celui-ci en avait 32. Maintenant, appliquons notre rayon à notre carte. Pour cela, je vais sélectionner la carte, accéder à l'élément appelé photo Paysage Sur le côté droit, je peux voir la rondeur de l'apparence et cliquer sur Appliquer la variable Mais cette fois, je peux voir l' espace ainsi que le rayon. Pour éviter l'erreur, je veux que cet espace n'apparaisse pas ici. Réglons ça. Je vais cliquer à l'extérieur n'importe où sur le canevas, aller en haut, cliquer sur la variable locale. Cette fois, je vais entrer dans la collection sémantique. C'est ici que se trouve notre espace. Je vais tous les sélectionner en appuyant sur le tamis. le premier cas, allez à la fin, appuyez sur la touche Shift, sélectionnez le dernier et cliquez sur la variable d'édition. Et ici je vais définir le champ d'application. C'est donc le deuxième , cliquez dessus. Et je veux que cette valeur n' apparaisse que lorsqu'il y a un écart. Donc, sur ce point, il devrait y avoir de courts espacements. Laisse-moi sortir d' ici. C'est très bien. Et pour le radius, je vais faire le même exercice. Et ici, je veux que mon rayon n' apparaisse que sur le rayon d'angle. Je décoche celle-ci, affiche toutes les propriétés prises en charge, et je veux que cette variable ne soit visible que dans la liste des rayons d'angle, et c'est fait Passons à notre carte. Sélectionnons le premier, le paysage photo, et sur la droite à l'intérieur, lorsque je passe à l'apparence et que je clique maintenant, je ne verrai que le rayon. Maintenant, la vie semble facile. Je vais sélectionner ici un 16 pixels, ça devrait convenir. Ici, sur cette carte, je peux même faire en sorte que celle-ci soit 16 pixels 2. Permettez-moi de sélectionner à nouveau la première carte. J'en ai appliqué partout, 16 pixels, très bien, ce qui n'est pas le cas. Je veux que le rayon ici ne soit pas de 16, donc il est nul ici aussi, il est nul pour que nous puissions corriger cette rondeur ici. Laissez-moi sortir d'ici et ça a l'air bien. Dans l'apparence, le rayon d' angle est maintenant mélangé. Permettez-moi d'ouvrir ce truc en cliquant sur cette icône (flèche indépendante). Ici, nous mettons la valeur du code en dur. Au lieu de mettre un code en dur, nous pouvons transmettre le jeton ici. Pour cela, laissez-moi fermer celui-ci et vérifier si nous avons ce jeton à portée de main ? Je vais dans le rayon, nous n'avons pas de jeton égal à zéro. Créons-en un ici. Cliquez sur le nombre, je vais le mettre comme Z comme zéro, et la valeur doit être celle de notre valeur primitive, car il s'agit de la première taille zéro, zéro, zéro. Ça a l'air bien. Laisse X sortir d'ici. Sélectionnez le paysage photo, allez vers l'intérieur droit et accédez à l'apparence de la zone. Cliquez sur cette icône, qui est un coin indépendant et ici je sélectionnerai la valeur zéro. À l'avenir, si je veux y remédier , je devrais être capable de le faire. Cela augmentera considérablement l'évolutivité de la conception 15. Jetons de design de composants: Que sont les jetons spécifiques à un composant ? Un jeton spécifique à un composant stocke et représente de manière explicite une décision de conception unique et spécifique associée à un composant particulier. À l'écran, nous avons deux composants. L'un est la recherche, le second est une liste déroulante. Maintenant, nous pouvons bifurquer : quels sont les différents composants qu' un jeton spécifique peut être créatif ? Une valeur d'espace réservé dans le composant peut être un jeton spécifique au composant Une bordure, une icône ou même un texte d'appui à ce composant en particulier peuvent également en faire partie. Une icône de recherche peut également être un jeton spécifique à un composant. Si vous voyez sur le côté droit, nous avons une structure très similaire laquelle nous avons une valeur d' espace réservé, peut également se trouver à l'intérieur d'un jeton spécifique , une bordure et une icône également présentes Il existe maintenant trop de jetons spécifiques à un composant. Rationalisons-le dans les prochaines minutes. Auparavant, nous avions deux choses dans notre liste. L'un est la base et le second est le modificateur. Comme nous avons affaire au jeton spécifique au composant, j'ai ajouté une valeur supplémentaire dans la hiérarchie, nom en tant qu'objet. Dans l'objet, nous avons un groupe, un composant et un élément. Apprenons cette chose à l' aide d'un exemple concret. Quel doit être le nom du jeton qui définit la bordure d'un composant spécifique ? Découvrons-le. Je vais donner un nom en commençant par la recherche afin que nous ciblions le composant de recherche. Dans le cadre de la recherche, nous ciblons une couleur, celle d'une bordure et celle d'un état par défaut. Le second gagne V, il s'agit d'un élément d'un formulaire dans lequel nous ciblons une couleur, jusqu'à une bordure, et une couleur par défaut. Maintenant, parmi les deux, laquelle vous pensez être la plus significative, faites une pause et découvrez-la. La réponse est la seconde, et nous verrons pourquoi. Le premier est très spécifique à la recherche. Alors que le second n'est pas seulement spécifique à la recherche, il cible tous les composants du formulaire. Pour approfondir les détails, permettez-moi de faire un petit zoom arrière et d'aller un peu plus loin ici. Maintenant, le premier où nous avons une recherche, il s'agit donc d'un composant. Dans un composant, j'ai une catégorie appelée couleur. Je cible une bordure de propriété, et je suis dans un état par défaut. Alors que dans le second, je cible un groupe, un formulaire, une couleur, une propriété comme bordure et par défaut. Prenons un autre exemple pour cela. Ici, vous pouvez voir que j'ai donné le nom sous forme, saisie, couleur et surface. Maintenant, voici deux images que nous avons. L'une est la recherche et l' autre est une liste déroulante. Dans la recherche, je cible fait que je souhaite donner un contexte spécifique à la recherche. Je peux aussi écrire ce truc de cette façon. Ici, je vais le taper comme recherche. Et pour le moment, je vais cacher ce truc. Maintenant, que se passe-t-il ? Si vous le faites de cette façon, vous ciblez explicitement uniquement pour la recherche, un jeton très spécifique à la recherche. Mais au lieu de procéder de cette façon, si nous le faisons, écrivez-le comme un formulaire, sorte qu'il ciblera non seulement la recherche, s'il y a un champ de saisie n'importe où dans ce formulaire en particulier, il ciblera également cette zone. Ainsi, votre jeton, votre force et votre évolutivité augmenteront considérablement J'ai donc fait cet exercice pour toutes les propriétés respectives que nous ciblons dans ce jeton spécifique à un composant particulier. Alors laissez-moi cliquer et le poser un peu vers le bas pour que vous puissiez le voir à l'écran. Si je souhaite cibler un texte d'espace réservé dans un composant, j'utilise une convention de nom telle que Fm. Dans un formulaire, s'il existe contrôle de saisie MI contenant du texte d'espace réservé, c'est la convention de nom de jeton que je dois utiliser, etc. Maintenant, la question qui se pose est la suivante : quels sont les jetons d'étiquette de composant spécifiques que vous pouvez créer ? En voici un exemple. Lors d'une recherche, j' ai une icône ici. Maintenant, cette icône provient explicitement de la recherche uniquement et je peux avoir un jeton spécifique à cette icône. Voici comment je peux faire ça. Donc, au lieu de le placer dans une catégorie de groupe, je vais mettre ce nom sous un composant afin qu'il cible une recherche. cadre d'une recherche, je veux donner une couleur et cela à une recherche par icônes. De même, nous avons une icône d'annulation de requête qui apparaît sur le côté droit, qui est très spécifique à cette recherche en particulier. Je peux cibler celui-ci avec la recherche, la couleur et l'annulation par icône. Ce jeton ciblera donc cette partie de celui-ci. Chaque fois que nous aurons plusieurs systèmes de conception, cela vous facilitera grandement la vie à l'avenir en et cela changera facilement dans l'ensemble du système. Voici à quoi ressembleront nos jetons spécifiques aux composants fins. Donc, tout d'abord, voici la recherche, la couleur et l'icône. Donc, si je supprime ce truc, cela cible un composant , à savoir la recherche. Dans le cadre de cette vague, il cible une couleur et cela aussi une couleur de recherche d'icônes. Il s'agit également d'un jeton très spécifique à un composant. Dans les composants, nous ciblons une couleur, et je peux en annuler une. Cependant, dans l'autre cas, ils sont un peu plus génériques mais restent liés au composant. Ils ciblent le groupe. Donc, dans le formulaire, nous ciblons tout élément qui a une couleur et je veux cibler une bordure et l'état par défaut, et c'est ce qu'il devrait être. Cela cible le texte de l'espace réservé pour n'importe quel composant du formulaire Cela est plus susceptible de cibler le texte d'appui, qui se trouve juste en dessous de celui-ci, qui est un groupe. À l'intérieur de celui-ci, il y a un alignement d'entrée et j'ai une propriété qui se connecte au texte de support. Le dernier est également lié au formulaire. Dans le formulaire, j'ai plusieurs composants. Si le composant a une entrée où je dois taper quelque chose, dans ce cas, il y a une couleur d'arrière-plan qui se trouve au dos et cette couleur est ciblée par ce jeton particulier. Maintenant, je veux que tu fasses cet exercice pour celui-ci. 16. Créer des jetons de composants: Créez un jeton spécifique au composant. Nous allons sur le côté droit et cliquons sur nos variables locales. Ici, nous allons ajouter une collection en cliquant sur Créer une collection, et nous allons nommer cet objet en tant que composant. Dans ce cadre, nous allons commencer à créer nos variables, qui ne sont rien d'autre que le jeton. Cette fois, nous ciblons la couleur, je vais donc sélectionner la première. Dans ce cadre, je vais l' écrire sous forme de forme de barre oblique Laissez-moi le cacher sur le côté gauche, pour que ce soit facile. Double-cliquez une fois de plus, coloriez, barre oblique. Nous avons un formulaire, nous le trouvons donc nous voulons qu' à l'intérieur de ce groupe particulier figure saisie au tiret, le texte du porte-classe Nous avons donc à l'intérieur du formulaire, le premier que nous avons créé. De même, nous allons créer les trois autres rapidement. Cliquez sur le bouton blanc pour le dupliquer. Dupliquez-le une fois de plus. Et je pense qu' il nous en faut quatre. Alors double-cliquez. Le second est la saisie, supprimez cette chose, le texte de support. Le troisième est connecté à l'entrée. Il y a la couleur, puis il y a la surface. Et le dernier est la forme, nous avons une couleur, c'est la bordure, c'est la couleur par défaut. Créons une variable, cliquons avec le bouton droit de la souris et dupliquons. Nous voulons que celui-ci soit spécifique à la recherche. Ici, nous avons une recherche sur icône de couleur CH Sarge pour annuler. C'est le premier, il entre donc dans le seau. Dans le formulaire, il y a une recherche par sous-catégorie et ulicatez cette chose une fois Nous avons besoin d'une couleur de recherche. Tout ce qu'il faut changer, c'est le dernier tableau. Voici l'icône de recherche. Nous allons maintenant ajouter la valeur ici sur le côté droit. Nous allons commencer par l'icône de recherche. Pour l'icône de recherche, nous avons une valeur de gris 600. Cliquons sur la couleur, allons dans la bibliothèque. Je vais taper 600, faire défiler la page vers le bas, et voici la valeur. Pour annuler l'icône, nous avons sélectionné un 800 gris. Permettez-moi de cliquer ici, d' accéder à la bibliothèque, de taper 800 et de sélectionner cette valeur. Nous pouvons maintenant passer au formulaire, et nous avons ici la valeur du texte saisi. Faisons en sorte qu'il soit un peu plus grand pour qu'il soit facile à lire. Très bien. Nous avons un texte d'espace réservé Pour le texte d'espace réservé, nous avons la note 900. Je vais sélectionner le 900 ici comme texte de support, nous avons le gris 700. Je vais en sélectionner 700. Voilà. Maintenant, pour la surface colorée, nous avons le 50 primaire. Allons-y. Primo, il nous en faut 50. Ensuite, pour la couleur de la bordure, nous avons le gris 500. Ici, nous grandissons et ajoutons-en 500 ici. Nous allons sélectionner le champ de texte. Va sur le côté droit. Nous verrons la couleur de sélection. Développons-le. Je vais maintenant remplacer toute cette valeur par les jetons que nous créons. Je vais cliquer ici, faire défiler la page vers le bas. Il s'agirait de notre surface colorimétrique d'entrée. Gray 500, ce serait une bordure, donc je vais faire défiler la page vers le bas, sélectionner la bordure ici. 600 est plus probablement une icône, je vais donc cliquer sur OK ici, nous allons donc sélectionner l'icône de recherche, grise 700. Gray 700 est connecté au texte de support. Je vais choisir le texte d' appui, gris 700, faire défiler la page vers le bas, texte de soutien. Pour le Gray 800, nous avons notre icône du cancer. Descendez et sélectionnez l'icône du cancer. Le voici, vérifions-le avec le 900 gris. Gray 900 est destiné à l'espace réservé. Permettez-moi de passer en haut et voici un 900 gris, nous faisons défiler la page vers le bas et sélectionnons l'espace réservé à la saisie Nous avons maintenant mis à jour toute la valeur de ce composant en particulier avec les variables de jeton spécifiques au composant. 17. Renommer en bloc: Afin de comprendre le nom volumineux de votre jeton, j'ai délibérément créé un jeton qui ne correspond pas exactement au contexte Je passe à la variable locale et ici si je passe à l'espacement, vous verrez ici la taille Maintenant, la taille indique généralement à quel point elle est petite ou grande, pas à quelle distance elle se trouve, ou elle ne dit pas non plus à quel point elle est ronde. C'est quelque chose qui est trompeur dans le contexte et nous essaierons de le corriger en bloc. Nous utiliserons un plugin appelé variable Renail. Si vous avez un petit nombre de jetons, vous pouvez les renommer directement. Toutefois, s'il y a beaucoup de jetons, vous devrez prendre des mesures supplémentaires. Dans ce cas, vous pouvez utiliser Google Sets ou Excel selon vos préférences. Accédez à la zone d'action en bas, cliquez dessus et essayez de trouver un plugin appelé variable rename. Cliquez dessus. Une fois ouvert, nous cliquerons sur le bouton Exporter la variable 9. Il nous montrera tous les jetons que nous avons dans ce fichier Figma Cependant, nous ne nous intéressons qu'à l'espacement, nous ne copierons donc que la partie d'espacement d'ici à ici. Cliquez avec le bouton droit sur Copier, nous allons accéder à l' Excel que nous avons, et ici nous allons faire un collage. Maintenant, je veux le rendre un peu générique afin que nous puissions l'utiliser en termes de forme, de taille et de rayon. Je vais utiliser une commande d'appel courte F pour trouver la taille de l'espacement. Il ciblera donc celui-ci, et je veux le remplacer par le SRS. C'est l'acronyme que j'ai utilisé pour l'espacement, R représente le rayon et le dernier S représente la taille Donc, chaque fois que j'ouvre ce jeton, je me souviens de l' endroit où il va être utilisé et N représente un chiffre. Je les remplacerai tous et une fois terminé, je ferai un clic droit en haut et j'insérerai une colonne sur la gauche. Permettez-moi de revenir à notre Figma et de copier à nouveau cette section Copiez, et revenons à l'Excel Pi. Je vais faire une pâte. Maintenant, sur le côté gauche, nous avons l'ancienne valeur, et sur le côté droit, nous avons la nouvelle valeur La dernière étape que nous devons faire est d'exporter ce fichier au format CSV. Alors fichier, exportez-le dans le CSV, et une fois qu'il est téléchargé, ouvrons ce fichier. C'est donc le fichier que nous avons. Je vais cliquer avec le bouton droit de la souris et essayer d'ouvrir ce truc dans un bloc-notes Donc, une fois terminé, contrôlez A, cliquez avec le bouton droit de la souris, faites une copie , accédez à notre Figma , sur la droite à l'intérieur, sélectionnez tout cela, supprimez-le et collez-le C'est donc notre ancienne valeur, et celle-ci est la nouvelle valeur. Maintenant, cliquez sur le bouton appelé renommer les variables. OK, donc une fois cela fait, nous n'avons aucune erreur et tout semble bon. Fermons ce truc. Accédez à la variable locale. Si nous faisons défiler la page vers le bas, nous verrons que SRS a été créé et que tous nos jetons ont été renommés correctement Cependant, je vois toujours qu'il y a un espacement ici car lors de cette sélection, nous manquons ce jeton Ajoutons ce truc manuellement. Pour ce faire, tout d'abord, je vais simplement intégrer un jeton sémantique Si nous utilisons ce truc n'importe où, oui, nous l'utilisons ici dans notre espace. Revenons au jeton primitif. Accédez au SRS, faites défiler l'écran vers le bas, et je vais créer un jeton, cliquer avec le bouton droit de la souris et dupliquer une variable Je vais donc dire N zéro, 02, et j'ajouterai une valeur deux. Revenez au jeton sémantique et je changerai la définition pour extra small Au lieu de l'espacement, il devrait provenir du n002 ici. Ouais. Maintenant, tout devrait commencer par le SRS et ça a l'air bien. Vérifie le rayon, et ça a également l'air bien. Passons au jeton primitif. Nous pouvons maintenant supprimer cette chose en toute confiance. Sinon, il se peut que vous le supprimiez d' ici et que la valeur du jeton reste à l'intérieur car elle est cassée. 18. Merci: Merci. Merci beaucoup d'avoir accordé de votre temps. J'apprécie vraiment votre dévouement et j'espère que les compétences que vous avez acquises vous permettront de créer un design évolutif incroyable. Continuez à pratiquer et j'ai hâte de voir l'incroyable projet que vous allez construire. Si vous avez des questions, hésitez pas à démarrer une conversation dans l'onglet de discussion. Je suis heureux de vous aider et de répondre à votre question. Vous pouvez également poser une question ou partager votre projet. Continuons notre apprentissage.