Gestaltungssystem in Figma von Grund auf erstellen - UI UX Master Class

1. Was du in diesem Design lernen: Willkommen in meiner Klasse über Designsysteme mit Figma. In dieser Klasse werden wir lernen, was Designsysteme sind, wie wir unser Designsystem bilden und wie wir das umwandeln oder in Figma entwerfen. Und das können wir in unsere Projekte mit Entwicklern, mit unseren Teamkollegen und verschiedenen Designern wiederverwenden . Bevor wir uns mit Designsystemen befassen, werden wir ein bisschen mehr darüber lernen , was unsere Designprinzipien haben. Was sind die Zweckaussage Ihrer Designsysteme? Was sind verschiedene Komponenten? Was sind ihre Qualitäten? Wie sollte eine Komponente sein? Was sind Token, Regeln, Themen? Also eine Menge Dinge, die wir lernen werden, bevor wir uns mit Gestaltung unseres Designsystems befassen. Also bleib dran mit mir. Wir werden an Rastern arbeiten. Wir werden an Icons und Illustrationen arbeiten. Wir werden an verschiedenen Rastersystemen arbeiten, eine Menge Sachen auslegen, einschließlich unserer Buttons. Dann werden wir einfachere Komponenten erstellen , die wir erstellen werden. Größere Komponenten werden als Moleküle bezeichnet. Wenn Sie über das atomare Designsystem Bescheid wissen. Das ist alles, was wir in dieser Klasse behandeln werden. Wir werden ein ganzes dunkles Thema erstellen, oft App-Lern-App mit Figma. Und wir werden sein Designsystem aufbauen. Und ich werde mit Ihnen meine Techniken teilen, wie wir Auto-Layouts verwenden und wie wir verschiedene Komponenten verwenden und wie wir verschiedene Komponenten einfach miteinander austauschen können oder wir kann sie leicht manipulieren. Ich hoffe, du wirst viel mit mir lernen. Lasst uns gemeinsam lernen und diesen Designsystemkurs mit mir beginnen . Ich treffe dich bald in der Klasse. Bis dahin kümmere dich auf. 2. Einführung in das Entwerfen von System, Vorteile und Ausgaben von Design-Systemen: In diesem Video werden wir über Designsysteme sprechen. Jetzt sind die ersten Fragen , die sich selbst in unseren Köpfen stellen, was tatsächlich gestaltetes System ist. Denken Sie also an alles, was sich in jedem Produkt schminkt. Sie haben, jede mobile App oder ein Unternehmen, zum Beispiel Google. Was auch immer das Layout sie verwenden, Farben, Symbole, Topographie, Ton und Stimme. Was sind ihre Stile, verschiedene Stile von Designs. Dann haben wir Kodierungskonventionen. All diese bilden also tatsächlich ein Designsystem. Denken Sie daran, dass Designsysteme Teil all dieser Dinge sein werden. Ihr Ton und Stil, Ihre Grammatik, Ihre Persönlichkeit, Produkt, Ihre Persönlichkeit, das wird Ihr Stil oder Ihre Stimme Ihres Produkts sein. Und dann haben wir Typografie, Farben, verschiedene Animationen, sogar die Mikroanimationen, auch Teil Ihrer Designsysteme sind. Wie wird die Schaltfläche wann angeklickt, was passiert, wenn Sie auf die Schaltfläche klicken? Oder was wird gehen, welche Animation wird dort eine ganze Zeit spielen. All dies ist also tatsächlich der Teil Ihres Designsystems. Wir werden einige der Säulen des Designsystems untersuchen . Viele von Ihnen haben Designsysteme missverstanden. Viele von uns denken, dass nur die Komponentenbibliothek oder die Pattern-Bibliothek oder nur der Styleguide Ihr Designsystem ist, aber das ist es nicht. Wir werden uns also fünf Säulen des Designsystems ansehen und dann verschiedene Vorteile von Designsystemen betrachten . Was werden die Eingaben sein, tut mir leid, die Ergebnisse von Designsystemen. Lasst uns anfangen und sehen , was das sind. Zunächst werden wir uns die Säulen des Designsystems ansehen . Und das sind eigentlich Markenrichtlinien, die Ihr erster Schritt sein werden. Markenrichtlinien werden hauptsächlich entwickelt, wenn Sie die Logos oder das Markenimage entwerfen. Es beinhaltet Ton und Stimme, Ihre Markenpersönlichkeit. Dann haben wir tatsächlich, was es sagt, ist, dass es Ihre allgemeine Präsenz Ihrer Marke oder Ihres Produkts ist. Zum Beispiel, wenn ich eine Person bin und auf den Markt gehe, mein ganzes Dressing, mein Ton, mein Sprechstil, mein Gehstil, all dies wird der Teil meiner Persönlichkeit sein. Dies sind also die Dinge, die in Ihren Markenrichtlinien definiert werden. Dann haben wir Styleguide. Styleguides enthalten alle Ihre Typografie, Ihre Icons oder Illustrationen. All diese Dinge werden tatsächlich im Styleguide enthalten sein . Meistens handelt es sich um atomares Design. Sie meinen, dass die Grundlagen und Elemente Ihres Designs, die kleinsten Elemente Ihres Designs, Gitter und Gitter ebenfalls Teil davon sind. Dann haben wir eine Bildsprache. visuelle Sprache ist eigentlich das ganze Gefühl Ihres Produkts. Wenn ich nur ein Wort verwende, wird es das Gefühl Ihres Produkts sein, wie sich Ihr Produkt tatsächlich anfühlt. Dann haben wir eine CSS-Bibliothek, obwohl sie am Ende Ihres Prozesses sein wird, aber es ist ein sehr wichtiger Teil. Css-Bibliothek oder das CSS-Framework ist im Grunde der Codierungsstil oder die Codierungsbibliothek, die Sie verwenden. Wann immer Ihre Programmierer eine bestimmte Bibliothek verwenden , müssen Sie als Designer an diese Regeln halten oder Sie müssen diese in Ihre eigenen Entwürfe übernehmen. Wenn Sie sich beispielsweise Bootstrap ansehen, alle Apps oder Websites, die von Bootstrap erstellt wurden, sehen sie fast gleich aus. In ähnlicher Weise haben wir Foundation. In letzter Zeit haben wir Rückenwind CSS. Ich liebe diesen Designer wirklich. Ich habe einige der Kurse von diesem Entwickler gekauft. Eigentlich ist er zuerst ein Designer plus Entwickler , der als Entwickler schwer ist und dann ging er zum Design. habe ich auch Design von ihm gelernt. Dann haben wir Foundation, Bootstrap, Bulmer, das CSS und andere, viele andere CSS-Plattformen. Oder Sie können sie auch Front-End-Frameworks nennen. Diese werden Ihnen dabei helfen, Ihre gesamte Schnittstelle im HTML- und CSS-Format auszurichten . Die letzte ist die Pattern-Bibliothek. Eigentlich ist eine bessere Bibliothek eigentlich die zweitletzte. Aber im Moment, was auch immer in den Sinn kommt, werde ich Ihnen sagen, dass die fünfte Pattern-Bibliothek ist, die Ihre Komponenten sein wird, zum Beispiel Ihre Karten, Ihre wiederholbaren. Zum Beispiel hast du Blogposts. Es gibt Absätze sowie einige Schaltflächen und einige Überschriften. Sie werden diese also kombinieren und eine Komponentenbibliothek erstellen. Sprechen wir nun über die Vorteile von Designsystemen. Viele Leute, meist größere Unternehmen, wenn Sie ein neuer Designer sind, werden sie sich widersetzen, dass wir kein Designsystem benötigen. Und wie du sie überzeugen wirst. Designsysteme werden tatsächlich alle Inkonsistenzen in Ihren Interpretationen beseitigen . Zum Beispiel habe ich etwas entworfen und das wird zum Beispiel eine Schaltfläche entworfen und der Button-Hover-Status wird eine der Button-Hover-Status wird Animation des Schlagschattens haben. Das ist meine eigene Wahrnehmung dieses Designs während ich entwarf. Wenn dieses Design jetzt an einen Entwickler geht, könnte er denken, dass er diese leichte Veränderung im Schatten nicht einmal bemerkt. Diese Probleme werden sich also Zeit zu Zeit sammeln und innerhalb von ein oder zwei Jahren wird es viele Inkonsistenzen geben, und dies wird tatsächlich als UI-Designtiefe bezeichnet. Diese Tiefe wird weiter sammeln. Und das Designsystem kann diese Konstruktionstiefe und auch die Interpretationsprobleme tatsächlich nicht reduzieren . Mein Entwickler denkt vielleicht , dass es etwas anderes ist. Ich denke vielleicht, dass es etwas anderes ist. Diese Interpretationen werden reduziert. Dann haben wir eine einzige Quelle der Wahrheit für Entwickler und Designer. Entwickler wissen, dass dies der Block ist, den sie verwenden werden. Sie werden diesen CSS-Codeblock abrufen und den größten Teil des Designsystems verwenden. Sie enthalten auch codierte Beispiele für diese Komponenten. Dies ist eine andere Sache, die viele Designer nicht verstehen. Dann haben wir bei all unseren verschiedenen Produkten Konsistenz, Einheitlichkeit und kohäsiven Designansatz. Die meisten Dinge wie Sie sehen können, dass Sie Facebook, Google, alle anderen Apps, größere Unternehmen, sie befinden sich auf mehreren Plattformen oder sogar wenn Ihre App nur eine Website-Munition ist Anna, und eine mobile App, nur zur Produkt-App oder zwei Produkt zu Facet Produkt sind zwei Phasen desselben Produkts. Trotzdem können Sie dieses Designsystem Ihnen sehr helfen. Wenn Sie also zwei Phasen haben, können Sie dieselbe Persönlichkeit in beiden Richtungen Ihrer zeigen . Also zum Beispiel, wenn ich eine Person bin und ich trage ein T-Shirt und einen Pyjama oder vielleicht ein paar Turnschuhe. Und wenn ich die andere Seite drehe, trage ich einen Smoking. Das ist wirklich irritierend für die Nutzer. Zum Beispiel ist der Abstand der Schaltflächen Ihres Website-Designs unterschiedlich und in Ihrer mobilen App ist er anders. Dies wird viele Probleme verursachen. Also Kohäsivität, Konsistenz zwischen Ihren verschiedenen Plattformen. Zum Beispiel sieht eine ähnliche App auf iOS gleich aus und auf Android-Handys fast gleich. Dies kann also grundsätzlich mit Designsystemen erreicht werden. Dann haben wir noch eine Sache , dass Entwickler und Designer nicht immer wieder für kleine Designprobleme kämpfen müssen . Zum Beispiel will ich dieses Orange und der Entwickler sagt, ich will dieses Orange, diesen Ton der Orange. Das ist also ein sehr kleines Problem. Sobald Sie uns Designsystem entworfen haben, werden diese Probleme nicht mehr auftreten. Sie müssen die tatsächlichen Probleme des Benutzers oder die größeren Probleme lösen die tatsächlichen Probleme des Benutzers oder , die Sie auf das Gesamtbild schauen müssen . Anstatt kleine Änderungen und kleine Probleme zu sortieren. Hier geht es um die Vorteile des Designsystems. Und schauen wir uns an, was die Ergebnisse des Designsystems sein werden. Viele von uns wissen nicht, was der Output sein wird. Die Ausgabe ist eigentlich eine klare, aktuelle Dokumentation, in der alles erklärt wird. Dann haben wir Richtlinien, Designrichtlinien, Regeln, Stile, alles, was für die Entwickler und für die Designer leicht zu verstehen ist . Zweitens dokumentiert man die Argumentation, warum wir uns für dieses Design oder diese Animation entschieden haben. Das ist eigentlich, das können Sie leicht rechtfertigen. Zum Beispiel ruft Ihr CEO oder Ihr Manager Sie nach sechs Monaten ruft Ihr CEO oder Ihr Manager an und sagt, warum diese Animation so stattfindet. Du kannst ihnen zeigen, dass dies der Grund dafür war. Die Nutzer haben es wirklich geliebt. Vielleicht etwas anderes. Dann haben wir Tools und Prozesse, die Ihnen helfen, das Designsystem täglich zu implementieren. Das heißt zum Beispiel, wenn Sie eine Figma gewählt haben oder ein bestimmtes CSS-Framework oder spezifisches CSS-Framework gewählt haben , können Sie Namenskonventionen sagen. Dies sind tatsächlich verschiedene Terminologien, die sehr große Auswirkungen darauf haben können , wenn Sie mit Ihren Designern und Entwicklern zusammenarbeiten . Ebenso können wir in verschiedenen Prozessen wie zum Beispiel, wir zum Beispiel, wenn ich das gesamte Thema meiner App ändern möchte , zum Beispiel möchte ich ein Update oder mein CEO ruft mich an und sagt, dass wir unser Designsystem auf ein moderneres Aussehen oder vielleicht etwas anderes aktualisieren müssen. Wir können, wir können das auf viele verschiedene Arten umsetzen. Wir können dies in nur einem Produkt implementieren und sehen, wie die Benutzer reagieren. Es gibt viele Prozesse, die Sie entwickeln können , um dieses Designsystem zu implementieren. Und Sie können Ihren Entwicklern oder den Produktmanagern sagen , dass wir dieses Designsystem, diese Designterminologie oder etwas Neues auf diese Weise implementieren werden. Wenn Sie etwas Neues in Ihr Designsystem einbringen , werden wir es so haben. Dies wird unser Prozess sein. Dies sind alles über das Designsystem. Dann haben wir, wir haben die Konstruktionssystemsäulen oder Hauptteile des Konstruktionssystems gelernt die Konstruktionssystemsäulen . Was sind die Vorteile des Designsystems? Ich hoffe, Ihnen hat diese Lektion gefallen. Bis dahin werden wir viel über Designsysteme lernen . Wir werden unser erstes Designsystem in dieser Klasse bauen . Und wir sehen uns bald in einer weiteren Lektion. Bis dahin kümmere dich auf. Tschüss. 3. Zielvorlage in Designsystemen: Wann immer wir unser Designsystem oder das Gebäude als Designsystem beginnen oder das Gebäude als Designsystem , müssen wir als erstes müssen wir eine Zweckerklärung unseres Designsystems erstellen. Zur Zweckerklärung werden wir allen unseren Stakeholdern nur drei oder vier einfache Fragen stellen nur drei oder vier einfache Fragen . Designer, Entwickler, Produktteammanager, CEOs oder Produktmanager oder was auch immer, die Person, die in diese App investiert ist. Die Fragen werden also lauten, die erste Frage wird lauten, was ist das Ziel dieses Produkts? Dann haben wir, warum ist es wichtig? Warum erstellst du dieses Designsystem? Und dann ist der dritte, wie wird es uns helfen? Und der vierte ist, für wen ist es? Es könnte verschiedene Antworten für verschiedene Teams oder verschiedene Apps für dieselben geben, genauso wie diese Fragen. Die Antwort könnte sein, dass unser Designsystem uns helfen wird , unsere Zeit für unsere Produktdesigner und Entwickler zu frei zu haben. Und sie können sich auf große Probleme der Benutzer oder die großen Probleme konzentrieren der Benutzer oder die großen Probleme mit denen die Benutzer konfrontiert sind. Die zweite ist, warum ist es wichtig? könnte es viele Antworten geben, aber ein Beispiel ist hier drüben. Wenn wir keine Innovationen anstreben, wird unser Produkt von unseren Konkurrenten gegessen. Oder es könnte sein, dass unsere Benutzer mit der Inkonsistenz in unserem Produktdesign verwechselt werden können . Drittens ist, wie wird es uns helfen? Wie wird es uns also helfen? Eigentlich wird es im Laufe der Zeit sparen. Wir werden nicht das Gleiche tun. Sie können Diskussionen über die Schaltflächenfarbe oder die Schaltflächengröße sprechen . Dies wird viel Zeit und Geld sparen. Wir werden also wiederholbare Muster haben. Wir können sie immer wieder verwenden. Es wird unseren Entwicklern und Designern viel Zeit und viele Kopfschmerzen sparen . Jetzt ist der vierte, für wen ist es? Normalerweise ist es für unser gesamtes Produktteam. Und sie werden es verwenden, mit Ausnahme des, ich denke, dass der CEO oder der Eigentümer dieses Unternehmens, hauptsächlich die Designer, Entwickler, sogar die Produktmanager. Vielleicht müssen sie sie auch Zeit zu Zeit nutzen, wenn sie Wireframes oder einige Mockups oder ähnliches entwickeln . Dies sind also die Fragen , die Sie Ihren Stakeholdern, Ihren Entwicklern oder Ihren Designern stellen werden , bevor Sie Erstellung eines Designsystems beginnen. Stellen Sie sicher, dass Sie diese Fragen stellen. Sie erhalten zumindest die Richtung, in die dies unser Designsystem sein wird. Dies ist der Zweck gegenüber dem Designsystem. Warum ist es wichtig? Wie wird es uns helfen und für wen ist es? Also werde ich alle Folien mit Ihnen teilen. Es gibt zwei Beispiele hier. Stellen Sie also sicher, dass Sie diese PDF-Dateien und alle Knoten zusammen mit diesem Kurs herunterladen diese PDF-Dateien und alle Knoten zusammen mit diesem Kurs Sie können sie überarbeiten und wann immer ich das poste, müssen Sie es einreichen Ihre Aufgabe können Sie ihn ganz einfach einreichen. Hier geht es um Zweckaussage des Designsystems. Ich hoffe, dir hat das gefallen, etwas Neues gelernt, wir werden uns in einer anderen Lektion treffen. Lasst uns zur neuen Lektion übergehen. Kümmere dich. Tschüss. 4. Designprinzipien und Wie man mit ihnen aufkommt: In diesem Video werden wir etwas über Designprinzipien lernen. Was sind ihre beiden Haupttypen und wie hält man einen Workshop zum Designprinzip ab. Wie Sie alle Ihre Teams zusammenbringen werden und welche Fragen und wie wir diese Prinzipien und Designprinzipien entwickeln werden . Also lasst uns anfangen. Zunächst werden wir vorstellen , was eigentlich Designprinzipien sind. Designprinzipien sind im Grunde Richtlinien, die Ihnen bei Ihrem gesamten Designprozess von Anfang bis Ende helfen werden , wo Sie dort haben, wo die Designrichtung sein wird. Warum also? Weil wir über verschiedene Produkte oder Plattformen hinweg eine bessere Erfahrung oder ähnliche Erfahrung haben können. Nun wird dies klar werden , wenn wir einige der Beispiele sehen werden. Und das ist entzückend und einfach. Das sind nur Worte, aber sie sind sehr wichtig. Diese werden als universelle Prinzipien bezeichnet. Delightful wird für eine ganze Reihe von Produkten gelten . Wenn Sie jedoch zu bestimmten Produkten, einem spezifischen Designprinzip, wie zum Beispiel Intercom-Designprinzip, gelangen spezifischen Designprinzip, wie zum Beispiel Intercom-Designprinzip, möchten, haben sie so etwas wie Designtransaktionen, Design Conversations setzen das dann -Transaktionen. Es bedeutet also , dass Transaktionen sehr robotisch sind, wenn Sie zu einer Bank oder einem solchen Institut gehen oder besuchen , die Leute werden sehr formell sein. Sie werden viel Dokument, Dokumentation und ähnliches benötigen . Sie sind nicht warm und sehr einladend, sind sehr freundlich. Designgespräche statt Transaktionen sind ein Designprinzip, statisch, sehr spezifisch, dass wir ein sehr einladendes oder sehr warmes Gefühl von unserem Produkt haben werden. Warum brauchen wir diese Gestaltungsprinzipien? Dies ist eigentlich Ihr gesamtes Design, Ihr Produktverhalten, Ihr Ton und Ihre Stimme, alles wird tatsächlich Teil Ihrer Designprinzipien sein. Der Hauptgrund dafür ist, dass wir diese Designprinzipien verwenden werden , um bessere Designentscheidungen zu treffen. Das ist eigentlich, man kann sagen, man kann das Schwert des Entwurfsprinzips sagen. Warum brauchen wir das? Wir, wir sind zum Beispiel, wir haben zwei Schaltflächen oder Buttons Styles und wir müssen uns für einen von ihnen oder einem Thema entscheiden, einer von ihnen haben wir mehrere Themen und eines davon, es spiegelt unser Design wider wie herrliche Einfachheit. Und der andere ist ein bisschen, man kann formell sagen oder man kann etwas langweilig in ihrem Thema sagen. Also, für welches wir entscheiden werden, werden wir auf ein reizvolleres und einfacheres Thema oder einen einfacheren Button als auf das komplexe oder das formale Band eingehen reizvolleres und einfacheres Thema oder einen einfacheren Button . Diese Gestaltungsprinzipien werden unsere Designentscheidungen leiten. Sprechen wir darüber, wie wir einen Workshop zum Designprinzip abhalten werden und wie wir diese Designprinzipien entwickeln werden. Der erste Schritt besteht darin , dass wir alle unsere Teammitglieder versammeln werden. Dazu gehören Entwickler, Designer, Texter, SEO-Experten. Dann haben wir Produktmanager oder jeden, der in das Produkt investiert ist, der mit diesem Produkt verknüpft ist. Zweitens erhalten wir eine Stunde alle Materialien, zum Beispiel Post-it-Note oder saure Sharpies, Marker oder was auch immer Sie brauchen. Dann werden wir diese Papiere unseren Teammitgliedern geben unseren Teammitgliedern und sie bitten, mindestens fünf Prinzipien zu schreiben. Wir werden all diese Prinzipien sammeln und sie in einem Board veröffentlichen und wir werden sie neu anordnen und ein Thema konvergieren lassen. Und das Thema ist der nächste Schritt. Sobald das Thema gebildet ist, werden wir es zu kombinieren, indem wir sie abstimmen und sie so werden wir es zu kombinieren, indem wir sie einstufen , dass dies die besten Prinzipien sind. Dies sind tatsächlich die Prinzipien, die unser Produkt widerspiegeln. Das fühlt sich an, als wäre dies unser Produkt. Es geht also eigentlich eher um das Gefühl als um konkrete Designlösungen. Dies ist jedoch tatsächlich der Ton, der die Persönlichkeit unserer Produkte sein wird , können Sie sagen. So können wir sie leicht einstufen und dann wählen , und wir werden fünf von ihnen auswählen. Mehr als fünf Personen werden sie vergessen. Stellen Sie also sicher, dass es sich weniger als fünf Designprinzipien für um weniger als fünf Designprinzipien für Ihr Produkt handelt, das Teil Ihres Designsystems sein wird . Ich hoffe, Sie haben viel gelernt und diese Lektion über Designprinzipien genossen , wie sie unsere Designentscheidungen treffen und wie sie Teil unseres Designsystems sein werden. Lasst uns also zur nächsten Lektion übergehen und etwas Neues lernen. Tschüss. 5. 7 Schritte zum Aufbau deines Designsystems: In diesem Video werden wir einige der Schritte besprechen, wie wir ein Designsystem aufbauen werden. Aber vorher, bevor wir darauf eingehen, werden wir uns verschiedene Dinge ansehen, die wir bereits haben. Wann immer wir also mit dem Aufbau unseres Designsystems beginnen, beginnen wir mit dem, was wir bereits haben. Es gibt also im Grunde zwei oder drei Interessengruppen , für die anwesend sein werden, um zu untersuchen, was wir bereits haben und welche Probleme wir bereits haben. Beginnen Sie also mit Ihren CEOs, Ihren Produktmanagern , Ihrem Marketingmanager sowie mit Ihrem Entwicklerteam und Ihrem Designteam. Fragen Sie sie alle, was sie bereits haben, was sie brauchen, was sind ihre Probleme? Wir werden diese Stakeholder fragen , was sie bereits haben. Was sie bereits haben, heißt UI-Inventar. musst du bauen. Wir werden einige der Schritte in der nächsten Folie sehen. Vorher müssen wir uns also all die verschiedenen Plattformen oder Oberflächen ansehen, im Grunde genommen Oberflächen, die Teil unseres Designsystems sein werden. Beispielsweise benötigen Sie möglicherweise E-Mail-Vorlagen für Marketing Sie benötigen, und Blogbeiträge, Vorlagen oder Blogposts-Designs für das Marketing. Sie müssen verstehen , dass Ihr Designsystem nicht nur Ihre Web- oder mobile App sein wird, sondern auch alle verschiedenen Oberflächen berühren wird. Zum Beispiel Marketing, zum Beispiel, neue Kunden aus Facebook-Anzeigen zu gewinnen. Es wird also viele verschiedene Oberflächen geben, die an Ihrem Designsystem befestigt sind. Lasst uns also zum nächsten übergehen und wir werden alle Schritte sehen. Jetzt werden wir uns sieben verschiedene Schritte ansehen, die wir unternehmen müssen, um unser Designsystem zu erstellen. Wie ich bereits sagte, dass wir mit dem beginnen werden, was wir bereits haben, also werden wir eine Bestandsaufnahme dessen aufnehmen , was wir heute bereits haben. Wir nehmen unser UI-Inventar auf. Es gibt eine Lektion über das Inventar der VAE. Ich zeige dir, wie das geht. Der nächste Schritt besteht darin alle mit Ihrem Designsystem, Ihrem Entwickler, in Ihrem Designteam, Ihren CEOs oder Managern oder anderen Stakeholdern an Bord Entwickler, in Ihrem Designteam, Ihren CEOs oder Managern oder anderen Stakeholdern zu bringen. Sie müssen sie an Bord bringen, die wir wirklich brauchen um unser Designsystem zu entwickeln. Drittens werden die Baseline-Komponenten festgelegt. Basiskomponenten sind also im Grunde die Hauptkomponenten, die die Bausteine Ihres Systems, Ihrer mobilen App oder Ihrer Website sein werden . Ohne das kannst du nichts bauen. Dies sind die Baseline-Komponenten. All das werden wir bauen. Zum Beispiel Ihre Schaltflächen, Drop-downs, all das, was sich bildet. Dann haben wir Billet, Stimmzettel, Topographie, Skalen , Typografie und Farben ist meiner Meinung die wichtigste Teamingkomponente Ihres Designsystems, die nach die wichtigste Teamingkomponente Ihres Designsystems, die Ihre Markensprache definieren wird Ihre Design-Design-Umrisse. Es wird also entscheiden, wohin Ihr Design tatsächlich geht, in welche Richtung. Der fünfte ist Strand, oder? Diese standardisieren diese für Ihre Produkte. Versuchen Sie nicht, Ihr Designsystem zu übertreiben. Der Anfang, man muss einfach nur einfache Dinge erstellen. Sie müssen nicht viel komplexes Designsystem erstellen sind sehr großes Designsystem. Zuerst müssen Sie Türen, alle Farben, Farbpaletten standardisieren , die diese Topographie, Schriften auf allen Ihren Plattformen, Ihre mobile Labor-Website, sie sollten fast harmonisch aussehen, Ich denke nicht identisch, aber harmonisch. Und sie sollten so aussehen, als wären sie Teil desselben Systems oder eines Produkts oder eines Unternehmens. Dann müssen wir das Designsystem in unseren Prozess integrieren . Wir müssen einen Prozess entwickeln wir unser Designsystem entwickeln werden , wie wir das umsetzen werden. Wie sich unsere Entwürfe von figma oder aus unserem Designsystem in unserem Design-Tool gegenüber den Entwicklern in welchem Format verarbeiten werden . Vielmehr werden wir JSON-Sprache nach Sprache oder CSS oder HTML verwenden JSON-Sprache nach Sprache , was auch immer. Sie müssen einen Prozess erstellen. Dann ist das letzte, Ihr Designsystem zu pflegen. Wir müssen es aufrechterhalten. Weil sich das Designsystem ständig weiterentwickeln wird. Sie können kein Designsystem haben , das seit etwa fünf Jahren statisch ist. Sie müssen neue Komponenten erstellen. Möglicherweise benötigen Sie keine Komponente oder eine Schaltfläche, die Sie erstellen müssen. nach ein oder zwei Jahren vielleicht Müssen Sie nach ein oder zwei Jahren vielleicht ein neues Thema für Ihr gesamtes Designsystem erstellen ? Vielleicht benötigen Sie ein dunkles Thema und eine Beleuchtung für Ihr Designsystem. Es wird Änderungen geben, die Sie beibehalten müssen. Es wird also ein Team von Designern oder vielleicht einen Entwickler , der Ihnen dabei hilft, Ihr Designsystem aufzubauen, zu erhalten oder zu warten. Das ist alles, dies sind alles die Schritte beim Aufbau eines Entwurfssystems. Sieben Schritte. In den nächsten Lektionen werden wir ein bisschen mehr besprechen. Und dann fahren wir nach Figma und wir starten unser grundlegendes Designsystem in Figma. Bis dahin nehmen wir, wir sehen uns und treffen uns bald in der nächsten Lektion. Bis dahin kümmere dich auf. Tschüss. 6. Wie man Audit überprüft?: In diesem Video lernen wir, wie Sie Ihr UI-Design-Inventar überprüfen oder was Sie bereits haben. Sie müssen damit beginnen, dass Tugend bereits ein MOU hat oder ein Designsystem baut. Es gibt ein paar Schritte. Ich werde nicht sehr aufwendig darüber sprechen oder es zu einem sehr langen Vortrag machen . Dies wird ein kurzes zwei- oder dreiminütiges Video sein, und wir werden uns ansehen, wie wir unser UA-Inventar prüfen können. Der erste Schritt ist also, dass wir die Screenshots aller verschiedenen Bildschirme machen müssen. Nun, was wir suchen, suchen wir nach Inkonsistenzen. Behalten Sie das im Hinterkopf. Wir suchen nach Inkonsistenzen in Farbe, Diaphyse und Typhoeus Größen, Schriftgrößen. Dann suchen wir nach Inkonsistenzen in Stilen, vielleicht nach Ihren Farbverläufen. musst du nehmen, all diese Inkonsistenzen. Machen Sie die Screenshots, Sie müssen sich jeden Bildschirm ansehen , den wir bereits entworfen oder gebaut haben. Wenn Ihr Unternehmen oder Ihr Produkt neu ist, haben Sie nichts gebaut. Das ist nicht das, was du brauchst. Dies ist der Fall, wenn das Unternehmen bereits etwas gebaut hat und Sie das UI-Inventar prüfen müssen. Nehmen Sie also diese Screenshots all dieser Inkonsistenzen auf, dann gruppieren wir sie in verschiedene Kategorien wie Navigationsheader, Dropdown-Menü, Karten oder was auch immer diese verschiedenen Kategorien sind. Dann können wir sie auch unterkategorisieren Like Button States. Es kann Unterschiede in den Schaltflächenstatus geben. Und dann müssen wir CEO, Ihrem Entwicklerteam oder Ihrem Designteam diese Inkonsistenzen zeigen , dass dies die Inkonsistenzen zwischen Ihren verschiedenen Produkten auf Ihren verschiedenen Plattformen sind . Und das ist alles. Wir müssen aus diesen Inkonsistenzen arbeiten. Wir müssen sie einschränken. Wir müssen sie zu einem Designsystem vereinheitlichen. Ich werde mit Ihnen einen Artikel teilen, der von hier geschrieben wurde . Wir haben den Artikel Ich denke, er ist geschrieben von Ich bin mir nicht sicher. Brad Frost. Brad Foster ist ein berühmter Typ. Das geht um diese Moleküle, Atome und all die Konstruktionssysteme. Sie können hier das Beispiel für die Website meiner Bank sehen. Und hier sehen Sie die ANS-Inkonsistenz in Button-Designs. Es gibt wie ich denke, dass sie zehn verschiedene Arten von Buttons haben. Es gibt verschiedene Stile, sie haben verschiedene Größen. Es gibt mehrere Inkonsistenzen in all diesen Schaltflächen. Sie können also sehen, dass dies nur die Screenshots sind. Er hat es genommen. Noch eins hier drüben. Sie können nur die Schaltfläche Mehr erfahren oder Erste Schritte mit diesem Pfeil sehen . Es hat zehn verschiedene Variationen und das ist wirklich frustrierend. Hier können Sie für jedes C sehen, Sie können hier sehen, dass sie alle unterschiedlich bestehen können Inkonsistenzen in der Schaltfläche. Sie können die Größen sehen, die, sogar die Farbverläufe, sie sind unterschiedlich. Das ist total grau, das ist ein gräulicher Farbverlauf und das ist ein bisschen anders als wir zwei verschiedene haben Sie können die Anmeldung sehen und die vorgeschlagenen haben zwei verschiedene Farbverläufe. Einer ist ein bisschen dunkler und einer ist ein bisschen heller. Sie können die Kasse mit PayPal sehen oder in den Warenkorb legen. Sie sind ich denke, die bedeuten verschiedene Aktionen, aber sie haben die gleiche Farbe. Sie können sehen, dass Sie auf diese Weise verschiedene Inkonsistenzen herausfinden und sie melden müssen. Sie müssen mit diesen UI-Audits beginnen. Sie müssen also eine separate Datei in Figma oder mit welcher Software Sie verwenden, erstellen . Machen Sie diese Screenshots und gruppieren Sie sie in verschiedenen Kategorien und präsentieren Sie sie Ihrem Management. Hier geht es darum, wie Sie Ihr UI-Inventar überprüfen können. Ich hoffe, Ihnen hat diese Lektion gefallen und haben etwas, ein paar gute Kenntnisse daraus. Wir sehen uns bald. Wir sehen uns bald in der nächsten Lektion. Bis dahin kümmere dich auf. Tschüss. 7. Was sind Komponenten des Designsystems: In diesem Video dreht sich alles um Komponenten. Sind die, was, unsere Rasterkomponenten oder wie man eine gute Komponente baut, und wie man sie sortiert, wie man sie kategorisiert und was in einer Komponente vorhanden sein sollte, die es ist, gibt es den größten Wert. Fangen wir an und sehen, wie wir sie benennen wie wir sie kategorisieren werden. Was sollte in der Komponente vorhanden sein? Das erste ist, dass es zwei Haupttypen von Komponenten gibt . Wie werden wir eine Komponente bauen. Versuchen Sie zu sehen, welches das am häufigsten verwendete, von Lee verwendete Ding oder Designelement in Ihrem Design ist. Zum Beispiel werden Schaltflächen immer wieder verwendet, Steuern, die immer wieder verwendet werden. Überschriften, sie werden immer wieder benutzt. All dies sind, können Komponenten sein. Es könnte kleinere Komponenten geben, es könnte große Verbundkomponenten geben, die größere Komponenten sind , die als Moleküle bezeichnet werden. Also schauen wir uns zuerst Hochfrequenzkomponenten an, die Komponenten, die immer wieder verwendet werden. Zweitens werden wir sehen , welche Komponente die Essenz unserer Marke oder Show zeigen wird . Sie können sehen, wann immer ein Kunde Komponente anschaut, wird vermuten, dass dies das Produkt von Google ist. Das ist Airbnb. Wir müssen, diese Komponenten, sie haben hochwertige Komponenten weil sie Ihre Marke zeigen werden . Sie werden die Geschichte Ihrer Marke erzählen. Man muss sie also auch kategorisieren. Sie müssen, Sie müssen auch hochfrequente Komponenten mit hohem Wert erstellen . Was ist anders? Man kann verschiedene Eigenschaften einer guten Komponente sagen. Das erste ist also zielstrebig. Wann immer Sie eine Komponente erstellen, sollte dies unser Designproblem lösen. Wenn es kein Designproblem löst, denke ich , dass es keine Komponente ist. Zweitens ist das wiederverwendbar? Wiederverwendbar bedeutet nicht, dass wir immer wieder denselben Knopf benutzen müssen. Wiederverwendbar bedeutet, dass wir seine Farbe und Form leicht ändern können . Es ist nicht gut für einen einmaligen Anwendungsfall oder wird nicht nur in Formularen verwendet. Du kannst sie überall benutzen. Drittens muss es flexibel sein. Flexibilität kommt von, Sie können seine Farbe ändern, Sie können seine Größe ändern, Sie können den Stil ändern. Dies sind also drei Dinge, die es flexibel machen, Größe, Farbe und Stil. Vielleicht kannst du denselben Button skizzieren und ihn woanders benutzen. Das heißt, ich zeige Ihnen hier ein paar Beispiele. Mal sehen, sehen wir uns ein Beispiel an. Hier. Du kannst sehen, lass mich es dir zeigen. Sie können hier sehen, wenn Sie sich diese Airbnb-Seite ansehen, diese größere Komponente, diese Top-Header-Komponente, in der wir Alle Fotos anzeigen haben , die sehr spezifisch für Airbnb sind. Wann immer Sie dies zeigen, nur dieses ganze Produkt, diese ganze Komponente, die größere Komponente, überall, wo jeder vermuten wird, dass dies eine Airbnb-Website ist. Andererseits zeigt diese Komponente hier drüben, diese 1 $13 pro Nacht, dieser ganze Block von Kartenpreiskarten oder Check-out-Karte tatsächlich diese 1 $13 pro Nacht, dieser ganze Block von Kartenpreiskarten oder Check-out-Karte tatsächlich die Essenz dieser ganzen Marke, dieser Hole Company oder Firma. Eins. Dies wird sehr, sehr einzigartig für dieses Produkt sein. Dies sind also hochwertige Komponenten. Kommen wir zur Wiederverwendbarkeit der Flexibilität einer Komponente. Sie können hier sehen, hier haben wir die Verfügbarkeit prüfen, einen sehr schön gestalteten Button. Und wenn wir uns hier abkühlen, können Sie sehen, dass dies wieder ein Button ist, der alle 11 Annehmlichkeiten zeigt. Und es ist dieselbe Form, gleiche Höhe, gleiche Kurven der Ränder, Rundheit der Ränder, Ecken und der gleiche Stil, gleiche Größe, alles, sogar die Textgröße ist gleich, nur die Farben sind anders und es gibt Stil verschiedene Software, dünne Grenzlinie. Dies wird als Flexibilität einer Komponente bezeichnet. Dies ist also eigentlich eine gleiche Komponente, aber mit einem anderen Stil. Das sollten Sie also in einer Komponente haben, Wiederverwendbarkeit und Flexibilität bei der Lösung eines Problems. Zum Beispiel können Sie hier sehen, dass dieser Button tatsächlich alles zeigt, was dieser Ort bieten wird. Es verbirgt tatsächlich einige der Funktionen. Wenn Sie also darauf klicken und das wird angezeigt. In allen verschiedenen 11 Annehmlichkeiten hier drüben. Ähnlich, aber diese Schaltfläche, dies löst tatsächlich ein Problem, das sehr einzigartig ist, das ist tatsächlich eine einzigartige Produktfunktion , die tatsächlich die Verfügbarkeit überprüft. Dies wird tatsächlich buchen oder Ihnen die Verfügbarkeit dieses Ortes zeigen . In ähnlicher Weise können Sie diesen Button sehen, das ist völlig anders. Es hat eine kleinere Größe, es hat ein Symbol, es hat weniger Abstand , weil es einem anderen Zweck dient. Insgesamt. Es wird dir alle Fotos zeigen. Dies sind verschiedene Schaltflächenstile und dies sind sie haben unterschiedliche Zwecke. Okay, das ist es also. Gehen wir zur nächsten Folie. Die nächste Frage ist, wie wir sie gruppieren werden? Wie werden wir diese Komponenten benennen? Dies ist eine sehr große Frage. Das erste ist, sie immer zweckmäßig zu kategorisieren. Wenn Sie also Überschriften oder Texte haben, befinden sich diese auf einer einzigen Seite, Style-Guide-Seite auf der Sie alle Texte stylen werden. Dann haben wir Zweck ist wie zum Beispiel, wir haben eine Checkout-Seite. Sie sind, wir haben eine Airbnb-Eigenschaftenseite, zum Beispiel, wir haben eine Eigenschaftenseite. wird uns leid tun. Wir werden all diese Karten gruppieren oder alle zugehörigen Komponenten , auf denen sich befinden werden, beziehen sich auf diese bestimmte Seite oder diese spezifische Funktion. Du wirst sie so gruppieren. Es wird Ihnen also helfen, größere Komponenten zu erstellen oder größere Komponenten zu gruppieren, wie wir Karten haben. Wir können diese Karten nicht auf verschiedenen Seiten planen. Zum Beispiel, alle Karten, die sich auf die Produktseite beziehen, müssen wir sie auf einer einzigen Seite aufbewahren. nächste Mal, wenn ein neuer Designer hereinkommt, kann er leicht erkennen, dass dies alle Komponenten sind, die mit unserer Produktseite zusammenhängen. So gruppieren Sie Ihre Komponenten. Lassen Sie mich Ihnen als Nächstes einige der Namenskonventionen zeigen. Zum Beispiel Überschriften. Wir können Mega-Kreis H1, H2, H3 haben. Wir können sie auch in Bezug auf das benennen , was die Programmierer tatsächlich verwenden. Wir sind vertraut mit Heading Dash Blog. Sie können sehen, dass dieser Überschriften-Punkt-Dash-Blog sehr mit dem Zweck dieser Überschrift zusammenhängt und nicht mit ihrer Größe. Ich kategorisiere oder verwende den Namen basierend auf dem Zweck dieser Überschrift, dass es die Überschrift des Blogs sein wird , Blogbeitrag. Dann haben wir Karten, Leihkarten, Anmeldekarte, Fußzeile, groß. Dies sind verschiedene Autos, die spezifisch bezahlt werden, oder Sie können namensspezifisch sagen , dass dieser Name den Zweck anzeigt . Drittens ist Button. Nennen Sie Ihre Tasten niemals wie blauer Knopf, roter Knopf, grüner Knopf. Das zeigt oder erzählt nicht die Geschichte eines Zwecks. Sie müssen sie als primäre Aktionsschaltflächen benennen. Sekundäre Aktionsschaltflächen Dropdown-Schaltflächen sind vielleicht können Sie sie auch als Checkout-Buttons oder Checkout-Seite bezeichnen Checkout-Buttons oder , etwa so. Das zeigt den Zweck dieses Buttons an. Lassen Sie mich Ihnen also das Beispiel zeigen. Lassen Sie mich Ihnen hier wieder dieselbe Seite zeigen, Airbnb, das Sie hier sehen können, wenn Sie sich diesen rosafarbenen roten Knopf ansehen, ist es tatsächlich der primäre Aktions-Button hier drüben. Es ist also der primäre Button hier auf dieser Seite. Wenn man sich alle anderen Knöpfe anschaut, zeigen sie nicht so viel von einem Bop. Bop bedeutet, dass sie nicht sehr sichtbar sind oder etwas gedämpft sind oder in ihrem Stil eingeschränkt waren. Und man kann Sättigung sagen. Sie können sehen, dass dies ein grauer Knopf ist, wieder weiß und grau hier drüben. Wenn wir hier rüberschauen, ist dies wieder ein gräulich-weißer Knopf. Es hat keine Farben. Wenn wir dann runtergehen, wenden Sie sich erneut an den Host. Button, der stumpf und grau gemischt ist, fast gemischt mit dem Hintergrund. Aber Sie können hier sehen, wenn wir es von mir herunterbringen lassen, können Sie sehen, dass die Verfügbarkeit der Schecks immer noch oben steht und es zeigt Ihnen, dass es sich um eine primäre Aktion handelt, aber Sie müssen sie benennen dass dies eine primäre Aktionsschaltfläche ist. Und Sie können hier sehen, dass dieser Stil tatsächlich unsere sekundäre Aktionsschaltfläche oder Tertiär-Action-Button ist . Dies ist also die Hierarchie und der Zweck, der in Ihr Designsystem integriert ist . Ich hoffe, Ihnen hat diese Lektion gefallen und etwas Neues gelernt. Ich treffe mich bald in der nächsten Lektion. Bis dahin kümmere dich auf und tschüss. 8. So funktioniert Hierarchie von Komponenten in Designsystemen: In diesem Video werde ich über verschiedene Ebenen oder Hierarchie von Komponenten sprechen . Hierarchie bedeutet nicht , dass welche Komponenten wichtiger sein werden. Es geht darum, welche Klassen von Komponenten von Basic bis Advanced unterschiedlich sind . Die erste ist eigentlich Ihre grundlegenden oder stationären Komponenten, die Ihre Schaltflächen sein werden, um Ihre Eingabefelder zu bilden , die tatsächlich sind, Sie sind auch Ihre Symbole. Diese werden auf sehr grundlegender oder basisierter Ebene sein. Dann haben wir Verbundbauteile. Dies sind die Komponenten, die ein bisschen größere Komponenten sein werden, aber sie werden durch die Kombination von zwei oder drei Komponenten hergestellt. Zum Beispiel haben wir eine Kopfzeile in der Navigation, die verschiedene Links und vielleicht eine Schaltfläche und ein Logo kombiniert . Dies ist eine zusammengesetzte Komponente. Dann haben wir Container. Container sind eigentlich, Sie sind zum Beispiel ein Abschnitt, zum Beispiel habe ich einen Container mit Nachrichtenkarten. Es wird also ein Container sein, es wird 1234 verschiedene Nachrichten haben. Ich zeige dir die Beispiele. Keine Sorge, mach dir jetzt keine Sorgen. Dann haben wir ein Layout. Das letzte ist das Layout. Wir müssen den Entwicklern zeigen, dass es sich um andere handelt, wie Sie all diese Container auf einer Seite auslegen werden. Dies wird der letzte Teil sein. Stellen Sie sicher, dass Sie bei der Erstellung einer Komponente ihren Zweck angeben müssen, was sie löst und was der Grund dafür war. Das hast du auch dokumentiert. Lassen Sie mich Ihnen einige der Beispiele zeigen. Und hier haben wir die New York Times. So können Sie oben sehen, dass wir dieses Abonnement jetzt haben. Dies ist eigentlich ein Composite, eine Komponente oder eine große Komponente und es hat hier einen Button, Text und Logos. Wenn wir runtergehen, sehen Sie hier drüben, das ist der beste. Dies ist wieder eine zusammengesetzte Komponente. Oder Sie sehen unseren Container, vielleicht einen Container, weil es sich einen Header handelt und etwas Platz hat. Viele Styling sind wie diese Navigation, ist eigentlich Navigation ist eine zusammengesetzte Komponente. Und dann haben wir zwei Knöpfe. Dann haben wir diese Temperatur, Datum und alles hier drüben. Es handelt sich also um eine Komponente, zusammengesetzte Komponente, und es ist auch Teil des Layout-Containers. Es ist eigentlich ein Container. Das ist also eigentlich unser Header oder Masthead. Dann können Sie auf der linken Seite sehen, dass wir sehr große Neuigkeiten haben, die eigentlich eine sehr spezifische Komponente , die für diese Marke oder diese New York Times spezifisch ist. Und Sie können sehen, dass dieser Farbstoff das Styling fürchtet. Dieser kleine Text, großartig x. Es zeigt bereits, dass dies eine Nachricht von der New York Times ist. Auf der rechten Seite sehen Sie noch einmal, dass wir eine Feature-News auf der rechten Seite haben, und es ist eine völlig andere Komponente. Auf der rechten Seite haben wir einen separaten Container, der alle verschiedenen Neuigkeiten enthält. Auf der linken Seite haben wir einen Container, tatsächlich 60 oder 60% entspricht, 70 Prozent der Breite und nur verschiedene Nachrichten im Layout von oben nach unten enthält . Eigentlich wird dies beim Erstellen des Layouts helfen. Das Layout wird sein, dass wir einen Feature-Namen haben, der hier drüben ist. Dann haben wir eine kleine Komponente, kleine Nachrichten live, etwas hier drüben. Dann müssen wir Nachrichten oder schlechte Nachrichten überschriften haben. Dann haben wir hier wieder eine vorgestellte kleine Feature-News. Ich denke, es ist wieder, das Feature dasselbe Styling, man sieht fast das Gleiche. Nur die SMS. Die Dex-Behandlung der Überschrift ist anders, alles ist gleich. Sie können sehen, dass dies tatsächlich das Layout ist. Sie müssen ihnen diese Funktion mitteilen. Dann müssen wir etwas Text, Textnachrichten und dann wieder ein Featured zeigen . Dann siehst du wieder, dass wir ein paar Grafiken und ein grafisches Element haben. Diese ganze Verbundkomponente ist eigentlich ein Container. Dies sind eigentlich die Updates. Sie können sie Update-Container-Updates aller Coronavirus-Nachrichten nennen . Und dann haben wir wieder eine weitere Nachricht, die wieder vorgestellt wird. Das ist nur diese linke Seite. Wenn Sie jetzt auf die rechte Seite schauen, ist das Layout völlig anders. Wir haben diese erste Komponente, die unsere Feature-News sind, auf der rechten Seite. Dann haben wir wieder Text, damit Sie die Ähnlichkeiten in der Wiederholung desselben Schlafzimmers sehen können die Ähnlichkeiten in der Wiederholung . Also nochmal haben wir zwei Texte News, dann haben wir es wieder. Ein Meinungsgebrauch. Okay, also eine weitere Sache ist auf der rechten Seite, Sie können sehen, dass die verwendete Schrift sehr unterschiedlich ist. Es ist sehr groß. Und wieder haben wir etwas mit einem Bild vorgestellt. Auch hier noch ein paar Neuigkeiten oder vielleicht Artikel. Dann nochmal noch eine, die wieder mit kleinem Video zu sehen ist. Wieder zum Feature, der Funktion oder ähnlichem. Und dann haben wir das auch eine Art von Dingen. Dies ist tatsächlich, das werden Sie ihnen im Layoutteil Ihres Designsystems mitteilen. Das ist ein bisschen fortgeschritten. Wenn Sie ein sehr großes Produkt sehr großer Produkte haben, müssen Sie ihnen zeigen, dass Sie auf diese Weise Ihre Zielseite oder die erste Seite auslegen werden . Wenn Sie dann zu diesem Geschäft gehen, wird es ein anderes Layout haben. Sie können sehen, dass das Layout des oberen Abschnitts geändert wurde. Sie können sehen, dass das zerquetscht wurde. Sehr klein. Navigation oben. Dann haben wir dieses neue Komponenten-Business-Deck, dem wir verschiedene Geschäftskategorien haben. Und Sie können sehen das Layout geändert wurde, völlig geändert wurde. Sie können jetzt sehen, dass wir drei Spalten auf dieser Seite haben. Wir haben also diese Feature-News als etwas kleinere Feature-News. Dann haben wir auf der rechten Seite, wir haben wieder zwei verschiedene Neuigkeiten, die zusammenhängen, dass ich ein kleines Bild habe und Styling anders ist. Ein bisschen Anordnung in verschiedenen, aber die Grundkomponente, das Textil, diese Textbehandlung ist fast gleich. Dann haben wir diesen Container hier drüben. Dies ist wieder ein Container mit Feature-News oder ähnlichem. Es war auch mit dem größten Lohn präsent. Lass mich dir zeigen, ob wir nach unten ziehen. Mal sehen, dass wir dieselbe Komponente haben. Dies ist eine übliche Verbundkomponente oder Container. Sie können sehen, dass es vier Wachen enthält , die im Grunde Neuigkeiten sind. Es wird sich unten noch einmal wiederholen, wenn ich runtergehe, kannst du wieder sehen, dass es hier wiederholt wurde. Und nochmal, stell es hier rüber. Und schon wieder. Dasselbe wurde hier wiederholt, vier Bereiche. Und das ist alles. So erstellen Sie Ihre Komponenten. Dieser Button ist eigentlich unsere Basiskomponente, die grundlegende Startkomponente. Dies ist wieder dieser Link, Sie können diese Linkbehandlung sehen. Dies ist wieder eine Basiskomponente. Und diese ganze Navigation ist eine zusammengesetzte Komponente. Dieser ganze Abschnitt ist ein Container. Es hat viele Komponenten, die im Layout angeordnet sind , um diesen übereinstimmenden Hetero-Header zu erstellen. Ich hoffe, Sie haben all diese verschiedenen Layout-Container-, Basiskomponenten- oder Verbundkomponenten-Sache. Lasst uns zur nächsten Lektion übergehen und dann etwas Neues. Bis dahin kümmere dich auf. Tschüss. 9. Token, Roles in Design-System: Wenn Sie mit dem Aufbau eines Designsystems beginnen möchten, müssen Sie verstehen, was Token und ihre Werte und ihre Rollen sind . Das ist also die Lektion über sie. Dies ist die wichtigste Lektion, denke ich in diesem ganzen Kurs oder in dieser ganzen Klasse. Lasst uns also anfangen und sehen, was sind diese Token und ihre Werte. Okay, also nur um zu verstehen, dass Token tatsächlich ein Code ist, wird es tatsächlich aus dem extrahiert, was Entwickler verwenden. Sie haben früher eine Variable einem Wert zugewiesen. Dies ist eigentlich das gleiche Konzept, das in das Designsystem importiert wurde. Was wir tun, ist zum Beispiel, dass wir ein Token von Texten haben. Text-Token kann also die Regel von Primärtexten angewendet werden, es könnte ein Schaltflächentext sein, es könnte alles sein. Jede Regel oder jede Token-Rolle könnte also unterschiedlich sein. Es gibt also fünf oder sechs oder vielleicht 20 Token in Ihrem Design-Designsystem. Und es gäbe zwei oder drei verschiedene Rollen für jedes Token. Zum Beispiel können wir dem Text die Regel der Primärtexte geben . In ähnlicher Weise ist der Wert tatsächlich die Variable oder statisch. Es tut mir leid, der Wert wird variabel sein, Name wird statisch sein, was eigentlich das gleiche Konzept ist, das wir bei der Programmierung verwenden. Wenn Sie aus einem Programmierhintergrund stammen, wissen Sie das bereits, dass wir einen statischen Namen einer Variablen haben und sich dann der Wert tatsächlich ändert. Entwerfen Sie Token. Sie können sehen, dass wir Tabelle, Hintergrund, Seite, Hintergrund, Beleuchtungswert, dunkle Themenwerte haben. Oberfläche ist eigentlich das, was sich oben auf diesem Hintergrund befindet. Komponente BG oder Sie können sagen, dass es sich um eine Karte BD handelt, Sie können sie nach dem benennen, was Ihre Entwickler oder Ihr Team verwenden. Vielleicht verwendet Ihr Team Karten, verwenden Sie Karte BG für Hintergrund, helles Thema, dunkles Team, Textwert, Text-Token wird primären Text haben. Und dann haben wir Licht, das helle und dunkle Team. In ähnlicher Weise haben wir Texte stumm geschaltet. Interaktive Aktion ist eigentlich die Schaltfläche, die Sie auch verwenden können. Anstatt interaktive Aktionen zu deaktivieren, können Sie stattdessen die Schaltfläche verwenden. Das ist kein sehr, man kann sagen, alles hängt davon ab, was Ihr Team tatsächlich verwendet. Oder Sie können Schaltflächen und Links auch separat verwenden. Das liegt an Ihnen, interaktiv auf Texten oder Button auf Text, das liegt an Ihnen. Sie können also sehen, dass wir das Konzept der Token und deren Rollen fast verstanden haben. Sprechen wir jetzt darüber, wie wir sie nennen werden. Es gibt eine sehr einfache Methode, bei der wir zuerst die Kategorie verwenden müssen, dann eingeben müssen, was ist der Typ dieser Komponente oder Token, dann Element und dann ihren Status. Zum Beispiel haben wir eine Kategorie von Buttons. Und der Typ wäre, um welche Art von Schaltfläche es sich handelt. Es ist eine Call-to-Action-Taste oder eine stummgeschaltete Schaltfläche oder was auch immer es ist, eine deaktivierte Schaltfläche. Also haben wir Button-Dash oder kleine Dash CTAs, CTAs für Call to Action Button. Dann haben wir einen Strich, was ist der Gegenstand? Es ist eigentlich ein Hintergrund. Dann haben wir Item ist tatsächlich Staat. Also hier haben wir keinen Staat , weil es eine Farbe ist. Also wird die Farbe tatsächlich nur die Hintergrundfarbe abrollen lassen. Wir nennen es Button CTA, Hintergrundfarbe. Das wird unser Name sein. In ähnlicher Weise können Sie viele verschiedene andere Namen verwenden. Wenn Sie beispielsweise nur einen Abschnitt oder eine Schaltfläche oder einen Text benennen einen Abschnitt oder eine Schaltfläche oder einen Text oder wenn es eine Schaltfläche gibt, wird der Status aktiv oder deaktiviert oder gedrückt, etwa so. So wird der Staat am Ende sein. Hier ist ein Beispiel für den Code, der von Entwicklern verwendet wird. Ich füge es einfach hier ein, damit du verstehen kannst , was es sein wird. Sie können hier sehen, dass wir ein Token der Hintergrundfarbe haben, dann haben wir einen anderen Wert oder eine andere Regel darauf angewendet. Hintergrundfarbe Licht. Hintergrundfarblicht ist eigentlich ein helles Thema. Und dann haben wir Grenze, Grenze, Haaransatz, Grenzradius. Es könnte ein regelmäßiger Grenzradius der Rolle oder so ähnlich sein. Vielleicht haben wir über den Radius etwas vielleicht drei oder zwei verschiedene Rollen, die wir hier anwenden können. Es ist also sehr einfach, ein Thema in etwas zu ändern. Ebenso können Sie hier sehen, dass Bill Reverse tatsächlich Hintergrundfarbe ist, dunkle Randfarbe ist eigentlich Hintergrundfarbe, dunkle Farbe, Textfarbe Licht. Das ist also umgekehrtes Schema. Dies ist wirklich, sehr einfach, wenn Sie wissen, wie man Token ernennt, und es sind Variablen und ihre Werte. Hier ist eigentlich die visuelle Darstellung dessen, worüber wir gesprochen haben. Dies ist der Hintergrund. Dann haben wir eine Oberfläche an der Spitze. Dann haben wir Text, bei dem Sie sehen können, dass der Text unsere Überschrift oder Absatzüberschrift ist. Dann haben wir Texte stumm geschaltet, was ein bisschen langweiliger Text ist. Es ist kein sehr scharfer oder normaler Text, es ist ein Delta x. Dann haben wir eine interaktive Aktion, die eine Schaltfläche ist, bei der es sich um einen Button-Hintergrund handelt. Und dann haben wir interaktiven eigenen Text auf Text, was bedeutet, dass es die Schaltfläche auf dem Text ist. Sie können stattdessen button verwenden, wenn Sie möchten. Das ist eine andere Sache. Auf der rechten Seite sehen Sie, dass wir Ihre Versandart angepasst haben. Es ist ein umgekehrtes Thema der gleichen Sache, sodass wir die Werte nach Belieben ändern können. Dies ist das einfachste Konzept von Tokenrollen und -werten. Wie wir sie verwenden können, um ein ganzes Thema leicht in etwas anderes zu verwandeln. Und wir können auch unsere Arbeit verkürzen, viele Variablen zu behalten. Token sind eigentlich die Lösung für all dieses Design-Chaos. Wir haben also 15 oder 20 verschiedene Farben zu verwenden. Verschiedene Oberflächen, verschiedene Schatten, unterschiedlich. Sie können den Abstand sehen. Alles, was Sie tun können, ist ihnen einfach ein Token zuzuweisen und die Regeln zu ändern. Das ist alles. Ich hoffe, Ihnen hat diese Lektion gefallen. Wir werden zu einer anderen Lektion übergehen , um etwas Neues zu lernen. Lasst uns zur nächsten Lektion übergehen. 10. Typografie für dich Design-System: In diesem Video vereinfachen ich Ihr Designsystem, in dem wir über Typografie sprechen. Wo fällt unsere Topographie in das Designsystem und wie viele Größen werden wir verwenden? Wie werden wir diese Diaphyse und ihre Größe nennen? Also lasst uns anfangen. Jetzt muss der erste Schritt sein, dass wir eine Basisgröße auswählen und mit ihm beginnen müssen. Sie müssen also Ihre Textgröße auswählen, die Ihre Basisgröße entspricht. Zum Beispiel 16 Pixel, 18 Pixel, 19 Pixel, das hängt von der TI-Phase ab. Und wenn Sie mehr darüber erfahren möchten, können Sie an meinem Typografieunterricht teilnehmen. Sobald Sie sich für Ihre Basisgröße entschieden haben, die lesbar, leicht lesbar und nicht lesbar ist , erzeugen Sie eine Typografieskala. Auf der nächsten Seite werden wir unsere Zeilenhöhe entscheiden. Wenn wir also möchten, dass unser Design sehr flächig ist oder wir haben, möchten wir ein modernes Layout haben. Es wird mehr Platz zwischen der Zeilenhöhe haben . Wenn Sie ein Tanzdesign wünschen, bei dem wir zum Beispiel eine Nachricht oder einen Blog haben, in dem wir es zeigen möchten, als hätten wir eine Zeitung oder vielleicht eine andere Website , die ein sehr dichtes Layout und ein dunkleres Layout verwendet , haben wir um sie näher zu bringen. Die Zeilenhöhe wird geringer sein. nächste Frage ist, wie wir unsere Typskala oder verschiedene Typengrößen benennen müssen. Was ich eigentlich mache, ist, dass ich tatsächlich für maximal vier oder fünf verschiedene Kategorien verwende. Als hätten wir eine Mega-Überschrift, die oben in unserem Hero-Image-Bereich vorhanden sein wird , ganz oben, wenn Sie auf einer Zielseite der Website landen. Dann haben wir in diesen drei Rubriken Rubriken 123, größte Überschrift, zweite Überschrift und dritte Überschrift. Dann haben wir normale Texte, nämlich Absatz , der unsere Basisgröße ist. Dann haben wir Beschriftungen oder kleinen Text oder Metadaten, wo wir unsere haben, können Sie sagen, wenn Sie rot lesen, haben Sie alle Blogbeiträge gelesen, die Sie gesehen haben, dass sie nach dem Namen des Autors und dem Datum geschrieben sind sind eigentlich Metadaten. Wir verwenden tatsächlich eine sehr kleine Größe für Metadaten oder eine kleine Typhusgröße für Metadaten oder Beschriftungen. Das wird unsere kleine Kategorie sein. Dann haben wir vielleicht eine andere Größe für unsere Schaltflächen, was auch immer der Text auf den Schaltflächen sein wird , vielleicht verwende ich 18 Pixel für meinen Text, Absatztext und vielleicht bin ich es mit 19 Pixel auf einer Schaltfläche. So teile ich die Größe tatsächlich auf. Es gibt verschiedene Methoden, Leute anders. Vielleicht könnte Ihr Unternehmen Größe 123456 verwenden oder die Größe extra klein, klein, mittel, groß, mega, so etwas. Es liegt an Ihnen, wie Sie Ihre Typskala benennen. Dann können Sie sie auch auf der Grundlage ihres Zwecks benennen oder kategorisieren. Zum Beispiel haben wir Storytitel, Überschriften, Überschriften, Abschnittsüberschriften für Hauptkopien, Metadaten, Beschriftungsschaltflächen , die wir tatsächlich besprochen haben, wie ich sie tatsächlich benenne. Dies sind verschiedene Kategorien. So benennen Sie das Typografiesystem. All das werden wir in unserem letzten Abschnitt tun, in dem wir tatsächlich unser erstes Designsystem entwerfen werden. Also bleib dran, bleib bei mir und wir werden in den nächsten Lektionen viel sehen. Also bis dahin, kümmere dich auf. Tschüss, wir treffen uns in der nächsten Lektion. Lasst uns weitermachen. 11. Abstandssystem definieren: Der nächste Schritt im Designsystem besteht darin, dass wir ein Abstandssystem erstellen müssen. Sie können sehen, dass es sich tatsächlich um einen vertikalen und horizontalen Abstand handelt , beide in den meisten Websites oder in den meisten Designs bei denen wir kein Designsystem für eine sehr, sehr große App entwerfen . Normalerweise benötigen wir möglicherweise den vertikalen Abstand. Wie Sie zuerst Ihren Abstand beginnen , ist, dass Sie Ihre Basisnummer auswählen müssen, genau wie Ihre Typografie. Sie müssen Ihre Basisnummer auswählen z. B. ein Vier-Pixelraster oder acht Pixel für Pixel ist etwas flexibler. Es kann Größen wie 12 Pixel haben, wenn Sie eine Lücke zwischen sehr kleinen Elementen auf Ihrem haben möchten eine Lücke zwischen sehr kleinen Elementen auf Ihrem haben Vielleicht entwerfen Sie eine Tabelle voller Dateninformationen. Möglicherweise benötigen Sie vier Pixel. Und wenn Sie eine Website erstellen, sind acht Pixel meiner Meinung nach mehr als genug. Okay, also der nächste ist, sobald du deine Basis ausgewählt hast. Außerdem musst du deine Waage auswählen, du musst zum Beispiel deine Skala vergrößern, dann springen wir auf 16 oder vielleicht acht oder vielleicht auf die Größe, die du wählst. Wir werden ungefähr sieben oder acht verschiedene Schritte haben. Das ist einfach, es ist genau wie eine Leiter zu bauen. Sie geben also einen Schritt an und gehen dann nach oben. Und als würden wir eine achtstufige Leiter haben. Der nächste ist weniger oder mehr Kontrast zum Abstand. Es ist das gleiche Tanz- oder Luftdesign, wenn Sie ein sehr neu gestaltetes, modernes Design wünschen , bei dem wir viel leeren Raum haben, dann werden wir eine größere Lücke zwischen unserem Abstandssystem haben . Zum Beispiel. Zuerst wäre vielleicht unser erster Start 16 Pixel, dann der 32, dann vielleicht 64. Darüber hinaus werden wir größere Abstandsschritte haben . Lasst uns nun dazu kommen, wie wir sie nennen werden. Es gibt zwei Möglichkeiten. Erstens muss man sie mit ihrer Krawatte benennen. Wenn es sich beispielsweise um einen vertikalen Abstand handelt, der horizontale Abstand, was auch immer er ist. Und Sie können das auch tun, oder Sie können den gesamten Abstand in einem System mischen , einen Buchstaben. Und Sie können sagen, dass wir Platz 01234 haben, bis zu zehn oder 15, was auch immer Sie verwenden möchten, aber ich denke, dass bis zu zehn mehr als genug wären. zweite Teil besteht darin, dass, wenn Sie beispielsweise für Mobilgeräte für Ihr Design entwerfen, Räume ändern oder auf kleinere Räume verlagern, wenn Sie auf mobile Apps oder mobile Größe wechseln. Zum Beispiel, wenn Sie eine Website haben und eine reaktionsschnelle oder kleinere Version dafür entwerfen eine reaktionsschnelle oder kleinere Version , wie sie auf einem Mobiltelefon angezeigt wird. Die Größen werden sich verschieben. Sie können auch angeben , dass Leerzeichen 0 16 Pixel auf dem Desktop entspricht. Leerzeichen 0 ist acht Pixel auf einem Handy. Sie können dieses System also in zwei verschiedene Zweige generieren . Es wird also abgerufen, es würde dasselbe bedeuten, dass dort, wo wir Speicherplatz 0 verwendet haben, es auf einem mobilen Gerät dorthin wechseln würde. So können Sie eine Harmonie in Ihrem Design erreichen. Und Sie können ein Abstandssystem haben, das Ihre gesamten mobilen Apps, Ihre iPads und Ihre Desktop-Ansichten aufweist und hochgeht Ihre gesamten mobilen Apps, Ihre iPads und Ihre Desktop-Ansichten aufweist . Wenn es eine App oder eine Website gibt, die von Desktop über Tablet bis hin zu Mobilgeräten reicht, können Sie ein Abstandssystem haben bei dem das gesamte Abstandssystem drei Zweige für Desktop, Tablet und mobil. So werden Sie Ihr Abstandssystem haben und so werden Sie es Space 01234 nennen. Normalerweise mache ich normalerweise nicht viel getrennte Leerzeichen. Was ich eigentlich mache, ist, dass es einfacher wäre , wenn das System kleiner ist. Wenn Sie also ein sehr großes System haben, sind Sie wie zwei oder drei Entwicklungs- und Entwicklerteams Entwicklungs- und Entwicklerteams oder vielleicht vier oder fünf verschiedene Designer, dann wird das nicht funktionieren. Was ich tatsächlich mache, ist in meiner freiberuflichen Arbeit, ich nenne oder markiere den Bereich darin tatsächlich. Also zuerst den Kategorieabstand. Zweitens ist vertikal, wie der Gegenstand mit einem Spurt vertikal oder horizontal. Dann schreibe ich tatsächlich das Leerzeichen. Sie können vielleicht das vertikale Leerzeichen verwenden. Und das ist alles. Aber normalerweise versuche ich zu erwähnen dass es 20 Pixel, 32 Phasen, 40 Pixel, 64 Pixel, 44 Pixel sind, was dir überlassen ist. Es gibt also diese, das sind zwei Methoden. Daher würde ich vorschlagen, dass Space 01234 ein bisschen besserer Ansatz ist da er sowohl Ihre Desktop-Designs als auch Ihre mobilen App-Designs entwickeln kann sowohl Ihre Desktop-Designs . Es wird sich also entwickeln oder auf beide anwenden und die Verwirrung verringern. sich alles um das Abstandssystem. Ich hoffe, du hast etwas Neues gelernt. Lassen Sie uns zur neuen Lektion übergehen und noch ein paar Dinge in Designsysteme einsehen . 12. Farbsystem und wie man richtig benennt: In diesem Video werden wir ein anderes Teilchen des Designsystems untersuchen , nämlich Farb- und Farbsystem. Sie müssen Ihr Farbsystem definieren, wie Ihre Farben auf verschiedenen Hintergründen funktionieren, verschiedene Themen, dunklerer Hintergrund, hellere Hintergründe. Lasst uns anfangen und sehen, was wir in unseren Farbsystemen haben. Der erste Schritt besteht also immer darin in Farben zu experimentieren, die Sie nicht richtig haben können. Sie müssen zuerst Ihre Farben auf verschiedenen Hintergründen testen . Wenn Sie beispielsweise einen dunkleren Hintergrund oder einen helleren Hintergrund haben, müssen Sie die Farben testen, die zugänglichere, zugängliche Farben haben , die mehr haben. Man kann Dunkelheit oder Leichtigkeit sagen. Ich zeige dir Figma-Plugins , die das tatsächlich automatisch machen. Also müssen wir das nicht tun, musst du dir keine Sorgen machen. Der zweite Schritt ist, dass Sie mindestens vier haben müssen , im Grunde zwei Farben. Eine davon wird Ihre Primär - oder Akzentfarbe sein, in der wir Aktionen ausführen, und Sekundärfarben für Hintergründe und andere Dinge. Und dann werden wir Erfolgs- oder Warnfarben haben. Eigentlich brauchen wir nur zwei Farben, die grundsätzlich für Hintergründe und Ihre Akzentfarbe bestimmt sind . Oder vielleicht kannst du ein drittes einführen. Farben der Erfolgswarnung sind grün, blau oder vielleicht rot oder eine Variante dieser Farben. Dann werden wir eine andere Kategorie haben, die BG ist, Farben, das sind drei verschiedene Farben für Hintergründe, wir haben dunkle Hintergründe, wir haben hellen Hintergrund. Wir könnten also neutrale Farben haben, die ein Grauton , Graublau oder vielleicht ein grünliches Gelb oder vielleicht eine cremige gelbliche Farbe sein oder vielleicht ein grünliches Gelb oder vielleicht eine cremige können , die etwas langweilig ist. Dies könnten also Ihre neutralen Farben sein , die sich auch als nützlich erweisen können , wenn Sie versuchen, ein anderes Team in Ihrem Design zu erstellen . Ich zeige dir mein Design, wie all diese Farben ich kreiert habe. Nennen Sie diese Farben. Das erste ist, dass Sie Ihre Farben in verschiedene Kategorien gruppieren müssen. Zum Beispiel werden Aktionsfarben unterschiedlich sein. Ihre Links, Wahlen sind tatsächlich näher beieinander. Sie sind eine separate Gruppe. Dann haben wir Textfarben. Sie müssen wissen, dass wir Text stumm geschaltet haben, Überschriften haben, wir haben Untertitel, wir haben Titel. All diese werden also verschiedene Farben haben. In ähnlicher Weise haben wir möglicherweise Text für die Eingabe, Text in unserer Eingabe , wo wir einen Text eingeben müssen. Es gäbe also viele verschiedene Textfarben. Dann haben wir gedämpfte Farben. Wir haben bereits über die Hervorhebung der Betonung diskutiert , wo wir fett gedruckten Text haben. Vielleicht möchten wir die Farbe des fett gedruckten Textes ändern. Dann werden wir Hintergründe haben. Hintergründe werden unterschiedlich sein. Aktionshintergründe, Betonung, De-Hervorhebung. Links sind auch sehr nahe an Aktionen. Vielleicht Listen, Listen, Artikel, Aufzählungspunkte. Sie sind auch, denke ich, in der Schwerpunktkategorie. Texttexte werden meiner Meinung nach drei oder vier maximale Kategorien haben . Einer ist deaktivierter Text, Ihr normaler Text, Absatztexte, Überschriften und vielleicht einige suggestive oder Untertiteltexte, die sich auf drei oder vier verschiedenen Arten von Texten und Farben befinden und vielleicht einige suggestive oder Untertiteltexte, die sich . Dann werden wir auch Farbregeln definieren. zum Beispiel bei schwarzer Primärfarbe Was ist zum Beispiel bei schwarzer Primärfarbe die Primärfarbe auf einem dunkleren Hintergrund? Was ist bei schwarzer Sekundärfarbe die Sekundärfarbe auf dem dunklen Hintergrund? Wir werden all diese verschiedenen Regeln haben. Ich bin auf schwarzem Akzent, was unsere Tags sein werden, sind ergänzende Texte auf schwarzem Hover an Deck Bordüren. Wenn es etwas gibt , das sich auf einem Schwarz ändert, vielleicht Randfarbe, Schwebefarbe oder vielleicht Akzentfarbe. Wir werden diese Rollen definieren. Lassen Sie mich Ihnen das Farbsystem meines bevorzugten geschlossenen Systems, Google Material Design, zeigen. Sie haben ein sehr, sehr, man kann sagen, eine solide Art von Farbsystem. Und Sie können hier sehen, dass ich ein einfaches Farbschema habe und rechts sehen Sie jede Quelle 1234, verschiedene Bereiche. Dann haben wir Primär, fff, die weiße Farbe ist. Auf Secondary ist unsere dunkelschwarze Farbe. Dann haben wir im Hintergrund, dann haben wir auf der Oberfläche, Oberfläche tatsächlich bei Fehlern verwerfen, wir haben eine weiße Farbe. Sie können also sehen, ob wir hier zu diesen fünf gehen, das sind auch fünf, das sind auch fünf. Wenn wir diese korrelieren, können Sie sehen, dass dieser rote Fehler tatsächlich eine weiße Farbe darüber hat. Bei Fehlern bedeutet, dass wir bei Erwachsenen auf NLP-Hintergrund weiße Farbe verwenden werden. Ähnlich im Hintergrund werden wir Dunkelschwarz verwenden. Hintergrund. Hintergrund ist eigentlich, lass mich es dir hier zeigen. Dies ist unser Hintergrund. Der Hintergrund ist weiß, die Oberfläche ist ebenfalls weiß, der Fehler ist rot. In ähnlicher Weise haben wir primäre, primäre Varianten, sekundäre, sekundäre Varianten. Also zwei Farben nach primär zu sekundär. Und Sie können hier sehen, diese violette Farbe tatsächlich verwendet wird. Primärfarbe wird verwendet. Die Analytics, Analytics hier drüben. Und diese grüne Sekundärfarbe ist eigentlich unsere ausgezeichnete Farbe, wo sie für die Aktion verwendet wurde. Dies ist die Methodik, man kann sagen. Sie können sich Ideen holen, Sie in Ihrem eigenen Designsystem verwenden können. sich alles um das Farbsystem in Designsystemen. Gehen wir zur nächsten Lektion über und ich treffe dich bis dahin in einer weiteren Lektion, kümmere dich auf Wiedersehen. 13. Rastersystem und Layout: Jetzt ist der nächste Teil Ihres Designsystems tatsächlich Ihr Farbverlaufslayout. Das Gitter ist anders und das Layout ist unterschiedlich. Grid ist eigentlich so, wie Ihr gesamtes System das Raster nutzen wird. Verschiedene Spalten, unterschiedliche Breite mit unterschiedlichem Abstand zwischen Säule, die Fräser sind. Und dein Layout ist eigentlich, wie unterschiedlich deine Moleküle oder anders sind. Sie können sehen, dass Bereiche Ihres Designs, die Sie entwerfen, zusammenkommen werden. Das sind zwei verschiedene Dinge. Sie haben vielleicht das gleiche Rastersystem, aber Sie können ein völlig anderes Layout haben. Sie können drei oder vier verschiedene Layouts generieren. Ich zeige Ihnen ein Beispiel, das Ihnen leichter fällt, die Idee zu erfassen. Als erstes müssen Sie einen Framework-Bootstrap oder ein benutzerdefiniertes Framework auswählen einen Framework-Bootstrap oder ein , das Ihre Programmierer oder Entwickler verwenden, und versuchen, mit ihnen zu kommunizieren. Fangen Sie von dort an. Dann entscheiden wir uns für die Anzahl der Spalten auf größerer Desktopgröße. Es wären zwölf Jahre alt. Mittlere Größen können 12 oder acht verwenden, und kleinere Geräte verwenden möglicherweise zwei oder vier Spalten. Also musst du dein Raster definieren, dass 1284 oder vielleicht zwei, dann wie viel Fläche dein Design sein sollte, okay, das hängt also auch von deinen Noten ab. Wenn Ihre Raster also eine große Lücke zwischen Ihren beiden Spalten haben , haben sie mehr Platz. Es wird spezieller und moderner aussehen. Und wenn sie eine Lücke haben, die sehr weniger so ist, wird es etwas dichter aussehen. So verwenden Sie das Raster , um Ihren Designbereich zu erstellen oder das Thema Ihres Designbereichs im Vergleich zu dicht zu ändern . Jetzt wird das Layout dazu beitragen, wie das Design zusammenhängend sein wird. Wie es sich tatsächlich in Anwesenheit eines Benutzers offenbart, kann man sagen . Ich zeige dir hier drüben ein paar Entwürfe. Hier sehen Sie, dass wir ein sehr einfaches Drahtgitter haben. Und es zeigt, dass wir obersten Abschnitt haben, den wir hier haben. Wenn wir das also definieren, ist dies tatsächlich unser oberster Bereich. Dann haben wir einen Abschnitt , in dem wir zwei größere Informationsblöcke haben . Und dann haben wir unseren nächsten Abschnitt. Wir haben unsere Tab-Leiste. Dann haben wir wieder ein paar Rekorde für verschiedene Aufzeichnungen. Dann haben wir dieses Layout. Sie können also sehen, dass dies auf viele verschiedene Arten angeordnet werden kann . Aber sobald Sie angegeben haben , dass wir unser Design so gestalten werden, wird es so sein. Sie definieren Ihr Layout auf einem Handy. Und zum Beispiel ist das eigentlich Dashboard. Und Sie können Dashboard-halb-spezifische Regionen für bestimmte Dinge sehen . Zum Beispiel wird Ihr Diagramm, das Kreisdiagramm auf der rechten Seite und das zweite in der zweiten Zeile sein der rechten Seite und das zweite . Auf der linken Seite sehen Sie, dass wir eine sehr größere visuelle Präsentation verschiedener Länder und ähnliches haben. Oben rechts oben haben wir einen Abschnitt, in dem wir zwei verschiedene Fehler haben, Nachrichten oder ähnliches. So definieren Sie also das Layout, das ein Haar sein wird. Du wirst dieses Ding zeigen, dieses Ding, dieses Ding und dieses Ding. Zum Beispiel haben wir Nachrichtenwebsites, Zeitnachrichten und sie haben sehr spezifische Layouts für jede ihrer verschiedenen Seiten oder verschiedenen Kategorien. Auf diese Weise werden Sie verschiedene Layouts verwenden. Sie werden verschiedene Layouts angeben , denen Sie auf diese Weise folgen, um Ihr Design zu erstellen oder zu erstellen, oder Sie werden verschiedene Gestaltungselemente sind Bereiche miteinander verbinden . sich also alles um das Rasterlayout in Ihrem Designsystem. Ich hoffe, du hast die Idee dahinter verstanden. Ich möchte dir nicht hunderte von verschiedenen Beispielen zeigen . Wir werden dies in der nächsten Lektion im nächsten Abschnitt tun. Ich glaube, das ist alles. Ich denke, Sie haben die Idee verstanden und wir werden jetzt zur nächsten Lektion übergehen . Bis dahin kümmere dich auf. Tschüss. 14. Theming in deinem Designsystem: Sprechen wir nun über Teaming in Ihrem Designsystem. Wie viel Teaming sollte erlaubt sein. Sie geben Ihnen Entwickler, dass sie Ihren Typ mit Kacheln ändern können Ihren Typ mit Kacheln oder die Schrift komplett ändern können. Wenn Sie beispielsweise Roboto benutzt haben und sie Open Sans verwenden möchten, würden Sie das zulassen? Dies sind also die Fragen, ob Sie nur ein schwarzes oder dunkles zu weißes Thema haben, bei dem wir helle und dunkle Themen haben und Sie nur möchten, dass sie die Farben ändern. Zum Beispiel vom dunkleren Hintergrund zu einem helleren Hintergrund, hellem Thema oder dunklem Thema. Oder vielleicht möchten Sie ein völlig anderes Thema verwenden, das ist Herbstthema oder Frühlingsteam. Das liegt an dir. Verschiedene Designs oder verschiedene Projekte. Sie haben unterschiedliche Anforderungen. In diesem Video werden wir also besprechen, wie viel Theming erlaubt sein sollte und auf welche verschiedenen Dinge Sie achten sollten, wenn Sie ihnen viel Design geben werden Unabhängigkeit. Das erste ist das Dunkle versus Licht. Dies ist eigentlich nur die Änderung der Strömung. Dies ist also die Ebene , auf der die meisten Entwürfe sein werden. Ich denke, 70 bis 80% werden hier drüben sein. Wir brauchen nur zwei verschiedene Themen. Alles andere wird gleich sein. Der Abstand wird die gleiche Zeilenhöhe sein. Text, Stil oder Fort Face oder Schrift werden tatsächlich gleich sein. Jetzt ist das nächste zum Beispiel, wenn Sie ein System haben, auf dem es unter Windows, macOS, Android, iOS, auf verschiedenen Systemen verwendet wird, gibt es einige Spezifikationen für einige Dinge oder Systeme Einstellungen, die Sie nicht ändern können. Dafür musst du dich adoptieren. Um dies zu tun oder um dieses ganze Thema zu erstellen, müssen Sie möglicherweise Ihr ursprüngliches Design ein wenig ändern . Das musst du im Hinterkopf behalten. Manchmal funktioniert Ihre Designanpassung unter Windows möglicherweise nicht, daher müssen Sie dies ändern. Jetzt ist die nächste Ebene die Inhaltsstruktur oder der Stil. Egal, ob Sie nur das Styling Ihrer Farben oder Ihre Diaphyse ändern Ihrer Farben oder Ihre Diaphyse oder die Struktur ändern möchten? Zum Beispiel ist der Titel oben oder vielleicht Sie im nächsten Design, er befindet sich am unteren Rand des Bildes. Das ist eine sehr große Veränderung. Stellen Sie sicher, dass Sie sehr spezifisch sein müssen. Ich denke, du solltest dich nicht zu viel ändern. Vielleicht sind Benutzer oder Benutzer meist mit den ähnlichen Entwurfsmustern vertraut. Versuchen Sie also nicht, viel zwischen Struktur und Inhalt zu wechseln . Der Inhalt könnte geändert werden. Zum Beispiel, wenn wir vielleicht eine E-Mail haben oder eine Instagram-Vorlagen haben. Vielleicht folgen sie den gleichen Token, Design-Token oder derselben Designstruktur, aber das Styling wird völlig anders sein. Das heißt, das kann passieren. Hier ist ein Beispiel auf der linken Seite, in dem Sie sehen können, dass wir zwei verschiedene Farbfarben haben, in denen wir zwei verschiedene Themen haben, hell und dunkel, bei denen sich die Schrift tatsächlich ändert. Es ist beide mit Materialdesign-Richtlinien gebaut, aber Sie können sehen, dass sie kein Materialdesign verwenden. Spezifische Diaphyse, zum Beispiel Roboto oder ähnliches. Sie benutzen ihren eigenen Stil. Das ist eine Sache auf der rechten Seite. Sie können sehen, dass wir wieder haben, das Gleiche hier drüben, aber standardisierte Formen, dunkle und helle Teams. Jetzt sehen wir uns hier noch ein paar Variationen an. Sie können hier sehen, dass wir Farbvariationen, Muskel versus Tech-Abstand und Färbung haben. Der Abstand wird sich tatsächlich ändern. Wenn Sie beispielsweise versuchen, Ihre Schrift zu ändern , versuchen Sie, eine serifenlose Verwendung zu verwenden. Du hast eine Serifenlose benutzt und du hast angefangen, zwischen einer Serifenschrift zu wechseln. Zeilenhöhen werden sich ändern. Typhus ist eine völlig andere Zeilenhöhe, ihre Buchstabengrößen sind völlig unterschiedlich. Sie müssen also darauf achten, dass Ihr gesamtes Abstandssystem angepasst wird. Sobald Sie Ihre Schrift geändert haben, das gesamte Abstandssystem sollten das gesamte Abstandssystem und Ihre Zeilenhöhe angepasst werden. Das ist es, was Sie bei Ihrem Theming beachten müssen. Denn wenn Sie Ihren Entwicklern oder Ihrem Designteam viel Unabhängigkeit geben Ihren Entwicklern oder Ihrem Designteam , können sie alles nutzen und ändern , was ein Chaos sein wird , und Sie müssen sich darüber Sorgen machen. Hier geht es um Theming und was in Ihrem Designsystem zähmen sollte. Ich werde Sie sehen, wie Sie in der Lektion gesehen und im nächsten Abschnitt werden wir beginnen, ein grundlegendes Designsystem zu entwerfen. Und wir verwenden es, um eine App oder ähnliches zu erstellen. Bis dahin kümmere dich, Tschüss. 15. Designprinzipien und Zweckbestimmung: Bevor wir mit unserem Designsystem beginnen, müssen wir unsere Zweckerklärung abgeben. Und dafür haben wir dieses Designprinzipien und das Zweckausweisdokument erstellt . Und ich habe eine andere Seite erstellt, separate Seite, und das ist sehr einfach. Ich werde sie beschönigen. Und Sie können hier sehen, dass wir das Basic-Logo auf Schwarz und Weiß haben. Und dann haben wir unsere Gestaltungsprinzipien. Praktisch statt Theorie. Zeigen Sie eher als zu erzählen. Es bedeutet, dass wir praktischer sein sollten und alles in unserem Design zeigen müssen alles in unserem Design zeigen anstatt viel Geschichte zu erzählen. Zeigen bedeutet, dass Videos tatsächlich der Teil dieses Designsystems sind , das beim Lernen gelernt hat , Teil von Videos ist. Zeig ihnen, anstatt ihnen das Ganze zu erzählen. Überall zugänglich bedeutet, dass auf jedem Gerät, iOS und Android, zugänglich ist . Sie müssen das Design erstellen damit es für beide verwendet werden kann. Konzentriere dich auf Lernerfahrung Man muss sich auf das Lernen konzentrieren. Es bedeutet also, dass die Videoplayer , die alles steuert , zugänglicher, einfacher zu bedienen, widerstandsfähiger ist und solche Dinge. Dann haben wir diese Zweckaussagen. Sie können also sehen, dass wir Gold haben, warum profitieren Sie den Nutzern? Wir haben das alles gesehen, aber ich habe das für diese spezielle App erstellt. Ziel ist es, Zeit zu sparen und schnell Design zu erstellen, neue Bildschirmfunktionen hinzuzufügen, die unsere App angetrieben haben. Wenn wir nicht schnell Design generieren, warum? Jedes neue Feature wird mindestens zwei Wochen geliefert. Wir würden also mit Verzögerungen konfrontiert werden, um sich wiederholende ähnliche Probleme zu lösen. So kann sich das Produktteam darauf konzentrieren, dass Benutzer wirklich angezeigt werden, wer die Benutzer dieses Zwecks sein wird. Dieses Designsystem wird intern in unserem Team eingesetzt. Dies ist, wir haben dies bereits in unserer Vorlesung zur Zweckaussage besprochen . Dies ist es, was Sie zum ersten Mal erstellen sollten, und dies wird Ihre Aufgabe sein. Dies wird Ihr Auftrag zwei sein. Das ist alles. Bevor Sie in Ihr Designsystem wechseln, versuchen Sie, einige Designprinzipien zu erstellen, die für Ihr gesamtes Team und Design entscheidend sind zu erstellen, die für Ihr gesamtes Team und Design entscheidend . Dann werden wir eine Zweckbestimmung haben, warum wir dieses Designsystem aufbauen. Also bleib bei mir. Wir werden ein Designsystem aufbauen. Ich treffe dich in einer anderen Lektion. Bis dahin passen Sie auf, Tschüss. 16. Figma Auto und Varianten 01: Wenn Sie Ihr Designsystem in Figma aufbauen möchten, gibt es zwei Konzepte, die Sie wirklich beherrschen müssen, und eines davon ist das automatische Layout und das zweite ist eine Variante. In diesem Video werde ich Ihnen einige der Techniken mitteilen, die Sie in Auto-Layout und Varianz verwenden können, indem Sie Varianz verwenden, um Ihre Komponenten in Figma zu erstellen. Lasst uns anfangen und sehen , was wir damit machen können. Wenn Sie sich diesen Bildschirm ansehen, können Sie sehen, dass wir diese Navigation haben und wenn wir versuchen, sie zu quetschen, ist es leicht erweiterbar , dass Sie sehen können, dass alles hier bleibt. In ähnlicher Weise haben wir diese beiden Knöpfe. Sie sind eigentlich Komponente und Varianz, aber vorher waren sie tatsächlich automatisches Layout. Sie werden mit Auto-Layout erstellt. Ebenso können Sie hier drüben sehen, hier ist eine Eingabe mit Label. Und Sie können sehen, dass dies auch mit Auto-Layout erstellt wird. Wenn ich also versuche, es zu ändern, zum Beispiel meinen Namen hier drüben, können Sie sehen, dass er sich erweitert. Okay? Wenn Sie nicht gehen wollen und erweitern möchten, müssen Sie in diese innere Auto-Layout-Anordnung eingehen. Und wir setzen diesen Text so ein, dass er einen Container füllt. Sie können sehen, dass es sich nicht erweitert. Also haben wir es repariert. Okay, also hier ist eine Texteingabe innerhalb der Aktion oder Schaltfläche hier drüben. Eine weitere Sache ist das Arrangement hier drüben. Sie können sehen, dass dies im Auto-Layout ist, und wenn sich dieses Label unten ist, und wenn sich dieses Label unten befindet. Wenn ich versuche, es oben zu verschieben, können Sie sehen, dass es unten sein wird . Das ist in Figma tatsächlich rückgängig gemacht. Der untere wird oben sein und der obere wird am Ende dieses Arrangements sein. Ich verschiebe es hier zurück. Lasst uns anfangen und sehen, wie wir all diese bauen können. Zuerst werden wir dieses Texteingabefeld mit einer Beschriftung erstellen . Dafür. Wir werden nur eine SMS verwenden. Also lasst es uns ein bisschen zur Seite bewegen. Versuchen wir, den Rahmen etwas mehr zu erweitern. Bewegen Sie es nach oben. Vergrößern. Hier haben wir die Leinwand und ich drücke T für Text. Und lass uns deinen Namen benutzen. Lassen Sie uns hier drüben regelmäßig gräuliche Farbe verwenden. Wir werden diesem ein automatisches Layout hinzufügen, Umschalt a. Sie können sehen, dass wir unser automatisches Layout hinzugefügt haben. Nennen wir es Text. Lassen Sie es uns duplizieren, indem Sie Ihre Alt- oder Optionstaste gedrückt halten und so ziehen. Also ziehe ich es auf Gefällt mir, sagen wir mal 60 Pixel auseinander. Ich nenne es jetzt Action. Oder vielleicht kannst du den Upload verwenden. Wenn Sie beispielsweise einen Upload-Button erstellen, verwende ich verschiedene Textfarbe , da wir einen Link haben werden . Und lasst uns beides halten. Schon wieder. Das ist eigentlich kein Text. Nennen wir es. Wählen Sie beide aus und drücken Sie erneut die Umschalttaste. Jetzt können Sie sehen, dass wir diese Grenze um sie herum haben und einen weiteren Frame, nennen wir es Input. Wenn ich expandiere, erweitern Sie diese Eingabe und Sie können sehen, dass wir Aktion und Text haben. Sie können also sehen, dass sich die Aktion oben befindet, die sich tatsächlich auf der rechten Seite befindet, und der Text befindet sich links , der sich unten rechts befindet. Wenn wir nun auf Input klicken, können Sie hier rechts sehen, dass wir 60 Pixel Trennung haben. Dies ist also der Abstand zwischen Elementen im Inneren und dem automatischen Layout. Input enthält tatsächlich zwei Elemente darin. Und dieses automatische Layout, Sie können sehen, dass es sich in horizontaler Richtung befindet. Also zwei Elemente horizontal, sie sind 60 Pixel voneinander entfernt. Hol einfach das Konzept. Und wenn Sie Padding hinzufügen möchten, z. B. diesen ganzen Abschnitt, möchten wir dieses Eingabefeld Polsterung hinzufügen . Wir können hier etwas wie zehn Pixel verwenden. Sie können jetzt sehen, dass es 101010 auf allen Seiten hinzugefügt hat. Benutzen wir acht hier drüben. Ich zeige dir, warum ich es am Ende benutzt habe. Und das ist eigentlich das Arrangement. Gerade jetzt. Es spielt keine Rolle, denn wir haben nur zwei Elemente und sie sind bereits richtig ausgerichtet. Lass uns in der Mitte benutzen. Als nächstes werden wir es tun, Sie können sehen, dass ich diese Eingabe anstelle des inneren ausgewählt habe. In den Gegenständen. Diese ganze Eingabe ist also ausgewählt. Jetzt fülle ich es aus. Und Weiß ist großartig. Fügen wir hier drüben acht Pixel Rundheit hinzu. Sie können sehen, dass unser Basiselement fertig ist, die Eingabe ist fertig. Aber das Problem ist, sobald ich anfange zu tippen, wird es tatsächlich erweitert. Beheben Sie, dass wir „Klick auf Text“ anstelle von heißen Inhalten verwenden werden. Wir werden gefüllten Behälter benutzen. Ich denke, es wird das beheben. Eine andere Möglichkeit, dies zu beheben, ist nur wenige aufgerutscht. Wählen Sie diese Eingabe aus. Sie können sehen, dass wir gepackt haben und Platz zwischen den Optionen haben. Wenn Sie versuchen, Leerzeichen dazwischen zu verwenden, wird diese Option behoben. Es wird immer sein, dass dieser Upload immer auf der rechten Seite ist , um alles mit diesem Abstand hier zu platzieren, dieses Padding. Es läuft, weil wir zwei Gegenstände haben. Man wird auf der rechten Seite sein und einer wird auf der linken Seite sein. Ich glaube, das ist es. Alles klar. Jetzt lass uns sehen. Wenn ich versuche mich zu ändern. Wählen wir die Eingabe aus und versuchen sie zu erweitern. So können Sie sehen, dass sich der Upload jetzt mit der rechten Seite bewegt. Wenn ich versuche, es zu erweitern, wird es sich so bewegen. Wir können hier auch ein Label hinzufügen. Wählen wir also Text aus. Lass uns ein Label erstellen. Auch hier werden wir ein automatisches Layout auf das Etikett setzen , um ein zu verschieben und wir werden es ein wenig behandeln und es der Eingabe hinzufügen. Jetzt wurde dieses Label hinzugefügt und es ist auch ein Frame, also nennen wir es Label. Sie können sehen, dass es eine Polsterung von zehn hat. Wir werden es benutzen. Und richten wir es mit dem Etikett hier aus. Der Text in unserer Eingabe. Auch hier werden wir all diesen Hinweis auswählen. Wir verwenden shift a, um den Rahmen zu erstellen. Dieser Frame wird Input plus Label sein. So habe ich das tatsächlich erstellt. Jetzt können Sie sehen, ob Sie sich diese ansehen, die Richtung des automatischen Layouts ist vertikal da wir keine zwei Elemente darin haben. Lass mich es dir zeigen. Einer ist Input und einer ist gekennzeichnet. Und Sie können sehen, dass die Beschriftung unten ist, gerade jetzt ist es oben. Hier haben wir es. Verwenden wir 0, weil wir möchten, dass das Label sehr nah ist. Diese Beschriftung hat tatsächlich acht Pixel Polsterung, daher ist es acht Pixel vom unteren Eingabe-Textbereich entfernt. So erstellen und verwenden Sie diese Technik des automatischen Layouts. 17. Figma Auto und Varianten 02: Und das nächste wäre, dass wir, wenn Sie dies erstellt haben, eine Komponente erstellen und erstellen werden. Lassen Sie uns also eine Komponente erstellen, Strg- oder Befehlsoption K oder Control Alt K. Klicken wir darauf und Sie können sehen, dass wir dies haben. Wir werden einen Brillanten hinzufügen. Lasst uns also das Eigentum staatlich sein. Lass es uns einfach halten. Hier ist unser Standardstatus, und dieser wird sein, nennen wir es aktiven Status. Hier werden wir, wir können den Text so ändern, dass schwarz ist und diesen in Namen ändern. Mach es ein bisschen leichter. Nur um den Unterschied zwischen diesen beiden Staaten zu haben. Wenn Sie wählen, können Sie hier auch einen Strich hinzufügen. Lass es uns so machen. Okay, also hier haben wir eine andere Variante, das ist eine aktive Variante. Und lasst uns eine weitere Variante hinzufügen. Klicken Sie hier rüber und fügen Sie eine weitere Variante und eine neue Variante hinzu. Und das wird tatsächlich erhalten bleiben, drei wären deaktiviert. Lassen Sie uns diese weiße Farbe zu grünlicher Farbe machen. Benutze dieses Grau. Ich denke, das würde funktionieren. Dieser Upload wäre jetzt eine gräuliche Farbe. Vielleicht so. Label wäre Sünde. Jetzt können Sie sehen, dass wir drei Varianten davon erstellt haben , Input plus Label. Sie können das Gleiche mit jeder Komponente tun, jede Schaltfläche, die Sie haben. Erstellen wir zum Beispiel hier einen Button. Wir werden wieder das Auto-Layout verwenden. Lassen Sie uns zuerst einen Text erstellen. Wechseln wir einfach ein , um ein automatisches Layout hinzuzufügen. Ich werde eine Polsterung von verwenden, ähm, das ist eine Polsterung von 12 verwenden. Oben rechts, 16161612 unten. So. Benutze das in der Mitte. Alles wird gleich sein. Huc Inhalt. Ja. Wir werden eine Krieger-Füllfarbe hinzufügen. Lasst uns die Farbe in so etwas ändern. Die Textfarbe wird weiß sein. Hier haben wir den Basic-Button mit unserem Auto-Layout. Fügen wir hier acht Pixel hinzu, um die Rundheit zu erzielen. Für mich denke ich rechts und links möchte ich mehr Platz. Ich würde 2020 hier hinzufügen. Sie können sehen, dass dies jetzt die einfache Schaltfläche mit automatischem Layout ist. Sie können eine Varianz erzeugen. Wenn wir jetzt hinzufügen möchten, rufen wir diesen Button auf. Wenn Sie hier ein Icon hinzufügen möchten, ist das eine andere Geschichte. Verwenden wir also den Schrägstrich Control oder Command Forward. Ich habe dieses Plug-In lucid-Icons installiert, und ich werde verwenden, lass uns ein paar Mikron verwenden. Benutzen wir dieses Icon hier drüben. Hier ist das Icon hier drüben. Bringen wir es in den Rahmen. Zieh es hier rüber. Hier ist die Überlast. Versuchen wir, dies in den Button zu ziehen. Jetzt können Sie sehen, sobald ich es gezogen habe, es befindet sich am Ende des Knopfes , weil es tatsächlich so ist, wie man es nennt, unten und oben. Was auch immer oben ist, es wäre am Ende des Knopfes. Weil unser Layout tatsächlich eine horizontale Richtung hat. Das ist unser Gamepad. Versuchen wir hier drüben eine weiße Farbe zu verwenden. Hier ist also ein Registrier-Button mit einem Icon. Wenn Sie nun den Abstand zwischen diesen beiden Elementen vergrößern möchten , klicken Sie auf die Schaltfläche, und dies ist der Abstand dazwischen. Wenn ich versuche, es zu erhöhen, verwenden wir 40 hier drüben. Ich denke, 36 wären gut genug. Jetzt kannst du sehen, dass es großartig aussieht. Was ist die Polsterung auf der rechten Seite? Lass uns 1818 benutzen. Hier. Das sieht jetzt besser aus. Okay, also haben wir diesen Knopf. Lassen Sie uns nun eine Komponente daraus erstellen. Und wir wählen unsere Komponente aus. Jetzt. Es wurde in eine Komponente innerhalb des automatischen Layouts umgewandelt. Lassen Sie uns eine Variante erstellen. Jetzt ist hier die zweite Variante. Und für die Immobilie werden wir jetzt wieder den Staat benutzen. Mach es einfach. Dies ist der Abstand zwischen den beiden Varianten. Wenn Sie es also verringern möchten, können Sie es verringern. Aber ich denke, 24 wäre großartig. 20 werden sein. Zum zweiten Video. Lassen Sie uns die Farben der zweiten Varianz ändern. Lassen Sie es uns etwas heller machen wenn Sie darauf schweben. Und das ist es, ich denke jetzt werde ich gerade die Farbe ändern. Hier haben wir den Standardwert. Dies ist der zweite Variantenstatus wäre hover oder aktiv. Nennen wir es „Active State“. Dies ist also Standard, dies ist aktiv. Lassen Sie uns hier einen Kapitalfall verwenden. Hier ist eine weitere strahlende Schaltfläche mit Varianz, die das automatische Layout verwendet. Dies ist, Sie können die Essenz Ihres Designsystems sagen. Wenn Sie diese beiden Konzepte verstehen, können Sie alles tun. Sie können sehen, dass dies eine Schaltfläche mit einem Symbol ist. Wenn Sie das Symbol am Anfang verschieben möchten, verschieben wir es hierher. Lasst es uns hierher bringen. Jetzt ist es am Anfang oder auf der linken Seite. Bringen Sie es zurück. Wenn Sie nun den Abstand zwischen dem Symbol ändern möchten, machen wir zum Beispiel das, wenn Sie es so wollen, und ich will es so, 30. Sie können sehen, dass es in diese Richtung geschrumpft ist. 1818. Hier ist ein einfaches Video über das Auto-Layout, und das ist die Macht von Figma. Dies sind die beiden Dinge, die Sie am meisten verwenden werden , um verschiedene Varianten und alles zu erstellen. Wenn ich versucht habe, den Text hier zu ändern, ändern Sie den Text jetzt, Sie können sehen, dass er sich hier automatisch erweitert. Wenn du einen festen willst, denke ich, das V ist, dass du fix verwenden musst . Ich glaube. Ich denke, du musst die Einstellung am Anfang machen. Mal sehen, ob ich einen Knopf mit fester Größe haben kann. Okay, also dreht sich alles darum. Umarme den Inhalt und Elemente mit fester Breite. Meist werden wir den Inhalt des Inhalts verwenden . Das ist alles. Das ist also mein einfaches Video über Sigma-Varianz und automatisches Layout. Ich hoffe, du hast etwas Neues verstanden und gelernt. Wir werden diese Technik in unseren nächsten Lektionen häufig anwenden , wenn wir unser Layout, unsere Topographie und alles erstellen werden. Also bis dahin, kümmere dich auf. Tschüss. Wir werden uns in einer anderen Lektion treffen. 18. Automatisches layout: Dies ist ein sehr grundlegendes Konzept, das Sie verstehen müssen, nämlich heißen Inhalt und volle Container und feste Breite. Dies ist der Unterschied zwischen der Größenänderung eines automatischen Layouts, was für mich sehr verwirrend ist. Es hat viel Zeit gedauert, bis ich das verstanden habe. Ich werde es mit dir auf zwei Arten teilen. Eine davon ist, dass das gesamte Layout automatisch erweitert werden soll. Zweitens möchten Sie das mit möglicherweise Eingabetext oder ähnlichem mithilfe von Auto-Layout fixieren mit möglicherweise Eingabetext . Wir werden dieses Beispiel benutzen. Sie können hier sehen, wie Inhalt tatsächlich Ihr übergeordnetes Frame oder Ihr übergeordnetes Auto-Layout oder Frame ist , das je nach Kind erweitert wird . Wenn die Kinder also expandieren werden, wird es damit expandieren. Gefüllter Behälter ist eigentlich für das Kind benutzt. Das untergeordnete Objekt füllt also den Container tatsächlich aus. Welcher Platz auch immer noch übrig ist, es wird das füllen. Dies sind ein bisschen schwierige Konzepte. Wie werden Inhalte auch bei den Eltern funktionieren? Die untergeordneten Objekte werden zum übergeordneten Objekt erweitert, wird mit einem untergeordneten Objekt erweitert. Das ist ein bisschen schwierig. Also nur ein einfacher Tipp. Wenn Sie eine automatische Erweiterungsschaltfläche mit dem Text oder den Beschriftungen wünschen, oder Sie können Symbole sagen. Sie müssen für alles heiße Inhalte verwenden. Zum Beispiel können Sie hier sehen, dies tatsächlich unsere Eingabe in einer Eingabe ist , und ich habe festgelegt, dass er Inhalte umarmt. Es wird also erweitert, indem es seinen Inhalt umarmt , wenn ich versuche , seinen Inhalt zu ändern. Versuchen wir also, diesen Text hier zu ändern , damit Sie sehen können, dass er sich erweitert. Dies ist, dass der Elternteil expandiert. Immer wenn ich versuche, seinen untergeordneten Text zu ändern, ändert das untergeordnete Objekt seine Größe und das übergeordnete Objekt wird erweitert. Wenn wir zu Text und inneren Kindern gehen, können Sie sehen, dass sie auch Hulk-Inhalte verwenden und Link auch Umarmungsinhalte verwendet. Das ist sehr, sehr wichtig. Sie müssen heiße Inhalte verwenden, wenn Sie eine Schaltfläche oder einen Eingabetext erstellen , bei dem Sie ihn mit dem Text erweitern müssen . Du musst Umarmungsinhalte verwenden. In diesem Fall hier drüben ist dieser Text hier drüben, der eigentlich unser beschrifteter Bereich ist. Ich werde keine heißen Inhalte verwenden, ich werde eine feste Breite verwenden. Feste Breite. Versuche das zu ändern. Jetzt. Du siehst jetzt habe ich auf eine feste Breite gewechselt. Dieser Text wird sich also auswirken und mein gesamtes Label oder diese ganze Eingabe wird bleiben. Das Gleiche. Die Aktion wird auf der rechten Seite sein. Ein anderer Weg ist also, dass ich dir einen anderen Weg zeigen soll. Sie können sehen, ob Sie hier auf diese Eingabe klicken , das heißt, sie hat zwei Elemente und automatische Layout ist auf einen Abstand von 40 Pixel auseinander acht Pixel eingestellt , ist die Polsterung und Richtung ist waagerecht. Wenn ich versuche, eher zu verwenden als zu packen, wenn ich versuche, Platz dazwischen zu verwenden , wird es tatsächlich diesen Effekt haben , nämlich wenn ich versuche, es so zu erweitern. Sie können also sehen, dass es sich mit diesem bewegt. Und wenn ich jetzt versuche, es zu ändern , wird es wieder dasselbe sein. Nun, eine weitere Einstellung ist, dass ich werde, anstatt eine feste Breite zu verwenden, den Füllcontainer verwenden werde. Jetzt kannst du sehen, dass es hier drüben diesen Platz gekostet hat. Zwischen diesem und diesem haben wir einen automatischen Abstand. Versuchen wir es also zu erweitern. So können Sie jetzt sehen, jetzt können Sie diesen Fülleffekt sehen, gefüllte Container hat wirksam, dass er den Container tatsächlich füllt , wenn ich ihn erweitert habe. Das ist also unser Container. Und wenn ich versuche, es zu erweitern oder zu drücken, wird die Größe des Textfeldes geändert. Sie können es jetzt sehen und versuchen, es etwas größer zu machen. Jetzt können Sie sehen, dass dies auf den vollständigen Container eingestellt ist. Es füllt den Behälter tatsächlich bis hier drüben. Ich bin mir nicht sicher, was ist diese Entfernung zwischen ihnen? Es ist wieder 40. Die Entfernung wieder 40, die wir anfänglich den Start oder getrocknet haben, ist jetzt auf OK eingestellt, also ist es auf 40 eingestellt. Es hält diese Distanz. Versuchen wir also, den Raum zwischen hier zu nutzen und versuchen, ihn zu erweitern. Und C. Nun, was passiert? Jetzt können Sie sehen, dass es den Behälter füllt. Und es füllt den gesamten Raum, weil wir es so eingestellt haben , dass er auf auto eingestellt ist. Abstand dazwischen. Der Abstand dazwischen passt tatsächlich automatisch den Abstand zwischen diesen beiden Elementen an. Und Sie können sehen, dass es so abeinander liegt und den ganzen Behälter füllt. Normalerweise würde ich also keinen Platz dazwischen benutzen, aber ich würde Fledermaus benutzen. Jetzt vermasselt es meinen ganzen Abschnitt hier drüben. Also lasst uns versuchen, es zu quetschen und zu packen. Das Problem ist dieses. Lasst es uns so quetschen. Für den Text verwenden wir eine feste Breite. Dies wird Inhalt haben und dies ist eine feste Breite. Auf diese Weise werden Sie tatsächlich Füllcontainer und Hot Content und feste Breite verwenden Füllcontainer und Hot Content und , indem Sie Ihr automatisches Layout verwenden. Wenn Sie Fragen haben, wenden Sie sich bitte an mich. Ich werde immer hier sein, um diese Fragen zu beantworten. Dies ist das verwirrendste Konzept, welches Sie für ein Kind oder den Elternteil verwenden müssen. Stellen Sie also sicher, dass Sie, wenn Sie eine Schaltfläche zum automatischen Erweitern haben, alles so eingestellt ist, dass er Inhalte umarmt und das übergeordnete Element auf den Abstand zwischen ihnen eingestellt wird. Zum Beispiel, diesen Layout-Abstand, setze ich ihn auf 40 oder 30 oder 20 ein, unabhängig vom Abstand, den ich zwischen den Elementen haben möchte , und das ist die Polsterung. Das ist also alles. Ich hoffe, Sie haben dieses Konzept der inhaltsgefüllten Container, des automatischen Layouts, des Abstands und der Größenänderung verstanden der inhaltsgefüllten Container, . Sag ihnen, dass wir sie in der Lektion treffen werden. Kümmere dich. Tschüss. 19. Responsive Navbar in Figma mit Auto Layouts: Willkommen zu einem anderen Figma-Tutorial in dem wir mit Figma eine responsive Navbar erstellen mit Figma eine responsive Navbar und das automatische Layout verwenden werden. Lasst uns anfangen. Ich zeige Ihnen, wie Sie das automatische Layout verwenden können, um eine reaktionsschnelle Navigationsleiste in Figma zu erstellen. Jetzt fangen wir an und erstellen diese responsive Navbar. Drücken Sie T, um einen Text zu erstellen. Und wir tippen nach Hause. Replizieren wir dies, indem wir die Alt-Taste gedrückt halten. Und verwenden wir Command D , um eine weitere Kopie zu haben. Und wir werden es benennen, nennen wir diesen einen Kontakt. Wählen wir alle diese aus und wir werden horizontalen Abstand zwischen ihnen verteilen , nur um sicherzustellen, dass der Abstand korrekt ist. Im Moment sind es also 19, wir müssen es erhöhen. Verwenden wir 46467. Zwischen diesen. Jetzt wählen wir alle aus und fügen automatische Layout-Verschiebung k hinzu. Zuerst haben wir drei Textebenen erstellt, einfache Textebenen , und wir haben einen Rahmen um sie herum erstellt. Hier haben wir den Rahmen , um diese Gegenstände zu kontrollieren. Im Moment ist die Bildrichtung in horizontaler Richtung. Wenn wir also versuchen hinzuzufügen, können Sie sehen, ob wir diesen Rahmen öffnen und versuchen , einen neuen Befehl D hinzuzufügen Sie können also sehen, dass in horizontaler Richtung hinzugefügt wird, also ist dies die richtige Richtung. Okay, also hier haben wir, nennen wir es Links. Verstecken wir diese Navigationsleiste sofort, den unteren Knopf. Okay, also hier haben wir das hier. Und der nächste Schritt ist, dass wir unsere Buttons erstellen werden. Also werden wir wieder zum Prestige kommen. Das wird unser Button sein. Nennen wir es Login. Und wir fügen dieser einen Verschiebung ein automatisches Layout hinzu, ein automatisches Layout hinzugefügt. Also fügen wir eine Füllfarbe dieser Schaltfläche hinzu. Lass uns dieses Grün oder vielleicht dieses Blau benutzen. Und die Textfarbe wird weiß sein. Also hier haben wir den Button bereit und fügen wir hier etwas Polsterung hinzu. Und von hier aus werden wir auf allen Seiten unterschiedliche Polsterungen verwenden . Für einen Knopf verwenden wir acht oben, 16 hier drüben, 16 rechts und acht unten. Das wird unser Muster sein. Nennen wir es. Nennen wir es TTN. Behalt es Gideon. Und wir werden es replizieren, indem die Alt-Taste oder die Wahltaste gedrückt halten. Und wir trennen sie 16 Pixel. Sie können also sehen, Alt- oder Wahltaste gedrückt halten , um den Abstand zu sehen. Und wir nennen es „Anmelden“. Jetzt können Sie sehen, dass es sich von selbst erweitert , weil wir die Größenänderung so eingestellt haben, dass sie Inhalte umarmen. Wann immer der Inhalt den gesamten Container erweitert, wird er den Inhalt umarmen, indem der uns angegebene Speicherplatz beibehalten wird. Sie können sehen, ob wir auf den Button klicken, wir haben zehn Abstände. Dan ist also der Abstand zwischen zwei Elementen. Dies sind die Ränder oder Polsterungen, die wir angewendet haben. Es wird diese immer behalten. Klicken wir auf dieses und wir werden es tun, lass uns eine andere Farbe verwenden, vielleicht Orange für die Anmeldung. Lass uns Orange benutzen. Wir haben jetzt zwei Knöpfe. Und das ist auch, wir haben tatsächlich drei Auto-Layouts. Eine davon ist Links zu unseren Buttons, ein Knopf, ein zweiter Knopf. Wir werden sie alle auswählen. Auch hier drücken wir die Umschalttaste a. und Sie können sehen, dass wir diesen automatischen Layout-Frame haben, also wird dies unsere NANDA sein. Und davor denke ich, dass wir einen weiteren Rahmen für die Knöpfe haben müssen. Das ist eigentlich z. Lassen Sie uns diese Schaltflächen zuerst ausrichten, verschieben Sie a, um ein automatisches Layout für diese Schaltflächen zu haben , und wir rufen sie auf, aber weil wir das Layout beider Schaltflächen anordnen müssen auch. Wenn wir den Abstand zwischen zwei Tasten jetzt steuern wollen , können wir das hier machen. Lass uns jetzt jetzt 12 benutzen. Und so haben wir jetzt Knöpfe, beide Schaltflächen in einen anderen Ebenenrahmen. Was wir jetzt tun werden, ist dass wir all diese auswählen werden. Man sieht auf der linken Seite, das ist sehr wichtig. Wir haben Knöpfe. Andererseits haben wir innerhalb der Tasten zwei verschiedene automatische Schaltflächen. Und dann haben wir in den Links drei Textebenen. Jetzt wählen wir sie alle aus. Umschalttaste a. Und Sie können sehen, dass wir diese Navbar haben, fast nav bar , die abgeschlossen ist. Jetzt können Sie sehen, dass sich unser Text nach oben bewegt. Wann immer wir so etwas erstellen, passiert es manchmal, dass unser Text nach oben geht. Sie können sehen, dass dies der Abstand zwischen Elementen ist. Wenn ich also versuche, es zu reduzieren, können Sie sehen, dass es dem Text näher kommt, den wir hier haben. Um das zu beheben. Sie können sehen, dass ich diese Navbar ausgewählt habe. Das ist sehr wichtig. Und ich werde so in die Mitte gehen. Dies sind die Ausrichtungsoptionen. Wenn ich das verwende, kannst du sehen, dass der Text oben ausgerichtet ist. Unten. Und Sie können sehen, dass es unten steht, und wir werden das auswählen. Es wird links und in der Mitte sein. Jetzt fügen wir der Snackbar eine Füllfarbe hinzu, die weiß sein wird. Lass uns Weiß benutzen. Und von hier aus verwenden wir einen Radius von acht Pixeln. Und hier drüben werden wir oben etwas Polsterung verwenden. Lasst uns 16 benutzen. Ganz unten. Lasst uns 16 benutzen. Fügen wir rechts 24 und 24 links hinzu. Jetzt können Sie sehen, dass wir unsere Navbar bereit haben. Wir haben alle Polsterungen um ihn herum angewendet , indem wir dieses Panel hier benutzt haben. Wenn Sie nun sehen können, ob wir versucht haben, es zu erweitern , wird es nicht erweitert, der Inhalt wird nicht erweitert, er reagiert nicht. Weil Sie hier sehen können, dass dieser Abstand auf „Benutzerdefiniert“ eingestellt ist. Also müssen wir das gerade beheben. Um das zu tun, müssen wir hierher gehen. Und wir werden zu wechseln, gehen wir überall hin unseren ursprünglichen Einstellungen und schreiben uns auf. Sie können sehen, dass ich die Navbar ausgewählt habe und wir gehen den Leerzeichen zwischen dem, was es tut, Sie können jetzt sehen, dass dieser Abstand zwischen den Elementen tatsächlich auf auto eingestellt ist, also ist es passe den Platz automatisch an, wenn ich versuche , die Navigationsleiste zu ziehen oder zu vergrößern oder zu verkleinern. Dies ist der Trick hinter dieser Reaktionsfähigkeit. Sie können also jetzt sehen, ob ich versuche, so etwas zu ziehen, sehen Sie jetzt, dass es voll reagiert. Dies ist also der letzte Schritt. Jetzt können Sie sehen, dass eine responsive Navbar fast vollständig ist. Wenn wir hier zum Beispiel etwas hinzufügen möchten, möchte ich Benachrichtigungen hinzufügen. Nennen wir es also Benachrichtigungen hier drüben. Oder vielleicht ein paar Nachrichten. Wenn ich zum Beispiel etwas hier oben drüber ziehen möchte oder ziehen möchte, habe ich einen kleinen roten Punkt für Benachrichtigungen. Zum Beispiel dieses. Und wenn ich versuche, es hier zu ziehen und zu platzieren, können Sie sehen, dass es mir zeigt, dass es in diesem automatischen Layout fallen gelassen wird . Es übernimmt also automatisch das automatische Layout. Wenn ich versuche, es so fallen zu lassen, wird es hier sein. Wenn Sie es nicht möchten oder diesem Verhalten entgehen möchten, müssen Sie Ihre Leertaste halten und sie einfach so ziehen und ablegen. Und es wird hier drüben so sein. Versuchen wir es ein bisschen zu erledigen. Hier haben wir die Nachrichten. Du kannst es so bewegen. So erstellen Sie in Figma eine reaktionsschnelle Navigationsleiste. Ich hoffe, Ihnen hat dieses Video gefallen und stellen Sie sicher, dass Sie sich auch das nächste Video ansehen. Bis dahin treffen wir uns in einem anderen Video mit einem weiteren Figma-Trick und Tutorial, Vorsicht und Tschüss. 20. Responsives box in Figma: Willkommen zu einem weiteren Video über Figma. Und heute werden wir ein reaktionsfähiges modales Fenster erstellen . Oder Sie können ein komplexes Auto-Layout bei der Verwendung von Figma sagen. Lasst uns anfangen. Ich zeige Ihnen zuerst, was wir bauen werden , und ich zeige Ihnen Techniken, wie Sie ein reaktionsschnelles Fenster oder einen Kartenoberflächenschutz erreichen können reaktionsschnelles Fenster oder einen Kartenoberflächenschutz , den Sie mit Figma erstellen können. Lasst uns anfangen. So können Sie auf dem Bildschirm sehen, dass wir ein reaktionsschnelles modales Fenster-Autolayout haben . Und das ist das modale Fenster, das wir gebaut haben. Wenn wir also versuchen, es von rechts zu drücken, können Sie sehen, dass es vollständig reagiert. Die Knöpfe und das Kleidungssymbol bleiben oben und unten und ihre festen Positionen und der Text quetschen sich tatsächlich mit der Box. Dies ist sehr einfach zu erstellen. Ich muss dir zeigen, was eigentlich die Ebenen darin sind . Wir haben also Schaltflächen zu Schaltflächen, die sich in automatischen Frames befinden und dann zu einem anderen Auto Frame kombiniert werden. Das werden wir schaffen. Also lasst uns anfangen. Zuerst erstellen wir unseren Button. Drücken Sie T. Ich werde diesen löschen lassen, fügen Sie dieser einen Verschiebung ein automatisches Layout hinzu. Wir haben das Auto-Layout hinzugefügt. Fügen wir hier Füllfarbe hinzu. Und dieses Mal werden wir diese rote Farbe für den Text verwenden . Wir werden weiße Farbe verwenden. Hier haben wir unseren Basic-Button und Sie können sehen, dass dies die Polsterung um den Artikel ist und dies ist ein Abstand. Für den nächsten Artikel. Versuchen wir rechts eine Polsterung von 81620 zu verwenden. Benutzen wir hier drüben 28. Das wird mein Knopf sein. Fügen wir hier ein paar abgerundete Ecken hinzu, acht Pixel. Lass uns vier benutzen. Hier haben wir unseren Abstiegsknopf. Ich werde oben und unten 1010 benutzen. Also haben wir einige gute Größe aber Button. Wir haben unseren Knopf. Nennen wir es „BTN“. Replizieren wir es, indem wir die Alt- oder Wahltaste drücken oder halten und replizieren. Und ich werde es platzieren, sagen wir 16 Pixel voneinander entfernt. Und dieses Mal werde ich seine Farbe in diese Farbe ändern . Und das wird abgesagt. Im Moment können Sie sehen, dass wir es so eingestellt haben, dass er Inhalte umarmt. Deshalb wird es tatsächlich erweitert, indem es seinen Inhalt ändert. So wird es immer Inhalte aufnehmen und erweitern und zusammenziehen. Wenn wir diese Einstellung haben, die Umarmung ist, umarmen Sie Inhalte. Okay, also haben wir beide Knöpfe. Lassen Sie uns sie in ein, innerhalb und anderes Auto-Layout einwickeln . Also Shift, ich habe beide dieser Verschiebung ausgewählt. Das ist wirklich wichtig. Das sind Knöpfe. Bis jetzt haben wir Schaltflächen im Rahmen einer anderen Schaltfläche erstellt, bei dem es sich um Schaltflächen im Rahmen einer anderen Schaltfläche erstellt, bei dem es einen automatischen Layout-Frame handelt. Und wir haben sie zu beiden zusammengefasst. So können Sie hier sehen, dass wir die automatische Layout-Richtung horizontal haben . Wenn wir also ein bisschen hinzufügen und es wird auf der rechten Seite sein. Dies ist der Raum zwischen ihnen. Wenn Sie also den Raum wie 12 Pixel oder zehn Pixel zwischen ihnen steuern möchten , können Sie das hier tun, wir haben unsere Schaltflächen bereit. Okay? Jetzt brauchen wir Text und ein Icon. Hier haben wir unseren Button. Lass uns eine Überschrift benutzen. Überschrift. Hier drüben. Ich habe versucht, fett zu benutzen. Lasst uns 24 benutzen. Ich repliziere das. Schon wieder. Das ist, lasst uns versuchen , einen besseren Graph zu verwenden, also werde ich einen Rahmen wie diesen verwenden. Und versuchen wir zu sehen, ob wir das haben, das ist eine Kiste. Ich werde Control Backs benutzen, soweit Lauren schrägst. Plus. Versuchen wir hier ein paar Texte hinzuzufügen. Englische Verben, Graph. Fügen wir hier zwei Absätze hinzu. Dies ist unser Absatz. Lass uns 1616 benutzen. Wir werden regelmäßig benutzen. Verwenden wir einen Absatz. Ich denke, ich sollte den zweiten löschen. Ich überspringe all diese Einstellungen. Das ist nur, lass uns so etwas benutzen. Vielleicht so etwas. Okay. Wir haben unseren Textabsatz , der dieser ist. Dieser und geht zum Vorwand. Und jetzt werden wir hier ein Symbol hinzufügen . Fügen wir ein Symbol, Symbole, Kreuzsymbol hinzu. Wir fügen hier ein weiteres Symbol für die Schließen-Schaltfläche hinzu. Lasst uns Flows verwenden. Also lasst uns dieses Mal dieses Mal benutzen. Das ist unser Button. Versuchen wir diese Farbe zu benutzen, vielleicht diese. Um dieses Fenster zu schließen. Wir haben diesen Kreis hier drüben. Jetzt wählen wir sie alle aus. Und Brustverschiebung und füge ein automatisches Layout hinzu. Sie können sehen, dass jetzt das automatische Layout hinzugefügt wurde. Nennen wir es bestellen. Wir müssen eine Füllfarbe hinzufügen, die weiß sein wird. Wir müssen hier drüben etwas Polsterung haben. Also 16 oben, sagen wir bei 24 links, 2416 unten. Sie können sehen, dass wir das grundlegende Layout unseres Modalfensters haben. Lass uns ein paar abgerundete Ecken benutzen. Lass uns etwas Schatten benutzen. prozentuale Schatten wird zwei sein. In diesem Fall haben wir einen sehr leichten Schatten hinzugefügt. Jetzt können Sie sehen, dass wir etwas verwenden müssen, das dieses Layout sein wird. Ich habe dieses Modell und Modell ausgewählt und wir werden das richtige Layout verwenden. Um diese Schaltflächen und alles auf der rechten Seite zu bringen, können Sie diese Schaltflächen, diesen Text, diese unteren Schaltflächen und diese Ecke sehen . Einer wurde nach rechts verschoben. So werden Sie das erreichen. Der erste Schritt ist dies. Und wenn wir versuchen, dies zu drücken, können Sie sehen, dass der Text nicht reagiert, weil er über den Tellerrand hinausgeht. Um dies zu erreichen, müssen wir auf den Text klicken und anstelle der festen Breite verwenden wir den Füllcontainer. In ähnlicher Weise wird dieser Behälter gefüllt. Sie können sehen, dass es den Container bereits gefüllt hat , also müssen wir diesen einfach benutzen. Und Sie können dort unsere Responsive Box sehen und unsere Steuer quetscht tatsächlich damit. Man sieht, dass der Abstand zwischen diesen beiden tatsächlich von hier aus kontrolliert wird , wir haben zehn. Also wenn ich versuche zu reduzieren, whoops, nicht die Knöpfe, sondern das Modellfenster. Also haben wir 23, Lass uns 16 benutzen. Und es wird so sein. Dies ist die, wenn Sie mehr Dinge kontrollieren möchten, können Sie ihnen ein anderes Layout geben. Also habe ich beide Texte ausgewählt und werde ihnen mehr Auto-Layout geben. Und statt heißer Inhalte müssen wir den vollen Behälter wieder benutzen. Und hier können wir den Abstand zwischen dem Text steuern. Sie können also sehen, ob ich zum Beispiel möchte, dass es so ist. Wenn ich nun versuche, es auszuwählen und zu quetschen, oops, was passiert? Der Rahmen ist eigentlich der Rahmen. Ich glaube, der Text wurde verschoben. Schon wieder. Wir müssen den vollen Container machen. Und du kannst es wieder aufnehmen. Dies ist ein anderer Weg. Im Moment ist mein Text tatsächlich drin. Beide Texte befinden sich in einem anderen Auto-Layout. Sie können hier Text in einem anderen Arterienlayout sehen. Sie können das Gleiche ohne dieses Auto-Layout machen, aber ich liebe es, den Abstand zwischen meinen verschiedenen Elementen zu steuern. So kannst du das machen. Dies fasst unser modales Fenster zusammen, in dem wir ein reaktionsschnelles modales Fenster erstellen, das gequetscht und erweitert wird , und Texte, die wir mit allen Grenzen umwickeln werden die wir mit allen Grenzen umwickeln der Abstand oder die Polsterung um ihn herum. Ich hoffe, Sie haben dieses Auto-Layout-Video geliebt oder genossen. Stellen Sie sicher, dass Sie sich meine anderen Kurse, Brillen, Videokurse und YouTube-Videos ansehen. Bis dahin treffe ich dich in einem anderen Video, pass auf. 21. Typography – Skalen und Stile 01: Der erste Schritt in Ihrem Designsystem wird die Typografie sein. Also wählen wir die Typografie und dann ihre Größe und verschiedene Kategorien aus. Titel, Titel eins, Unterüberschrift, Beschriftung, all diese verschiedenen Kategorien. Das werden wir in unser Designsystem definieren. Also lasst uns anfangen und hier fängst du an. Erstellen wir also einen neuen Rahmen. Und wir nennen diesen Rahmen Bob Murphy. Jetzt wählen wir einen beliebigen Typhoeus aus. Du musst darüber experimentieren. Es gibt eine andere Klasse, meine Klasse, der es um Designrichtungen geht und Schriften auswählen. Wir werden nicht durchgehen wie Sie diese Schrift auswählen werden. Im Moment wähle ich eine beliebige Schrift aus, nennen wir es Portal. Text. Base, Basisschriftgröße wird 18 sein. Versuchen Sie zu vergrößern, damit Sie richtig sehen können. Also hier haben wir Roberto-Texte, und jetzt verwende ich ein Plugin, indem ich die Strg- oder Befehls-Schrägstrich drücke. Und das nennt man Waage. Mal sehen, welches Maßstab gleich Typ Skala ist. Dieser eine Typ skaliert. Hier haben wir es. Und Sie können sehen, dass es mir den Skalenwert zeigt, 1,25 und die Zeilenhöhe 1,2 beträgt. Ich setze es auf 1.4. Sechs Skalen in Vorwärtsrichtung oder kleine bis größere, größere Größen, zu kleine Größen. Okay, also denke ich brauche diese vielen, die sind gut. Ich klicke auf Generieren. Und hier haben wir gerade unsere Skalierung. Sie können sehen, dass es eine sehr schöne Skala geschaffen hat. Lasst uns das löschen. Und ich werde diesen löschen und ich werde auch diese Frame-Biografie verwenden. Sie können sehen, dass es mir zeigt, dass dies unser Basiswert ist 18, die Skalierung ist 1,25. Und dann sind das unsere verschiedenen Größen. Normalerweise werden wir sie tatsächlich richtig benennen , denn das ist nicht das, was wir brauchen. Das wird also unsere Überschrift oder Titel oder Titel sein , so etwas. Nennen wir es eins. Nennen wir es einfach, nennen wir es H1. Wenn wir mehr Stile haben, zum Beispiel Desktop-Schrägstrich, liegt das an Ihnen. Wenn Sie also zwei oder drei verschiedene Skalen für Desktop- und mobile Apps haben , verschiedene Maßstäbe, ist das eine andere Geschichte. Gerade jetzt. Sie können sehen, ja, behalten Sie diese. Und ich werde es tun, was ich tun werde, ist, dass wir sie zuerst nennen. Nennen wir es. Gerade jetzt. Was ich versuche , ist, dass ich versuche, sie richtig zu benennen. Nennen wir es Unterüberschrift. Nennen wir das einen Untertitel. Untertitel. Nennen wir es einen kleinen Untertitel. Das nennt man es „Nennen wir es 4D“. Ich zeige dir, warum ich diese Beschriftung nenne. Nennen wir es über die Leitung. Dieser wird unsere Beschriftung sein. 12 Pixel ist unser Beschriftungstext und das ist unsere Zeile. Also werde ich den Stil ändern. Alle Lücken. Lücken. Dieser hier, alle Caps wie diese. Und ich werde auch den Abstand des Zeichenabstands auf 10% erhöhen . Verwenden wir 5% oder 1% Okay, also können Sie sehen, dass dies ein Online-Text ist ich Ihnen mitteilen werde, warum ich das mache. Hier sind die Richtlinien für die menschliche Benutzeroberfläche von Apple, und Sie können sehen, dass sie diese verschiedenen Stile haben. Großer Titel, Titel eins, 23 Überschrift, halb fett, Körper-Callout, Unterüberschrift, Fußnotenbeschriftung eins und Beschriftung auch. Das ist also tatsächlich ihre Größe. Dies sind verschiedene Kategorien , die im Apple-Designsystem implementiert werden . Wenn wir uns Material Design System ansehen, sehen Sie, dass wir Headline One, 234566 Schlagzeilen haben. Dann haben wir zwei Untertitel zu Körpergrößen. Einer ist Körper 116 Pixel. Lassen Sie uns auch den Abstand von 0.5 erwähnt. Hier haben wir 14 Pixel. Button ist ein bisschen größer. Proteinpixel, mittleres Gewicht, Medium und Beschriftung sind hier drüben. Und dann haben wir eine Überlagerung. Überlügen ist im Grunde lassen Sie mich es Ihnen tatsächlich zeigen. Okay, also können Sie sehen, dass es so ist, wie es tatsächlich verwendet Overline ist tatsächlich die Zeile am Anfang einer Überschrift. Wir haben uns vielleicht für eine Kategorie entschieden, so etwas. Überschrift und Körper. Dies ist der Text des Haupttextes. So wenden Sie Ihr Designsystem oder Ihre Typenwaage in Ihr Designsystem ein. Jetzt gehen wir zurück zu Figma. Und jetzt werden wir hier Typstile erstellen. Ich werde es tun, ich halte die Kontrolle und die Umschalttaste. Befehl und Umschalt und klicken Sie hier auf nur diese Überschriften oder Steuern. Nein, ich habe sie alle ausgewählt. Ich führe ein anderes Plugin aus, Steuerung oder Befehl Forward Slash Type Styles. Dies ist ein sehr nettes Plugin , das Type Styles genannt wird. Und Sie können entweder die Schriftfamilie Schriftgröße verwenden, was auch immer Sie verwenden möchten. Beispiel, ich werde die Schriftfamilie im Namen verwenden. Verwenden wir die Schriftgröße. Und lass uns benutzen. Ich denke, das wäre großartig. Also benenne ich tatsächlich um und nenne sie. Lassen Sie uns Typstile erstellen und Sie können sehen dass es Probleme mit neun Textilien erstellt wurden. Wenn ich hier drüben auswähle, kannst du sehen, dass es Roboto erstellt hat. Und in Roboto habe ich diese ganzen Textilien. Lass mich sehen, was hier passiert ist. Also, der Name, den wir vorgeschlagen haben, haben wir vorgeschlagen, dass der Name des Typs lautet. Klicken Sie hier drüben. Sie können sehen, ob ich all diese lösche, indem Sie Löschen drücken, ich kann sie neu erstellen. Versuchen wir sie neu zu erstellen. Ich halte meinen Befehl und die Umschalttaste oder die Strg- und Umschalttaste gedrückt. Auch hier führe ich die gleichen Plug-In-Typ-Stile aus. Jetzt können Sie auf Text benutzerdefiniert klicken. Nennen wir sie Typstile. Hier drüben. Ich verwende die Schriftfamiliengröße. Und klicken Sie auf Typengröße festlegen. Jetzt können Sie sehen, dass es neunmal zehn Mal benotet wird. Und wenn wir jetzt hier drüber klicken, können Sie sehen, dass wir Typ Stil haben und darin haben wir Roboto. Und das sind verschiedene Typengrößen. Und Sie können sehen, dass 140 tatsächlich die Zeilenhöhe ist. 22. Typography – Skalen und Stile 02: Dies ist der erste Schritt, um Ihre Typgröße zu erstellen. Sobald wir also unsere Typengröße aktualisiert haben, werden wir als Nächstes auch einige andere Dinge erstellen , die Ihnen zeigen können, was passiert. Das sind also eigentlich Frames. Versuchen Sie als nächstes, es ein bisschen größer zu machen. Und warum dieses Auto-Layout in diesem Rahmen, muss ich das automatische Layout entfernen. Layout. Okay, das ist also ein normaler Frame. Lassen Sie mich nun versuchen, hier etwas hinzuzufügen, was unsere Verwendung sein wird. Also müssen wir unseren Entwicklern oder anderen Designern zeigen , dass Sie dies auf diese Weise nutzen werden. Sagen wir Überschrift Paragraph. Hier haben wir das hier. Und wenn wir zu den Vermögenswerten hier übergehen , müssen wir diese Stile verwenden. Versuchen wir dies mit Absatz zu verwenden. Auch hier werden wir dies replizieren und wir werden eine Distanz von 1828 haben. Lass uns 24 benutzen. Anstatt 44 zu verwenden, werden wir 18 verwenden, was unser Absatz ist. Ändern Sie die Farbe dieses Absatzes in ein bisschen dunkleres Grau wie folgt. Lasst uns einen anderen Lorem benutzen. Plus. Wir werden einen englischen Absatz oder zwei Absätze verwenden. Hier haben wir es. Wenden Sie an, welches Textil, das 18 ist, ändern Sie die Farbe. Jetzt können Sie sehen, wir zeigen ihnen, dass dies die Beispielverwendung von Überschrift mit einem Absatz ist . Es wird also auch den Abstand zwischen ihnen haben. Sie müssen den Abstand auch anzeigen , dass dies Abstand sein wird. Dies sind die Farben der Überschrift und die Absatzfarben, die wir in der nächsten Lektion erstellen werden. Im Moment machen wir uns mehr Sorgen darüber. So können Sie auch hier drüben einen Textlink erstellen, wenn Sie möchten. Was ist mit einem Absatz hier mit einigen Überschreibungen? Lassen Sie uns also diesen Overline-Feed oder die Texte hier erstellen. Nennen wir es Overline-Kategorie, Kategorieprodukt. Jetzt wählen wir von hier aus über Zeile aus. Okay, das war also eigentlich 14. Wir haben es. Wir werden auch den Abstand zwischen ihnen zeigen , der acht sein wird. Ups. Im Moment sind es also neun. Was ich tatsächlich mache, ist, dass ich meine Alt- oder Wahltaste halte und auf einen der Elemente klicke und auch zu Microsoft zu einem anderen wechsele. Es zeigt, dass es acht Pixel voneinander entfernt ist. So wirst du es ihnen zeigen. Sie können hier auch etwas Farbe verwenden, zum Beispiel versuchen wir, dieses Lila zu verwenden. Violett. Versuchen wir das zu benutzen. So zeigen Sie Ihren Entwicklern und Designern, dass dies alles ist, was Sie meinen Text mit Überschriften und Überschriften verwenden werden , und so werden die Absätze aussehen. Sie können die Zeilenhöhe sehen. Wenn Sie also die Zeilenhöhe oder so ändern möchten, müssen Sie auf einen leeren Bereich klicken und Sie müssen weiter in dieses Textil gehen und versuchen, die Einstellungen hier zu ändern. Zum Beispiel haben wir hier 8% und ich möchte 10% haben. Jetzt können Sie sehen, dass es 10% des Abstandes hat. In diesem Stil hier drüben werden Sie sie so nennen. Du kannst sie auch benennen. Wenn ich das zum Beispiel habe, kann ich einfach hier rüberklicken. Und anstatt 14 zu haben, kann ich auch verwenden, dass dies tatsächlich überlagert. Das ist die Beschriftung. Stellen Sie also sicher, dass Sie sie richtig benennen. Das ist unser Körper. Das war lass es uns Unterüberschrift nennen. Ja. Dies ist Unterüberschrift. Nenne sie richtig. Das ist ein großer Titel. Das ist Überschrift eins. Nennen wir es Überschrift Eins zu h3. So können Sie jetzt sehen, dass die Namen aussagekräftiger und leichter zu merken sind . So wird Ihre Textdatei sein. Ich werde mein Projekt mit dir teilen. Lassen Sie mich Ihnen zeigen, was ich hier in diesen Textilien gemacht habe. Hier habe ich die Typskala. Sie können hier sehen, dass ich den Typ Scale Überschrift 123 habe. Ich zeige die Größen hier nicht an weil sie sich in diesem Text befinden. Ich habe verschiedene Texte für Desktop-Mobilgeräte, Board, drei oder vier verschiedene Links zur Fettbehandlung. Und Sie können hier sehen, dass wir Farbstile haben. Wenn Sie hier hinschauen, können Sie sehen, dass ich meine steuerliche Behandlung auf beiden Hintergründen zeige , dunklere und hellere. Lass mich es dir zeigen. Hier haben wir also die Bestandteile von Texten. Sie können also hier die Texte mit der Überschrift sehen und dann haben wir den Text, dann haben wir einen Button. Ich zeige tatsächlich, dass Sie Ihre Texte so behandeln werden . Ebenso können Sie sehen, ob Sie hier sehen, dass dies ein Listenelement mit einem Absatz ist. Es zeigt auch die Abstände zwischen ihnen. Dies ist wieder eine große Überschrift. Sie können also sehen, ob ich darauf klicke, sehen Sie, dass es sich um Rubrik 75 handelt. So nenne ich sie tatsächlich. So nenne ich sie tatsächlich Text-Schrägstrich-Desktop-Schrägüberschrift . Und es wird für verschiedene Überschriften angezeigt. Dann nochmal, Textschrägstrich für mobile Schrägstriche. Warum zeige ich dir das, weil du wissen musst, dass es viele Möglichkeiten gibt, sie richtig zu benennen. Ich kann Ihnen also einfach führen, wie Sie mit dem Aufbau Ihres Designsystems beginnen können. Ruhe liegt bei Ihnen, wie Sie die TI-Phase tatsächlich auswählen. Unterschiedliche Schrift für Überschrift, andere Schrift für den Körpertext. Sie können sehen, dass ich eher Body“ verwende, ich benutze Absatz. Sie können sehen, dass dies Desktop-Absatz 14182430 ist. Also war ich das eigentlich für ein Webdesign-Projekt. Also habe ich keine Untertitel verwendet oder kleine Tags sind Fußnote oder ähnliches. Also verwende ich diese vier Größen. Stellen Sie sicher, dass Sie bei der Erstellung Ihres Designsystems auch die Typverwendung anzeigen. Sie können hier in der Ecktypverwendung sehen. Dies ist sehr, sehr wichtig, wie Ihre Entwickler wissen, dass die Verwendung dieser Komponente oder wie man Dinge ausbreitet wie man diese Absätze verwendet. Sie können auch, was Sie auch tun können, ist zum Beispiel diesen ganzen, diesen ganzen Absatz mit Ihrer Überschrift, Sie können eine Komponente erstellen. Und Sie können hier sehen, dass dies eine Komponente ist. Wann immer ich will, kann ich versuchen, meine Komponente herauszuziehen. Hier haben wir also Komponententext. Hier haben wir es Komponententexte. Also kann ich es einfach überall ziehen und ablegen. Und es wird hier einen Komponententext erstellen. Dies sind, Sie können die Schlüssel zum Erstellen eines Designsystems sagen . Sie erstellen Typenmaßstäbe wählen Ihre Basisschrift aus. Sie erstellen Typmaßstäbe und erstellen dann Arten von Stilen. Dann erstellen Sie Komponenten mit diesen Typstilen, indem Sie Ihre Überschrift und Ihren Absatz verwenden und diese mit Ihren Entwicklern geteilt haben. Und sie werden es einfach per Drag & Drop ziehen. Und alle Ihre anderen Designer und sie werden es in Ihrem Designsystem verwenden. Hier geht es um Text- und Typenmaßstäbe, tippen Sie auf Textstile. sehen uns bald in der nächsten Lektion, in wir über Farben diskutieren werden. 23. Color und Stile in Designsystem 01: Willkommen zu einem anderen Video über Designsystem. Heute werden wir mit unseren Farben umgehen. Wir werden Farben und Skalen erzeugen. Dann geben wir späte Zwecke zwei verschiedene Farben , die diese Farbe zu diesem Zweck hat. Diese Farbe dient zu diesem Zweck , denn wenn wir Skalen erstellen, haben wir möglicherweise 4050 Farben. Aber wir werden sie nicht alle benutzen. Wir werden vielleicht einige selektive zehn oder zwölf Kurven verwenden. Wir müssen angeben , dass diese Farbe für diesen bestimmten Zweck bestimmt ist . Also lasst uns anfangen und sehen, was wir tun können. Jetzt kannst du sehen, dass ich hier drüben habe, lass uns hineinzoomen. Dies wird meine Start-Farbpalette sein. Und ich habe tatsächlich ein Webserver-Webtool verwendet, das dieses genannt wird, Coolers Dot CEO. Und ich benutze Generate und das Farbschema von hier aus erstellt. Die erste Farbe, die lila war , die ich selbst ausgewählt habe, und die anderen unterstützen tatsächlich Farben, die Sie hier erzeugen können. Müssen Sie zum Beispiel nur, wenn Sie diese sperren möchten , nehmen wir an, dass diese meine Primärfarbe ist. Wenn ich die Leertaste drücke, können Sie sehen, dass sie andere Farben erzeugt , die sich auf diese beziehen. Vielleicht möchte ich Lila mit etwas Sian verwenden, was eine sehr gute Kombination ist. Auch grün. Ich sperre sie ein, ich werde andere drehen. Lass uns eine dunkle 12 benutzen. Und lass uns das benutzen. So erstelle ich ein Farbschema und exportiere es als SVG, um mit der Erstellung meines Designs zu beginnen. Also hier haben wir sehr scharfe Farben. Hier haben wir 12345 Farben, fünf Farben, und eine wird unsere Schwarze sein, eine wird unsere Grundfarbe sein, eine wird unsere Sekundärfarbe sein. Fangen wir also damit an. Hier haben wir es. Sie die Gruppierung auf und löschen wir diese. Dieser wird meine Grundfarbe sein. Dieser wird meine Sekundärfarbe sein. hast du in den Knöpfen gesehen. Lass mich es dir zeigen. Wenn ich hier rübergehe, kannst du sehen, dass dies unsere Grundfarbe ist, das ist lila und dies ist die sekundäre Aktion erforschen. Dies ist eine zweite, sekundäre Aktion. Und das benutzen wir. Sie können sehen, dass dies unsere tertiäre Farbe ist, wenn wir ein aktives Feld haben. Sie können sehen, dass wir hier eine sehr bläuliche, bläuliche, grünlich-blaue grünlich-blaue spanische spanische spanische Farbe haben. Gehen wir also zurück zum Styleguide. Das ist also unser tatsächlich, das es auslöst oder sagen wir. Wir können es auch eine aktive Farbe nennen. Das wird unser Schwarz sein. Lass es uns so hier drüben behalten. Dies ist unsere, das ist wieder unsere Ergänzungsfarbe. Wir werden es irgendwo irgendwo benutzen wo wir es nicht benutzen werden. Ansonsten brauchen wir möglicherweise eine rote Farbe. Für Adders. Vielleicht. Versuchen wir, dies zu replizieren, da unsere Statusfarben tatsächlich als semantische Farben bezeichnet werden. Semantische Autos werden die Sterik verschiedener Objekte, verschiedener Elemente zeigen . Versuchen wir also, zu diesem bläulichen überzugehen. Rot. Die Sättigung ist zu viel. Lasst es uns näher bringen. Die Sättigung ist zu groß, also werde ich die Sättigung reduzieren. Hier ist also eine Sättigung in der Mitte. Versuchen wir zwei, machen es weniger gesättigt und versuchen wir, seine Helligkeit zu erhöhen oder zu verringern. Farbton. Ich wollte wieder ein bisschen roter sein. Dieser scheint gut zu sein. Versuchen wir es. 99 Farbton. Die Helligkeit wäre 7490. Das wird meine Farbe für meinen Status sein. Lasst uns diese Zeichenfläche erweitern. Habe Farben. Versuchen wir es auf zwei zu erweitern. Jetzt werden wir auch die Größe dieses verkleinern. Wählen wir alle aus. Wähle alle von ihnen aus. Machen wir es zu 100 mal 100, so. Wir werden es so arrangieren. Zuerst wollen wir den Zweck der Farbe. Nennen wir es also. Dies wird der Farbfollower-Text sein. Das werden also unsere Texte schwarz sein. Nennen wir also hier drüben. Textfarben. Vielleicht sind das nur schwarze Farben. Das ist zu klein. Ich werde es hier benutzen, 18 oder hier. Und ich werde Roboto benutzen. Vielleicht kannst du das auch hierher bringen. Das ist eine Infobox. Ich repliziere es oder treffe es. Es wäre einfacher für mich. Weißt du, benutze alles. Lasst uns sie nach unten bewegen. Lass es uns so machen. Hier haben wir unsere Farbskalen, also müssen Sie sie umbenennen. Ich überspringe das. Wir haben unser Farbschema. Jetzt müssen wir einige Fähigkeiten schaffen. Dafür verwenden wir ein Plugin-Steuerelement oder einen Befehl, Schrägstrich, Farbskalen, Farbskalengenerator. Also werde ich benutzen, dass es viele Plugins gibt. Ich habe ein vollständiges Video darüber, wie man diese erstellt. Im Moment habe ich dieses grüne ausgewählt. Wenn ich also auf klicke, wähle ich aus, lass uns einen dichten Schritt auswählen und einfach auf Erstellen klicken. Ich werde dieses ganze Farbschema erstellen. Sie sehen hier drüben, das haben wir gleich hier drüben. In ähnlicher Weise werden wir für alle die gleichen Schritte wiederholen . Ich überspringe das, weil es das Video sehr lang machen wird. Jetzt können Sie sehen, dass wir unser Farbschema erstellt haben. Sie können sehen, dass dies unsere Farbskalen sind. Die sehen echt toll aus. Wenn Sie eine neutrale Farbe haben möchten, können Sie hier etwas mit dem Schwarz haben, vielleicht etwas hellgrüner Farbe oder vielleicht etwas Licht in stumpfer bläulicher Farbe , das Ihnen überlassen vielleicht etwas hellgrüner Farbe oder vielleicht etwas Licht in ist. Im Moment werde ich diese Schwarzen für mein Schwarz-Weiß für meine DAX-Farben verwenden . Und dies wird unsere primäre, primäre Aktionsfarbe sein . Dies ist eigentlich unsere sekundäre Aktionsfarbe. Und wir werden sie nicht alle benutzen. Wählen wir also die Farben , die hier verwendet werden sollen. Wenn du willst, kannst du dies vielleicht erweitern oder du kannst etwas nutzen, den Platz hier drüben, lass uns zwei ausprobieren. Wir werden jetzt unsere App überprüfen. Das ist also unsere Primärfarbe, die 775 CFF 77 ist, was, ich denke, diese ist eigentlich unsere Primärfarbe. Dies ist unsere Action-Button-Farbe. Vielleicht können wir also viele Dinge tun, wie vielleicht können wir einen Schlag wie fünf hinzufügen. Dies wird unsere primäre Aktionsfarbe sein. Dann betrug unsere Sekundärfarbe 79 FEC 47979 Tickets. Versuchen wir es hierher zu bringen. Wir wollen also sehen, ob das befürchtet wird. Es stimmt tatsächlich überein. Ich denke, es ist diesem sehr nahe. Diese Farbe hier zwei, FC 98. Zoomen wir hinein. Ich glaube, es ist näher dran. Dieser wird unsere Farbe sein. Fügen wir hier einen Fünfstrich hinzu. Das ist also unsere Farbe. Sie können die Farben hervorheben in denen Sie denken, dass dies unsere Hauptfarbe für denselben Zweck sein wird , Primär- und Sekundärfarben, dann haben wir größer als Schwarz. Versuchen wir also, welche Hintergrundfarbe 1 Sechstel, 1 Sechstel, 1 Sechstel ist . Also denke ich, dass dies näher dran ist. Vielleicht denke ich, dass es näher dran ist. Versuchen wir also zu sehen, ob die Hintergrundfarbe eins ist. Versuchen wir, sie zu öffnen. Es ist in Blau, 209 bis 516. Der Farbton ist 209. Versuchen wir also 209 zu sehen. Was ist der Farbton für diesen 1188? Das sind 250. Vielleicht, was wir brauchen, um das zu beheben, wir werden diese Farbe verwenden, vielleicht diese Farbe, oder vielleicht können wir diese Farbe verwenden. Versuchen wir, mehr Farbskala für diesen dunkleren Farbton zu erstellen . Oder vielleicht benutzen wir Rot. Repliziere das hier drüben. Lasst uns den Schieberegler hierher bewegen. Ich verwende diese Farbe für den Hintergrund. Beweg sie. Das wird also unsere Hintergrundfarbe sein. Lassen Sie es uns mit einem weißen Strich hervorheben. Verwenden wir Rot hier drüben, weil wir es nicht so sehen können . Wenn du willst, kannst du sie vielleicht richtig benennen. Also lasst uns versuchen, das sofort zu verschieben. Versuchen wir es zu entfernen. Du kannst sehen, dass du hier bist, das ist wieder eine 100, das ist wieder eine 100. Wir wollen es nennen. Nennen wir es 1 Zehntel. Wir müssen sie tatsächlich richtig benennen. Lassen Sie uns also alle auswählen. Ich zeige dir, wie man sie umbenennt. Also Control oder Command R. Also werden wir sie umbenennen, primären Schrägstrich verwenden, nennen wir es lila. Und dann werden wir eine Nummer wie diese benutzen. Du kannst so etwas gebrauchen. Sie können auch versuchen, Zahlenmuster wie das Hinzufügen einer 0 am Ende zu verwenden , dann 20, und wir drücken die Umbenennung. So benennen Sie sie um. Primärfarben slash lila, lila, lila, lila. So wird es also sein. Versuchen wir, die Gruppierung aufzuheben und alle auszuwählen. So werden Sie sie also umbenennen, und so erstellen Sie daraus Farbstile. Also werde ich auch benutzen, du kannst noch eine Sache machen. Also lasst uns versuchen, dass ich dir zeig Komm auf unseren aktuellen Namen. Zuvor verwenden wir Farben Slash Primärfarben. Das wird also mehr, besser. Als nächstes schrägst Rhenium sie wie diese Farben Primärfarben die Farbe, die du hast. In ähnlicher Weise werden wir die Gruppierung aufheben und alle auswählen. Und wieder werden wir sie in Fellows umbenennen. Slash, sekundärer Farbschrägstrich. Nächste Qualität, scharfes Grün. Grün. Dann benutzen wir eine Nummer. Nummer wird am Ende sein, wir werden 03 hinzufügen, diese n entfernen, umbenennen. So benennen wir sie um und wählen dann alle aus. Wir werden ein anderes Plugin namens Bad Schuyler ausführen , glaube ich. Versuchen wir es zu starten. Ups. Wir müssen glauben, dass es eine Möglichkeit gab, mehrere Stile zu erstellen. Es wurde dieses generiert. Okay, das sind also die Plugins, die Tyler Styles generieren. Klicken Sie darauf. Und es wird alle Stile generieren, 21 Stile. Und du kannst hier sehen, wenn wir hier rüber gehen, lasst uns all diese löschen. Sie können sehen, dass ich die vorherigen löschen werde. Primäres Blau wird ebenfalls gelöscht. Lassen Sie uns alle Textilien hier löschen. Farbstil, und Sie können hier sehen, dass wir Farben haben und innen haben wir Primärfarbe. Dann haben wir unsere Sekundärfarbe so. Sie können sehen, dass wir all dies so anwenden können. So erstellen Sie Ihre primären, sekundären und all diese Farben. Also mache ich das Gleiche für andere. Also überspringen wir das. 24. Color und Stile in Design System 02: Jetzt können Sie sehen, dass wir alle Farben, Stile und alles geschaffen haben . Und Sie können hier sehen, dass unsere Farben gut gemacht sind. Primärfarben werden diese sein. Sekundärfarben oder diese Skala. Dann haben wir Schwarze. Das sind unsere Schwarzen und Weißen. Dann haben wir semantische Farbe. Dies sind semantischer Blues, Rot und Grün. Dies werden unsere Statuswissenschaftler für semantische Farben sein. Das ist alles, was Sie erstellen müssen, Ihr gesamtes Farbschema, Farbstil, alles hier drüben. Und der nächste Schritt ist, dass Sie den Zweck zeigen müssen. Sie müssen verschiedene Farben auswählen, die für diese Farben verwendet werden. Versuchen wir also, es so zu erweitern. Versuchen wir zuerst diese auszuwählen und das Kunstbrett zu skalieren. Nennen wir es links. Und das muss normalerweise nicht erweitert werden. Auch hier skaliert dieser auch. Nennen wir es links oben. All dies auch links und oben, wir beschränken sie tatsächlich, damit sie nicht mit unserer Erweiterung dieser Box skalieren . haben wir geschaffen. Versuchen wir also, unseren Farben den Zweck zu geben. Diese Farbe war eigentlich, diese Farbe war für den Hintergrund. Und ich denke, diese Farbe folgte unserer primären Aktion. Diese Farbe war unser sekundärer Knopf. Das werden wir alles schreiben. Wählen wir das aus. Kopiere es hier drüben. So. Krone. Und wir werden ein bisschen kleineres Diagramm verwenden, diesen 24. Ups, wir müssen 24 Typen Größe verwenden. Dies wird unsere Hintergrundfarbe sein. So. So zeigt man den Zweck. Dann werden wir zeigen , dass dies unsere primäre Aktion sein wird . Ich kann nicht sehen, wie groß der Abstand zwischen ihnen ist. Dies wird unsere zweite Reaktion sein. Wir haben den Zweck definiert. Sie können es auch hier so ausrichten. In ähnlicher Weise müssen wir bei Schwarzen sehen, wo wir zum Beispiel für Hintergründe für die Textfelder verwendet haben Hintergründe für . Und das war für den Hintergrund von, haben wir bereits getan. Darauf werden wir suchen. Dies wird unser Hintergrund sein. Ich glaube, es war etwas näher. Versuchen wir uns das hier zu schnappen. C und füge es hier ein, um zu sehen, welche Farbe tatsächlich übereinstimmt. Es ist diesem sehr nahe. Das ist die Farbe. Also müssen wir uns replizieren. Es steuert uns Kunst, die Alt drückt. Replizieren wir es. Und wir werden das Gleiche hier benutzen. Wir nennen es die Hintergrundfarbe. Und mal sehen, ob wir mehr haben. Das ist auch, ich denke die gleiche Farbe. Dasselbe, das hier benutzt wurde. Gleiche Farbe. Dieser ist anders. 353344, und es ist in diesem violetten Farbton. Wir werden all diese definieren. Dies ist unser Input-Hintergrund. Und das waren auch vier. Dies ist eigentlich der erste, nennen wir es Dabs Hintergrund. Dies gilt auch für den Hintergrund der Tabs. So werden wir verschiedene Token generieren. Das ist also der Zweck und das Token. Wir müssen diese Farben verwenden. Wenn wir also das Team umkehren, werden wir diese Token rückgängig machen. Stellen Sie sicher, dass Sie angegeben haben, dass dies die Regel ist , dass diese Farbe abgespielt wird. Du hast die Idee. Und dann haben wir das. Ein paar semantische Farben. Also mal sehen, ich glaube, es war diese oder diese. Lass uns das benutzen. Ups, sind hier nicht optional. Dies ist unser aktiver oder aktiver Input. Dies zeigt tatsächlich , dass dies eine aktive Eingabe ist. Jetzt müssen wir es tun, wir hatten noch einen. Replizieren wir es hier und versuchen, die Farbe zu ändern. Ich glaube, wir haben so etwas oder hier benutzt , lass mich es dir zeigen. Also hier haben wir eine weitere Säule , die grünlich gepunktet ist. Ich glaube, es war das hier. Ich schnapp mir diese Farbe. Lasst uns das löschen. So. Dies ist unser prozentualer Balken oder Fortschrittsbalken. Wir können es auch als Fortschritt bezeichnen. Hintergrund. Ist keine Farbe mehr, die wir verpasst haben. Hier. Wir haben analytische, die bläulichgrün ist, irgendwie. Ich bin mir nicht sicher, welche Farbe diese Farbe ist. Versuchen wir diese Farbe zu bringen. Ich glaube, wir haben es ein paar Orte benutzt. Ich glaube, das ist die Farbe. Dies ist eine andere Farbe, die wir hier benutzt haben. Also schnappen wir es uns. Diese Farbe ist tatsächlich ein Fortschritt. Nennen wir es Fortschritt, dunkle Farbe, Fortschritt. Dies wird unser Fortschrittsbalken für die Fehler sein. Ich denke, lasst uns versuchen zu sehen, ob hier irgendeine Farbe zutrifft. Versuchen wir hier drüben Border zu benutzen. Strich und versuche die Farbe von hier auszuwählen. Mal sehen, welches übereinstimmen wird. Dieser sieht gut aus, lesen Sie 50. Also werden wir das benutzen. Ups. Gehen wir zurück zu unserem Styleguide. Lesen Sie 50 ist das hier. Dieser sieht gut aus auf einem Addierer. Wir werden den Mörser benutzen . Wir müssen den Input-Markt nutzen, okay? So passen wir einfach die Entfernungen an. So werden wir alle Zwecke definieren. Also denke ich, dass unser Farbschema fertig ist. Eine Sache, die wir verpasst haben , ist eigentlich unsere Textfarbe. Das ist also unsere Textfarbe, die „Konto erstellen“ lautet. Das ist eigentlich diese violette Farbe. Das ist also eigentlich diese Farbe. Dies ist unsere Textfarbe. Also lasst es uns hierher bringen. Und Sie können auch einen separaten Abschnitt oder hier für Textfarben erstellen . Lasst uns das schnappen. Bewegen Sie das etwas tiefer. So. Lasst es uns hierher bringen. Nennen wir es Text. Dies ist unsere Absatztextfarbe. Dies ist eine Überschrift, Überschrift. Auf dem Weg, weil wir wissen, dass das Text ist. Wir haben eine Farbe, Textfarbe hier drüben. Und versuchen wir herauszufinden, dass wir hier die Textfarbe gedämpft haben, was hier drüben etwas langweilig ist. Auch dieser Eingabetext ist die gleiche Farbe. Versuchen wir also, es näher zu bringen und zu sehen, welche Farbe es übereinstimmen wird. Ich denke, es wird irgendwo passen. Ich denke, diese Farbe oder vielleicht diese Farbe wird besser funktionieren. Versuchen wir also, hier ein Rechteck wie dieses zu erstellen hier ein Rechteck wie und diese Farbe hier anzuwenden. Ich denke, es ist näher an dieser Farbe, diese Farbe werden wir für den gedämpften Text verwenden. Schnappen wir uns diese Farbe. Wir werden es hier für gedämpften Text verwenden. Text, stumm geschaltet. Okay, hier haben wir zwei Textfarben. Eine davon ist die Überschrift oder unsere Grundfarbe. Mal sehen, ob wir noch eine Farbe verwendet haben. Das ist also das Gleiche. Wir haben eine weitere Farbe, die im Fokus steht, die etwas dunkler ist, wo wir nur einen kleinen Infobereich haben. Also lasst uns versuchen , das hier zu benutzen. Dies sind gedämpfte Texte, die 50 BW waren. Versuchen wir es mit 60, BW 64. Die anderen Texte für den Infotext, klein im Volltext. Jetzt können Sie sehen, dass wir alle Abschnitte vorbereitet haben. Wir haben verschiedene Primär - und Sekundärfarben. Dann haben wir unsere Texte Farben oder Texte Farben. Sie können sie richtig ausgerichtet machen. Oder Triumph, gerade jetzt ist dieser Vortrag schon sehr lang. Also hier haben wir Eingabe-Hintergrund-Tabs, Farbe. Dann haben wir unsere Statusfarben, verschiedene semantische Farben. Wie Sie sehen können, verwenden wir hier fast 1234567891011 Farben. Ich glaube. Dental 15 Farben werden Ihr gesamtes Designsystem aufbauen , das verwendet wird. Andere Farben dienen nur zur Unterstützung. Vielleicht brauchen wir irgendwo eine neue Farbe, also müssen wir diese vielleicht verwenden. Das ist alles darum, wie Sie Ihre Farben und alles verwenden und Ihr gesamtes Farbsystem in Ihrem Designsystem erstellen . Also werde ich sicherstellen, dass Sie lernen, ich diesen Dateilink an Sie weitergeben werde , damit Sie sehen können, was ich getan habe. Bis dahin treffen wir uns in einer anderen Lektion, passen Sie auf. Tschüss. 25. Button und I-System 01: Bevor wir mit größeren Komponenten beginnen und etwas größere Komponenten bauen, beginnen wir mit kleineren Komponenten. Wir werden verschiedene Schaltflächen, verschiedene Chips, verschiedene kleine Textinformationen erstellen verschiedene kleine Textinformationen , solche Dinge. Wir werden uns mit diesem Schaltflächenbereich befassen und Schaltflächen mit automatischem Layout und unterschiedlicher Varianz erstellen . Lasst uns anfangen. Jetzt können Sie sehen, was wir hier haben diesen Button, wir erstellen einfach ein Konto. Es gibt einen anderen Stil , der Ghost-Button ist. Dies sind zwei Stile, die gleiche Schaltfläche. Dann haben wir dieses Problem. Dies ist eine nicht gerollte Know-Feature-Taste. Das ist ein bisschen anderer Button. Dann haben wir diesen Explore Button, grüne, die vier verschiedene kleinere Kurse sind. Dann haben wir diese Top-Navigation. Die Navigation wird einen aktiven Status und einen normalen Status haben. Das ist ein anderes. Ich denke, das sind alles auch dieses. Dieser ist auch eine Dropdown-Schaltfläche. Das werden wir schaffen. Und dann haben wir das. Dies ist auch ein Fortschrittsbalken, Balken. Es wird nicht sein, dass wir für dieses kein automatisches Layout verwenden da dies drei Elemente hat. Aber wir werden eine Komponente daraus erstellen damit wir sie einfach aktualisieren und umbenennen und ihre Textur ändern können. Ich glaube, das war's. Also werden wir zuerst mit den Knöpfen gehen. Im Moment haben wir unsere Seiten, um System zu entwerfen. Dies ist ein weiterer Frame und ich rufe ihn an. Zuerst werden wir sehen, dass dieser Button tatsächlich 327 mal 48 Pixel beträgt. Versuchen wir, dies in unserem Designsystem zu replizieren. Sie können auch C befehlen oder Befehl V kopieren, kopieren, um eine Kopie davon zu erstellen. Und jetzt wählen wir diese Tasten und drücken D und alles, was wir verwenden werden. Stellen Sie sicher, dass Sie diese Topographie BD und Text hier ausgewählt haben . Im Moment ist dies ausgewählt und das werden wir verwenden. Drücken wir Umschalttaste und Umschalttaste a, um diesem ein automatisches Layout hinzuzufügen. Und das erste, was wir tun werden, ist, dass wir auch hier etwas Polsterung hinzufügen werden. Fügen wir unten 16 und die Top 16 hinzu. Ich füge 58 oder 57,5 hinzu. Nennen wir es so. 57,5 hier drüben. Vielleicht nennen wir es 5757. Dies ist unsere Hauptstruktur und ich werde Ihnen sagen, warum ich vorher 5757 hinzugefügt habe. Lassen Sie mich Ihnen sagen was das Problem eigentlich sein wird, fügen wir eine freie Säule hinzu. Also werden wir eine Füllfarbe verwenden, die diese ist, lila 50. Purple 50 ist also die Farbe, die unserer tatsächlichen Farbe sehr nahe kommt. Wir werden acht Pixel Rundheit hinzufügen und diese öffnen. Und wir werden das Glätten von Ecken verwenden. Dies ist unser eigentliches Layout einer Schaltfläche. Aber im Moment ist es nicht gleich der Größe 327. Wir müssen es reparieren , da wir für alle Tasten die gleiche Größe verwenden werden. Jetzt wählen wir diese Textebene in diesem Rahmen aus, und wir müssen sie mit fester Breite versehen. Wir werden es größer machen. Denn wenn ich zum Beispiel Text hinzufüge, sollte er nicht erweitert werden. Ich benutze wie 200 und lass uns die Höhenbreite von 212 verwenden. Und wenn ich es jetzt näher dran ziehe, kannst du sehen, dass es 27 ist 326, also ist es ein Pixel voneinander entfernt. Also denke ich, dass das für den Text hier drüben reichen wird, ich verwende diese weiße Farbe, also habe ich das zu meinen Farben hinzugefügt. Stile Wählen Sie aus und wählen Sie von hier aus. Jetzt haben wir das repliziert, also werden wir dies löschen. Und das ist unser Button. Nennen wir es „Btn Notch“. Wir haben 3D vergrößert, und jetzt werden wir eine Komponente daraus erstellen Control Alt K oder Command Option K. Also wurden wir das komprimiert. Sie können also sehen, dass wir diesen Knopf groß haben. Wir haben unseren Button erfolgreich erstellt. Und wenn ich versuche, seinen Inhalt wie Login zu ändern, funktioniert es. Es ändert seinen Smith nicht. Das brauchen wir. Jetzt werden wir eine gewisse Abweichung daraus erzeugen, mindestens drei Varianzen. Vorher klicken wir auf diese ganze Komponente und versuchen, die Eigenschaft festzulegen. Zum Beispiel legen wir die Eigenschaft des Schaltflächenstils fest. Dieser Standardwert ist die normale Schaltfläche. Und dieser wird unser Kostenstil sein. Jetzt werden wir unser Styling ändern , dass wir auf diese Küste klicken und diese Füllfarbe und einen Strich entfernen , der diese Farbe haben wird oder heller als 50 war. Also werden wir diese 40 hier benutzen. So werden diese beiden Knöpfe tatsächlich funktionieren. Diese Farbe kommt hier rüber. Sehen Sie, ich denke, wir haben die Farben aus unserer Farbpalette ausgewählt, die wir Farbstile erstellt haben. So haben wir den zweiten geschaffen. Und jetzt fügen wir eine weitere Variante hinzu. Klicken wir hier rüber, fügen Sie eine weitere Variante hinzu. Und das würde als deaktiviert bezeichnet werden. Im Moment werden wir vielleicht einfach seine Farbe von diesem ändern . Ja. Und für die weiße Farbe werden wir hier drüben ein bisschen gräuliche Farbe verwenden. Das wird also deaktiviert. Für diesen Stil mit 3 dritten Tasten werden wir diese Aussage deaktiviert haben oder hier. Wir haben eigentlich drei Schaltflächen-Stile, das ist unser PDN-Lot und deaktiviert, Ghost und normal. Dies sind also drei Tasten, oder Sie können es auch als fehlgeschlagen und normal fehlgeschlagen oder was auch immer bezeichnen . Es liegt an dir. Ich nenne es jetzt normal. Dies ist ein Satz von Schaltflächen, die wir erstellt haben. Jetzt werden wir auch andere Schaltflächen erstellen. Zum Beispiel haben wir dieses. Dieser hier ist das hier. Lassen Sie mich Ihnen zeigen, dass dieser auch mit frame erstellt wurde. Wir müssen uns keine Sorgen darüber machen, wie wir es erstellen können. Lassen Sie mich Ihnen die Einstellungen hier zeigen. Also oben, untere Hilfe, rechts und links zehn. Lassen Sie es uns also neu erstellen, wenn Sie es kopieren möchten. Und wir werden hier eine weitere Reihe von Schaltflächen erstellen . Ups. Lasst es uns neu erstellen. Ist es das? Lassen Sie uns das kopieren. Kopiere diesen Frame. Ich füge es hier ein. Hier haben wir diesen Rahmen. Hier haben wir diesen Rahmen. Im Moment nennen wir es Punkt-Strichelement. Stellen Sie sicher, dass Sie sie richtig benennen. Das ist wirklich, sehr wichtig. Wir wollen nicht, dass es eine feste Breite hat. Also wird es mit dem Text schweben. Wenn ich versuche es zu ändern, ist es zum Beispiel Dextro hier. Wirtschaft, Gemeindebildung sollte expandieren. Wir müssen uns hier keine Sorgen um den Aspekt der festen Breite machen. Das wird so sein. Wir werden hier eine Komponente wie diese erstellen. Und das ist unser Top-Navigationsgerät. Und wir werden zwei Videos für dieses erstellen. Warum? Weil jemand darauf klicken muss. Eine wird sein, lasst uns Eigenschaft auswählen. Hier. Es wird gesteuert und man wird 40 werden im Grunde aktiv sein. Man kann es falsch nennen, nennen wir es falsch. Dieser wird unser wahrer oder aktiver Zustand sein. Dieser ist tatsächlich eine aktive Phase, also versuchen wir auch, seine Farbe von diesem zu ändern. Dies wird Schwarz-Weiß-Spitz verwenden und der Textfarbe folgen. Ich benutze Reverse. Also werde ich das benutzen. Schwarz und Weiß VW Nine. So sollen diese beiden aussehen. Einer ist aktiv und einer ist inaktiv, oder man kann es auch falsch und wahr nennen. Ich denke also, dass aktiv oder inaktiv sinnvoller ist. Ich möchte meine Entwickler nicht verwirren. Dieser Zustand wird also aktiv sein. Dieser wird inaktiv sein. Dies ist sinnvoller. Das haben wir erfolgreich erstellt. Und jetzt können wir, wir werden mehr oder hier schaffen. Hier haben wir diese Schaltfläche „Registrieren“. Kopieren wir es und fügen es hier ein, da wir seine Einstellungen replizieren müssen. Es ist also 48152. Das sind eigentlich 50 Summe. Wir werden jetzt 50 benutzen. Dies wird auch behoben. Ich denke, wir werden jetzt registrieren verwenden. Dies ist diese Textscheitelpunkte werden 152 repariert. Also werden wir wieder dieselbe Technik anwenden, die wir hier verwendet haben, feste Breite. Wir verwenden „Enroll“. Jetzt. Umschalttaste a. automatische Layout wurde um acht Pixel oder Ecken hinzugefügt , die wir hinzufügen werden, fügen wir Füllfarbe hinzu, die gleich sein wird, die wir verwenden diese oder 50. Dies ist unsere Hauptgrundfarbe. Diesen werden wir Weiß benutzen. Jetzt. Wir werden hier drüben etwas Polsterung hinzufügen. obere Boden wird also 1515 sein. Benutze 4040 waren hier. Ich würde gerne sehen, wie viel Größe. 38. Okay, also wählen wir zuerst diesen Text hier aus. Anstatt dies hier zu verwenden, verwenden wir eine feste Breite feste Breite, und ich werde versuchen, sie so zu erweitern. Vielleicht ändern wir den Text vielleicht ein wenig, vielleicht ändern wir ihn in etwas anderes. Also werde ich etwas Polsterung haben. Nennen wir es also 100. Ich glaube, das wird funktionieren. Jetzt fügen wir hinzu, ändern Sie die Polsterung hier. Lass uns 3030 benutzen. Ich glaube 2424. Moment sind wir bei 148 und dieser ist 152, also brauchen wir zwei weitere auf beiden Seiten. 4626. Wir haben diese Schaltfläche mit Auto-Layout repliziert. Wir können es auch in etwas anderes ändern, vielleicht gerade jetzt. Okay, also kommt dieser auch in diesen Abschnitt oder Bereich. Das ist großartig. Das ist großartig. Lassen Sie uns den anderen löschen. Hier haben wir unsere und btn und herrschen. Auch hier werden wir das Gleiche replizieren. Wir werden noch einen Staat haben, der gekauft wird. Wenn Sie die Ziele bereits gekauft haben, wird es bei Brustverschiebung um minus z auftauchen. Jetzt werden wir es also in eine Komponente umwandeln. Und jetzt werden wir eine Variante hinzufügen. Klicken wir also auf die Variante und jetzt wird der Status der Schaltfläche angezeigt. Dies ist Standard Stick One ist Standard, einer wird sein, nennen wir es gekauft. Das wird so sein, lass es uns so behalten. Verzug bei Käufen. Gekauft wird anders gekauft oder hier, die Farbe wäre auch anders. Versuchen wir also, von hier aus etwas Farbe zu verwenden. Versuchen wir es mit Grün, etwas Grünes hier drüben. Vielleicht so etwas. Wir müssen es vor diesem Hintergrund testen. Eigentlich. Ich werde mich für diesen entscheiden, grün 70. Ich denke, das würde großartig aussehen. Außerdem sollte diese Textfarbe nicht weiß sein. Ich benutze hier eine grüne Demo oder vielleicht viel Grün. So. Das werden zwei Schritte sein. Wir werden es testen. Wir könnten es vom Crawl ändern. Wenn wir versuchen zu sehen, dass die Hintergrundfarbe nicht schleift, oder? Wir haben drei Knöpfe. Sie können sehen, dass dieser tatsächlich deaktiviert ist, aber dieser ist tatsächlich ein anderer Zustand. Es zeigt, dass es bereits gekauft wurde. Also haben wir Dich es hier rüber legen lassen und Chips hier drüben. Noch einen Chip, den wir haben, ich glaube wo war dieser? Dies ist nur ein Informationschip. Es wird sich erweitern oder erleben. Wir müssen uns keine Sorgen um seine Größe machen. Also dieses hier, dieses, ich werde tatsächlich dieses brauchen, dieses, dieses ist tatsächlich dieses Dropdown-Menü. Also denke ich, ich denke, wir haben es bereits mit diesem automatischen Layout geschafft . Also werde ich zeigen, teile mit dir meine Technik, wie ich das mit dem Icon benutzt habe. Sie können dieses Icon sehen. Okay, bevor Sie zu diesem wechseln, müssen Sie ein Dokument erstellen , in dem sich alle Symbole befinden. Von dort werden wir Icons hinzufügen. Lassen Sie mich also schnell mit Ihnen teilen, wie Sie das machen werden. Sperren wir diese Hintergrundebene sollte eigentlich nicht versehentlich verschoben werden. Dieses Symbol wird tatsächlich zuerst eine Komponente sein, bevor Sie es hier hinzufügen. Sie müssen also eine Komponente erstellen. Nennen wir Icons. Was wir benutzt haben, ist, dass wir Leuchtstoffe und Icons verwendet haben. Sie können hier auch schreiben , dass Sie Leuchtstoffsymbole verwendet haben. Wir haben eine Back-Symbolleiste benutzt und all das. Also diese Icons musst du hier hinzufügen. Klicken Sie also darauf. Zum Beispiel könnten wir diese im Video benötigen. Pfeile. Ein Pfeil wurde benutzt, diesen habe ich benutzt. Also füge ich diese weiter hinzu. Pfeil nach unten ist es tatsächlich kapiert. Also habe ich es holen wollen, diesen hier habe ich benutzt. Sie können sehen, dass Sie alle diese Symbole hinzufügen können, die Sie benötigen. Also lasst uns das Spiel benutzen. Möglicherweise benötigen wir eine Anzeige oder ein Display oder ein Display. Sie also weiterhin alle Symbole hinzu, die Sie benötigen, hier drüben. Weil ich glaube, dass ich das benutzt habe. Wir haben alle Icons hinzugefügt, also zeige ich Ihnen, was wir tatsächlich tun müssen. Dieser Hintergrund sollte also sein, Wir sind all diese Icons, die woanders hinzugefügt wurden. Ich bringe sie alle wieder rein. Alle diese auswählen und in Symbole ziehen. Hier. Wir haben alle Symbole, also verwenden wir die Füllfarbe, um diese zu sein. Ups, so nicht. So können Sie die Füllfarbe verwenden, wenn Sie möchten. Versuche sie zu arrangieren. Ich werde es so behalten. Und wähle all diese aus. Verteilen Sie den horizontalen Abstand. Ich behalte sie so. Eine Sache ist also, dass Sie die Größe von 24 Millionen behalten müssen. Sie können also sehen, dass es 3232 war. Möglicherweise benötigen Sie 3232 Pixel oder Sie benötigen möglicherweise 2424. Dieser benutzt tatsächlich, wurde als 24 verwendet. Also werde ich seine Größe auf 24 reduzieren. Das benutzen wir. Lassen Sie uns also sehen, ob der Vektor um ihn herum 24 ist. Okay, also dieser hat es ist 24. Mal sehen, was andere hier haben würden. Also werde ich die Farbe benutzen, um diese zu sein. Und für den Vektorhintergrund entferne ich diese Farbe, da dieser Vektorhintergrund nur für die Grenze dieses Symbols bestimmt ist . Sie müssen das Gleiche für all diese Icons tun. Und der nächste Schritt wäre , dass Sie eine Komponente erstellen müssen. Nennen wir es Icons Slash. Ich verstehe es. Behalte es so, denn wir haben dieses Icon bereits hier drüben, diese ganze Arbeit, erstelle Icons wie diese. Also lass mich sehen, ob wir diesen Hinterpfeil haben. Es ist auch 24. Mal sehen, ob dieser hier auch 24 ist. Also all unser Icon, das die Einstellungen herunterlädt. Das sind alles 24 Pixel. Auch du musst diese Icons verwenden, um das sind, ich bin mir nicht sicher, sehr schwer das, aber ich muss nach ihnen suchen. Jedenfalls. In Ihrem Designsystem sind dies in Ihren Symbolen alle 24, also ändern wir sie auf 24. Wähle alle von ihnen aus. 24. Die sind alle wissen, behoben. Als nächstes müssen wir die Farbe ändern. Ich überspringe das. 26. Button und I-System 02: Wir haben alle unsere Icons, also können Sie auch, was Sie auch tun können, wurde bereits in Komponente erstellt. Wähle alle von ihnen aus. Klicken Sie hier rüber und erstellen Sie mehrere Komponenten. Dies werden Komponenten sein. Behalte sie so. Außerdem denke ich, dass wir einen Maulwurf brauchen, der Einstellungen war. Ich denke Einstellungen. Ich denke das hier, vielleicht das hier, kann ich mich nicht erinnern, aber lass uns das hier benutzen. Ich benutze das. Wir werden hier drüben 24 benutzen. So. Mach das Gleiche. Wählen Sie alle aus, ändern Sie die Farbe und erstellen Sie eine Komponente wie diese. Erstellen Sie all diese Symbole wie diese bevor Sie sie zu Ihren Schaltflächen hinzufügen. Wir haben dieses Icon hier drüben. Ist passiert. Anstatt hier weiterzuführen , versuchen wir, tatsächlich Command oder Control D zu erstellen, um eine Instanz zu erstellen, und wir werden diese Instanz in unsere Komponente ziehen. Du siehst, dass ich es so hier rübergezogen und fallen gelassen habe. Sie können sehen, dass dies tatsächlich die ist, die ich erstellt habe. Dies ist der Vorher. Das verwende ich. Es ist also sehr einfach, hier ein Typ-Text-Tool zu erstellen einem Jahr bis 221 bezeichnet wird. Verschieben Sie ein, um dies zu erstellen. Und weißt du, der Bohrer, wir werden ein bisschen mehr Platz haben. Und das wäre in der Mitte, weil wir dieses Jahr oder so ändern müssen , vielleicht ändern wir den Text. Also hier haben wir es. Lass mich verdoppeln. Jetzt werden wir tun, was wir tun werden, ist eine Füllung hinzuzufügen. Ups, wir sind schon hier gelandet. Für diesen Rahmen müssen wir eine Füllung hinzufügen. Eigentlich wird die Füllung diese lila Farbe sein, die wir verwenden. Ups, das nicht. Dies für die Verwendung unserer Muster. Und das oben und unten wäre, lass uns acht benutzen hier drüben. Das sieht großartig aus. Ich glaube. Lassen Sie uns versuchen, dies so zu ergänzen. Ziehen Sie einfach per Drag & Drop und Sie müssen ändern, Sie müssen den Abstand ändern. Ich habe den Knopf repariert, also war die Einstellung tatsächlich hier drüben. Diese Bewegung war eigentlich so. Sie müssen also so in der Mitte sein , um diese Art von Schaltfläche zu erstellen. Weil wir zwei Elemente haben, müssen wir sie automatisch anordnen und reparieren. Posten ist also, dass ich den Abstand zwischen ihnen tatsächlich reduziere , damit du ihn erhöhen kannst, wenn du willst. Ich behalte es auf vier Pixel. Für oben und unten 66810. Rechts acht Padding liegt daran, dass wir dieses Icon hier haben. Auf der rechten Seite sollte es nicht sehr groß aussehen. So. Es sieht gut aus. Du kannst sieben oder sechs benutzen, wenn du willst. Sechs sieht auch gut aus. Also 10666, so. Und hier haben wir unseren Knopf, damit Sie sehen können, dass das Ohr unten ist, unten getragen ist oben, also wird es rechts sein. Stellen Sie sicher, dass Sie auf diesen Rahmen klicken. Also benennen wir es in Dropdown-Menü um. Und dies ist die Auto-Layout-Einstellung dieses Dropdown-Menüs. Klicken Sie also auf dieses Dropdown-Menü und wir haben dafür, und für diese Mischung verwenden wir tatsächlich das Arrangement hier drüben. Dies wird also tatsächlich beheben, dass sich der Text nach oben und unten bewegt. Sie können also sehen, dass dies ein Problem ist. Stellen Sie sicher, dass es sich in der Mitte oder links befindet. Es liegt an dir. Ich denke zentriert Sieht gut aus für mich. So werde ich diese Gesetzesvorlage erstellen. Jetzt lösche ich das und erstelle eine Komponente daraus. Erstellen Sie also eine Komponente. Und wenn Sie eine Dropdown-Aktion oder vielleicht eine Auswahl oder so erstellen möchten eine Dropdown-Aktion oder , liegt es an Ihnen. Wie getrocknet werde ich es jetzt so behalten. Dafür gibt es also keinen Staat. Das wird mein Dropdown sein. Ich glaube, ich würde es hier behalten. Jetzt werden wir das schaffen, das ist tatsächlich bereits erstellt. Nichts bereit schwierig. Dies ist tatsächlich der nächste Fall in voller Kraft in vollen Chip, Chipkernen und vier, es liegt an Ihnen. Dies verwendet tatsächlich die Farben von, versuchen wir, die Farben von hier aus zu verwenden. Dieses Grau sieht gut aus und wir werden die Strichfarbe haben, um diesen Bildschirm zu sein. Ich denke, das sieht gut aus. Sieht schon gut aus. Das hier. Stellen Sie sicher, dass Sie die Farben von hier auswählen. Wenn wir zum Beispiel diese Streuung am Ohr haben, haben wir versucht, die Farben Ihrer Farbstile hier zu verwenden. Wenn Sie also versuchen, etwas bereits zu ändern, wird es in Ihrem gesamten Designsystem widerspiegeln. Ebenso können Sie sehen, warum ich diese Streuung hier hinzugefügt habe. Wenn Sie es also in etwas anderes ändern möchten , möchten Sie es zum Beispiel in Arbeit umwandeln, dann können Sie dies tun, indem Sie hier einen Weihrauch auswählen und zurückspulen. Also sind alle deine Icons jetzt tatsächlich. Alle Ihre Icons sind hier drüben, weil Sie sie zu einer Komponente erstellt haben , damit Sie die Komponenten hier verschrotten können. Das ist also das Schöne an diesem Designsystem. Hier haben wir den vollständigen Zielchip. Und ich denke, das ist wieder, ich habe das Auto-Layout hier benutzt. Ich denke, ich sollte es in der Mitte behalten, denn wenn ich versuche, hier ein Symbol hinzuzufügen, wird es gestört. Dann ist der Abstand zwischen der Polsterung, aber wir brauchen ihn. Also werde ich eine Komponente daraus erstellen. Und es expandiert automatisch, also müssen wir uns keine Sorgen machen. Control oder Command Alt Option K. Hier haben wir Chip-Komponente hier drüben. Wir haben wie verschiedene Buttons und Chips erstellt. Mal sehen, ob wir noch einen brauchen. Vielleicht können wir diesen Fortschritt schaffen, aber wir müssen es tun. Das ist nicht sehr schwer und lassen Sie es uns verwenden und versuchen, es in unser Designsystem zu replizieren. Es ist kein Knopf, aber ich denke, es ist ein Fortschrittsbalken. Nennen wir es also Knöpfe plus Chips plus Fortschrittsbalken. Nur um sicherzugehen, dass wir hier alles benutzt haben. Hier haben wir es. Man sieht, dass dies tatsächlich in der Mitte und in der Mitte liegt. Wenn ich versuche, es zu ändern, sollten wir es nicht erweitern. Es sollte so sein, also wird es so bleiben. Dieser sollte leicht bewegt werden. So. Die Einstellung wäre gleich. Ich verwende die gleiche Einstellung für diese. Und ich glaube, das läuft. Mal sehen, ob wir hier einen anderen Fortschrittsbalken haben. Dieser verwendet eine andere Einstellungen. Also möchte ich hier 11 benutzen, um es diesem ähnlich zu machen. Wir werden also denselben Fortschrittsbalken verwenden. Der Vert ist also 199. Machen wir es 200. Nur um auf der sicheren Seite zu sein. Das ist ein bisschen größer. Das ist 213. Versuchen wir also 200 zu benutzen und zu sehen, ob es passt. Ja. Also werde ich hier wieder 200 benutzen. Machen wir es etwas größer als zweihundertzweihundertzehn. Dieser auch 210. Dieser auch Fortschrittsbalken 210. Also MIG-Größe von jedem von ihnen ähnlich. Das wird in der Mitte reichen. Lassen Sie uns dasselbe mit unserem Designsystem erstellen. Es wird 210 Pixel betragen. Also denke ich, dass wir nicht komplexer sein werden. Also lasst uns versuchen, sie zu rhenium. Füllen Sie BG für Hintergrund, grüne Qualität in BD, und wählen Sie diesen Befehl Optionstaste, um eine Komponente zu erstellen. Sie können sehen, dass wir diese Komponente hier erstellt haben und wir können problemlos auf die Assets zugreifen. So können Sie sehen, dass wir haben, können Sie hier in den Assets sehen, wenn Sie zu Assets wechseln, haben wir diesen Chip für die Anmeldung. Kleiner Knopf. Ich glaube, wir haben hier einen Knopf verpasst , der dieser war. Das haben wir verpasst. Erkunden. Kopieren Sie es als Nächstes und ziehen Sie es hier rüber. Und wir werden diesen Button in unser eigenes Designsystem replizieren . Und Sie wissen bereits, wie wir diese Anmeldung erstellt haben , hier kein Login. Also überspringe ich das schnell. Und dafür werden wir zwei Staaten schaffen. Eins zu, einer wird gekauft und der andere ist Explorer. Wir haben diesen Button erfolgreich repliziert. Im Moment versuche ich also, dass ich versuche, etwas mehr Platz im Text zu haben , damit wir ihn in etwas anderes ändern können, und die Größe wäre 102. Also werden wir um 16 Pixel reduzieren. Jetzt. Versuchen wir es mit 16. Im Alter von 16. Ganz in der Nähe. 1515 würde den Trick machen. Hier haben wir den Button und wir werden ihn kleiner nennen. Hier haben wir es und erstellen eine Komponente daraus. Wir werden eine Komponente erstellen. Lassen Sie uns eine Variante erstellen. Die zweite Variante wäre, aber ich denke, wir werden dafür dasselbe Team verwenden. Was passiert? Hier? Wir werden die Immobilie benutzen. Wir hatten bereits den Status. Steve. Lass uns ausgestorben sein. Also werden wir den Button-Status verwenden. Ups, Ups, Oops, was ist passiert? Bundesland. Und dieser Standardstatus wird gekauft. Es wurde gekauft. Also müssen wir das beheben, indem wir hier hineingehen und versuchen, dies zu replizieren. Ich habe versucht, es so zu haben. Jetzt haben wir 213 und sehen, ob wir die gleiche Größe haben, 10210411 hier drüben. Hier haben wir es, aber GIS und erkunden zwei Staaten sind getrocknet. Jetzt müssen wir die Hintergrundfarbe in etwas anderes ändern , das ein Gelehrter sein wird. Ich denke, wir haben grün 70, ja, grün 17, grüner Punkt vor dem Text verwendet . Grün zu grün. Dieser grüne Punkt D, dieser. Wenn wir den Kurs gekauft haben, wird es so sein, dass es um diesen geht. Also zwei Knöpfe, rot. Wir haben diese Aufgabe erledigt und abgeschlossen all diese Fortschrittsbalken, Chips und Buttons zu erstellen. Und ich glaube, lass mich sehen, ob wir etwas verpasst haben. Nein, wir haben uns nicht gemischt verpasst, was verpasst. Sie können also sehen, dass wir hier ein Icon haben , das eingekreist ist ist. Sie werden dies auch hier auf Ihr Icon oder Ihre Icons kopieren . Dieser ist eigentlich 32 mal 32, und wir werden eine Komponente wie diese erstellen . Behalte es mit deinen Icons oder deinen Icons. Und wir werden später die Größen hier drüben erwähnen. Ich zeige Ihnen ein paar Tricks, wie Sie Ihre Icons behalten können. Versuch das nicht. Es wird die Größe Ihrer Icons durcheinander bringen. Hier haben wir alle Icons. Und was Sie tun können, ist, dass Sie diese auch von hier aus kopieren können. So. Kopieren Sie dies, weil dieses nicht im Designsystem vorhanden ist . Klicken Sie hier drüben. Und das ist eigentlich versuchen, wie diese Komponente zu vergrößern . Einfach herunterladen. Versuchen wir zu sehen, ob wir diese Freiheit haben, ist horizontal. Versuchen Sie, diese von hier zu kopieren, weil ich denke, dass es in Ordnung war, also EQ auf den Icons, dieses ist anders, dieser ist anders. Also Squalor, keine Feeder, aber wir werden es Einstellungen nennen. Und das sind Einstellungen. Das ergibt mehr Sinn. Sie können sehen, dass wir alle verschiedenen Icons in 24 Pixel haben. Dieser fängt an, wenn Sie 30 haben, um sie in einer separaten Regel zu behalten. Und ich glaube, das ist alles. Wir brauchen auch diese drei Icons. Lassen Sie uns diese von hier nach hier kopieren wir haben es Wie einfach Schüler und Rundschreiben. Also lasst uns all diese drei kopieren. Versuchen Sie als Nächstes, zu diesem Designsystem zu wechseln. Klicken Sie auf diese Icons, steuern Sie V. Und wir haben unsere Icons hier drüben. Im Moment verwenden wir diese Farbe, weshalb wir diese haben. Wir werden diese Farbe verwenden, diese Icons, BW. Also werde ich für all das vw benutzen. Hier haben wir es. Bw. Bw kann diesen Icons folgen. Dies sind tatsächlich 32 mal 32, daher sollte dies in dieser Zeile beibehalten werden. Das sind 32 mal 32 Pixel. Hier haben wir es. Wie Symbole ein Kreisrad verwenden. Lasst uns sie so behalten. Wir müssen mehrere Komponenten wie diese erstellen. Und hier haben wir unser 32 mal 32 Pixel Icon gesetzt und 24 mal 24. Was ich machen werde Elektron ist, dass ich so etwas oder hier hinzufügen werde , was unsere Infoleiste ist. Dieser, dieser wird zu unseren Icons 3224 hinzugefügt , und das wäre es. Ich werde es schaffen und ich zeige es dir in der nächsten Lektion. Diese Lektion ist sehr lang. Lassen Sie uns also zur nächsten Lektion übergehen und etwas mehr über das Erstellen komplexerer Komponenten studieren etwas mehr über . Sie werden sich dann kümmern, Tschüss. 27. Größere Komponenten 01: Bevor wir Ihnen nun größere Komponenten erstellen, müssen wir einen anderen Rahmen verwenden , um unsere Illustrationen dazu zu erhalten. Lass uns das schnell machen. Also hier haben wir es entworfenes System. Replizieren wir diese Icons so. Benennen Sie es um dies zu verschieben, bewegen Sie alle. Und das werden unsere Illustrationen sein. Habe große plus kleine Illustrationen. Also lasst uns den Kopf benutzen , um es ein bisschen einfach zu haben. Also versuche ich das zu kopieren. Was ist also Illustration? Dieser ist also verschlossen. Also werde ich Command C, Control C herauskommen Fügen Sie es einfach so hier ein. Dies ist eine Illustration. Was müssen Sie tun, ist einfach Komponente zum Thema zu erstellen, die ich für die anderen tun werde eine Komponente zum Thema zu erstellen, die ich für die anderen tun werde. Dies ist ein kleinerer. Wir haben Fortschrittsillustration verwendet. Ich behalte es so. Es gibt noch ein paar Dinge, die wir benutzt haben. Zum Beispiel diese kleinen roten und blauen Punkte. Ich habe sie nicht als Hintergrundillustration oder so ähnlich benutzt . Was ich also getan habe, ist, dass ich sie in dieser ganzen Komponente benutzt habe. Wir werden sie also zu dieser Komponente hinzufügen , anstatt sie getrennt zu halten. Jetzt denke ich, dass wir bereit sind etwas von dem zu erstellen, was wir unsere Illustration aufgestellt haben. Jetzt werden wir also größere Komponenten erstellen. Als Nächstes. Benutze das hier. Nennen Sie sie als Nächstes Komponenten. Ich entferne die. Nennen wir sie Komponenten. Dies werden unsere Listenelemente sein , so etwas. Und mal sehen wir zum Beispiel, das ist Feature-Pferd und dieses ist der normale Kurs. Wir haben noch eins, das ist dieser. Wir haben also eigentlich drei Variationen dafür. Versuchen wir zuerst, dies zuerst zu erstellen. Hier haben wir sie. Sie können sehen, dass wir dieses vorgestellte Bild haben. Sie können es entweder so behalten, weil wir bereits einen linearen Farbverlauf hinzugefügt haben. Dieser ist unser Kurstitel. Das überhaupt. Sie wurden für diesen ausgewählt. Und die Schaltfläche, die wir verwenden werden andere Komponenten , die wir erstellt haben. Gehen wir zu Assets und fünfstündiges Vortragsvideo. Wir werden es so fallen lassen. Was ist es hier drüben. Das für Chip ist hier drüben. In unseren Ebenen werden wir es hinzufügen. Es war in diesem vorgestellten Kurs. Dies ist das Eingabe-Shape. Ich glaube. Dieser vorgestellte Kurs. Wir müssen es öffnen und diesen Pools Chip darin hinzufügen. Das ist eigentlich diese Nation. Also benenne ich es in q duration um . Dies ist unsere zukünftige Nachfrage. Wir werden es wie diesen Button behalten , den wir ersetzen müssen. Also werden wir hier unsere Schaltfläche „Registrieren“ benutzen , denselben. Und das müssen wir ersetzen. Lasst es uns zuerst nach oben verschieben. Btn Regel, und lasst uns das entfernen. Jetzt werden wir diese haben, die unsere größere Komponente sein wird. Wir haben es fast fertig. Mal sehen, ob wir Ausrichtungen haben. Ausrichtung ist perfekt. Und Sie können sehen, dass wir mehrere Instanzen verschiedener anderer Schaltflächen und verschiedener anderer kleinerer Komponenten haben, um eine größere zu erstellen. Jetzt werden wir unsere Komponente aus diesen vorgestellten Beiträgen erstellen. In ähnlicher Weise werden wir dasselbe mit diesen kleineren machen. Warum verwende ich kein Auto-Layout, weil wir verschiedene Leerzeichen haben müssen. Zum Beispiel acht Pixel hier drüben und 16 Pixel hier drüben. Dies ist nicht möglich , da es die gleiche Polsterung haben wird. Das wird massiv werden. Wir haben versucht, es damit zu schaffen. Auch hier dieser eine Kurstitel. Wir werden das Gleiche tun. Dies wird unser Image sein, unser Kursbild, das als Qualitätskursbild bezeichnet wird. So, Dauer und Studenten, das wird unser Gleiches sein, dieser. Ich wiederhole das Gleiche oder hier, also überspringen wir es. Wir haben die Dude Nation. Versuchen wir es zu replizieren. Es sollte entfernt werden. Dieser hier ist Studenten. Also werde ich diesen Montag hier drüben replizieren. Und jetzt werde ich diese Studentengeschichten entfernen Studentengeschichten 450. Dann. Das Problem ist, dass es auf der linken Seite gehalten werden sollte. Wir schaffen es. Hier haben wir es nicht erforscht, aber dann müssen wir den Explorer-Button von hier aus holen und ihn hier so hinzufügen. Dies wird in der Lage sein, den Knopf zu erkunden, zurück durch die Ohren zu scrollen. Erkunde klein. Also Kanoniere, Dauer der Schüler. Btn Kursbild. Wir haben es gemacht. Versuchen wir zu sehen, ob wir einen Kurstitel haben, der perfekt ist. Alles ist eine Komponente in einer Komponente und Stilen. Wir werden so eine Komponente daraus erstellen. Dies wird unser Kursobjekt sein. Dies ist unsere größere Komponente. für diese Kurskomponente Werden Sie für diese Kurskomponente eine, kleinere. Okay, für diesen müssen wir also erstellen, auch diese beiden erstellen. Schnappen wir sie uns und bringen sie hierher. Befehl V, steuere V, um es hier einzufügen. Dies ist bereits ausgewählt Absatz plus stummgeschalteten Text. Wir müssen dies also ersetzen, weil wir einen Fortschrittsbalken in unserem eigenen Designsystem erstellt haben . Gehen wir zu Assets. Und wo ist unser Fortschrittsbalken? Also bringe ich es so hierher und gehe zu Ebenen. Dies ist eigentlich mein vorgestellter Kurs. Es sollte nicht vorgestelltes Board sein, aber es ist die Liste. Kräfte. Erzwingen. Das kann ich. Also werde ich diesen Fortschritt hier rüber ziehen und ablegen. Dieser hier wird mein vorgestelltes Bild kaufen. Dies sind eigentlich Kritzeleien und wenn Sie möchten, können Sie eine Komponente daraus erstellen und sie woanders aufbewahren. Lassen Sie uns eine Komponente über Scribbles erstellen. Und ich gehe zu Command D, dupliziere es. Kontrolliere X oder Command X. Wir werden sie in unsere Illustrationen einfügen. Hier haben wir es. Das werden meine Kritzeleien wie dieses sein. Ich behalte es irgendwo hier. In meinen Illustrationen. Wenn ich nun die Farbe dieses Hintergrunds ändern wollte, müssen wir das hier machen und es wird sich in allen widerspiegeln. Dies ist unser vorgestelltes Bild. Okay, also nennen wir es Image, Image. Bild wie dieses. Hier haben wir es. Dies ist abgeschlossen. Wir werden daraus eine Komponente erstellen. Wir haben diese Komponenten also bereit , sie zu unseren Designsystemen hinzuzufügen sind drei Komponenten, die wir erstellt haben. Und lassen Sie mich sehen, ob wir andere Komponenten für den Text erstellt haben. Ich zoome raus. Hier haben wir eine andere Komponente, die für den Text gedacht ist. Also lasst uns das schnappen. Ich denke, es sollte hier zu unserem Designsystem sein und sollte in den größeren Komponenten wie diesem vorhanden sein . Was es tut, hat es tatsächlich geschaffen. Kommen wir auf D und verwenden diese Master-Komponente. Meistere Komponente und bringe sie hierher. Haltungskomponente. Wir brauchen einen Meister. Wir haben, wir versuchen diese aufzustellen. Dies sind keine Kursbestandteile, daher sind dies tatsächlich besteuerte Komponenten. Wir werden sie unten behalten. So. Ich habe hier ein paar Komponenten erstellt. Das Beste ist, dass Sie sie so ändern können, was Sie wollen. Zum Beispiel, wie dieser hier drüben, kann ich einen Chip haben und zum Beispiel diese Fortschrittsillustration, ich kann sie beide verwenden , damit Sie ihn so per Drag & Drop ziehen können. Sie können auch sehen, dass wir diesen Spieler hier haben. Was passiert? Ich habe Claus VG nicht. Ich habe sie richtig benannt. Was passiert? Warum haben wir das dahinter? Also müssen wir es löschen. Steuerung V G, Dies ist Videobild. Dies ist der Fortschritt der Überprüfung. Wir können daraus eine Komponente erstellen. Das ist also Logo. Das hier. Würdest du Beschriftung? Wenn der Fortschritt Fortschrittsbalken ist, lesen Sie Ihre Beschriftung sollte nicht hier sein. Wir haben dieses LAN G, steuern G und Video. Sie können eine Komponente des Videoplayers erstellen. Und du kannst mich dir zeigen lassen. Wir werden hier einen Videoplayer erstellen. Was wir hier brauchen ist, lass mich dir sagen, Whoops, passiert, ist gerade passiert. Meine Icons. Okay, also das ist nicht der Teil von lass mich sie einfach dazu bringen. Woher kriegt man das? Jetzt? Der andere Teil davon, vergewissern Sie sich, dass Sie versuchen, Command C oder Control C zu verstecken und zu wählen . Und wir kehren zu unserem Designsystem zurück. Hier werden wir diesen Videoplayer haben. Was wir tun müssen, ist, dass wir unsere Icons oder streng auf meinen Icons hinzufügen müssen. Dies ist ein falsches Symbol. Sie müssen es hier hinzufügen. Download-Symbol, das ist Download. Dies ist für Einstellungen. Dieser wurde benutzt. Jetzt. Versuche es einfach zu überlappen . Das ist Icon. Ja. Überwinde es. Niemand wird jemals auf die Ebenen gehen. Diese auf meinen Icons. Und ich muss diese Symbole löschen. Einfach. Behalte es so. Wir wollen keine Komponente daraus erstellen . Das ist in Ordnung, also ist das Videoplayer. Versuchen wir also, eine Komponente zu erstellen. Deshalb habe ich es hier benutzt. Lassen Sie mich Ihnen zum Beispiel zeigen, wenn ich hier blau verwenden möchte, kann ich hier spielen. Wenn ich rewind hier verwenden möchte, kann ich die Erinnerung William verwenden. Das ist also die Magie, dies zu erschaffen. Verwenden dieser Komponentensymbole. Ich möchte Ihnen beibringen, was das ist, Sie können die Essenz dieser Dinge sehen, Ganze, wie Sie es nennen sollten, diese ganze Idee, Ihr Designsystem zu verwenden. Warum muss man ein Designsystem erstellen? Weil Sie möchten, dass es einfach ist, es zu ändern oder zu ändern. Und du solltest mehr Möglichkeiten haben , Dinge zu erstellen und zu kontrollieren. Zum Beispiel können Sie hier sehen, dies mein unteres Navigationsgerät ist und ich möchte etwas für dieses erstellen. Was ich versuche, ist dass ich verschiedene Staaten für diese 13 Staaten schaffen werde. Einer ist zu Hause aktiv, meine Klasse aktiv und Account aktiv. Also lasst uns das versuchen. Dafür werde ich von hier aus eine Farbe verwenden , um es normal zu machen. So nicht. Ich benutze gerade Schwarz-Weiß-60, ich argumentiere, dass ich 52 benutzen kann. Ich glaube, 60 sieht gut aus. Schwarz und Weiß 60. Und bevor wir weitermachen, müssen wir unsere Ikonen hierher bringen. Also hier haben wir unser Vermögen. Hier auf unseren Icons, wo sind meine Home-Symbole? Das ist also mein Home-Symbol-Symbol. Und dann haben wir eher als Icons, dieses. Und das hier. Ich werde sie überlappen, nur um die Zeit zu sparen, sie immer wieder zu positionieren. So. Hier haben wir es so. Und lösche den Rest der Hintergründe. Das haben wir. Lasst uns sie hineinbringen. Diese Ups, was ist passiert? Ich habe sie kritzeln lassen. Okay, also werde ich denen nicht glauben , dass wir SMS haben und das haben wir. Versuchen wir, die gleiche Farbe für den Text zu verwenden , für die Symbole. 60. Auch für diesen Vektor verwende ich Schwarz-Weiß-6060. Dies wird mein Zustand für den normalen Zustand sein, in dem nichts passieren wird. Wählen Sie alle diese Schwarz-Weiß-60. Wählen Sie diese Option aus. Wir werden es tun, was wir tun werden ist, dass wir das so verstecken werden. Dies wird auf der unteren NAB liegen, normaler Status. Das wird normal sein. Und wir haben drei Icons. Warum haben wir das benutzt? Denn wenn ich jederzeit ein Symbol ändern wollte, kann ich hier Drag & Drop verwenden und ich kann es 2032-Pixel-Symbol schlagen. Das ist eine Sache. Okay, jetzt können wir eine Komponente daraus erstellen. Dies ist unsere Komponente. Wir brauchen etwas Abweichung. Also klicke ich auf die Varianz. So werden wir das benutzen. In. Dieses erste Video wird nicht standardmäßig sein, aber es wird aktiv, aktiv sein. Und der zweite wird sein, drittes wird ein Video sein, es wird aktiv sein. Wir haben diese, klicken wir auf diese, um die Immobilie zu beschreiben. Und es ist die Nav-Bar. Nennen Sie es einfach Status. Ich denke, das würde geschaffen werden, anstatt es so zu nennen. Okay. Zuerst klicken wir darauf und ändern wir den Vektor in „nicht“. Wir werden diese Instanz nicht schnappen. Was passiert? Behalte es so. Und wir werden die Farbe in Schwarz und Weiß ändern. Und das Haus wird schwarz-weiß sein. Dieser wird aktiv und null für den zweiten Zustand sein. Das wird aktiv sein, aber es wird hierher verschoben. So. Schwarz und Weiß. Sie haben die Vorstellung davon bekommen, wie ich mein Ziel erreichen will. Und das Konto wäre wieder all die anderen, die ich wieder benutzen werde und 60 gucken werde. Mal sehen, ob wir US-Plan haben und breit 60, Schwarz und Weiß 60. Wenn ich also versuche, die Farbe zu verschieben, kann ich es mit nur einem Klick machen. 606060 Dan. Hier müssen wir das Bein benutzen. Hier. Wir haben die drei Bundesstaaten bereit, fernzufahren. Und wir können es einfach per Drag & Drop ziehen und auswählen, welchen Status wir wollen. Und es wird so sein. Gut. Wir haben unsere Navbar erstellt, die unten Nav-Button ist. Jetzt versuchen wir, ein komplexeres Layout zu erstellen . Geh weiter. Whoops. Wir haben etwas hier drüben gelassen. Sie können diese Komponente mit verschiedenen, mehreren Avataren erstellen , aber ich denke, ich überspringe sie jetzt. Sie können hier auch einen Chip erstellen, bei dem es sich um den Fortschritt eines Schülers handelt. Sie können das erstellen und das auch erstellen. Also werden wir 12 erstellen, diese beiden, und wir werden sie in unser Design ziehen und ablegen . Dieser ist ein anderer. Das hier. Fangen wir mit diesem Designsystem an. Und ich mache das. Hier. Wir haben es bei Avid dot frame. Es ist jemand, der 72 kauft und 72 Squalor. Aufgrund des Rechtecks. Sie können auch sehen, dass wir diesen Effekt haben, der für diesen gesamten Inhalt auf dieser Reise gilt. Lass mich sehen, ob der Schlagschatten, okay, also haben wir Schlagschatten-Aufzugstür hier. Jedenfalls. Dies ist der Inhalt und dies ist der Hintergrund. Nennen wir es also. Dies ist der Inhalt. Es liegt an Ihnen, ob Sie eine Komponente daraus erstellen möchten oder nicht, es liegt an Ihnen, weil ich denke, dass es hauptsächlich diese feste Breite sein wird . Normalerweise. Es liegt an Ihnen, wenn Sie eine Komponente erstellen möchten, das heißt, das ist Ihre Entscheidung. Im Moment werden wir erstellen, fangen wir an , eine Komponente zu erstellen, aber wir müssen eine Illustration hierher ziehen. Hier haben wir die Illustration. Zieh es hier rüber. Mal sehen, ob wir das Gleiche haben. Das Buch steht ein bisschen darüber. lila Buch ist oben hier drüben. So. Es ist fast diese Akte von hier. Jetzt erstelle ich eine Komponente daraus weil ich diese haben muss. Lass es uns so behalten. Sie die Gruppierung auf. Jetzt gruppiere ich sie und wir werden aus dieser ganzen Komponente eine Komponente erstellen. Sie können das automatische Layout verwenden, aber es wird die Dinge komplex machen. Wenn Sie zwei haben, wähle ich all dies aus und erstelle eine Komponente wird meine Benutzerinformationen sein, unser Benutzer, nennen wir es Benutzerfortschritt . Ups, was ist passiert? Wir müssen den Effekt hier hinzufügen, nämlich dieser. Perfekt. Dies ist meine Hauptkomponente. Wir können es jederzeit per Drag & Drop ziehen. 28. Größere Komponenten 02: Mal sehen, ob wir mehr Komponenten erstellen können. Während das letzte ist, können wir diese auch erstellen. Dies ist eigentlich unsere Top-Navigation, und der Abstand zwischen ihnen beträgt tatsächlich 16 Pixel. Wenn wir dafür auch verschiedene Zustände haben können. Versuchen wir, es aus den Vermögenswerten zu holen. Das ist unser Chip. Ich glaube, es hatte diese Staaten bereits. Mal sehen, ob es einen inaktiven, inaktiven Faktor hat. Was wir tun werden, ist, dass wir es so replizieren werden. 16 Pixel wären der Abstand zwischen ihnen. Zuvor werden wir für dieses ein automatisches Layout verwenden und erstellen. Und ganz oder Richtung wäre dies. Die Entfernung würde 1616 betragen. Versuchen wir dies zu replizieren. Ich drücke Command D oder Control D, um dies zu duplizieren. Um dieses zu erstellen, verwenden wir, sagen wir Benutzer. Dann werden wir wieder, nicht, nicht so, ich muss das auswählen. Und hier haben wir die vollständige Navigations-Benutzeroberfläche. Okay, damit Sie klicken können und Sie können inaktiv zu aktiv, SAP für Sie ändern. Bevor du auf etwas anderes gehst. Wir werden hier eigentlich rechteckig verwenden. Versuchen wir zu sehen, ob wir hier eine Füllung hinzufügen können. Was das nicht sein wird. Aber eigentlich brauchen wir so. Das Problem ist eigentlich, dass die Boarders hierher kommen. Mal sehen, ob ich es von dort aus kann. Hier haben wir es. Dies ist ein Rechteck. Dies ist die lineare Füllung des Farbverlaufs, die Maskengruppe. Mal sehen, ob ich das hier replizieren kann. Das Gleiche wie offensichtlich. Dies ist das Problem. Alles. Ich habe hier eine andere Farbe hinzugefügt. Das ist also das Problem oder das passiert, das passiert. Ich füge jetzt hinzu und kehre es um. Dies wird nicht 100% sein, sondern 80%. Wir werden es zu 100% behalten. Wir müssen die Farbe ändern, damit Sie sehen können , ob ich versuche, die Farbe zu ändern. Also vielleicht gleich hier drüben. Das sollte nicht so sein. Dieser sollte zu 100% so sein. Wir erzeugen einen tatsächlich linearen Gradienten, der von 200% Prozent liegt, weil er ihn vollständig verbergen wird. So werden fünfundzwanzig Prozent geschaffen. Und dann wird dieser ein 100% sein. Sie können sehen, dass dies unsere Masters Group ist. Das ist unsere Moschee. Und wir werden eine Komponente erstellen. Nennen wir es. Dies ist unsere Komponente. Wenn Sie die Maske ändern möchten, können Sie sie so voll machen. Auf diese Weise werden wir mehr Navigationen schaffen. Und wenn du willst, denke ich, dass wir für diese keine zwei oder drei verschiedene Phasen haben müssen für diese keine zwei oder drei verschiedene Phasen , weil wir alles ein- und ausschalten können. Lass mich dir zeigen, wie du sie hier benutzen kannst. Wir haben also einen Abstand von 41 Pixeln hier drüben. Lasst uns das löschen. Und wir werden aus unseren eigenen Vermögenswerten verwenden . Während mein So hier die Komponenten haben. Öffne das. Hier haben wir den unteren Hals. Ich ziehe es mit Drag & Drop hier rüber. Es wären 4000 Pixel. 47, ich glaube, es waren 47. Mal sehen, was ist der 50-Sound 48. Das ist Sieben gefärbt. So wie das. Es scheint 30 Jahre von hier entfernt. Die Höhe betrug 48. Dieser ist also 48. Es spielt keine Rolle. Kein Problem. Dieser war 3s orbital. Das ist 305. Ich verschiebe es in der Mitte. Fünfunddreißig. Fünfunddreißig. Ja. Wählen wir 44 oder einen Kopf null. Okay, also hat es ein paar andere Probleme, also werde ich es benutzen. Versuchen wir 4444 zu benutzen. Unten fängt an zu sein. Das ist großartig. Das ist mein Navbutton. Wenn ich den Status in Home Active Class active ändern möchte , kann ich das auch tun. Eine weitere Sache ist, dass Sie auch den Prototypbereich haben können . Sie können auch einen Prototyp erstellen. Wir haben diese ganze Navigation , die zu einer anderen wechseln wird. So können Sie diese Änderung auf dapp auf onclick vornehmen. Onclick. Es sollte nicht stattdessen sein, sondern klug animiere und das gleiche weiter machen. So wie das. Und auch aus dieser Disziplin zurück. Daraus wird es so zurückgehen. Du kannst so etwas erstellen und es würde gut aussehen, wenn es animiert wird. Ich hab Spaß. Ich glaube, ich habe ein Tutorial zum Prototyping auf meinem YouTube-Kanal , das dieses zeigt. Wie animiere ich das. Ich habe es dir stattdessen in dieser Einstellung gezeigt. So ersetzen wir unser unteres Navigationsgerät. Lassen Sie uns das morgen löschen und sehen und Martin V. Ebenso haben wir das hier drüben. Auch hier werden wir dies löschen. Ups, was passiert? Okay, also muss ich den Rahmen auswählen. Hier. Du kannst sehen, dass wir das andere machen müssen. Es wird das Design des nächsten Quartals sein. untere Navi wird mein Unterricht sein. Statusklasse dieses ist aktiv. Hier haben wir, nennen wir es meine Kurse. Klicken Sie auf diese aktive Brille. Das ist zu Hause. Lass uns versuchen, zum Prototyp zu gehen und ich zeige dir, was ich eigentlich meine. Versuchen wir es mit zwei. Versuchen wir das zu machen. Sie können sehen, wenn Sie hier drüben klicken, können Sie sehen, wie sich diese tatsächlich bewegen. Die Dunkelheit bewegt sich und alles verschiebt sich. Sie können also sehen, dass das wirklich, wirklich coole Animation von aussieht , also habe ich diese eigentlich nicht mit diesem verbunden . Das kannst du in deinem Designsystem und du ziehst hier rüber. Sie können auch ein Element auswählen. Ich glaube, wir können so zurückgehen. Dieser geht hier rüber. Dieser geht hier rüber. Dieser geht tatsächlich auf den Unterricht zurück. Wie auch immer, so würdest du zwinkern, um diesen animierten Effekt von dir hier zu haben . Versuchen wir also, aus meinem Vermögen hinzuzufügen. Ich füge das hier hinzu. So. Aus meinen Ebenen. Ich werde das jetzt entfernen oder verstecken. Sie können also sehen, dass ich das so machen werde. Eine weitere Sache ist, dass Sie diese auch entfernen und Ihre Komponenten von hier aus hinzufügen können. Gehen wir zu Design. Versuchen wir sie zu haben. 50, also behalte ich tatsächlich 6044. Hier. Wir haben mehr Komponenten wie diese, sodass Sie verschiedene Kategorien erstellen können. Zum Beispiel habe ich dieses Video. Dies ist, das sind Food-Text, das sind Navigationen. Ich werde sie in verschiedenen Abschnitten haben. Zum Beispiel können Sie diese auch hinzufügen, Sie können sehen, dass Sie eine Beschreibung all dieser Komponenten hinzufügen können , wenn Sie möchten. Zum Beispiel ist dies eigentlich eine Playlist. Würde es hier drüben eine Playlist nennen. Und Sie können auch einen Dokumentationslink hinzufügen , wenn Sie ihn mit einer Dokumentationsseite verknüpfen möchten , auf der Sie zeigen, wie Sie das verwenden oder woher wissen Sie? Mehr Details zu dieser Komponente? So habe ich es tatsächlich getan, ich versuche sie in Gruppen zu verwalten. Wir haben alle unsere Komponenten Durchschnittswerte abgeschlossen. Ich habe Ihnen gezeigt, wie Sie verschiedene Varianten, verschiedene Komponenten und verschiedene größere Komponenten erstellen , um diese kleineren Komponenten zu verwenden. Wie werden Sie diese Icons benutzen? So implementieren Sie diese Symbole ersetzen Sie sie in Ihr Designsystem, wenn Sie möchten. Wie müssen Sie Ihre Illustrationen und Icons und alles erstellen , das ganze System. Sie können auch verschiedene Links in Ihren Symbolen erstellen, z. B. können Sie ihnen auch sagen, dass diese falsch sind. Icon schreiben. Diese waren für Leuchtstoffsymbole ist falsch für Icons. Dies sind Leuchtstoffsymbole. Sie können auch verknüpfen und Links erstellen. Zum Beispiel, wenn Sie dies getan haben, können Sie sehen, dass wir diese Topographie haben, und wir verwenden diese beiden Schriften. Und ich werde einen Link für sie erstellen. Um dies zu tun, können Sie sehen, ob Sie einen Index auswählen, haben Sie einen Link an der obersten Steuerbefehlstaste erstellt . Was ich versuche, ist, dass ich das tatsächlich so bewegen werde . Und ich wäre keine Download-Bond-Load. Klicken Sie auf diesen Link und Sie können sehen, dass ich die URL hier einfügen kann. Also gehe ich zu google.com und füge den Link dieser Flasche oder einer solchen Formel ein. Ich benutze diesen Link. Kopieren. Ich füge es hier ein. So können Sie die Links in Ihrem Haar stützen . Lass es uns versuchen. Ändern Sie die Farbe dieses in etwas anderes, damit es wie Link aussieht. Also werde ich benutzen, lass uns versuchen, diesen zu benutzen. Dieser sieht gut aus. Wenn Sie Links zu verschiedenen Teilen hinzufügen möchten, sind unterschiedlich. Verschiedene Webseiten oder verschiedene Dinge, die Sie, Ihre Designer oder Entwickler herunterladen müssen. Sie können darauf klicken und es wird beispielsweise zu Phosphor-Symbolen verschoben . Sie können einen Link für Leuchtstoffsymbole erstellen. Um auf diese Seite zu gehen. Entwickler können alle Spezifikationen herunterladen , alles. Zum Beispiel, diese Abbildungen in denen wir diese Abbildungen aufzeichnen, können Sie den Link zu diesen Illustrationen haben. Das ist alles. Das ist also, ich denke noch einen Tipp, den ich Ihnen geben möchte, dass Sie Ihrem gesamten Designsystem verschiedene Links hinzufügen können . Es gibt noch eine Sache, die Leute versucht haben, ist , verschiedene Seiten zu erstellen und Ihre Schaltflächen und alles separat zu haben . 29. Rastersystem und Layoutsystem: Eine weitere Sache, die wir vergessen haben, ist eigentlich Grid. Sie können Ihr Rastersystem in Ihrem Dokument hier definieren . Um dies zu tun, erstellen wir einen neuen Frame. Für Rahmen. Versuchen wir, ein iPhone zu erstellen, das wir benutzt haben, ich denke, dass iPhone Pro Max erlaubt. Und wir haben ein Raster benutzt. Mal sehen, ob wir einen Rasterstil erstellt haben. Lasst mich mal sehen, ob wir dieses Raster haben. Wir haben jetzt das Raster. Wir werden einen Rasterstil erstellen, nennen wir es „Food-Spalte“. Um das zu nutzen, gehen wir hier rüber und wählen dies aus und das ist unser Raster. Sie können den Modus definieren, wie hoch der Abstand links und rechts in Ihrem Raster ist , und auch die Farben. Zum Beispiel. Ich möchte verschiedene Farben oder Eigenschaften haben. Versuchen wir zum Beispiel, die Farbe des Hintergrunds auf so etwas zu ändern . Um das Raster zu zeigen. Raster. Wenn Sie zum Beispiel das Layout haben möchten, haben wir ein Layout all dieser Elemente wie diese, die so aussehen. Und zum Beispiel können Sie auch ein Layout erstellen. Wir haben ein großes Element hier drüben, dann zwei Elemente hier drüben. Sie können dieses Layout auch erstellen, den Gitterhocker. Also machen wir uns im Moment keine Sorgen darüber, wer? Wir werden gerade unsere mobilen Apps entwickeln. Wir haben Grids für Mobilgeräte. Wenn du willst. Designsystem, wo wir Web T2 haben, dann werden wir ein Rastersystem für Webdesign haben , um mich das tun zu lassen. Erstellen Sie einen anderen Frame. Und dieses Mal benutze ich einen Desktop 1440. Das wird mein Desktop sein. Lassen Sie uns ein Raster-Layout erstellen. Und wir verwenden ein Säulenraster-Layout 12 Spalten. Mittellinie. Sollte 72 sein, nennen wir es 72. Cutter wäre nicht 30 Jahre alt. diese Weise würden Sie ein Desktop-Raster anzeigen. Sie können es auch hier speichern. Dies wird für Ihr Entwickler-Desktop-Grid einfacher als praktisch sein. Und das würde den Trick machen. Ich denke, es dreht sich alles um die Gitter. Ich glaube, ich habe das verlassen. Sie müssen ein Rastersystem erstellen , in dem Sie alle verschiedenen Raster anzeigen. Besser, wenn Sie diese Rasterstile erstellt haben, die leicht angewendet werden können , wenn Sie versuchen, eine neue Seite für ein neues Layout zu erstellen. Ich denke, wir haben alles Grid-Wissenschaftler, Topographie, Buttonchips, Fortschrittsbalken, Icons, Illustrationen und Komponenten abgeschlossen alles Grid-Wissenschaftler, Topographie, Buttonchips, Fortschrittsbalken, . Ich denke, das wird enden und einige der Ergebnisse. Wenn Sie Fragen haben oder wenn ich noch etwas habe, wenn Sie Fragen haben, können Sie mich jederzeit stellen. Sie können dies so komplex wie möglich erstellen und gestalten. Aber ich habe versucht, es zu vereinfachen, und ich habe versucht Ihnen die Essenz des Designsystems beizubringen, was Sie tatsächlich brauchen und warum Sie tatsächlich ein Designsystem bauen müssen, das Ihnen das Leben erleichtern wird. Und all die Tipps und Tricks, die ich in diesem Kurs gegeben habe , die dir bei der Verwendung von Figma sehr helfen werden. Ich treffe dich in einem anderen Video und einem anderen Kurs. Stellen Sie sicher, dass Sie die Ressourcen für diesen Kurs bis dahin herunterladen , achten Sie auf Wiedersehen und wir werden uns ein anderes Mal treffen. 30. Erstelle eine Art combo: In der letzten Lektion haben wir unseren Typografiebereich unseres Designsystems erstellt . Jetzt werden wir einige der weiteren Dinge sehen , die Sie in Ihrem Typografiesystem benötigen. Diese sind zusätzlich. So können Sie hier sehen, dass wir unser Designsystem haben, in dem wir eine Titelüberschrift haben. Dann haben wir einen Abschnitt, den ich hier überall beschrieben habe mit den Größen auf der linken Seite. Und jeder von ihnen ist eigentlich ein Typstil. Sie können sehen, Sie können leicht erraten, was wir jetzt haben, ich habe sie auch alle auf meine Design-Lern-App angewendet . Lass mich es dir zeigen. Hier haben wir es. Wenn Sie also hier drüben klicken, handelt es sich um eine Typografie-Abschnittsüberschrift. Und wenn Sie hier drüber klicken, ist dies ein Topographieabsatz plus gedämpftem Text. Wenn wir hier drüber klicken, ist dies ein kleines Lehrbuch plus untere Navigation. Wir haben alles dort angewendet, wo es sein sollte. Ich drücke Command oder Control, um auf Slack zu klicken. Sie können Textfeld und Labels sehen. Wenn Sie hier drüber klicken, ist dies eine Absatzmutate innerhalb des Textes. Das ist also der FiltText. Wenden Sie diesen Stil tatsächlich hier an. Dann wieder in diesen, all diese Knöpfe. Das sind also eigentlich Tasten oder Steuerelemente. In all diesen Steuerelementen haben wir oder Schaltflächen haben wir den Buttontext angewendet wenn Sie hier drüber klicken und Text klicken, wenn Sie auf Text klicken und sind alles Schaltflächentexte. Ähnlich für diesen Text ist dies nur eine Information, kleinste Information. Es ist also im Volltext. Prüfen wir die Entfernungen. Schon wieder. Wenn Sie hierher gehen, ist dies Absatz plus stumm geschaltet. Jeder Titel unten ist also eigentlich ein Absatz. Wenn Sie also hier drüber klicken, ist dies auch Paragraph plus stumm geschaltet. In ähnlicher Weise haben wir dieses. Dies ist ein kleiner Text. Wenn Sie unten hier rübergehen, ist dies ein kleiner Text plus untere Navigation. So können Sie sehen, dass Sie Ihre gesamte Typografie auf Ihr Designsystem anwenden. Wenn Sie ihnen nun die Kombination verschiedener Schriften zeigen möchten . Zum Beispiel. Hier sehen Sie, dass wir zwei von ihnen kombinieren. Ist ein Unterschied zwischen ihnen. Du kannst von hier aus kopieren. Sie können zum Styleguide gehen und Sie können sehen , dass dies hier in diesen Abschnitt gelenkt wird. sie so rasant gemacht. Dies ist der Abstand zwischen ihnen. Dies ist ein Text, den wir brauchen, um beide Ebenen separat hier zu erhalten. Was ist hier passiert? Mal sehen, wo es ist. Okay, also hier haben wir es. Wir werden diese beiden Befehle C ergreifen und mal sehen, ob wir Leute anrufen können. Je mehr hier. Ja, jetzt waren sie tatsächlich Gemeinkosten, es hat nur den Text kopiert. Versuchen Sie hier eine Hintergrundfarbe zu verwenden, nämlich Docker. Dunkler Hintergrund. Ich glaube, wir haben diesen benutzt. Ich habe versucht, alles auf einem dunklen Hintergrund zu zeigen. Es ist einfacher für sie. Hier haben wir es. Bewegen Sie es nach unten. Kopieren Sie diese beiden auch. Wir drücken Alt und ziehen so hierher. Und wir nennen sie Typ. Ab 88 nach links. Sie können Ihre Schriftkombinationen hier teilen. Es wird auch das Lob zeigen, wie viel Abstand von einem Text zum anderen sein würde. Sie können hier sehen, dass wir den Abstand von zehn haben. In ähnlicher Weise, wenn wir mehr wie diesen haben, dieser Abschnitt, in dem wir Vorlesungstitel haben, und lassen Sie uns dies kopieren. Und wir gehen zurück zum Styleguide. Und lass uns das hier benutzen. So wie das. Erweitern Sie als Nächstes diesen Hintergrund ein bisschen mehr. Hier haben wir es. Sprechen wir über diesen Hintergrund. Ich glaube, wir benutzen das hier. So werden Ihre Entwickler wissen, dass die Abstände zwischen diesen Schriften Komponenten erstellen wollen. Das kannst du auch machen. Wenn ich zum Beispiel hier eine Komponente davon erstellen wollte , kann ich einfach hierher gehen. Es wird eine Komponente sein. So kannst du es später ändern. Sie können also eine Komponente erstellen und sie beispielsweise Abschnitt, Abschnittsvideoliste nennen , so etwas. In ähnlicher Weise können Sie beide auswählen und eine Komponente erstellen. Nennen wir es Benutzerinformationen. Sie können sehen, dass Sie auf diese Weise einige der Komponenten erstellen, die Ihren Entwicklern helfen werden , diese schnell zu greifen und in ihrem Design zu verwenden . Wenn es eine Tastenkombination gibt, wenn Sie diese abrufen möchten, drücken Sie einfach die Umschalttaste. Schrägstrich. Es gab eine Verschiebung I. Sie müssen die Umschalttaste drücken. Sie können hier sehen, dass wir Typografie haben. Wir müssen Abschnittsvideoliste. Wenn ich hier drüben klicke, schnappt es sich. Oder hier siehst du, dass wir das haben wir hier drüben. In ähnlicher Weise ist dies unsere Rubrik. Wenn ich diese Verschiebung verwenden möchte, kann ich und ich eine beliebige Komponente suchen. Zum Beispiel waren dies wenige, die wir erstellt haben. Und Sie können diese auch erstellen, verwenden Sie zum Beispiel userinfo. Und es wird sich so etwas auszahlen. Wenn Sie mehr Komponenten erstellen möchten, wie vielleicht diese gesamte Komponente für vorgestellte Ziele und all diese. Wir werden diese in den nächsten Schritten zurückschaffen, nein, wir machen uns mehr Sorgen um Typografie. Gehen wir also zu unserem Styleguide. Und ich glaube, hier hatten wir, wir werden diesen Kampf jetzt verlassen. Wir haben hier zwei Komponenten , die wir bei unseren Entwicklern oder Designern verwenden werden wir in ihrer Typografie verwenden werden. Abschnitt. Lasst uns diese Gruppe bewegen. Wir haben zwei oder hip. Nennen wir das Hintergrund. Wissen Sie nur, ob Sie es hier so erweitern möchten. Das liegt an dir. So wie das. Jetzt können Sie sehen, dass wir einige Nutzungskomponenten haben , bei denen wir dem Benutzer die Abstände zwischen Absätzen oder Titeln oder ähnlichem zeigen. Außerdem zeigen wir die gesamte Designskala, in wir alle verschiedenen Schriften und ihre Stile haben. Und ihr Zweck ist, welcher Zweck diesem Typstil verbunden ist. Das ist alles, was Sie brauchen, um all diese anzuwenden, wir haben sie bereits angewendet. Lassen Sie uns im nächsten Abschnitt die nächste Lektion fortfahren und wir werden Farbkombinationen ansehen und ein anderes Farbschema erzeugen. Kommen wir zur nächsten Lektion. 31. Verwenden von Icon in Input 01: Jetzt haben wir in der letzten Lektion das Icon-System und das Schaltflächensystem erstellt . Daten sind wenige Dinge, die wir jetzt verwenden werden, was unser Input ist. Wir werden Videos und Stundeneingabefelder erstellen. Lasst uns anfangen und warum wir die Icons zuvor erstellt haben. Ich zeige es dir jetzt, damit du hier sehen kannst, ob du dir diesen Button ansiehst, also habe ich sie mit Zuständen beschriftet. Das sind also unsere Knöpfe. Dann haben wir Fortschrittsbalken in Liegestützen, bei denen wir Chips und Fortschrittsbalken ableiten müssen, und dann haben wir diesen Fortschrittsbalken. Dieser ist also tatsächlich in Port. Verwenden Sie das Dropdown. Hier werden wir dieses Dropdown-Menü verwenden. Und jetzt werden wir unsere Eingabefelder neu erstellen, die dieses sind. Wir haben diese. Also lasst uns beide kopieren. Wir werden sehen, ob wir sie mit unserem Designsystem replizieren können . Also hier haben wir eins und das ist eins, dieser ist aktiv, also beträgt die Breite drei Mengen 7. Das erste ist, dass wir die gleiche Breite verwenden können, was 346 ist. Wir sind hier. Versuchen wir das zu replizieren. Zuerst werden wir dieses drückende D verwenden und erstellen . Und ich werde das benutzen. Das ist mein Input. Vielleicht können wir email shift a verwenden , um ein automatisches Layout um ihn herum zu erstellen. Und die Höhe beträgt 48. Also werden wir benutzen, lass uns 88 benutzen hier drüben. Die Höhe ist momentan 34 Ich denke, wir würden den 1212 anführen. Okay, eine Sache ist also, dass wir auf diesen Text doppelt geklickt haben werden. Wir werden es links ausrichten. Das wird immer auf der linken Seite sein. Wie Sie wissen, werden wir sie feste Höhe haben. Also klicke ich auf die mittlere. Ich schaffe es wenigstens so lange. So lang reicht es. Ich denke, das ist gut genug für den Text. Wichtig, ich kann E-Mails oder irgendetwas dafür haben. Das ist alles. Vielleicht ein bisschen länger als das. Ich benutze 260 Wort. Fügen wir diesem Rahmen eine Füllfarbe hinzu. Fülle die Farbe. Und es wird so etwas sein, klein dunkler als dieses. Also dieser, BW E9, das ist die Farbe unserer Designs sind einige, die zu dieser Farbe passen werden. Okay, also denke ich von links haben wir 16. Also werde ich 16 hier drüben behalten, so. Und auch von hier aus behalte ich 16, die Mitte. Wir werden es in der Mitte behalten, denn sobald wir dieses Symbol hinzugefügt haben, wird das alles durcheinander bringen. Das ist alles. Versuchen wir also 42 zu sehen. Dieser ist 48, also brauchen wir oben und unten etwas mehr Polsterung. 46. Lass uns hier 15 benutzen und sehen, ob es gut aussieht. Lasst uns ja. Fünfzehn, Fünfzehn, Fünfzehn, 161648. Jetzt werden wir das weiß machen. Das wird 330 sein. Also nicht so. Also werden wir den Klick auf diesen Frame verwenden und versuchen es zu sehen. Versuchen Sie nun, dieses Symbol hier hinzuzufügen. Also gehen wir zu unseren Icons. Wir gehen von hier aus zu Assets und gehen zu Icons. Ich füge das hinzu und lass es so hier rüberlassen. Ups, Sie können sehen, dass es bereits der Größe entspricht, fast gleich der Größe. Gehe jetzt zurück zu Layern und wir werden nach deinen Sachen suchen. Zum Beispiel oben, unten. Wir werden reduzieren, weil diese 32 tatsächlich viel Breite zu diesem hinzugefügt hat. Gehe zu diesem Frame eins , also nennen wir es Input. Wir werden oben und unten 12 sein werden, um zu sehen, wie hoch die Höhe 50 ist. Dieser ist 48. Es ist wieder viel. Versuchen wir 88 hier drüben fügt tatsächlich hinzu. Das sind 48. Perfekt. Und das haben wir vergessen. Den Eckenradius so hinzufügen. Mal sehen, was ist die Breite 327, das sind 334. Dieses Symbol sieht etwas zu weit von dieser Kante entfernt aus, also werde ich die Größe von dieser Seite reduzieren. Also wäre die Polsterung, lasst uns versuchen zu reduzieren. Es. Sieht gut aus. Oder hier. Dieser 330 und das sind 327. Versuchen wir, diese Größe zu reduzieren. Zweihundertsechsundfünfzig. Siebenundfünfzig. Und jetzt schauen wir uns die Größe 327320 Sekunden an. Das ist also perfekt. Jetzt können Sie sehen, dass ich hier eine E-Mail-Adresse hinzufügen kann , M.com. Ich denke, es wird einfach für die ganze E-Mail sein. Dies wird tatsächlich unbefüllter Zustand sein. Versuchen wir also etwas zu benutzen , das in Ordnung ist, um das zu haben. Und wir müssen etwas anderes tun. Designsystem und diese Icons, ich werde das replizieren. Das wird mein leeres Icon sein. Nein, so nicht. Ich erstelle eine Schachtel mit 32 mal 32. Und dieser wird tatsächlich eine Loafing-Füllfarbe haben. Versuchen wir, die Deckkraft von 0% zu verwenden. Dafür. Ich nenne es leer. Oder nennen wir es nein. Nein. Ich erstelle daraus eine Komponente. Lasst uns dem näher kommen. 32. Verwenden von Icon in Input 02: Dies ist unsere neue Ikone. Ich zeige dir, warum ich das erstellt habe. Hier haben wir diesen gescheiterten Zustand. Wir haben das Feld erstellt. Sie hätten also tatsächlich gezwungen Eine weitere Sache fehlt, nämlich diese E-Mail-Adresse, die das Etikett ist, bei dem es sich um steuerfreie Datenbeschriftungen handelt. Versuchen wir also, das hier hinzuzufügen. Ich bin nach Port D. Es wird das Etikett, das Etikett, das Etikett, das Etikett mit einem Etikett, Textetiketten sein . Dies ist das Etikett und die Farbe ist tatsächlich etwas näher dran. Ja. Jetzt ziehen wir es in dieses automatische Layout. Sie können sehen, dass es hier hinzugefügt wurde, also möchten wir, dass es ganz oben steht. Okay, jetzt haben wir ein Problem. Bevor du diesen hinzufügst. Wir werden ein anderes Auto-Layout verwenden. Dieser ist sechs Pixel. Lass es uns Sechs behalten. Abgesehen von hier. Wir werden beide auswählen. Umschalt. Okay? Hier haben wir einen anderen Frame und ich möchte, dass es so ist, das wird mein Input sein. Plus beschriftet. Sie können sehen, dass das automatische Layout eine vertikale Richtung hat, daher beträgt der Abstand zwischen den Elementen sechs, die wir gerade festgelegt haben. Und auf der linken Seite werden wir ein paar Padding von sechs hinzufügen. Es fügt beiden eine Polsterung hinzu . Das hier drüben. Dies fügt tatsächlich alles zu diesem Ganzen hinzu. Versuchen wir, ein automatisches Layout für dieses zu erstellen. Diese E-Mail entfernt die Polsterung oben unten. Das wird sehr komplex. Unten 0 und das wird 16 sein. Ich denke, es wird so übereinstimmen. Also 15, ich behalte es so. Was ich getan habe, ist, dass ich das Auto-Layout auch für dieses überprüft habe. Normalerweise möchte ich diese vielen automatischen Layouts und solche Dinge nicht erstellen. Also werden wir zurückgehen und es einfacher halten. Also lassen Sie uns das automatische Layout entfernen. Lass uns den Rahmen entfernen. Sie die Gruppierung so auf. Was ich also versuche, ist, dass ich die Gruppierung auch aufheben werde . Um es einfach zu halten. Wir werden sie einfach zusammenfassen. Befehl G, und dies ist Eingabe, Aktivieren, Eingabe plus Label. Sie können viel mit Auto-Layout machen, aber ich mag nicht zu viele komplexe Auto-Layouts so vermischen. Dies ist kein guter Weg, um mit Ihrem Design zu beginnen. Also werde ich das von hier aus individuell ausrichten. Das sind eigentlich sechs Pixel von hier entfernt. So wird mein E-Mail-Feld aussehen. Sechs Pixel. Ja. Was ich versuche, ist jetzt, dass ich versuche, eine einfache Komponente zu erstellen , die das ist. Bleib so hier drüben. Das ist also eigentlich, wir werden hier etwas Abweichung brauchen. Und lasst es uns jetzt einfach halten. Wir werden hier drüben Label benutzen. Nennen wir es. Das wird normal sein. Nennen wir es nochmal Label. Hier. Nennen wir das wird sein, lass es uns leer machen. Wir können es nicht leer machen. Nennen wir es also Eingabetext. Jetzt ersetzen wir dies durch unser Icon, das ein neues Symbol war. Symbol ist, dass dieser Text ist, wir wollen, dass er in etwa so ist. Wir möchten nicht sehr hervorgehoben werden, da es sich nur um einen Fülltext handelt, bevor jemand eintritt. Dies ist unser Normalzustand. Nennen wir es also State. Dies ist unser Normalzustand. Eingabe-Status. Das ist eigentlich unser Staat. Und wir brauchen noch einen , der aktiver Staat ist. Also können wir sie so bewegen. Ich füge ihnen kein automatisches Layout hinzu. Und lasst uns noch eins erstellen. Welches wird dort sein, wo wir diese Grenze haben. Und der Hintergrund ist, ich denke leichter. Ich bin mir nicht sicher. Ich füge einen Schlaganfall hinzu. Und Strich wäre tatsächlich auf diesen Farben. Das ist keine Farbe. Ich denke, das ist sehr nah dran. Ich benutze eine andere Farbe, die diese ist. Blue 50 ist eigentlich unsere Farbe für diesen Staat. Und Icon wäre so, wie wir versuchen, es zu füllen. Also werden wir jetzt im Icon Eingabefeld verwenden. Dies ist tatsächlich aktiv. So habe ich versucht, Create Components für meine Eingabefelder zu verwenden . Wenn Sie mehr Eingabefelder haben, können Sie viele andere Dinge erstellen. Das sind normale Texte. Dies ist auch, wenn Sie diesen Text ausblenden möchten, können Sie ihn einfach 0% machen und er wird sich so verstecken, wenn Sie eine solche Eingabe haben möchten . Wir haben unsere Dropdown-Liste für Eingabetext erstellt. Lassen Sie mich sehen, ob wir noch etwas brauchen. Okay, also hier haben wir die Avatare. Wenn Sie einen Avatar-Frame erstellen möchten, benötigen Sie meiner Meinung nach auch ein 32-Bit-32-Pixel-Symbol. Gehe zu diesem Icon. Und das ist eigentlich hier, wir haben es. Wir werden eine Ellipse benutzen. Wir erstellen eine Ellipse, indem wir die Umschalttaste gedrückt halten, und die Breite und Höhe sollten 32 betragen. Das wird unser hier sein, wir haben eine leere. Also lasst uns noch einen hier haben. Behalte den leeren hier drüben. Wir werden es benutzen, was für diese gleich ist. Dies wird unser Ergebnis sein. Für die Füllung. Wir werden tatsächlich ein Bild verwenden. Für die Füllung. Wir werden ein Bild benutzen und es so behalten. Ich benutze Avatar und wir müssen eine Komponente daraus machen. Löse. Wir haben fast alle unsere kleineren Komponenten geschaffen, und jetzt werden wir auf die größeren Komponenten wie diese zugehen. Untere Navigation, diese obere Navigation für diese, folgt ihnen auf diesen hier, diesen und auch diesen. Ich glaube, wir haben sie bereits geschaffen. Also werden wir diese Komponenten jetzt erstellen. Zum Beispiel können wir mit diesem Videoplayer eine ganze Komponente dieses Videoplayers haben und wir werden nicht zu viel von der Komplexität nutzen von der Komplexität zu viele Auto-Layouts und ähnliches hinzuzufügen. Wir werden diese verwenden, kombinieren und unser System schaffen. Das werden wir in der nächsten Lektion machen. Wir werden mit der nächsten Lektion fortfahren und einige komplexere Komponenten erstellen. Wir können sie ganz einfach in unsere Entwürfe aufnehmen. Und wir werden die Illustrationen auch einen anderen Frame namens Illustrationen kopieren lassen, damit wir sie ziehen und hier ablegen können. Ich treffe dich in der nächsten Lektion bis dahin, komm auf. Tschüss. 33. Erstelle Abstandssystem 01: Jetzt im heutigen Video werden wir einen sehr wichtigen Aspekt besprechen, den ich bei der Aufnahme dieses Kurses vergessen habe, bei dem es sich um einen sehr wichtigen Aspekt ich bei der Aufnahme dieses Kurses vergessen habe, bei ein Abstandssystem handelt. In Ihrem Designsystem wird der Abstand größtenteils vertikal verlaufen. Oder manchmal sehen wir schnellen Platz, der sich um Layout oder Ihre gesamte Seite herum befinden wird. Und es gibt verschiedene Kategorien von Abständen. Wir werden also sehen, welche Abstände wir benötigen Abstandssystem, wir in unserem Konstruktionssystem benötigen. Lasst uns anfangen. Jetzt können Sie sehen, dass ich hier eine Kunsttafel erstellt habe, das vertikale Abstandssystem. Und wir gehen zu unserer Lern-App und wir werden einige der Abstände sehen. Zum Beispiel können Sie hier von diesem Logo nach oben sehen, wir haben 34 Pixel. Der Abstand ist fast, ich glaube, es war 36. Also werden wir hier drüben 36 benutzen. Vielleicht können wir 32 gebrauchen. Benutzen wir 32. Auch hier werden wir wieder 32 benutzen. Hier drüben. Es war auf jeder Seite gleich. In ähnlicher Weise haben diese beiden einen Abstand von 24. Sie können sehen, dass dies die wenigen verschiedenen Abstandssysteme sind, okay, links und rechts unser Rastersystem links und rechts tatsächlich hat unser Rastersystem links und rechts tatsächlich 24 Pixel Rand . Sie können also sehen, wenn Sie hier rüberschauen, haben wir 24 an der Spitze. 24. So. Ebenso haben wir 24 auf der rechten Seite. Lass es uns 24 schaffen. Das ist also eigentlich unser Wrapper-Space. Wir benutzen tatsächlich vierundzwanzig, vierundzwanzig, vierundzwanzig. Also nutzen wir wenigstens 24 Raum um unser Design herum. Also lasst uns auf den Grund gehen und sehen, was der Platz ist, den wir hier übrig haben. Wir werden so etwas haben. Das ist also unsere untere Navigation und es hat einen Abstand von herum. Versuchen wir es ein bisschen größer zu machen. Ich glaube, es sind am meisten 32. Hier haben wir es. Versuchen wir zu vergrößern und zu sehen. Ist es ganz unten? Ja. Der Abstand beträgt also 0,77, also ja, unten sind es 32. Jetzt stimmt der Abstand fast überein. Unsere kleinsten kleinen Räume. Ein Block ist 24, der andere ist 32. Das sind also die beiden Größen. Also werden wir hier drüben schreiben, genauso wie wir es für unsere Topographie hier getan haben. Ich kopiere das. Ich füge es hier ein. Der erste ist 24, wir haben, der zweite ist 32. Dies sind die beiden Räume. Ups. Lasst uns zurückgehen und sehen, ob wir zwischen diesen beiden noch mehr Platz nutzen . Ich denke, das muss es sein. Eine davon ist 36. Mal sehen, was ist das 20, das ist 211. Der Abstand beträgt tatsächlich 20 Pixel. So können Sie hier sehen 3621 weitere Schritte, die wir verwenden werden, nämlich weniger als 24, was 20 ist. Wir haben drei Abstände zwischen unserem Design identifiziert. Hier haben wir 40 zwischen Abschnitten, größere Abschnitte. Und in ähnlicher Weise haben wir das Problem hier drüben darin, dass wir den Abstand sehen müssen. Dies ist im Grunde ein Block. Wir haben hier 16 Abstände zwischen dieser Überschrift und diesem Block. Also lasst uns versuchen, hier zu sehen, es sollte 24 von oben sein. In ähnlicher Weise sind diese 224,5, das liegt tatsächlich bei 101. Dies sollte auch 01 sein, so 2424. Okay. Wir werden hier drüben ein Exemplar von 16 benutzen. Und von hier aus sind es 28. Ich denke, es sollte vielleicht etwa 32 sein. Versuchen wir es zu sehen. Wir haben noch einen Abstand, der 16 ist. Also lass uns 16 hinzufügen oder hier haben wir 16. Wir haben also vier Schritte identifiziert. 16202432, ich glaube wir hatten, okay, also haben wir vier. Versuchen wir zu sehen, ob es 3232 ist, die wir bereits identifiziert haben. Ja. Einer war 40, was zwischen diesen beiden Abschnitten lag. Das sind also 40. Wir haben für den Abstand. Versuchen wir nun zu sehen, ob wir irgendetwas als 20202024 haben. Okay, das ist gut. 12. Sie können sehr benachbarte Gegenstände sehen. Sie haben 12 Abstände. Versuchen wir es hier drüben mit 12. Wir haben jetzt 123456 Abstände, vertikale Abstandssysteme. Und versuchen wir zu sehen, ob wir 36 haben. Das ist also 24. Das sind 40. Ja, ich denke, unser gesamtes Design basiert auf diesen vier oder fünf Abständen. 1216202430 bis 40. Mal sehen, ob wir einen Abstand dazwischen brauchen. Wir haben einen Abstand von 16 zwischen zwei Elementen. Der horizontale Abstand hat also auch den gleichen Schritt. Und mal sehen, ob wir irgendetwas haben , was der Abstand zwischen diesen beiden ist. Also habe ich zwei- oder dreimal diesen 27 benutzt. Ich denke, es sollte in einigen geraden Zahlen sein. 27 ist keine gute Sache. Es basiert tatsächlich darauf. Okay, also lasst uns versuchen , diese Acht zu sehen. Der kleinste, oder? Hier sind es acht dazwischen. Sie können sehen, dass es sich um dreizeilige Texte handelt, also verwenden wir hier acht. Fügen wir es hinzu, um mehr Flexibilität zu erhöhen. Wenn wir also den kleinsten Abstand zwischen unseren Artikeln hätten, wären es 881216202430 bis 40. Und ich denke, das würde unser Designsystem vervollständigen. 36 sollte nicht 36 sein, aber es sollte 32 sein. Hier haben wir, lasst uns versuchen, diese auf eins anzupassen. Wir können hier auch 40 benutzen, aber ich denke, ich würde hier 32 benutzen. Und der Abstand zwischen diesen ist im Trend. Und dieser wird auch 20 sein. Tatsache, dass wir also versuchen, den Abstand zwischen 168 Schichten zu sehen. Das ist also gut. Versuchen wir zu sehen, dass dieses System 16 sein sollte. Und lasst uns versuchen, zehn zu sehen. Das ist nicht gut. Wir müssen es hier haben. Und lasst uns versuchen, den Abstand zwischen diesen beiden zu sehen. Das ist gut. Und das müssen eigentlich 16 sein. Hier. Das sieht gut aus. Sie können sehen, dass ich mein Design verschiebe, um es anzupassen, also sollten es acht sein. Dann nochmal, es und dann ist es 16. Jetzt ist es perfekt. Das ist alles, was ich denke, dass dies die Abstandssysteme sind wir in unseren Entwürfen verwenden möchten. Fangen wir an, sie zu bauen. Was ich also versuche, ist, dass wir ein paar Blöcke der Räume bauen werden. Lasst uns unser Rechteck holen. Hier haben wir es. Es sollte 40 hoch sein. Versuchen wir 45th zu benutzen. Normalerweise habe ich versucht, den vertikalen Rhythmus zu tun, ich werde die Breite dieses Rhythmus verwenden, also ist er 375 Pixel breit. Was ich versuche, ist, dass ich hier 375 benutzen werde. Also schreibe ich, indem ich T 40 Bx drücke, so. Ich werde es in der Mitte ausrichten. Kombiniere sie. Du kannst sie einfärben, wenn du willst. Zum Beispiel möchte ich vielleicht, dass es so etwas ist. Für diese Farbe verwende ich etwas. Das wird mein Abstand sein. Das wird sein, ich werde eine Komponente erstellen. Lassen Sie uns eine Komponente erstellen. Und wir werden es Space nennen. Dies wird meine letzte Skala sein, 1234567, Space Seven. Oder Sie können es auch Abschnitt, Leerzeichen, Leerzeichen, diesen Strichabschnitt nennen . Nennen wir sie bei einigen aussagekräftigen Namen. Dies wird Space Section sein oder nennen wir es Space Seven. Es sollte also der größte sein, der leichter ist, sich an sieben zu erinnern, wir haben sieben hier drüben. Wir werden das Gleiche noch einmal wiederholen. Und dafür werden wir die Gruppierung der Instanz aufheben. Das ist also wieder, ich werde es lösen, ich mache immer wieder dasselbe. Also werden wir diese 32 überspringen. Also werde ich die Größe der Höhe reduzieren, 32. So. Richten wir den Text in der Mitte aus. Whoops, das gefällt mir eigentlich. Lasst es uns nach oben bewegen. Jetzt werde ich dieses wieder erstellen, und wir nennen es Space Sechs. Das wird mein Space Sechs sein. In ähnlicher Weise werden wir alle anderen machen. 34. Erstelle Abstandssystem 02: Jetzt können Sie sehen, dass wir unser Abstandssystem erstellt haben. Und ich zeige Ihnen, wie Sie einen neuen Bildschirm erstellen können , indem Sie diese Abstandssysteme fallen lassen. Jetzt können Sie sie auch benennen, zum Beispiel können Sie sie so nennen, als würde dies unsere Marge sein. Ich weiß, dass das meine Marge sein wird. Dies wird Abschnitt Space sein. Also weiß ich, dass dies mein Abschnittsraum sein wird. Und in ähnlicher Weise wird dies das kleinste zwischen so etwas sein oder es einfach nur Space One nennen. Dies wird das kleinste sein. Das wird mein Spielraum sein. Dies wird mein Abschnitt, Abschnittsabstand oder die Marge für das nächste Quartal sein. Nur um die gleiche Benennungstechnik beizubehalten. Wenn Sie also hierher kommen, baue ich zum Beispiel einen neuen Bildschirm oder baue hier ein neues Design. Also lasst uns das kopieren. Und lass mich es dir zeigen. Wenn ich hier nichts habe. Und ich wollte meinen Bildschirm starten, also würde ich schnell wechseln, shift. Wenn ich einmal die Umschalttaste I drücke, siehst du, dass ich hier verschiedene Dinge habe. Ich kann Knöpfe fallen lassen. Ich kann Illustration fallen lassen. Hier haben wir das Abstandssystem. Beginnen wir also mit diesem Space Marge oder Leerzeichen sechs. Hier haben wir es, damit ich es so fallen lassen kann. Und wenn ich jetzt versuche, hier etwas zu tippen , lass uns Sally noten. Also weiß ich, dass ich diesen Spielraum hier halten muss , bevor ich etwas anfange. Das wird mein Raum sein. Wenn ich einen neuen Text hinzufügen möchte oder etwas darunter hinzufügen möchte, nennen wir es Unterüberschrift. Ich weiß, dass ich acht Pixel Abstand zwischen ihnen brauche. So kann ich schnell die Umschalttaste I drücken, und ich kann meinen Abstand hinzufügen. Und Sie können Ihren Entwicklern auch dieses Abstandssystem zeigen . Sie können ein Dokument erstellen und ihnen zeigen, dass dies das Abstandssystem ist oder dass dies der Abstand ist, der verwendet wird. Nehmen wir zum Beispiel I, Shift I, und das wird mein Abstandssystemraum sein , der T2 tatsächlich zwischen den Tasten verwendet wird. Entwickler werden also wissen , dass der zweite Raum 12 Pixel beträgt und der Abstand zwischen zwei benachbarten Schaltflächen ist . Ich bereite ein Dokument , um mein gesamtes Abstandssystem anzuzeigen. Ich glaube, Platz für wurde genutzt. Hier haben wir den größten benutzt, denke ich Sektion Space. Lasst uns den letzten hinzufügen. Platz sieben hier drüben. Also musst du so etwas vorbereiten. So können Sie hier sehen, dass wir den Abstand von 3624 tatsächlich verschieben. Oops, keine Typografie. Ich möchte zum Spacing-System gehen und ich werde Platz drei hinzufügen, ich denke 16 Space Food. Du kannst sehen, dass du sie benennen kannst. Es fällt mir schwer, es hier rüber zu ziehen. Sie können sie auch nach ihrer Größe benennen, zeitlich, ich werde 2020 oder hier verwenden. Und 43, ich werde 16 setzen. Dies ist einfacher zu verstehen und digitalere Vermutung, die Sie hier sehen können, wenn ich hier drüben klicke, heißt es Sexual 40 Abschnitt marginal. In ähnlicher Weise kann ich 32 hinzufügen, die wir 24 Wege brauchen, also werden wir verwenden. Sie können auch hier suchen. Lasst uns also einen Stipendiaten für das, was passiert. Weltraum. Hier haben wir Platz und verpassen 24. Vielleicht habe ich es nicht richtig genannt. Deswegen kam es nicht. Auch hier suche ich Shift I, um in meinen Komponenten zu suchen. Und ich werde 24 eingeben, um schnell darauf zu gehen. Und ich bereite ein Dokument für meine Entwickler vor. Ebenso können Sie sehen, dass wir einen Abstand haben. Wir können den Abstand nicht verstehen. Es ist 32. Also lasst uns hier 32 hinzufügen. Auf diese Weise zeigen Sie Ihren Entwicklern Ihren Bildschirm. Das sind also 43, aber ich denke, es sollte 40 sein. Also lasst uns versuchen, für den Bildschirm hinzuzufügen, ich denke, wir werden ihn etwas höher halten. Versuchen wir also, Shift I hinzuzufügen, und fügen wir hier 40 hinzu, mindestens 40 Pixel, wenn es Tasten gibt , damit Benutzer sie einfach drücken können. Dies ist ein Problem mit der Barrierefreiheit. Also hier haben wir es. Vielleicht können wir ein paar Schatten oder ähnliches hinzufügen. So ist unser ganzer Bildschirm. Sie können es auch auf dem ganzen Bildschirm etwas nach unten verschieben , Beispiel 123. Dann können wir das aufstellen. Hier haben wir ein perfektes Bildschirmlayout. So werden Sie Ihr Abstandssystem, Systeme in Ihre Konstruktionssysteme einsetzen. Sie können auch angeben, ob Ihr Entwurfssystem Tabellen und viele Daten enthält, Sie können auch einen horizontalen Abstand angeben. Vielleicht brauchst du vier Pixel. Für den horizontalen Abstand erstellen Sie also kleinere Blöcke. Kleinere Blöcke zur Anzeige des horizontalen Abstands. Anstatt diese zu schaffen. Lassen Sie mich Ihnen zum Beispiel zeigen, lassen Sie uns acht Pixel Block erstellen. Und ich werde dir zeigen, dass es dabei ist. Und ich tippe hier acht Pixel ein. Dies wird eine separate Höhe haben, lasst uns die Höhe 40 behalten und wir werden sie benutzen. Es wäre, lasst uns das Pixel entfernen, weil es sehr schwierig ist. Ups, das haben wir. Stellen wir es hier rüber. Es ist nicht unbedingt so, dass Sie immer einen Text hier drüben müssen. Du kannst sie umbenennen. Zum Beispiel nenne ich es horizontales Leerzeichen. Lassen Sie uns die Kante auf wenig Platz halten. Dies wird im Space Pool sein , der acht sein wird. Lasst es uns in den Klammern behalten. Größe So werden wir erschaffen. Lassen Sie uns eine Komponente erstellen. Was passiert? Befehl Alt oder Option K. Dies ist unsere Werbefläche. Und das wird ein Abstand sein und wir können auch für 1216 horizontal erstellen, der Abstand wäre nicht großartig zu sehen, er wäre sehr klein. Aber Sie können das erstellen und Ihren Entwicklern zeigen , dass wir diesen Raum auf diese Weise nutzen werden. Sie können also sehen, dass dies im Weltraum ist. Sie können das Leerzeichen hier auch so und die Benennung nutzen. Es ist also leicht und leicht zu verstehen, dass es sich um einen vertikalen Raum handelt. So etwas. Benennung sollte sehr kompakt und aussagekräftig sein, damit Ihre Entwickler leicht verstehen oder einen neuen Designer können , wenn sie zu Ihrem Teamdesignteam kommen oder sich Ihrem Teamdesignteam anschließen Die Benennung sollte sehr kompakt und aussagekräftig sein, damit Ihre Entwickler leicht verstehen oder einen neuen Designer können, wenn sie zu Ihrem Teamdesignteam kommen oder sich Ihrem Teamdesignteam anschließen. so wird Ihr Abstandssystem funktionieren. Hier geht es um das Abstandssystem. So gehen Sie zu Control Command Shift vier, um mein Layout auszublenden. Und so werden Sie dieses Ihrem Entwickler zeigen. Und Sie können all dies auch in eine Gruppe einfügen und es als Abstand bezeichnen. Und du kannst es so verstecken und zeigen. Lassen Sie mich nur in diesen Bildschirm zoomen. Du kannst es einfach verstecken und so zeigen. Es ist einfacher, dies so zu bewältigen. Leute, hier dreht sich alles um dein Abstandssystem in deinem Designsystem. Ich habe viele Designer gesehen , dass sie dies nicht verwenden und sie nicht wissen, wie sie diesen ganzen Raum im Systemmaßstab nutzen sollen . So benennen Sie sie richtig. So erstellen Sie Komponenten aus ihnen und legen sie schnell in Ihre Entwürfe ein, während Sie Ihr Designsystem erstellen. Bis dahin werden wir viel lernen und dann vorsichtig sein. Tschüss. 35. Links und Dokumentation in Figma – Verknüpfungen von Seiten und Rahmen: Jetzt haben wir unser Designsystem fertiggestellt. Sprechen wir über einige der Tipps, die ich dir geben werde, die du in Figma verwenden kannst. Und einer von ihnen ist, dass Sie auf dem Bildschirm sehen können, auf dem Bildschirm können Sie sehen , dass ich einige benutzt habe. Hier drüben. Sie können sehen, dass dies ein Designprinzipdokument ist, und ich verwende hier ein kleines Symbol, das Emojis genannt wird. Also kannst du Emojis hier benutzen. Was musst du tun, ist einfach zu mehr Gs zu gehen , zu kopieren und einzufügen. Also hier haben wir es. Hol dir emoji.com. Versuchen wir also, einen von hier aus zu benutzen. Versuchen wir es zu benutzen, Versuchen wir irgendeinen von ihnen zu benutzen. Zum Beispiel wird dies so sein oder deshalb kann ich es nicht auswählen. Lass es mich sehen. Ja. Okay. Also wähle ich das aus. Das ist eigentlich nicht so, es ist manchmal schwierig, sie auszuwählen. Ich wähle das aus, wähle diesen aus, befehle C oder kontrolliere C. Und ich gehe zurück zu Figma. Sie können zum Beispiel diese Zweckanweisung sehen. Ich komme am Ende und ich kann es einfach so hier drüben einfügen. Du kannst sehen, dass es mir jetzt Emojis zeigt. Ebenso können Sie es tun, indem Sie es am Anfang hier einfügen können , wenn Sie sich so erinnern möchten. So wird es aussehen. Du kannst ein Emoji kopieren. Und zum Beispiel habe ich diesen. Ich mag diesen, also bin ich mir nicht sicher, warum ich es nicht in diesem Browser kopieren kann . Versuchen wir es mit einem anderen. Hier. Es ist einfacher für mich. Okay, also wieder passiert das Gleiche. Versuchen wir es zu verkleinern. Und hier haben wir es zum Beispiel so. Ich wähle diesen Befehl C und lass uns wieder darauf zurückgehen. Und ich werde Gestaltungsprinzipien wie diese verwenden. Und auch hier drüben werde ich das entfernen. Dies ist ein sehr einfacher Trick, um diese zu verwenden. Das ist also ein netter Trick, um Icons in Ihrem Design zu verwenden. In ähnlicher Weise können Sie zum Beispiel sehen, dass ich es hier benutzt habe. Was ich getan habe, ist, dass ich es tatsächlich kopiert habe, einfach von hier kopiert habe. Sie können jedes Bild verwenden , wenn Sie möchten. Und ich habe Leute gesehen, die versuchen Icons und andere Sachen zu benutzen. Zum Beispiel haben sie Leute gesehen, diese Häkchen verwenden, zum Beispiel Ticks. Und lass uns diesen Scheck benutzen. Und ich gehe zurück zu meinem Designsystem. Also hier haben wir es zum Beispiel, Sie können sehen, dass dies das Gleiche ist, was ich damit gemacht habe. Sie können sehen, außer dies zu verwenden, kann ich hier so per Drag & Drop rüberziehen. So sieht man also nicht sichtbar. Dies sind tatsächlich Links, und Sie können zu einer anderen Seite oder in Figma gehen und diese verlinken. Der Trick besteht zum Beispiel darin, dass ich zu diesen Seitendesign-Systemen gehen oder mit der rechten Maustaste auf Link auf Seite kopieren und eine beliebige Textur hier schreiben möchte. Gehen Sie zum Beispiel zu Design System. Klicken Sie auf diesen Link, fügen Sie Ihre URL ein, drücken Sie die Eingabetaste, und das ist alles, was Sie brauchen. Sie können die Farbe ändern, egal welche Farbe Sie möchten. Und du kannst auch ein Emoji benutzen. Vielleicht kann ich so etwas wie dieses Herz hier ausprobieren. Ich benutze das und füge ein, füge es einfach am Anfang ein. Ups, also entkomme. Hier haben wir einen sehr netten Link. Wenn Sie also zu dieser Seite wechseln möchten, klicken Sie einfach auf und gehen Sie zu dieser Seite. Es wird da rüber gehen. Ich habe viele Leute gesehen, die versucht haben , verschiedene Kategorien, verschiedene Gitter und alles zu haben und hier miteinander verbunden. Auf jeder Seite haben sie den Link zu diesem Dokumentations- oder Designsystem und allem. So können Sie von hier aus zu Design-Systemdesignprinzipien zurückkehren , Sie können diese Links auch zu anderen Seiten verwenden , wenn Sie möchten. Das ist also eigentlich eine Navigation. Sie können hier auch einen separaten Frame erstellen Navigation bei der Navigation aufrufen. Wie dieses Navigations-Designsystem, so etwas. Und Sie können zum Beispiel auch verlinken, wenn ich dies verknüpfen möchte, also denke ich, dass ich auch die URL dieser Datei kopieren kann. Von hier aus kann ich den Link „Kopieren“ kopieren. So können Sie hier in dieser Kopie sehen, Link-Button-Chips kopieren. Und wenn Sie hier hinzufügen möchten, zoomen wir in diese Navigation, damit ich sie replizieren kann. Und ich kann es in Buttons Chips nennen, Elemente bilden. Ich kann meine URL hier einfügen und sie wird wieder dorthin gehen. Wenn ich auf Gehe zu Frame klicke, geht es direkt zu diesem Frame. Es gibt also viele Möglichkeiten, diese Links in Ihrem Figma zu verwenden . Sie können unseren Rahmen verknüpfen, Sie können unsere ganze Seite verlinken und dieses gesamte Design-Navigationssystem erstellen. Im Moment klicke ich nicht auf Link this. Ich behalte das hier drüben. So. Versuchen Sie, die Größe zu minimieren. Versuchen wir beide auszuwählen. Bewegen Sie sie nach draußen, damit ich es hier drüben behalten werde. Gleich näher an meinem ersten Bildschirm. Und das ist alles. Dies sind ein paar Tipps, um Ihr Designsystem zu erhalten. Sie können auch hier sehen, dass ich Ihnen einen letzten Blick darauf werfen werde , wie wir es tatsächlich zusammengetan haben. Das ist die Farbe. Dies ist eine Hintergrundfarbe, die wir in unserer gesamten App verwenden. Was ich versuche zu tun, ist, dass ich versuche zu benutzen und zu übereinstimmen. Das ganze Team verwendet den gleichen Hintergrund für jedes Element hier drüben. So können Sie Symbole, Schaltflächen sehen, Alles benutzt die gleichen Farben. Lass mich hineinzoomen. Und ich werde dir zeigen, dass hier der Link zum Herunterladen der Barlow-Schrift ist. Hier sind unsere Farben. Dies sind die drei Farben, die von unseren Textfarben verwendet werden. Und auch ihr Zweck, dass diese Farbe für diese Farbe ist. Also versuchen wir tatsächlich zu verwenden, denke ich 12345678910 oder 12 Farben maximal in diesem gesamten Design. Ich hoffe, du hast viel gelernt und genieße diese ganze Reise mit mir. dieser gesamten Januar-Reise könnten Höhen und Tiefen kommen. Und ich würde gerne loslegen und andere sind generell früh genug fällig. Jetzt werden wir uns also gegenseitig abwehren und verabschieden uns. Weil dies die letzte Lektion sein wird . Ich möchte, dass Sie etwas Ähnliches wie dieses erstellen, ein einfaches Designsystem Ihrer App. Sie können helle Version und dunkle Version verwenden. Es liegt an dir. Das ist alles. Ich hoffe, Sie haben diesen Kurs genossen und bleiben Sie mit mir einig, schauen Sie sich meine anderen Kurse bis dahin an, passen Sie auf. Tschüss. 36. Color: Jetzt ist es an der Zeit für deinen ersten Auftrag. Jetzt sollte Ihre erste Aufgabe darin bestehen, ein Farbsystem für Ihr Designsystem zu erstellen . Zuvor müssen Sie mindestens vier oder fünf, mindestens vier Bildschirme Ihrer mobilen App oder Website oder irgendetwas, das Sie entwickeln, erstellen mindestens vier oder fünf, mindestens vier Bildschirme Ihrer mobilen App oder mindestens vier Bildschirme Website oder . Ein oder zwei Bildschirme, mindestens zwei Seiten Ihrer Website und mindestens vier Bildschirme Ihrer mobilen App. Also gib mir, zeig mir ein Farbschema. Erstellen Sie ein Farbsystem wie dieses und zeigen Sie mir Ihre Primär-, Sekundärfarben , Ihre Farben für Ihre Textfarben, die Farben, Ihre Grau- und Schwarztöne oder zusätzliche Farben oder Zustände oder Invokers, die du benutzen wirst. Und zeig mir alles definierte Ziel, gib ihnen einen Zweck und zeig mir, was du Quad hast. Also freue ich mich darauf zu zeigen, sehen Sie sich Ihren Bildschirm an. Sie können einen Screenshot erstellen. Sie können darauf klicken, zum Beispiel sind dies Farben. Sie können hier einen Klick erstellen, exportieren. Sie können dies exportieren, Farben auf Ihren Desktop exportieren und diese hochladen und mir dieses Farbsystem zeigen, Ihr gesamtes Farbsystem. Ich warte auf ein geschlossenes System. Ich treffe mich mit Ihnen und antworte Ihnen, wann immer ich kann, für Ihren Auftrag. Lasst uns anfangen. 37. Typography – Skalen und Stile: Jetzt ist es an der Zeit für deinen zweiten Auftrag. Das wäre Ihr Technologiesystem oder Ihre Typenwaage und Ihre verschiedenen Stile, die Sie für Ihr Designsystem erstellen werden . Ich freue mich also auf Ihre Aufgaben. Sie müssen ein Typografie-Skala und ein Typografie-Designsystem erstellen , genau wie ich. Ich zeig es dir. So musst du mich also präsentieren. Sie müssen mir zeigen, dass dies Ihr Typografiesystem oder Ihre Schriften ist , verschiedene Maßstäbe und ihnen den Zweck zuweisen, was dieser Stil so machen würde . Dies ist mein Titel, dies ist meine Abschnittsüberschrift oder Unterüberschrift unabhängig davon, welcher Kurstitel diesen Typskalen zugewiesen wurde . Und Sie müssen mir zeigen, dass Sie Ihr Dokument auch teilen können, zum Beispiel auf Hier kaufen klicken. Du kannst den Link kopieren und mir einfach den Link schicken , anstatt mir das Ganze zu zeigen. Du kannst mir den Link zeigen, den ich beende. Sie können diesen Link weiter aktualisieren. Ich sehe es mir mal an. Schicken Sie mir einfach eine Nachricht, die wir haben. Ich habe aktualisiert und ich habe mein Icon-System oder mein Rastersystem oder irgendetwas in mein Designsystem aufgenommen mein Icon-System oder mein Rastersystem oder . Und das werfe ich mir mal an. Stellen Sie sicher, dass Sie es erstellen und zeigen Sie mir den Link und teilen Sie mir den Link. Und Sie müssen auch einige Typ-Combo-Combos erstellen, wie Sie sehen können, dass ich hier erstellt habe userinfo, und das ist mein Abschnitt, Videowiedergabe . Es liegt also an dir. Sie müssen die Kombination zeigen, wie die Komponenten aussehen werden, wie die Abstände zwischen verschiedenen sein werden. Wir haben diese bereits in unseren komplexen Systemen hier drüben behandelt . Kurs-Komponenten. Sie müssen sich keine Sorgen machen, erstellen Sie einfach eine Typografie-Skala. Das ist alles, was Sie den Link dieser Datei finden können , die ich in den Ressourcen mit Ihnen teilen werde. Ich werde auch die Figma-Datei teilen, die eigentliche Figma-Datei für diese ganze Übung. Stellen Sie sicher, dass Sie es herunterladen und importieren. Und das kannst du tun, indem du hier rüberklickst. Ich bin zurück zu Home gegangen, klicke auf die Importdatei und du kannst diese Datei öffnen. Gehen wir zurück zu unserem Designsystem. Dies ist Ihre zweite Aufgabe, Typografie-Skala-System, und zeigen Sie es mir. Vorsicht, Tschüss. 38. Knöpfe und Atome: Jetzt ist Ihre dritte Aufgabe, dass Sie die Atome Ihres Designsystems erstellen müssen , das tatsächlich Ihre kleineren Komponenten wie Buttons ist, ein kleiner Chips in vier Chips, so etwas. Navigationen. Dies ist das Dokument, das ich von dir gekauft habe. Button-Chips, Fortschrittsbalken, Formularelemente. Erstellen Sie also ein Dokument wie dieses und zeigen Sie mir in verschiedenen Zuständen. Sie können verschiedene Varianten erstellen und dieses Dokument anzeigen oder den Link mit mir teilen. Sie können hier auf die Freigabe klicken und den Link teilen, Link kopieren und mir den Link dieses Dokuments zeigen. Stellen Sie sicher, dass Sie es richtig benennen. Du kannst deinen Namen auch hier schreiben. Zum Beispiel mein Name, Dash UX, Designer. Ich kann den größten hier kreieren und verwenden. Oder ich wähle diese Ebene und ich kann 48 verwenden, so etwas, und verwenden Schwarz. Auf diese Weise werde ich wissen, dass dies Ihre Akte ist oder das Ihnen gehört. Manchmal eröffne ich viele Designsysteme sind viele Aufgaben zu überprüfen und ich habe vergessen was, wer eigentlich oder wer der Student ist oder wer das entworfen hat. Stellen Sie sicher, dass Sie Ihren Namen hier drüben angeben. Okay, also hier haben wir das ist was ich brauche. Du kannst das erstellen und es mir zeigen. Ich freue mich auf Ihre Aufgaben. Lasst uns jetzt anfangen. 39. Ikonen -Erregungen und Rastersystem: Jetzt müssen Sie Ihre nächste Aufgabe darin, dass Sie Ihre Icons und Ihr Illustrationssystem erstellen und mir zeigen müssen. Das Icon-System wird auch Ihre Logos haben. Du kannst sehen, was er und ich zwei Logos haben. So können Sie Logo und Logo klein erstellen und sicherstellen, dass es sich um Komponenten handelt, damit Sie sie während des Entwurfs problemlos hinzufügen können. In ähnlicher Weise müssen Sie die Größe ändern. Sie müssen sie richtig dimensionieren, damit diese einfach in Ihr Designsystem eingefügt werden können. Das sind zwei Dinge, die ich von dir brauche. Wenn Sie es schaffen können, diesen Grid-System-Desktop, ein mobiles Tablet, zu schaffen können, diesen Grid-System-Desktop, erstellen, wäre das ein Plus. Also brauche ich drei von ihnen, Icons, Illustrationen und Rastersystem. Dies sind die drei, die Sie als Nächstes erstellen werden. Und in der nächsten Aufgabe sehen wir uns, ich warte auf Ihre Aufgaben. Fangen Sie einfach an. 40. Kursprojekt – Design mit Figma: Jetzt ist es an der Zeit, größere Komponenten zu erstellen. Sie müssen also hier einen Komponentenbereich erstellen, eine Kunsttafel und mir zeigen , was die größeren Komponenten Ihres Designsystems sind und wie Sie sie implementieren werden. Stellen Sie sicher, dass sie einfacher zu navigieren sind und alles abweichend sind und alles richtig haben, wenn sie Überzustände oder aktive Zustände versuchen, Abweichungen zu erzeugen. Das brauche ich von dir, deinen Kommissionierkomponenten. Das wird also das Letzte sein, glaube ich. In der Zwischenzeit, wenn Sie ein Abstandssystem erstellen können, dies die letzten beiden Dinge, die ich denke, dass das Abstandssystem übrig bleibt. Dies ist der Kern Ihres Designsystems Abstandssystems, Gitter, Typografie und Farben. Dies sind diese vier Dinge, Sie sagen können die Basis oder die Säulen Ihres Designsystems. Jede andere Sache wird sich auf sie stützen. Zum Beispiel werden die Schaltflächen die Farben und den Text sowie den Abstand von Ihrem vertikalen Abstandssystem importieren Text sowie den . In ähnlicher Weise werden Ihre Symbole ein Abstandssystem verwenden , wie wir 3224 Pixel haben , wie bei Ihren größeren Komponenten, sie werden alles verwenden. Das ist alles, was Ihre letzte Aufgabe sein wird. Sie können das gesamte Designsystem freigeben und auch versuchen, verschiedene Seiten zu erstellen. Ich kann also sehen, dass Sie die Idee haben , Ihr Designsystem zu trennen. Und Sie können auch einen Link erstellen. Zum Beispiel kannst du hier sehen, dass ich hier einen Link habe. So kann ich zum Designsystem zurückkehren , indem ich hier drüber klicke , zur Seite gehe und von hier aus auch rückwärts gehen. Das ist alles, was Ihre letzten Aufgaben sein wird. Zeigen Sie mir Ihr komplettes Designsystem und ich werde gerne befehligen und antworten und sehen, was Sie erreicht haben. Das ist alles, was ich denke, dass wir viele Dinge in dieser Klasse behandelt haben . Ich hoffe, du hast etwas Neues für mich genossen und gelernt. Stellen Sie sicher, dass Sie mir ein paar Befehle schicken und antworten Sie zurück. Es wäre mir eine Freude, Ihre Kommentare zu diesem Kurs zu sehen. Wir treffen uns bis dahin in einer anderen Klasse, passen Sie auf. 41. Weitere Kurse: Vielen Dank, dass Sie während dieser ganzen Klasse von Designsystemen mit Figma bei mir geblieben dieser ganzen Klasse von Designsystemen mit Figma Wir haben viel über Designsysteme gelernt. Ich hoffe, dass Sie sich meine anderen Klassen ansehen werden, in denen es um Farbschema, Typografie, Layoutdesign und viele andere Dinge geht, die Sie zu einer professionellen Benutzeroberfläche und einem professionellen Benutzer machen werden erfahre Designer, del, dann treffe ich dich in meinen anderen Klassen. Vorsicht, Tschüss.