Figma : utiliser des variantes !

1. Introduction: Hey, on va être un tutoriel super rapide où on va parler de fema baryons. Il dit super cool fonctionnalité qui vous permettra de mieux distribuer vos composants aussi bien. Dans ce tutoriel, nous allons parler de la façon de créer des composants de différentes manières. Nous deux approches. L' un sera les composants indépendants à l'étranger et l'autre sera tous les composants vont être créés, pour être créés à partir d'un composant maître. Donc, tous les composants sont dépendants d'un seul. Donc, plus tard, vous pouvez apporter des modifications plus rapidement. Ceci est un tutoriel pour tout le monde, même si vous êtes nouveau à sigma, peut-être que c'est un bon à l'étranger est comment faire des composants. Et aussi, vous apprendrez le genre de regroupement des baryons. Et si vous savez déjà comment jouer combine air ou que vous travaillez dans, le même système va être bon pour vous parce que peut-être vous apprenez quelques trucs sur la création de composants satellite qui dans ainsi vous apprendrez comment améliorer tous vos flux de travail avec des baryons. Ok, donc les baryons à, juste pour vous montrer un peu comment, comment ils fonctionnent. Baryons, ce qu'on va faire, c'est imaginer, j'ai ce système de conception ici et le créer. Et vous avez généralement le, ce doit la plupart des lignes ensemble de composants créés avec ce nom et tout. Et quand vous venez à des actifs, si vous voulez rechercher votre bouton, vous devenez un peu fou de tous ces éléments et boutons que vous avez ici, tous, tous les composants. C' est un peu désordonné de chercher un composant, ok. Mais j'ai ces autres exemples, qui sont les mêmes composants de boutons que nous avions auparavant avec ce genre de baryons que nous pouvons voir ici sur la droite avec les variantes créées. Donc, au lieu d'avoir beaucoup de composants, si nous venons ici à la colonne vertébrale de l'actif, maintenant, nous n'avons qu'un bouton au lieu d'en avoir beaucoup. Donc, je vais juste effondrer cela au lieu d'avoir tous ces composants, ce qui est un peu ennuyeux à rechercher et à faire bouger. Nous n'avons qu'un bouton, juste un bouton. Et ici, nous pouvons changer leurs propriétés pour obtenir, obtenir et utiliser tous ces éléments que nous avons là. Donc, c'est une façon super rapide de travailler avec, comme vous pouvez le voir, est une façon de travail super VC de travailler avec nous avons des icônes. Donc, je vais juste aller à la primaire. Et si vous êtes intéressé, peut en apprendre davantage sur la façon de créer des composants d'une manière efficace et comment utiliser ces nouveaux monteur Marianne, juste GME et dans ces cours court va prendre comme un 30 minutes, 35 minutes pour tout apprendre. Alors rejoignez-moi à ces scores et réfléchissez avant de le faire. 2. Variantes avec un système de conception existant : Hey, merci de me rejoindre pour cette première leçon. Alors commençons. Il y a deux options tout en travaillant avec des baryons. Le premier est que si vous avez comme un système de conception de porte clé de l'interface utilisateur existant, imaginez que vous travaillez pour une entreprise ou une entreprise et qu'ils ont comme un, un système de conception. Et vous travaillez maintenant avec le système de conception et vous voulez l'améliorer. Donc, l'une des choses que vous pouvez faire pour l'améliorer maintenant et plus facile que jamais est la variante d'implémentation AST dans vos composants, ok ? D'accord. Donc, j'ai ici un, un système de conception pourrait avoir créé. Et voyons un peu distraire. Donc, je n'ai pas encore créé la petite version de ces boutons, mais c'est quelque chose que j'ai l'intention de faire. Disons que je veux faire une petite version des vitamines aussi. Ça fera 32 pixels, d'accord ? Mais j'ai cette épidémie, la mort, d'accord ? Donc, nous avons certains, appelons ça des types de boutons. Une de texte en largeur, une autre avec des icônes à gauche et à droite. Une icône à gauche et une icône à droite. Et puis seulement je vais, Ok, donc nous allons maintenant entrer dans la façon dont j'ai fait ça parce que plus tard, nous verrons comment faire toutes ces bouteilles à partir de zéro assez rapidement en les utilisant, utilisant la méthode maîtresse. D' accord ? Donc, ce n'est pas important pour l'instant. Mais ce que je veux que tu vois, c'est la structure de ça, d'accord ? Donc, si nous voyons ces boutons ici, le grand texte et ensuite le principal objectif critique avec tous ces états sur la valeur par défaut, Hulbert sombre, peu importe. Je veux vous voir cette structure ici. Donc, par exemple, pour celui-ci, j'ai comme bouton, qui est, ce dernier est assez important comme vous le savez peut-être. Ce qu'il fait, c'est qu'il crée comme des dossiers, d'accord ? Dans les composants. Donc, si je mets le bouton est dernier grand, barre oblique , tous les, tous les boutons qui ont partagé cette barre, ils vont être sur le même dossier. Donc c'est très important. Donc nous avons le nom du composant, cette iss, alors nous avons le type de bouton que nous utilisons, alors ce serait un autre type de bouton, non ? Le primaire, critique, secondaire sans frontière, Ce serait un autre type de type. Et puis la valeur par défaut et le clip par défaut ou survol, qui pourrait être celui d'un état. Ok, donc on va voir à quel point il est facile d'entrer. Quelque chose d'important à ce sujet est que si nous venons ici à l' inspecteur des composants, nous pouvons voir que nous avons tous ces GYN de toutes les énormes quantités de boutons ici. Et si je veux choisir l'un d'entre eux, c'est un peu désordonné. Tu sais, pas désordonnée, mais comment le dire. C' est un peu difficile de trouver où je veux, même si je cherche, si je mets primaire, beaucoup de boutons vont venir ici et je dois avoir 13 ans. C' est le, c'est l'état par défaut de ceci est le Hubbard. Tu sais, c'est un peu dur, donc les bonnes affaires viennent pour obtenir de l'aide. Alors quoi, que sommes-nous prêts à faire si nous sélectionnons des composants ? Ici, à droite, Bono, nous avons des baryons. Nous, oui, pourrions les combiner. Oui, en ce moment. D'accord. Mais je veux sélectionner tous mes boutons. Rappelez-vous, il suffit de cliquer sur tamiser, puis sélectionnez avec le médicament. Tous vos boutons. Donc, nous allons cliquer sur combiné comme variantes, ECS, ce morceau de gâteau. Donc, si vous voyez tous nos boutons ici, faites-les apparaître sur les composants de connexion, et maintenant nous avons seulement un bouton, comme vous pouvez le voir. Donc, c'est une chose importante. Donc nous n'avons plus 143 Leon, des millions de boutons, nous n'en avons qu'un. Et c'est génial. Je veux dire, que se passe-t-il si on amène ce bouton ici que maintenant on a ces propriétés ici. Comme vous pouvez le voir, icône, icône, Gauche, Icône F, Droite, icône droite. Donc, les baryons détectent l'instructeur avec lequel nous avions auparavant notre système de conception, avec cette convention de dénomination que nous avions auparavant. Et passons à travers deux couches. Et on peut voir ici que c'est comme prendre le nom qu'on avait avant. Mais au lieu de l'islam dit, ce que les baryons font est mis comme des virgules pour séparer ces propriétés. D' accord ? Quelque chose que vous pouvez faire pour améliorer encore plus cette chose magique automatique, son, vous sélectionnez ces Barb baryons gras que les baryons créent ici. Et puis vous pouvez contrôler le nom des propriétés, puis organiser l'icône, l'ordre que vous voulez la propriété bâclée ici. Donc, ici pour la première propriété, nous allons le nommer taille. Pour la seconde, je vais le nommer pour le troisième, c'est la richesse. Allons avec ça, avec cet état. C' est encore un état et cette clique, etcetera. Donc, nous allons commencer à réorganiser ici d'abord la valeur par défaut, puis l'état du survol. Donc, je veux qu'ils apparaissent dans cet ordre quand, quand nous sélectionnons notre fond ici. Ce que je veux, c'est que, vous savez, que ceux-ci sont apparus avant Hulbert clique et désactiver c'est cool. Et puis le primaire, il apparaît ici à la troisième place. Je ne veux pas ça. Je veux primaire, secondaire puis critique Gao les sans frontières. Donc je vais sélectionner le ici, le, la, toute la barrière et la composante de ce grand baryon. Et puis je vais réorganiser ceci en primaire, puis secondaire, puis critique, puis puis sans frontières Tj i1. Ces ordres apparaissent, ok, donc c'est l'état, c'est le type que je ne connais pas, élément convaincu à ce sujet. Peut-être que j'ai acheté icône, texte ou icône de texte. Donc c'est un peu plus sémantique. Et puis ds, c'est, je vais l'appeler type. D' accord ? Donc, si nous allons maintenant à notre fond, à notre instance de ces merveilleux bouton, nous voyons que nous avons seulement grand. Rappelez-vous que je voulais en créer une petite version, mais peut-être un autre jour. Mais si vous avez créé ou que vous avez déjà créé une petite version et que vous le nommez correctement, alors en taille, il apparaîtra plus grand, petit, régulier, vanille ou tout. Ok. Alors maintenant je peux changer l'icône en ce moment. Et c'est une merveilleuse icône. Je n'ai plus besoin d'y aller, d'aller et de venir, d'aller, changer ici, vous savez, on était un peu ennuyeux, un peu lent. Ce n'était pas mal, mais c'est beaucoup mieux. Donc maintenant, nous avons tous nos composants dans cette boîte de barre latérale boueuse ici. Et nous pouvons changer l'un à l'autre, changer le domaine et seulement aller ici. Et il va changer de micro en ce qui concerne la succession. Donc c'est que je veux dire, je suis étonné de la façon dont les baryons ont fonctionné. Donc, si vous avez un système de conception qui migre à partir de vos composants précédents, deux variantes, c'est simple, donc c'est super facile, ok. 3. Créer des composants à partir de zéro avec des variants: Alors maintenant passons à la deuxième version. Ok, nous avons fait ça. Et si vous voulez commencer à partir de zéro, vous aurez n'importe quel système de conception que vous travaillez dans un nouveau projet. Vous allez commencer à créer vos composants à partir de zéro. Et vous voulez obtenir les avantages sont d'utiliser des baryons. Ok, alors allons-y et allons à notre tutoriel. Bon, donc pour ce cas, je vais commencer par Design et amp, en bas super droite. Je vais juste y aller avec une hauteur de 40. Je vais changer la couleur à une sorte de bleu est l'un comme nous l'avons déjà dans l'autre, dans l'autre section, satellite, ce genre de brillant. Je vais ajouter le rayon de la frontière de quatre. Eh bien, oui, je vais le faire avec un taux de rayon de frontière quatre. Je vais ajouter du texte à cette affaire. Je vais appeler le bouton. Si vous êtes super compétent avec nous avons fema, peut-être que vous pouvez sauter cette partie. Mais si vous n'êtes pas si sûr de la façon de créer des composants, je pense que c'est une bonne chose à regarder. Parce que je vais vous montrer comment créer des composants, de deux manières différentes. Un, likey a indépendamment ces, quelque chose comme ça. Donc un peu de chasse par ici. Pour les composants accordés qui sont deux grandes vagues de faire des choses. Vous créez donc tous les composants en fonction d'un seul maître. Donc, vous créez un maître. Et puis ce maître sera comme un composant imbriqué des autres composants, comme un matriochka, vous savez ? L' autre façon de faire des composants est oui, faites-les indépendamment. Chaque composant est indépendant des autres. Alors ils le sont, ils vont bien. Mais si vous voulez changer le rayon de la bordure pour tous, vous devez être chaud b1 par un changeant le rayon border-rayon. Alors que ces méthodes, ces foires méthode, vous avez seulement à changer leur maître et que les changements se répliqueront à travers tous vos composants. Leurs deux systèmes de création ont leurs avantages. Il y a des avantages et des inconvénients, vous savez, mais d'après mon expérience, je pense que sont vraiment peut faire germer. Je recommande d'utiliser la version principale du composant, d'accord, donc nous allons essayer les deux, les deux systèmes et vous pouvez choisir où vous voulez, ok ? Donc, nous allons commencer par créer les dépendants en ajoutant, ok ? Et puis nous allons faire un maître de l'un de ces composants. Et puis nous allons répliquer ces rassemblements et l'utiliser comme composant musculaire, puis créer les autres composants basés sur I-T. Ok, donc nous allons voir dans la pratique est plus facile Dynastie. Alors je vais appeler ici. Comme une icône, juste une icône simple pour mettre mes deux icônes ici va être sur un Chevron vers le bas. Oup. Désolé, ouais. C' est parti. Il va le faire. Et pour, à plus tard peut changer cela, je vais, pour l'utiliser. Je vais juste créer un autre ont peur comme ça. Et je vais nommer ces icônes. Souviens-toi de ça que sigma. Le cadrage est important parce que Mettons quelques icônes aléatoires ici afin que nous puissions voir le mot au nom de la, de l'AIR Bohr est important pourquoi nucléating composants ? Parce que plus tard, quand nous arrivons ici aux actifs, le FirstName sera en bas et le bouton radio, il commence à partir de leur image. D' accord. Donc si je change ça, c'est si je changeais ça en un autre nom, tu changeras ici. Donc, mais nous voulons être le même que, comme l'élément que nous avons à l'intérieur. Ok, donc pour cela, je vais juste créer un composant ici. Donc je suppose que pour nous ici. Et nous pouvons voir que maintenant nous avons la variance auditive, la variance tutorial. On a l'icône « Down », d'accord ? Et je vais ajouter une autre icône ici de, de la même chose d'autres icônes. Assez simple. Et je suis, je vais juste démarrer comme une flèche. Et oui, peut-être plein. Nous allons donc créer plusieurs composants. N' oubliez pas que si vous sélectionnez certains objets, vous pouvez en créer plusieurs composants. Donc je vais juste aller sur la base ici. Donc nous avons vu le cadre n, je vais juste aligner ce petit peu. Donc, on l'a fait pour être. fait. Donc, à moins que oui, distribué est un. Nous avons donc trois icônes pré-construites pour tous. Je ne vais pas gâcher avec les couleurs et tout ça. Si vous êtes intéressé par les systèmes de conception créative, j'ai un tutoriel assez complet sur la façon de créer votre premier système de conception. Donc, vous pouvez combiner cela avec cela, avec ces Tutoriel un c. Et parce que c'est pour, quand vous avez créé tout votre système de conception, vous venez ici et puis vous créez vos variantes de tous les composants degré avant. D' accord ? Donc maintenant, ce que je veux est oui d'implémenter quelques icônes ici. Il suffit de les glisser et de les déposer et de changer la couleur en blanc. Donc, ce sont des correspondances MCI. Ceux-ci sont partis, sont un peu trop gros pour mes goûts, donc je vais les réduire à 36. Eh bien, si je peux. Ok, 36 et eux, je vais les réduire à 36. Si bon, jusqu'à présent, si bon. Donc maintenant ce que je veux, il y a une belle fema d'alimentation a il s'appelle auto-mise en page. Si vous ne savez pas à ce sujet, je recommande aussi bien de voir, bien que tutoriel une moitié, désolé pour tout le bot spam. Je vais le faire, c'est un super gentil installateur. Ce qu'il fait, il prend vos éléments et, et crée des distributions et des alignements. Et il vous permet de créer comme ces types de réactif, réactif au contenu, comme des composants. Ok, donc pour ça, je vais créer une mise en page automatique avec ces trois éléments. Je viens de les sélectionner. Et vous pouvez cliquer ici, puis créer la mise en page automatique, ok, ou vous sélectionnez les éléments, puis la mise en page automatique apparaît et vous appuyez sur plus, désolé , J'utilise généralement le, le commun, la touche, le raccourci clavier raccourcis. Donc, le raccourci est un décalage commun a ou si vous êtes en Colombie-Britannique, c'est le transfert de contrôle d'un immobilier vers l'avant. Et maintenant je vais faire la même chose. Je vais sélectionner ceci, puis sélectionner cet arrière-plan. Et je vais revenir ici pour la mise en page automatique béni plus 4m. Et il va être comme, si tu y vas, c'est incroyable. Eh bien, pourquoi n'est-ce pas un travail ? C' est incroyable où ça marche. Que se passe-t-il ici ? Ok, j'ai ces éléments fixes quand il fixe, rappelez-vous que vous pouvez fixer la largeur ici, mais dans ce cas, nous voulons le, nous voulons notre fond libre donc il augmente sa taille lorsque vous écrivez plus. Ok, donc on a notre bouton, c'est Bri, c'est ce qu'on voulait. D' accord. Donc bien, pour DSN va juste aller avec 16, un à bord ici. Donc on peut mettre ici 1212 comme ça contrôle la, cette base. Celles-ci contrôlent un bourgeonnement vertical. Celles-ci contrôlent le bourgeonnement horizontal. Et si nous double-cliquez sur, sur, sur, sur notre cadre, qui est les icônes et les textes, nous pouvons également contrôler. Cette distance 12 est bonne pour l'instant. Et ça, et ça, nous allons l'appeler au fond. D' accord ? Imaginez que nous créons les boutons indépendants. D' accord ? Notre approche serait de nommer ces boutons en direct. Souviens-toi de cette iss, c'est grand, et puis c'est un bouton primaire, ok ? Et puis ce serait l'état par défaut, ok ? Donc on le nomme comme ça. Et puis nous venons ici et nous avons créé sous caution. Ok, donc vous voulez en créer une autre version. Rappelez-vous, l'état survolant de cet élément. Ce que je vais faire est oui, détacher cette distance. Donc, nous, nous ne sommes pas au-dessus de cela parce que rappelez-vous maintenant que nous travaillons avec un Est. Donc ce qu'on veut c'est le faire, c'est tout. Puis envoie une couleur à quelque chose d'un peu plus sombre, quelque chose autour de ça. D' accord ? Donc, ce serait, au lieu de la valeur par défaut, nous les changeons en port, puis cliquez et nous avons un autre symbole. Et la même chose, on se détache. Et puis c'est la clique, un état qui est un peu plus sombre autour de ça. Et puis o. et puis nous changeons le nom en cliqué ou Octave ou tout ce que vous voulez et visons. Et encore une fois, nous l'avons fait, c'est l'aide. Et nous les avons nommés, disons Désactiver. D' accord. Ouais, avant avant, ce qui dit que le gogo de ces bleus à quelque chose autour de ça. Et c'est notre état de handicaps, d'accord ? Et puis nous créons le composant avec ceci, ok. Donc nous l'avons fait, notre fond est indépendant. Si je change ces couleurs et que j'ai décidé d'opter pour un rev. Ouais, vous ne verrez rien changer. Et si nous cuisinons, si nous continuons à créer par les vibrations du fond, imaginez que j'ai fait que les systèmes d'étude et imaginons que nous demandons à un maintenant de créer la bonne version de celui-ci avec l'icône. Encore une fois, je duplique ceci, je duplique ceci donc je n'ai plus à être C'est tout. Je veux dire, et puis je crée la couleur séparément. Alors je viens ici, puis je viens ici, et puis je viens ici. C' est un dialogue d'accueil, Dan, vous faisant dupliquer le premier quand il n'est pas ce symbole ou un composant. Et puis vous changez certaines des couleurs, puis vous créez composants à partir de zéro à partir d'un seul coup. Donc maintenant, nous sélectionnons tous et puis créons plusieurs composants. Ok, donc c'est cool parce que c'est rapide à créer et ils sont cohérents et tout. Nous avons donc ces variations. Ok, alors maintenant ces ID ont changé. Comme j'ai oublié de mettre ici les deux icônes, l'icône gauche et droite. Donc, je vais utiliser un noyau bleu-vert, le renommer. Donc, ce que je veux que ce soit pour trouver et remplacer certains avocats. C'est plutôt cool. Lewin. Donc, ce que je veux, c'est quand vous trouvez un grand délogement, ce que je veux, c'est et quand vous trouvez une grande, grande, grande, grande, grande loi, je ne ferai pas pour la changer en gros. Comme la ligne des cils va être plus précis. Primaire, je voulais changer par, dans ce cas est à gauche, icône de droite. D' accord ? Et primaire. Donc, si nous le renommons, nous voyons que nous avons maintenant laissé l'icône de tige primaire, donc ils sont renommer est bon. Donc, nous devons maintenant renommer ces couches aussi, parce que j'ai oublié de démarrer. Il s'agit d'un type de texte d'icône. Ok, donc la même chose ici. Ce que nous pouvons faire, c'est oui, aller à l'école primaire. Et puis si c'est comme ça, ça va être comme ça. Icône. Et puis primaire. Et la barre oblique. Donc, nous pouvons voir maintenant que nous avons bâton grand Ri Cai, cône primaire par défaut. Et maintenant, nous devons changer ces noms. Voici pour faire un peu plus grand. C' est cette surestimation des NIH. Ce sera la valeur par défaut. Cela va être, c'est l'état coupé ou l'octave, et celui-ci va être le handicapé. D' accord ? Donc avec ces boutons, nous pourrions continuer et faire les boutons, mais ceux-ci, ces boutons sont indépendants si je veux changer le rayon de la bordure parce que j'ai un autre cassé maintenant. Je dois aller un par un, les sélectionner, tous, et ensuite venir ici et dire, accord, je veux mes boutons ici. C' est bien, mais si vous avez beaucoup de boutons peut être un peu désordonné. D' accord ? Et si, si vous voulez changer la couleur de ces boutons ou si vous voulez changer l'espacement. Vous pouvez imaginer que vous voulez rendre ces espacements plus petits pour être. On nous laisserait de l'espace. Ensuite, vous devez aller acheter un double-clic un par un. C' est un peu, tu sais, quelque sorte que tu dois travailler trop. D' accord ? C'est donc une approche, mais ces icônes comme vous l'avez vu, elles sont indépendantes. Nous allons donc les combiner en tant que variantes de toute façon. Donc nous bombardions ici, nous cliquons, et puis nous avons notre magnifique bouton avec ces propriétés. Encore une fois, pour la première propriété, nous allons nommer en science. Et puis cette icône de texte juste pour se rappeler quelles propriétés. D' accord ? Et puis c'est le type. Et puis c'est l'état. On pourrait aller ici et les réorganiser et ce serait un droit. Ok. Et si vous voulez, si vous avez besoin d'ajouter plus, plus, comment dire qu'il propriétés ici, vous pouvez juste venir ici et propriété Othniel. Imaginez que vous êtes créé comme une version arrondie et une mission normale. Et vous pouvez venir ici et écrire des coordinateurs, des coordinateurs, ni des cônes. Et puis ici vous avez vu ces, c'est une valeur. Donc, vous, ici vous pouvez ajouter de nouveaux baryons comme ils l'appellent, ou propriétés osmium. Les propriétés sont jardiniers domaine dy, dx icône, et dans l'autre sont des baryons. Ok, donc pour ce coin, je veux être, mettons là le rayon frontière que je, que j' ai mis comme 100, ok. Si je crée, le plus élevé, si je crée Hive, créé quelques variations de celui-ci, imaginez que je vais créer une autre variation de cette icône. Donc, ce qu'il fait est juste d'être fermé, vous ne pouvez pas entendre deux autres composants de votre. Vous pouvez ajouter autant que vous voulez, ok, donc nous, nous, nous, nous créons plus de composants et ce que vous pouvez faire ici, imaginez que je ne veux plus. Imaginez que je veux créer la bourse Icône gauche. Donc ce que je vais faire est oui, viens ici, supprimer mon icône et je vais en ajouter une autre, un autre parce qu'il nous faut quatre. Donc nous venons ici et ouais, n'oubliez pas de les faire grands parce que parfois ces cadres sont un peu ennuyeux et vous pouvez être distribué. C' est une autre façon de travailler avec des baryons afin que vous puissiez créer les composants à partir d'ici, vous oui, crée le premier bouton. Utilisez-vous comme vous faites un couple d'entre eux utilise comme barrière. Et puis vous commencez à créer les boutons à partir d'ici. D' accord ? Donc oui, alors ce que nous pouvons faire maintenant c'est que nous avons le grand et ce sera la gauche, pas la gauche, la droite. Ce ne sera qu'une icône de gauche. Et en fait, je vais tous les sélectionner. Et je vais mettre ici icône de gauche, qui est une nouvelle barrière anti ont créé. Et ça va être là. Au lieu de la valeur par défaut, ce sera notre état de vol stationnaire. Au lieu de la valeur par défaut, ce sera notre clic sur l'état et le dernier sera notre état désactivé. Donc, pour cela, je vais juste cliquer ici et je commence à ajouter à des appelants à nouveau pour nos composants. D' accord ? Nous avons donc appris que nous pouvons créer des composants à partir d'ici. Ce que vous faites est de sélectionner simplement le composant que vous voulez dupliquer, mais il va être indépendant. Donc, vous cliquez sur plus et vous, vous avez ajouté ici, ok. Imaginez donc que nous puissions ajouter une autre propriété qui va s'appeler Icône. Icône super faible. Je vais juste le mettre ici sur le dessus. Et nous allons mettre deux baryons ou avec ce qui va être vrai. Si, si elle a si elle a icône va être vraie et si elle ne l'est pas va être faux. D' accord ? Alors ajoutons une nouvelle affaire pour ça, d'accord ? Non, pas pour les coins et voulait me laisser sélectionner cette icône. Tout, tout est vrai. Sélectionnez un autre. Et là, qu'est-ce que tu dis vrai ? Disons qu'il est de la force. Ok. Donc je veux te vendre quelque chose. Alors disons ça. Je vais les changer. Ils vont être faux. Ils n'auront pas d'icône. Celui-ci va bien. Donc, je vais juste supprimer. L' icône ne sera que le texte. Je vais juste faire en sorte que ça soit ouais. Pour mettre fin à cela plusieurs fois. Donc, nous avons seulement la version texte de ceci, donc je vais les sélectionner. Et au lieu de l'icône droite, ce sera la prochaine version, ok. Et que cette version est la seule qui a la force dans les icônes. Le reste a ces vraies. Ok, donc ces vraies barrières. Et maintenant, si on y allait, il viendrait ici pour les biens et viendrait ici à notre bouton. Et nous avons mis ces beaux boutons. Vous pouvez voir que nous avons ceci, ce bonbons étonnants parce que nous mettons lag vrai ou faux. Ainsi est un booléen, donc c'est ou activer ou désactiver. Donc, ce que nous pouvons voir que le seul, le seul B approprié qui n'a pas d'icône est que S1. Donc, nous ne pouvons sélectionner le DES ici ou est sélectionné par défaut, nous pouvons avoir tendance à tirer parti de l'icône et nous allons faire est dans le gaz d'icône activé. Donc nous venons ici et comme vous pouvez le voir, il est activé, mais c'est super cool. D' accord ? Ce genre de, c'est, c'est super sympa. Par exemple, je veux vous vendre quelque chose quand vous travaillez avec des boutons radio de mauvaises herbes, par exemple, et que vous venez ici, vous pouvez allumer et allumer l'étiquette et si elle est sélectionnée ou non, puis vous oui. Changer les états d'assistance. Ok, donc c'est à peu près tout ça. C' est quoi Marianne sous ? Je veux seulement te montrer. Nous avons créé ces composants avec lesquels sont indépendants. Et nous avons vu que c'est une sorte de peu de, eh bien, peut être frustrant si vous avez deux chaînes, tout le, imaginez que vous voulez changer le dipôle où je sens ces batailles. Toi, tu dois marcher un par un en sélectionnant tout le, tu sais, tout le, tout le texte, puis change en médium ou je ne sais pas, noir. Donc tu lui donnes un autre sentiment. Mais vous choisissez souvent de sélectionner les décès un par un. Donc c'est une sorte de barrage, c'est super ennuyeux. Nous allons donc voir une autre approche pour le faire. Donc je vais juste te montrer comment te souvenir imaginé. Vous ne voulez pas, faire la mission. Tu aimes le spot de baryon. Vous n'êtes pas sûr si vous avez mis en œuvre pour l'implémenter dans votre entreprise ou quelque chose ? C' est super facile oui, au genre de la c'est tout. C'est un peu délicat. Donc, ce que vous devez faire est de venir ici, sélectionner vos éléments et les déposer hors de la variante. Ok. Donc maintenant la variante a disparu parce qu'il n'y en a pas. Et Dan Barry Anton a enlevé Barry anthoxanthine VS. Vous devez lancer votre balayage de composants de nous sommes en fait , mais vous n'avez qu'à battre vos composants et les faire glisser. Ok, donc c'est comme ça que ça marche. Donc, ok, nous avons tous nos beaux composants indépendants. Je vais me débarrasser d'eux. On n'en a plus besoin. Je vais vous montrer une autre approche. Donc cette icône, je vais changer super l'un à l'autre, deux, une couleur bizarre. Ce jaune me fait du bien. Et ça va être nos principaux composants. Donc au lieu de nommer comme ça, ok, je vais juste le copier vers, vers, pour copier le nom. Je vais juste le laisser ici. Ok, donc je l'ai pour plus tard. Et ce composant, je vais juste le nommer comme point, contrairement à la période, bouton de rassemblement. D'accord ? Pourquoi ce point ? Donc, je crée un composant, mais il n'apparaîtra pas ici. Tu mets un point ou ou oui, comme ça. Courte vers le bas. Je ne sais pas. Je ne connais pas son nom. Tu sais, à propos de ça. Ça, je vais en faire un peu de B ici. Donc si vous mettez comme vous mettez comme un point ou un, un, vous savez, ce tableau de bord bas m ou je ne sais pas, nm. Tellement désolé pour ça. Mais si vous le nommez avec un point ou l'autre, et puis maitrisez bâton ou partout où vous Diaz. Même si le composant ESA n'apparaît pas dans votre panneau d'actifs de composants ici, ok, ce qui est cool pour ces éléments. Donc, là où nous allons faire, c'est que nous avons tous les éléments dont nous avons besoin dans ce bouton. Je vais vous envoyer à quatre. Nous allons donc créer tous nos composants basés sur ceux-ci. Ok, alors commençons et c'est super rapide aussi. Donc nous allons juste, dans ce cas, je ne veux pas lire que c'est ce que je veux que ces oui. Pour en créer des copies. Plusieurs copies de ces Easterns. On n'y va pas, on ne veut pas briser la cellule. Ces partenariats avec ce bouton maître. Ok, donc encore une fois, je vais choisir pour les Carlos qu'on avait auparavant. Regrettant. J'ai supprimé ma tache de couleur. De toute façon. Allons-y avec le bleu. Ce super cool. Donc je vais choisir cette grippe et la donner un peu plus sombre ici, encore une fois, comme nous l'avons fait avant. La même chose ici. Je vais être celle-là pour aller un peu plus sombre ici. Et ça va être un VC audacieux. Et je vais choisir ces couleurs pour que nous soyons dans le côté bleu des choses. Donc oui, c'est bien si c'était pour moi. Alors quoi, qu'est-ce qu'on va faire maintenant ? Nous allons créer plusieurs composants. Et vous dites au début, c'est déjà une instance d'un composant. Oui, c'est ce qu'on veut. D' accord ? Nous allons donc en créer de multiples limites. Et puis nous allons commencer à les nommer comme nous l'avons fait avant. Ok, donc nous avons ces approches qui, comme , oups, note, nous allons sélectionner ces boutons maîtres. Et puis, c'est vrai, ça va être bon. Et si on le fait en F, et si je mets les noms ici, quand je crée les baryons, les valeurs et tout va être créé. Mais pour cet exemple, en fait, je ne veux pas mettre le nom déjà. Ce que je voulais créer ces variantes. Et comme vous le voyez, nous savons la moitié de tout ce que nous avions avant que nous avons la taille, nous avons le type, nous avons l'icône ou le texte, nous avons tout. Maintenant. Nous n'avons rien parce que leur nom était maître de points, qui n'est plus le nom que nous voulons. Nous voulons renommer ceci en bouton. Ça va se faire, le nom va apparaître ici dans nos actifs. Maintenant, nous avons notre dans le tutoriel divers, désolé. Nous avons notre bouton, vous savez, nous avons nos trois types ou boutons, mais il y a quelque chose de bizarre ici. Pourquoi ? Parce que nous n'avons pas mis nos baryons dans les propriétés. Donc la première propriété, rappelez-vous, nous travaillions avec la taille. Donc, la taille va être grande. Nous allons ajouter une nouvelle propriété dans ce cas va être texte d'icône. Eh bien, mettons l'icône. Disons le vrai et le faux. Tu te rappelles ? Nous allons donc créer un autre baryons. Un autre bar et oui. Alors que dans ce cas, oui. Et ceci en est un. Je vais supprimer les icônes. Donc, ça va, l'icône va être fausse. Nous n'avons plus d'icône, donc nous sélectionnons tout. Et ce qu'on va faire, c'est quoi d'autre ? Ça va être le primaire. Donc nous avons une nouvelle propriété et ça va être Bremmer. C'était le genre. C' est le primaire. Et si nous avons un autre bouton, nous pouvons avoir plus de propriétés comme secondaire et tout. Mais dans ce cas, tous sur primaire. Et puis, nous voulons créer une autre propriété qui est un état. L' état dans ce cas peut être plié. Il crée par défaut, mais cela va être par défaut, mais cela va être l'état de survol. Donc, nous sélectionnons juste le bouton du port, alors ce sera la clique que l'état. Ouf. Très bien, et ça va être l'état handicapé. Alors maintenant, quand nous jetons ces bas ici, maintenant nous avons notre taille. Nous n'avons que de quelle taille maintenant, mais vous pouvez le faire. Et puis nous avons les bonbons pour changer de texte en icône si vous le voulez. C' est un exemple. D' habitude, tu es ce que tu veux. C' est que je n'utilise pas ces vrais faux pour ça. Ce que je fais habituellement, c'est l'après-midi Berbère d dans ce cas va être je contextes. Oui. Et n e, ce que je fais habituellement est gauche, icône de droite. Et donc ce serait, ici, serait texte. Et ce que je fais c'est d'habitude positionner cet élément, le bureau de Saigon. Rappelez-vous, eh bien, vous donne sélectionner et les variantes. Tu peux les arranger dans l'ordre, d'accord ? Donc pour celui-ci, je vais me positionner par là. Et ce que j'utilise habituellement cette profondeur d'abord, puis à gauche, icône de droite, puis à gauche et à droite. Ok. Donc je ne le fais pas, je n'utilise généralement pas ces icônes vraies ou fausses, mais je me suis fait un genou. Ok. Imaginez donc que vous voulez ajouter plus d'instances de ces boutons. Laisse-moi juste agrandir ça parce que c'est un peu ennuyeux. La Varsovie va tout droit. Donc, si vous voulez apprendre plus de baryons, donc ces éléments, créons la SDS et nous avons terminé. Nous créons donc le S plus trois fois. D' accord ? Donc, nous ne allons pas changer la couleur ici à nouveau, comme nous l'avons fait avant. Alors oui, viens ici. Habituellement est une bonne pratique de travailler avec les styles de couleur. Je n'ai pas fait ça pour cet exemple parce que oui, je voulais être oui. Pour le faire à la volée afin que vous voyez comment cela fonctionne plus ou moins dans. Et maintenant, nous pouvons appliquer ici nos états à nouveau dans ce cas, vous venez de scanner ici et de désélectionner la succession parce que nous avons déclaré la variance avant. Donc, cela est cliqué et le désactivé. Et je veux te montrer quelque chose maintenant que tu es probablement maintenant, mais peut-être maintenant. Alors imaginez que vous n'êtes plus une de ces radios frontière et vous voudrez qu'il soit 100. Tu sais, tu n'as qu'à toucher ton maître. Vous voyez, nous avons sélectionné ici notre bouton maître, et nous n'avons qu'à travailler avec. Donc, nous voulons plus de critiques vulgaires. Nous voulons justice que nous ne sommes plus un de ces beaux dipôles noirs Rafi. Une chose, on l'a obtenue, c'est, oui. Tu vois, tout change. Imaginez ça. Vous ne voulez pas, tant d'espace entre le LINCS, 48, imaginez que vous voulez faire comme plus de corps dans votre fond. Est-ce que tu fais ça de très près ? Et je seulement b. Donc c'est la façon de faire, d'accélérer votre, vous savez, la même année. Créez donc des femmes sur votre système de conception ou votre, ou vos composants. C' est donc mon approche pour créer et travailler avec des composants en utilisant ces maîtres et c'est mon approche de ce que nous avons des baryons. Donc baryon SAS, vous pouvez voir qu'ils sont super utiles. Ils sont super EC2 à utiliser si vous avez déjà un système de conception ou si vous étudiez à partir de zéro, vous pouvez voir que vous pouvez faire comme un système de conception en rien de temps et créer des variations sur le bouton bureau dans, je ne sais pas. Dix minutes, 15 minutes. C' est donc une excellente façon de travailler.