Figma: Varianten!

1. Einführung: Hey, wir werden superschnelle Tutorial sein, wo wir über Fema Baryons reden werden. Es sagt super coole Funktion, die es Ihnen ermöglicht , besser Ihre Komponenten als auch zu verteilen. In diesem Tutorial werden wir sprechen, wie Komponenten auf verschiedene Arten zu erstellen. Wir zwei Ansätze. Eine wird die unabhängigen Komponenten im Ausland sein und die andere wird alle Komponenten werden erstellt werden, die aus einem Master-Komponenten erstellt werden. Alle Komponenten sind also von nur einer abhängig. Später können Sie Änderungen schneller vornehmen. Dies ist ein Tutorial für alle, auch wenn Sie neu bei Sigma sind, vielleicht ist es eine gute im Ausland ist, wie Komponenten zu machen. Und auch Sie werden die Baryonen Art der Gruppierung lernen. Und wenn Sie bereits wissen, wie zu spielen kombiniert Luft oder Sie arbeiten in, das gleiche System wird gut für Sie sein weil vielleicht lernen Sie ein paar Tricks über die Erstellung von Komponenten Satelliten, die auch Sie lernen, wie verbessern Sie Ihren gesamten Workflow mit Baryonen. Okay, so Baryonen zu, nur um dir ein bisschen zu zeigen, wie sie funktionieren. Baryons, was wir tun werden, ist mir vorzustellen, ich habe dieses Designsystem hier und erschaffe es. Und Sie haben in der Regel die, dies muss die meisten Zeilen Satz von Komponenten erstellt mit dieser Benennung und alles. Und wenn Sie zu Assets kommen, wenn Sie nach Ihrem Button suchen möchten, Sie irgendwie verrückt über all diese Elemente und Schaltflächen, die Sie hier haben, alle, alle Komponenten. Es ist irgendwie chaotisch, nach einer Komponente zu suchen, okay. Aber ich habe diese andere Probe, die die gleichen Tasten Komponenten, die wir zuvor mit dieser Art von Baryonen hatten , die wir hier auf der rechten Seite mit den erstellten Varianten sehen können. Anstatt viele Komponenten zu haben, wenn wir hier zur Vermögensspinale kommen, haben wir jetzt nur einen Knopf, anstatt eine Menge von ihnen zu haben. Also werde ich das einfach zusammenbrechen, anstatt all diese Komponenten zu haben, was irgendwie ärgerlich ist, zu suchen und sich zu bewegen. Wir haben nur einen Knopf, nur einen Knopf. Und hier können wir ihre Eigenschaften ändern, um zu bekommen, zu bekommen und zu verwenden alle diese Elemente, die wir dort haben. Das ist also eine superschnelle Art der Arbeit mit, wie Sie sehen können, ist eine super VC-Arbeitsweise, mit denen wir Symbole arbeiten. Also gehen Sie einfach zum primären zu gehen. Und wenn Sie interessiert sind, können lernen, wie Komponenten in einer effizienten Weise zu erstellen und wie diese neuen Marianne Monteur zu verwenden, nur GME und in diese kurze Klasse wird wie ein 30 Minuten dauern, 35 Minuten alles lernen. Begleiten Sie mich zu diesen Partituren und denken Sie, bevor Sie es tun. 2. Varianten mit einem bestehenden Designsystem: Hey, danke, dass du dich mir für diese erste Lektion angeschlossen hast. Also lasst uns anfangen. Bei der Arbeit mit Baryonen gibt es zwei Möglichkeiten. Die erste ist, wenn Sie wie ein bestehendes UI-Schlüsseltür-Design-System haben, stellen Sie sich vor, Sie arbeiten für ein Unternehmen oder Unternehmen und sie haben wie ein, ein Design-System. Und Sie arbeiten jetzt mit dem Designsystem und möchten es verbessern. Eines der Dinge, die Sie tun können, um es jetzt und einfacher als je zuvor zu verbessern , ist die AST-Implementierungsvariante in Ihren Komponenten, okay? Ok. Also habe ich hier ein, ein Designsystem könnte erstellt haben. Und lassen Sie uns ein wenig ablenkend sehen. Also habe ich noch nicht die kleine Version dieser Buttons erstellt, aber es ist etwas, das ich tun möchte. Nehmen wir an, ich möchte auch eine kleine Version der Vitamine machen. Das werden 32 Pixel sein, okay? Aber ich habe diesen Ausbruch, den Tod, okay? Also haben wir einige, lassen Sie es Arten von Schaltflächen nennen. Einer von Breitentext, ein anderer mit Symbolen links und rechts. Ein Symbol auf der linken Seite und ein Symbol auf der rechten Seite. Und dann geht nur ich, Okay, also werden wir jetzt eingehen, wie ich das gemacht habe, denn später werden wir sehen, wie man all diese Flaschen von Grund auf schnell mit ihnen macht, mit der Master-Methode. Ok? Also ist es im Moment nicht wichtig. Aber was ich will, dass du siehst, ist die Struktur davon, okay? Also, wenn wir diese Schaltflächen hier sehen, den großen Text und dann das primäre Kritikziel mit all diesen Zuständen über Standard, Hulbert düster, was auch immer. Ich will dir diese Struktur hier sehen. Also zum Beispiel, für diesen habe ich wie Knopf, der heißt, dieser letzte ist ziemlich wichtig, wie Sie vielleicht wissen. Was es tut, ist, dass es wie Ordner erstellt, okay? In Komponenten. Also, wenn ich die Schaltfläche zuletzt groß ist, Schrägstrich, alle, alle Schaltflächen, die diese Leiste geteilt haben, werden sie auf dem gleichen Ordner sein. Das ist also sehr wichtig. Also haben wir den Namen der Komponente, diese iss, dann haben wir die Art der Taste, die wir verwenden, dann wäre das eine andere Art von Taste, richtig? Die primäre, kritische, sekundäre grenzenlose, Das wäre eine andere Art von Typ. Und dann der Standard- und der Standard- oder Hover-Clip, bei dem es sich um einen Status handeln könnte. Okay, wir werden sehen, wie einfach es ist, zu betreten. Etwas Wichtiges dabei ist, wenn wir hier zum Komponenteninspektor kommen , können wir sehen, dass wir all diese GYN aller massiven Menge an Tasten hier haben. Und wenn ich eine von ihnen wählen will, ist irgendwie chaotisch. Weißt du, nicht chaotisch, aber wie man es sagt. Es ist irgendwie schwer zu finden, wo ich will, auch wenn ich suche, wenn ich primär setze, werden hier viele Buttons kommen und ich muss 13 sein. Dies ist der, dies ist der Standardzustand dieser ist der Hubbard. Weißt du, es ist irgendwie schwer, also kommen Schnäppchen um Hilfe. Also was, was sind wir bereit zu tun, wenn wir einige Komponenten auswählen? Hier auf der rechten Seite Bono haben wir Baryonen. Wir ja, wir könnten sie kombinieren. Ja, jetzt sofort. Ok. Aber ich möchte alle meine Schaltflächen auswählen. Denken Sie daran, nur geklickt sieben und wählen Sie dann mit Drogen. All deine Knöpfe. Also werden wir auf kombiniert als Varianten klicken, ECS, das Stück Kuchen. Wenn Sie also alle unsere Schaltflächen hier sehen, haben diese irgendwie auf den Login-Komponenten erscheinen, und jetzt haben wir nur eine Schaltfläche, wie Sie sehen können. Das ist also eine wichtige Sache. Also haben wir nicht mehr 143 Leon, Millionen von Knöpfen, wir haben nur einen. Und das ist brillant. Ich meine, was passiert, wenn wir diesen Knopf hierher bringen , dass wir jetzt diese Eigenschaften hier haben. Wie Sie sehen können, Symbol, Symbol, Links, Symbol F, Rechts, Symbol rechts. So erkennen Baryonen den Instruktor, mit dem wir zuvor auf unserem Designsystem hatten, mit dieser Namenskonvention, die wir vorher hatten. Und lassen Sie uns zwei Schichten durchgehen. Und wir können hier sehen, dass es so ist, als würde man den Namen nehmen, den wir vorher hatten. Aber statt Islam sagt, was Baryonen tun, ist wie Kommas setzen, um diese Eigenschaften zu trennen. Ok? Etwas, das Sie tun können, um noch mehr diese automatische magische Sache zu verbessern, seine, Sie wählen diese Barb Fett Grenze, die Baryonen hier erstellen. Und dann können Sie den Namen der Eigenschaften steuern und dann das Symbol anordnen, die Reihenfolge, in der Sie die Eigenschaft schlampig hier wollen. Also hier für die erste Eigenschaft, werden wir es Größe nennen. Zum zweiten werde ich es für den dritten Typ nennen, das ist Reichtum. Gehen wir mit dem, mit diesem Zustand. Es ist wieder von einem Staat und dieser Clique, etcetera. Also werden wir anfangen, hier zuerst den Standard, dann den Hover-Zustand neu zu ordnen . Also möchte ich, dass sie in dieser Reihenfolge erscheinen, wenn wir unseren Boden hier auswählen. Was ich will, ist es, dass, wissen Sie, dass diese vor Hulbert Clique erschienen und deaktivieren, das ist cool. Und dann erscheint das Primär hier auf dem dritten Platz. Das will ich nicht. Ich will primäre, sekundäre dann Kritiker Gao sie grenzenlos. Also werde ich das hier, die, die, all die Barriere und Komponente dieses großen Baryon auswählen . Und dann werde ich das in primäre, dann sekundäre, dann kritische und danngrenzenlose Tj i1 neu anordnen dann sekundäre, dann kritische und dann . Diese Reihenfolge zu erscheinen, ok, also ist dies der Zustand, das ist der Typ, den ich nicht kenne, Artikel davon überzeugt. Vielleicht habe ich Icon, Text oder Textsymbol gekauft . Also ist es irgendwie semantischer. Und dann ds, das ist, ich werde es Typ nennen. Ok? Also, wenn wir jetzt auf unseren Grund gehen, auf unsere Instanz dieser wunderbaren Schaltfläche, sehen wir, dass wir nur große haben. Denken Sie daran, dass ich eine kleine Version davon erstellen wollte, aber vielleicht einen anderen Tag. Aber wenn Sie erstellt haben oder Sie zuvor eine kleine Version erstellt haben und Sie sie richtig benennen, dann wird sie in der Größe größer, klein, regelmäßig, Vanille oder alle erscheinen . Ok. Jetzt kann ich das Symbol jetzt ändern. Und das ist eine wunderbare Ikone. Ich muss nicht mehr gehen, wie hin und her gehen, hier wechseln, wissen Sie, wir waren irgendwie ärgerlich, irgendwie langsam. Es war nicht schlecht, aber das ist viel besser. Also jetzt haben wir alle unsere Komponenten in dieser schlammigen Ziel Sidebar Box hier. Und wir können von einem zum anderen wechseln, das Anwesen wechseln und nur hierher gehen. Und er wird sich vom Mikrofon ändern, das das Anwesen respektiert. Ich meine, ich bin erstaunt darüber, wie Baryonen auftraten. Wenn Sie also ein Designsystem haben, das von Ihren vorherigen Komponenten, zwei Varianten, migriert , ist es einfach, also ist es super einfach, okay. 3. Komponenten von Grund für Grund mit Varianten erstellen: Also gehen wir jetzt zur zweiten Version. Ok, wir haben das getan. Und was ist, wenn Sie von Grund auf neu beginnen möchten, haben Sie jedes Designsystem, das Sie in einem neuen Projekt arbeiten. Sie werden beginnen, Ihre Komponenten von Grund auf neu zu erstellen. Und Sie wollen die Vorteile der Verwendung von Baryonen bekommen. Okay, also gehen wir hierher und gehen wir zu unserem Tutorial. Ordnung, also für diesen Fall werde ich von Design und Amp beginnen, unten super gerade. Ich gehe hier mit einer Höhe von 40. Ich werde die Farbe zu einer Art Blau zu ändern ist eine, wie wir zuvor in der anderen, im anderen Abschnitt, Satellit, diese Art von Glanz. Ich werde den Grenzradius von vier hinzufügen. Nun, ja, ich schaffe es mit einer Rate von Grenzradius vier. Ich werde diesem Fall etwas Text hinzufügen. Ich werde es Knopf nennen. Wenn Sie super kompetent mit haben wir Fema, vielleicht können Sie diesen Teil überspringen. Aber wenn Sie nicht so sicher sind, wie Sie Komponenten erstellen, denke ich, ist eine nette Sache zu beobachten. Weil ich Ihnen zeigen werde, wie Sie Komponenten auf zwei verschiedene Arten erstellen . Eins, likey unabhängig haben diese, so etwas. Also ein paar Jagd hier. Für gewährte Komponenten, die zwei Hauptwellen des Tuns sind. So erstellen Sie alle Komponenten abhängig von einem Master. So erstellen Sie einen Master. Und dann wird dieser Master wie eine verschachtelte Komponente der anderen Komponenten sein, wie eine Matroschka, weißt du? Die andere Art, Komponenten zu machen, ist ja, machen Sie sie unabhängig. Jede Komponente ist unabhängig von den anderen. Also sind sie es, sie sind okay. Aber wenn Sie den Randradius auf alle ändern möchten, müssen Sie warm b1 sein, indem Sie den Randradius ändern. Während diese Methoden, diese Messen Methode, müssen Sie nur ihren Master ändern und dass Änderungen werden durch alle Ihre Komponenten replizieren. Beide ihrer erstellenden Systeme haben ihre Vorteile. Es gibt Vor- und Nachteile, wissen Sie, aber aus meiner Erfahrung, ich denke, sind wirklich kann anrichten. Ich empfehle, die Master-Komponenten-Version davon zu verwenden, okay, also werden wir beide versuchen, beide Systeme und Sie können wählen, wo immer Sie wollen, okay? Also werden wir damit beginnen, die hinzufügenden abhängigen zu erstellen, okay? Und dann werden wir einen Meister einer dieser Komponenten machen. Und dann werden wir diese Muster replizieren und es als unsere Muskelkomponente verwenden und dann die anderen Komponenten basierend auf I-T erstellen. Okay, also lassen Sie uns sehen, in der Praxis ist einfacher Dynastie. Also werde ich hier nur klingeln. Wie ein Symbol, nur ein einfaches Symbol, um meine beiden Symbole hier zu setzen , wird auf einem Chevron nach unten sein. Oop. Tut mir leid, ja. Das ist weg. Wird es schaffen. Und um, später kann dies ändern, Ich werde, um dies zu verwenden. Ich werde nur eine andere erschaffen haben Angst wie diese. Und ich werde diese Ikone nennen. Denk daran als Sigma. Die Framing ist wichtig weil Lassen Sie uns einige zufällige Symbole hier setzen, so dass wir die Nussschale auf den Namen der sehen können, von der AIR Bohr ist wichtig, warum Nukleating Komponenten? Denn später, wenn wir hier zu Assets kommen, wird der FirstName am unteren Rand und Optionsfeld sein, es beginnt von ihrem Frame. Okay. Also, wenn ich das ändern würde, wenn ich dies in einen anderen Namen ändern würde, werden Sie hier ändern. Also, aber wir wollen das gleiche sein wie, wie das Element, das wir im Inneren haben. Ok, dafür werde ich hier nur eine Komponente erstellen. Also schätze ich für uns hier. Und wir können sehen, dass wir jetzt hören Varianz, Varianz Tutorial. Wir haben das mehrere Down-Symbol, okay? Und ich werde ein weiteres Symbol hier hinzufügen, aus dem gleichen von weiteren Symbolen. Ziemlich unkompliziert. Und ich bin, ich werde nur wie ein Pfeil booten. Und ja, vielleicht voll. Lassen Sie uns also mehrere Komponenten erstellen. Denken Sie daran, dass Sie, wenn Sie einige Objekte auswählen , mehrere Komponenten daraus erstellen können. Also werde ich hier nur zur Basis kommen. Also haben wir den Rahmen n gesehen, ich werde nur dieses kleine bisschen ausrichten. Also haben wir es so eingestellt. Hat es getan. Also, es sei denn ja, verteilt ist eins. Also haben wir drei Symbole vorgebaut, um alle. Ich werde mich nicht mit den Farben und dem ganzen Zeug verwirren. Wenn Sie an kreativen Design-Systemen interessiert sind, habe ich ein Tutorial ziemlich umfangreich darüber, wie Sie Ihr erstes Designsystem erstellen. So können Sie das mit diesem kombinieren, mit diesem Tutorial ein c. Und weil dies für ist, wenn Sie alle Ihr Designsystem erstellt haben, kommen Sie hierher und dann erstellen Sie Ihre Varianten aus allen Komponenten Grad vorher. Okay? Also, was ich jetzt möchte, ist ja, um ein paar Symbole hier zu implementieren. Ziehen Sie sie einfach per Drag & Drop und ändern Sie die Farbe in Weiß. Es sind also MCI-Übereinstimmungen. Diese sind weg, sind ein bisschen zu groß für meinen Geschmack, also werde ich sie auf 36. Nun, wenn ich kann. Okay, 36 und sie, ich werde sie auf 36. So gut, so weit, so gut. Also, jetzt, was ich will, es ist ein nettes Feeder Fema hat es Auto-Layout genannt wird. Wenn Sie nicht wissen, darüber, Ich empfehle auch zu sehen, obwohl Tutorial eine Hälfte, sorry für alle Spam-Bot. Ich werde tun, Iout ist ein super netter Monteur. Was es tut, dauert es Ihre Elemente und, und erstellt Verteilungen und Ausrichtungen. Und es ermöglicht Ihnen, wie diese Art von reaktionsschnell zu erstellen, reagiert auf den Inhalt, wie Komponenten. Okay, dafür werde ich ein automatisches Layout mit diesen drei Elementen erstellen. Ich habe sie gerade ausgewählt. Und Sie können hier klicken und dann Auto-Layout erstellen, okay, oder Sie wählen die Elemente und dann Auto-Layout erscheint und Sie drücken Plus, sorry, Ich benutze in der Regel die, die gemeinsame, die Taste, die Tastenkombination, die Tastatur Verknüpfungen. So ist die Verknüpfung gemeinsame Verschiebung ein oder wenn Sie in BC sind, ist es Kontrolle Verschiebung einer Immobilie nach vorne. Und jetzt werde ich das Gleiche machen. Ich werde dies auswählen und dann diesen Hintergrund auswählen. Und ich werde wieder hierher kommen, um Auto-Layout zu segnen plus 4m. Und er wird so sein, wenn du gehst, ist das erstaunlich. Nun, warum ist kein Arbeiter? Es ist erstaunlich, wo es funktioniert. Was ist hier los? Ok, Ich habe diese festen Artikel, wenn es beheben, denken Sie daran, dass Sie die Breite hier beheben können, aber in diesem Fall wollen wir die, wir wollen unsere Unterseite frei, so dass es seine Größe erhöht, wenn Sie mehr schreiben. Okay, also haben wir unseren Knopf. Bri ist das, was wir wollten. Okay. Also gut, für DSN geht nur mit 16, ein Onboard hier. So können wir hier setzen 1212 auf wie diese steuert die, diese Basis. Diese steuert einen vertikalen Knospen. Diese steuert den horizontalen Knospen. Und wenn wir auf, auf, auf, auf, auf unseren Rahmen, die Symbole und Texte sind, doppelklicken auf, auf, auf unseren Rahmen, , können wir auch steuern. Diese Distanz 12 ist vorerst gut. Und das, und das, wir werden es unten nennen. Okay? Stellen Sie sich vor, wir erstellen die unabhängigen Schaltflächen. Okay? Unser Ansatz wäre, diese Live-Schaltfläche zu nennen. Erinnern Sie sich an diese iss, das ist groß, und dann ist das ein Primärknopf, okay? Und dann wäre das der Standardzustand, okay? Also nennen wir es so. Und dann kommen wir hierher und haben auf Bindung geschaffen. Okay, also möchten Sie eine andere Version davon erstellen. Denken Sie daran, den Hover-Zustand dieses Elements. Was ich tun werde, ist ja, diese Distanz abzulösen. Also wir, wir sind nicht überschreiben dies weil jetzt erinnern wir hier arbeiten wir mit einem Eastern. Also, was wir wollen, ist, es zu tun, das war's. Dann sendet eine Farbe an etwas etwas dunkler, etwas um das herum. Okay? Das wäre also, anstelle der Standardeinstellung, ändern wir diese in Hafen und klicken Sie dann und wir haben ein anderes Symbol. Und das gleiche, wir lösen uns. Und dann ist das die Clique, ein Zustand, der etwas dunkler ist. Und dann ändern wir den Namen in angeklickt oder Octave oder was immer Sie wollen und zielen darauf ab. Und dann wieder, haben wir, das ist die Hilfe. Und wir haben diese genannt, sagen wir Disable. Okay. Ja, vorher vorwärts, was sagt, dass in Hülle und Fülle von diesen blauen zu etwas um das herum. Und das ist unser behinderter Staat, okay? Und dann erstellen wir die Komponente damit, ok. Also haben wir, unser Boden ist unabhängig. Wenn ich diese Farben ändere und ich beschloss, für eine rev. zu gehen Yeah, Sie können sehen, nichts ändert sich. Und wenn wir kochen, wenn wir weiter durch Schwingungen des Bodens schaffen, stellen Sie sich vor, ich habe diese Studiensysteme gemacht und stellen Sie sich vor, wir bitten jetzt, die richtige Version davon mit dem Symbol zu erstellen. Dann noch einmal, ich dupliziere das, ich dupliziere das, damit ich nicht mehr sein muss. Ich meine, und dann erstelle ich die Farbe separat. Also komme ich hierher und komme dann her, und dann komme ich hierher. Das ist Foster Dialogue, Dan, dass du den ersten duplizierst, wenn er nicht dieses Symbol oder eine Komponente ist. Und dann ändern Sie einige der Farben und dann erstellen Sie die Komponenten von Grund auf neu aus einem Schuss. Jetzt wählen wir alle aus und erstellen dann mehrere Komponenten. Okay, also das ist cool, weil es schnell zu erstellen ist und sie konsistent sind und alles. Also haben wir diese Variationen. Ok, also jetzt hat sich diese ID geändert. Als ich vergessen habe, hier die beiden Symbole, das linke und rechte Symbol zu setzen. Also werde ich einen blau-grünen Kern verwenden, ihn umbenennen. Also, was ich möchte, dass dies wählen Anwälte suchen und ersetzen. Das ist ziemlich cool. Lewin. Was ich will, ist, wenn Sie große dislodge finden, Was ich will ist und wenn Sie ein großes, großes, großes, großes, großes Gesetz finden , werde ich nicht tun, um es im Großen zu ändern. Als Wimpernlinie wird genauer sein. Primär, Ich wollte durch ändern, in diesem Fall ist links, rechts Symbol. Okay? Und primär. Also, wenn wir es umbenennen, sehen wir, dass wir jetzt links Stab Symbol primäre, so dass sie umbenennen ist gut. Also werden wir jetzt auch diese Ebenen umbenennen, weil ich vergessen habe zu booten. Dies ist eine Art Symbol-Texttyp. Okay, also dasselbe hier. Was wir tun können, ist ja, gehen Sie zum Primär. Und dann, wenn es so ist, wird das wie richtig sein. Symbol. Und dann primär. Und der Schrägstrich. So können wir jetzt sehen, dass wir Baton große Ri Cai, Kegel primären Standard. Und jetzt müssen wir diese Namen ändern. Hier ist, um ein bisschen größer zu machen. Das ist dieser NIH Overstate. Dies wird die Standardeinstellung sein. Dies wird sein, das ist der abgeschnittene Zustand oder Oktave, und dieser wird die Behinderte sein. Okay? Also mit diesen Tasten könnten wir weitermachen und die Tasten machen, aber diese, diese Tasten sind unabhängig, wenn ich den Randradius ändern will, weil ich jetzt eine andere kaputt habe. Ich muss eins nach dem anderen gehen, sie alle auswählen und dann hierher kommen und sagen, okay, ich will meine Knöpfe hier. Es ist schön, aber wenn Sie viele Tasten haben, kann ein wenig chaotisch sein. Okay? Und wenn, wenn Sie die Farbe dieser Schaltflächen ändern möchten oder Sie den Abstand ändern möchten. Sie können sich vorstellen, dass Sie diese Abstände kleiner machen möchten. Wir würden uns Raum lassen. Dann müssen Sie gehen, kaufen Sie einen Einzel-by-one-Doppelklick. Es ist irgendwie, weißt du, irgendwie musst du zu viel arbeiten. Okay? Dies ist also ein Ansatz, aber diese Symbole, wie Sie gesehen haben, sind sie unabhängig. Also werden wir sie sowieso als Varianten kombinieren. Also bombardieren wir hier, wir klicken, und dann haben wir unseren herrlichen Knopf mit diesen Eigenschaften. Wieder, für die erste Eigenschaft werden wir in der Wissenschaft benennen. Und dann dieses Textsymbol, nur um sich zu erinnern, welche Eigenschaften. Okay? Und dann ist das der Typ. Und dann ist das der Staat. Wir könnten hierher gehen und sie neu arrangieren, und das wäre ein Recht. Ok. Und wenn Sie wollen, wenn Sie mehr hinzufügen müssen, mehr, wie man es Eigenschaften zu hier sagen, können Sie einfach hier kommen und Othniel Eigenschaft. Stellen Sie sich vor, Sie sind wie eine abgerundete Version und eine normale Mission. Und Sie können hierher kommen und Koordinatoren, Koordinatoren oder Kegel schreiben. Und dann hier haben Sie diese gesehen, das ist ein Wert. So können Sie hier neue Baryonen hinzufügen, wie sie es nennen, oder Osmium-Eigenschaften. Die Eigenschaften sind Gärtner Anwesen dy, dx Symbol, und in der anderen sind Baryone. Okay, also für diese Ecke möchte ich sein, lassen Sie uns den Grenzradius da setzen , den ich wie 100 gesetzt habe, okay. Wenn ich erstelle, desto höher, wenn ich Hive erstelle, erstellt einige Variationen davon, stellen Sie sich vor, ich werde eine weitere Variation dieses Symbols erstellen. Also, was es tut, ist nur gated zu sein, Sie können nicht hören zwei weitere Komponenten zu Ihrem. Sie können so viel hinzufügen, wie Sie wollen, okay, also erstellen wir mehr Komponenten und was Sie hier tun können, stellen Sie sich vor, ich will nicht mehr. Stellen Sie sich vor, ich möchte die Bursa des linken Symbols erstellen. Also, was ich tun werde, ist ja, kommen Sie her, löschen Sie mein Symbol und ich werde ein weiteres hinzufügen, ein anderes, weil wir vier brauchen. Also kommen wir hierher und ja, denken Sie daran, diese groß zu machen, denn manchmal ist dieser Rahmen irgendwie ärgerlich und man kann verteilt werden. Dies ist eine andere Art, mit Baryonen zu arbeiten, so dass Sie die Komponenten von hier aus erstellen können, Sie ja, erstellt die erste Schaltfläche. Verwenden Sie es, wie Sie machen ein paar von ihnen verwendet als Barriere. Und dann beginnen Sie, die Schaltflächen von hier aus zu erstellen. Okay? Also ja, was wir jetzt tun können, ist, dass wir das Große haben und das wird die linke sein, nicht links, richtig. Dies wird nur ein linkes Symbol sein. Und eigentlich werde ich sie alle auswählen. Und ich werde hier links Symbol setzen, die eine neue Barriere Anti erstellt haben. Und das wird da sein. Anstelle der Standardeinstellung wird dies unser Hover-Zustand sein. Anstelle der Standardeinstellung wird dies unser Klick auf den Zustand sein und der letzte wird unser deaktivierter Zustand sein. Also, dafür werde ich nur hier klicken und ich fange an, bei Anrufern wieder für unsere Komponenten hinzuzufügen . Okay? So haben wir gelernt, dass wir von hier aus Komponenten erstellen können. Was Sie tun, ist, dass Sie nur die Komponente auswählen, die Sie duplizieren möchten, aber es wird unabhängig sein. Also klicken Sie auf Plus und Sie, Sie haben hier hinzugefügt, ok. Stellen Sie sich also vor, wir können eine andere Eigenschaft hinzufügen, die Icon genannt wird. Ja, super schwache Ikone. Ich werde es hier ganz oben stellen. Und wir werden zwei Baryonen setzen oder mit dem, was wahr sein wird. Wenn, wenn es hat, wenn es Symbol hat , wird wahr sein und wenn es nicht ist, wird falsch sein. Okay? Also lasst uns ein neues Schnäppchen dafür hinzufügen, okay? Nein, nicht für Ecken und wollte für lassen Sie mich dieses Symbol auswählen. Alles, alles ist wahr. Wählen Sie eine andere aus. Und dann hier, was sagst du, ist wahr? Sagen wir, er ist Kraft. Ok. Also will ich dir etwas verkaufen. Sagen wir das. Ich werde sie ändern. Sie werden falsch sein. Sie werden kein Symbol haben. Das hier ist okay. Also werde ich einfach löschen. Das Symbol wird nur der Text sein. Ich werde es einfach ja machen. Um dies mehrmals zu beenden. Also haben wir nur die Textversion davon, also werde ich sie auswählen. Und anstelle des rechten Symbols wird dies die nächste Version sein, ok. Und dass diese Version die einzige ist, die die Kraft in den Symbolen hat. Der Rest hat diese wahr. Okay, also diese wahre Barriere. Und wenn wir jetzt gehen, kam er zu Vermögenswerten und kam hierher zu unserem Knopf. Und wir setzen diese schönen Knopf. Sie können sehen, wir haben diese, diese erstaunliche Süßigkeiten, weil wir setzen Verzögerung wahr oder falsch. So ist ein boolescher Wert, also ist es oder aktivieren oder deaktivieren. Was wir also sehen können, dass das einzige, das richtige B, das kein Symbol hat, dass S1 ist. So können wir nur wählen Sie die DES hier oder ist standardmäßig ausgewählt, wir neigt dazu, Symbol zu nutzen und wir werden tun, ist in dem Symbol Gas aktiviert. Also kommen wir hierher und wie Sie sehen können, ist es aktiviert, aber das ist super cool. Okay? Diese Art von, das ist, das ist super nett. Zum Beispiel möchte ich Ihnen etwas verkaufen, wenn Sie zum Beispiel mit Unkraut-Optionsfeldern arbeiten und Sie hierher kommen, können Sie das Etikett einschalten und einschalten, und wenn es ausgewählt ist oder nicht, und dann können Sie Ja. Ändern Sie die Hilfs-Zustände. Okay, das ist also ziemlich viel davon. Was ist Marianne sub out? Ich will es dir nur zeigen. Wir haben diese Komponenten erstellt, mit denen unabhängig sind. Und wir haben gesehen, dass es eine Art von ein bisschen ist, na ja, kann frustrierend sein, wenn Sie zwei Ketten haben, alle, stellen Sie sich vor, Sie wollen den Dipol ändern, wo ich diese Kämpfe fühle. Du musst eins nach dem anderen gehen und alle, du weißt schon, den ganzen Text auswählen und dann zu Medium wechseln, oder ich weiß nicht, schwarz. Also gibst du ihm ein anderes Gefühl. Aber Sie stellen oft fest, um die Todesfälle nacheinander auszuwählen. Das ist also irgendwie absehbar, es ist super langweilig. Also werden wir einen anderen Ansatz sehen, dies zu tun. Also werde ich Ihnen nur zeigen, wie Sie sich vorstellen können. Sie wollen nicht, um den Auftrag zu erledigen. Du magst Baryon Spot. Sie sind sich nicht sicher, ob Sie implementiert haben, um es in Ihrem Unternehmen oder so zu implementieren? Es ist super-leicht, ja, irgendwie das ist es. Es ist ein bisschen knifflig. Was Sie also tun müssen, ist hierher zu kommen, wählen Sie Ihre Elemente aus und lassen Sie sie aus der Variante fallen. Ok. Also jetzt ist die Variante weg, weil es keine gibt. Und Dan Barry Anton hat Barry Anthoxanthin VS entfernt. Müssen Sie Ihre Komponenten scannen von wir sind eigentlich aber Sie müssen nur Ihre Komponenten schlagen und sie herausziehen. Okay, so funktioniert es. Also, okay, wir haben alle unsere schönen unabhängigen Komponenten. Ich werde sie loswerden. Wir brauchen sie nicht mehr. Ich werde Ihnen eine andere Herangehensweise zeigen. Also dieses Symbol, ich werde super auf eine andere ändern, zwei, eine seltsame Farbe. Dieses Gelb fühlt sich gut an. Und das wird unsere Hauptkomponenten sein. Also, anstatt so zu benennen, okay, ich werde es nur kopieren, zu, um den Namen zu kopieren. Ich werde es einfach hier lassen. Okay, also habe ich es für später. Und diese Komponente, ich werde es nur wie Punkt nennen, anders als Periode, Muster-Button. Okay? Warum dieser Punkt? Also erstelle ich eine Komponente, aber sie wird hier nicht erscheinen. Sie setzen einen Punkt oder oder oder ja, so. Kurz nach unten. Ich weiß es nicht. Ich kenne den Namen nicht. Du weißt schon, darüber. Das, ich werde es hier irgendwie b machen. Also, wenn Sie wie eine Periode oder eine, ein, wissen Sie, diese unten Armaturenbrett m oder ich weiß nicht, nm. Das tut mir so leid. Aber wenn Sie es mit einem Punkt oder dem anderen nennen, und dann Master Taktstock oder wo immer Sie Diaz. Selbst wenn die ESA-Komponente hier nicht in Ihrem Komponenten-Assets-Panel angezeigt wird, okay, was für diese Elemente cool ist. Also, wo wir tun werden, ist, dass wir alle Elemente, die wir brauchen, in diesen Button haben. Ich werde dich zu vier schicken. Daher werden wir alle unsere Komponenten auf der Grundlage dieser erstellen. Okay, also fangen wir an und das ist auch super schnell. Also werden wir nur, in diesem Fall, ich will nicht lesen, das ist, was ich will diese ja. Um Kopien davon zu erstellen. Mehrere Kopien dieser Ostern. Wir gehen nicht, wir wollen die Zelle nicht brechen. Diese Partnerschaft mit diesem Master-Button. Okay, also nochmal, ich werde mich für die Carlos entscheiden, die wir zuvor hatten. Bedauerend. Ich habe meinen Farbfleck gelöscht. Jedenfalls. Gehen wir mit dem Blau. Das super cool. Also werde ich diese Grippe pflücken und sie hier wieder etwas dunkler geben, wie wir es vorher getan haben. Dasselbe hier. Ich werde diese sein, um hier etwas dunkler zu werden. Und das wird ein VC mutig sein. Und ich werde diese Farben auswählen, damit wir auf der blauen Seite der Dinge sind. Also ja, das ist gut, wenn es für mich wäre. Also was, was werden wir jetzt tun? Wir werden mehrere Komponenten erstellen. Und Sie sagen zu Beginn, dies ist bereits eine Instanz einer Komponente. Ja, das ist es, was wir wollen. Okay? Also werden wir mehrere Begrenzungen davon schaffen. Und dann werden wir anfangen, sie zu benennen, wie wir es vorher getan haben. Okay, also haben wir diesen Ansatz, der wie, whoops, beachten Sie, wir werden diese Master-Schaltfläche auswählen. Und dann, richtig, das wird gut. Und wenn wir in F tun, und wenn ich die Namen hier setze, wenn ich die Baryonen erstelle, werden die Werte und alles geschaffen. Aber für dieses Beispiel möchte ich eigentlich nicht den Namen bereits setzen. Was ich diese als Varianten erstellen wollte. Und wie Sie sehen, wissen wir halb so etwas, wie wir vorher hatten, dass wir die Größe haben, wir haben den Typ, wir haben das Symbol oder den Text, wir haben alles. Jetzt. Wir haben nicht, dass wir nichts haben, weil ihr Name Dot Master war, was nicht der Name ist, den wir wollen. Wir möchten dies in Schaltfläche umbenennen. Das wird bekommen, der Name wird hier in unserem Vermögen erscheinen. Jetzt haben wir unsere in den verschiedenen Tutorial, sorry. Wir haben unseren Knopf, wissen Sie, wir haben unsere drei Typen oder Knopf, aber hier ist etwas Seltsames. Warum? Weil wir unsere Baryonen nicht in Immobilien gesetzt haben. Also die erste Eigenschaft, denken Sie daran, wir arbeiteten mit Größe. Die Größe wird also groß sein. Wir werden eine neue Eigenschaft hinzufügen, in diesem Fall wird Symboltext sein. Nun, lassen Sie uns das Symbol setzen. Sagen wir das Wahre und Falsche. Erinnerst du dich? Also werden wir noch eine Baryone erschaffen. Noch eine Bar und ja. Während in diesem Fall, ja. Und das ist eins. Ich werde die Symbole entfernen. Also das geht, das Symbol wird falsch sein. Wir haben kein Symbol mehr, also wählen wir alles aus. Und was wir tun werden, es ist was sonst? Das wird das Primär sein. Also haben wir eine neue Immobilie und das wird Bremmer sein. Das war der Typ. Das ist das Primär. Und wenn wir noch andere Tasten haben, können wir mehr Eigenschaften wie sekundäre und alles haben. Aber in diesem Fall alle von ihnen auf primären. Und dann, dann wollen wir eine andere Eigenschaft schaffen, die ein Staat ist. Der Zustand kann in diesem Fall gefaltet sein. Es erstellt Standard, aber dies wird Standard sein, aber dies wird Hover-Zustand sein. Also wählen wir einfach die Hafen-Taste, dann wird dies die Clique dieser Zustand sein. Wow. Okay, und das wird der behinderte Zustand sein. Also, wenn wir diese unten hier werfen, haben wir jetzt unsere Größe. Wir haben mittlerweile nur welche Größe, aber Sie können es schaffen. Und dann haben wir die Süßigkeiten, um von Text zu Symbol zu ändern, wenn Sie es wollen. Das ist ein Beispiel. Du bist normalerweise das, was du willst. Ich benutze diese wahren Falschen nicht dafür. Was ich normalerweise mache, ist es Nachmittag Berber d in diesem Fall wird ich Kontexte sein. Ja. Und n e, was ich normalerweise tun ist links, rechts Symbol. Und deshalb wären diese, hier, wäre Text. Und was ich tue, ist in der Regel dieses Element zu positionieren, den Saigon-Schreibtisch. Denken Sie daran, gut, gibt Ihnen Auswahl und die Varianten. Sie können sie in der Reihenfolge arrangieren, okay? Also für diesen hier werde ich mich dort positionieren. Und was ich normalerweise benutze diese Tiefe zuerst, dann links, rechts Symbol, dann links und rechts. Ok. Also ich nicht, ich benutze normalerweise nicht diese Ikone wahr oder falsch, aber ich habe Knie. Ok. Stellen Sie sich also vor, Sie möchten weitere Instanzen dieser Schaltfläche hinzufügen. Lass mich das einfach größer machen, weil es ein bisschen nervig ist. Die Warschauer geht gerade. Also, wenn Sie mehr Baryonen lernen wollen, so dass dieses Element, lassen Sie uns die SDS erstellen und wir fertig. So erstellen wir das S plus dreimal. Okay? Also werden wir nicht, um die Farbe hier wieder zu ändern, wie wir es vorher getan haben. Also ja, komm her. Normalerweise ist eine gute Übung, mit Farbstilen zu arbeiten. Ich habe das für dieses Beispiel nicht getan, weil ja, ich wollte ja sein. Um es on the fly zu tun, so dass Sie sehen, wie es funktioniert mehr oder weniger in. Und jetzt können wir hier wieder unsere Zustände in diesem Fall anwenden, Sie scannen einfach hier und deaktivieren den Nachlass, weil wir die Varianz vorher deklariert haben. Dies wird also angeklickt und deaktiviert. Und ich möchte dir jetzt etwas zeigen, wo du wahrscheinlich jetzt bist, aber vielleicht jetzt. Stellen Sie sich vor, Sie sind nicht mehr einer dieser Grenzradios und Sie werden es auf 100 wollen. Weißt du, du musst nur deinen Meister berühren. Sie sehen, wir haben hier unseren Master-Button ausgewählt, und wir müssen nur damit arbeiten. Also wollen wir mehr vulgäre Bewertungen. Wir wollen Gerechtigkeit, dass wir nicht mehr eine dieser schönen schwarzen Dipol Rafi. Eine Sache, die wir erhalten haben, ist, ja. Siehst du, alles verändert sich. Stellen Sie sich das vor. Sie wollen nicht so viel Platz zwischen den LINCS, 48, stellen Sie sich vor, Sie wollen wie mehr Körper in Ihren Hintern machen. Machen Sie es einfach so nah? Und ich bin nur b also ist das die Art, dein, du weißt schon, im selben Jahr zu beschleunigen. Erstellen Sie also Femmes über Ihr Designsystem oder Ihre, oder Ihre Komponenten. Das ist also mein Ansatz für das Erstellen und Arbeiten mit Komponenten, die diesen Master verwenden, und das ist meine Herangehensweise an das, was wir Baryonen haben. So baryon SAS, Sie können sehen, sie sind super nützlich. Sie sind super EC2 zu verwenden, wenn Sie bereits ein Design-System haben oder wenn Sie von Grund auf neu studieren, können Sie sehen, dass Sie wie ein Designsystem in kürzester Zeit machen und Variationen auf Bureau Button erstellen können , weiß ich nicht. Zehn Minuten, 15 Minuten. Es ist also eine großartige Art zu arbeiten.