Verbessere deine UI/UX-Fähigkeiten mit Sketch-Symbolen und dynamischen Styleguides

1. Trailer: Ich bin [unhörbar] und bin ein Produktdesigner hier bei SkillShare. Heute bekämpfen einige der größten Herausforderungen, denen UI/UX-Designer gegenüberstehen, Inkonsistenzen in ihrer App oder Website und versuchen, ihren Design- und Entwicklungsworkflow zu rationalisieren , um Produkte viel schneller zu erstellen. Wenn es einen Mangel an wiederverwendbaren Design-Assets gibt, neigen Designer dazu, jede Komponente von Grund auf neu zu erstellen, was wirklich schwer zu skalieren ist. Es erzeugt auch viele Inkonsistenzen auf der gesamten Website. Dies kann zu einer Menge Benutzerverwirrung führen. Wenn es zu viele Muster oder visuelle Elemente gibt, sind Benutzer nicht sicher, was sie erwarten, wenn sie interagieren und verschiedene Benutzerflüsse auf einer Website durchlaufen. In letzter Zeit haben viele Design-Teams viel größere, komplexere und skalierbare Designsysteme eingeführt , die helfen werden, diese Probleme zu bekämpfen. Diese können einfache Farben, Typografie und unterschiedliche Musterdokumentation enthalten , aber sie können auch viel komplexere Komponenten enthalten , die spezifisch für diese genaue App sind. Zum Beispiel haben wir auf SkillShare sehr wiederholende Komponenten, um Klassenkarten anzuzeigen. Diese entworfenen Systeme sind anpassungsfähig und wiederverwendbar. Es macht Ihren Designprozess viel effizienter und erhöht die Konsistenz in einer großen App oder sogar einer Reihe von Produkten. Nun, diese sind sehr Mainstream in Unternehmen geworden, ich denke, es gibt eine große Verwendung für diese, ob Sie ein Freiberufler sind, ein Designer, der selbst an einem Projekt arbeitet, oder sogar ein kleines Team von Designern. Diese Systeme lassen sich einfach zusammenstellen und können den Workflow eines jeden Designers wirklich optimieren. In dieser Klasse werde ich Ihnen zeigen, wie Sie wirklich schnell einen personalisierten benutzerdefinierten Styleguide erstellen können , der in einer App verwendet werden kann. Dies könnte eine App sein, an der Sie persönlich arbeiten, oder eine App, die Sie sich entschieden haben, genauer zu betrachten, Sie werden eine Insiderperspektive in den Workflow eines UI/UX-Designers bekommen. Nun, das könnte ein leicht Nischenklingendes Thema sein. Dies ist definitiv etwas, das jeder in seinem Design-Workflow verwenden kann, egal ob Sie gerade erst in der Branche anfangen oder wirklich einige Ihrer Skizzenkenntnisse polieren möchten. Alles, was Sie für diese Klasse benötigen, können Sie kostenlos online oder für eine kostenlose Testversion herunterladen. Machen Sie sich also keine Sorgen, wenn Sie mit einem dieser Tools neu sind. Wir beginnen diese Klasse, indem wir die vorhandenen Entwurfsmuster in Ihrer App identifizieren und dokumentieren. Wir verwenden dann eine benutzerdefinierte Vorlage, die ich für jeden bereitgestellt habe, der diese Klasse nimmt , um den Style Guide-Prozess wirklich zu starten. Als Nächstes erstellen wir eigene Komponenten in der Skizze. Diese sind einzigartig für die App, an der Sie sich entschieden haben, zu arbeiten. Schließlich werden wir ein wenig mehr darüber erzählen, wie Sie diese Systeme überTeams oder sogar über verschiedene Computer hinwegnutzen Teams oder sogar über verschiedene Computer hinweg können, wenn Sie ein Freiberufler oder ein unabhängiger Designer sind. Mein Ziel für jeden, der diesen Kurs besucht, ist es, ein Designsystem in Ihren UI/UX-Workflow zu integrieren . zusammen mit dieser Klasse folgen, werden Sie sehen, wie einfach es sein kann, dieses Designsystem einzurichten, und Sie werden am Ende mit einem ziemlich umfassenden Style-Leitfaden, den Sie sofort nach diesem Kurs arbeiten können. Ich bin so aufgeregt, jedem von Ihnen dabei zu helfen, die Macht der Skizze zu nutzen, einen benutzerdefinierten Styleguide zu erstellen, der Ihnen hilft, Ihren Workflow zu beschleunigen und Inkonsistenzen in Ihrer App oder Website zu beseitigen. Ich hoffe, du wirst dich mir anschließen. 2. Was ist ein Designsystem?: Ich wollte nur eine Minute dauern, um einige der Unterschiede zwischen Styleguides, entworfenen Systemen und vielen anderen Schlagwörtern zu beschreiben , die derzeit in der Branche verwendet werden. In der Vergangenheit wurden Stil-Guides mehr als Artefakt produziert. Nachdem alle UI-Stile fertig gestellt wurden, war ein Designer dafür verantwortlich, alle visuellen Elemente, die in den ursprünglichen Designs enthalten waren, durchzugehen und wirklich zu dokumentieren . Denn dies war ein Artefakt des Entwurfsprozesses und nicht wirklich Teil des Prozesses selbst. Diese Style-Guides wurden schnell veraltet und wirklich nicht viel über ihre anfängliche Schöpfung verwiesen. Heute gab es eine Verschiebung bei Menschen, die diese Designsysteme als integrierteren Teil ihres Entwurfsarbeitsablaufs nutzen. Anstatt nur das ursprüngliche Design zu dokumentieren, werden diese zur einzigen Quelle der Wahrheit dessen, was Designer in ihren Entwürfen, die sie erstellen, ziehen können. Wenn ein Designer also ein neues Modell erstellt, anstatt jedes Ding eigenständig zu entwerfen, er über dieses Designsystem, das in seinen Skizzenworkflow integriert ist. Dass sie in der Lage sein werden, vorgefertigte Elemente zu ziehen, die flexibel und reaktionsschnell sind, die auf jeden Bedarf passen, den sie für diese Design-Situation haben könnten. Durch die Arbeit von diesem einheitlichen System werden Designänderungen in der gesamten App oder auf der gesamten Website widergespiegelt. Dies macht den Prozess viel flüssiger für Designer und Entwickler, da Entwickler auch in der Lage sind, auf die gleichen Elemente zu verweisen und wissen , dass es Konsistenz über alle Instanzen in der App oder Website gibt. Airbnb, Shopify, IBM und viele andere große Unternehmen haben alle wirklich gut dokumentierte und interessante Designsysteme, die großartig zu durchschauen sind, um nur das Potenzial mit diesen Arten von Systemen zu sehen und könnte in der Lage sein, in einem größeren Unternehmen zu tun. Ich werde Links zu diesen unten in der Klasse hinzufügen beschreibt diese Arten von Systemen können großartig für Ihr gesamtes Team sein, sowohl Designer als auch Entwickler, und wirklich alle anderen, die Ihr Produkt in der Zukunft berühren könnten. Da diese Stile vordefiniert sind und wiederholt, Es gibt viel mehr Konsistenz für alle im Team. Sie müssen nicht mehr jede einzelne Instanz kommentieren, jedes Mock-up oder andere UI-Muster werden in Ihren Entwürfen angewendet. Entwickler sind bereits an diese Komponenten und Muster gewöhnt und wissen, wie Sie Ihre Entwürfe implementieren können, direkt wenn Sie sie sehen. Es ist auch viel weniger effizient. Sie sind in der Lage, viel schneller zu entwerfen, wenn Sie in der Lage sind, alle Ihre Optionen verschiedener Elemente zu sehen , die in Ihre Entwürfe passen könnten. Bessere Konsistenz ist definitiv eine gute Möglichkeit, bessere UX auf Ihrer Website zu haben. Entworfene Systeme reichen von einer einfachen Dokumentation von Farben und Typografie über Systeme, die redaktionelle Inhalte und Implementierungsrichtlinien dokumentieren, hin zu vollständig integrierten Designsystemen, die auf die Front-End-Bibliotheken abgestimmt sind von Entwicklern , die sie verwenden, um riesige Anwendungen zu erstellen und zu warten. Für diese Klasse werden wir uns jedoch mehr auf das Designsystem für Designer konzentrieren. Also etwas, das alle Stile und Komponenten in der Anwendung vollständig dokumentiert. Aber das wird ein Werkzeug sein, das nur von den Designern oder Design-Teams verwendet wird. Nun, da wir verstehen, was Designsysteme sind und wie sie sich von Styleguides der Vergangenheit unterscheiden. Ich denke, wir sind bereit, unser Projekt anzufangen. Wir sehen uns in der nächsten Lektion. 3. Erstellen einer Schnittstellen-Bestandsaufnahme: Erstellen eines Designsystems ist eine großartige Möglichkeit, Ihren Workflow zu beschleunigen und weniger Inkonsistenzen in Ihrer App zu schaffen. Der erste Schritt zur Erstellung eines Entwurfssystems besteht darin, einen Konstruktionsbestand zu erstellen. Was das bedeutet, ist, dass wirden bestehenden Zustand Ihrer App oder Website durchlaufen den bestehenden Zustand Ihrer App oder Website durchlaufen und ein viel breiteres Bild davon machen, wie die Dinge jetzt funktionieren. Wir gehen und erfassen Screenshots aller verschiedenen Elemente und Komponenten auf Ihrer Website. Wenn ich Elemente sage, beziehe ich mich auf die kleinsten Teile der Gestaltung Ihrer Website. Diese können Farbe und Topographie umfassen. Komponenten beziehen sich auf viel unabhängigere und wiederholbare Elemente auf der Website. Dies könnte die Klassenkarte auf Skillshare oder das Home-Listing auf Airbnb sein. Etwas, das dynamisch ist und der Inhalt ändert sich, aber als Ganzes wird das Design auf der gesamten Website wiederholt. Das Interface-Inventar ist wirklich ein phänomenales Werkzeug , um die Design-Probleme zu zeigen, die in der aktuellen App vorhanden sind. Dies ist eine großartige Möglichkeit, Stakeholder-Buy-In zu bekommen, sowie nur für Designer, um das volle Ausmaß der Probleme zu verstehen, mit denen sie zu tun haben. heißt, dies kann definitiv die zeitaufwendigsten Schritte sein, also lassen Sie sich nicht im Stich, wenn Sie viel Zeit damit verbringen, durch Ihre bestehende App zu suchen und viele Inkonsistenzen zu finden, die Sie dokumentieren müssen. Zuerst müssen wir eine App oder Website auswählen , mit der wir für dieses Projekt arbeiten werden. Diese Entscheidung wird für den Rest Ihrer Projekte durchhalten. Wählen Sie auf jeden Fall etwas aus, das Ihnen nichts ausmacht, ein paar Stunden mit der Arbeit zu verbringen. Ich werde zusammen mit dem Design dieser Skillshare iOS App arbeiten. Ich ermutige jeden, der ein wenig neuer zu Scratch oder neuer zu Symbolen und Skizze ist, mit mir zu folgen, wie es könnte es ein wenig einfacher machen. Einige andere großartige Optionen wären bekannte Apps wie Medium, Airbnb, Apple Music, etwas, das Sie wirklich bewundern das Design und die Konsistenz von. Sie sind auch auf jeden Fall willkommen, ein persönliches Projekt zu verwenden , aber ich würde Sie warnen, dass es etwas sein sollte, das ziemlich weit entlang ist und bereits einen etablierten Styleguide hat, damit Sie keine neuen Designelemente erstellen, während Sie arbeiten durch das Projekt. Sobald Sie Ihre App ausgewählt haben, können Sie die Vorlage für die Bestandsaufnahme der Bauelementschlüssel-Bauelementvorlage herunterladen, die ich im Abschnitt „Klassenressourcen“ unten enthalten habe . Dies wird nur weitergehen und Ihnen ein Framework geben, in dem Sie beginnen können, verschiedene Screenshots aller Elemente in bestimmten Kategorien zu löschen . Dies gibt Ihnen einen Überblick über einen Ort zum Hinzufügen von Schaltflächen, ein Ort, um verschiedene Formulardesigns hinzuzufügen, wirklich nur helfen Sie organisieren und strukturieren Sie Ihre Schnittstelle Inventar. Sie möchten alle verschiedenen Designs und Dinge identifizieren , die häufig auf der Website auftreten. Sie müssen nicht unbedingt jede Instanz einer Schaltfläche Screenshot durchführen, aber Sie möchten speziell nach einer Schaltfläche suchen, die eine verbundene Ecke im Vergleich zu einer quadratischen Ecke oder vielleicht Symbolen und Schaltflächen im Vergleich zu Nicht-Symbolen haben könnte . Sie können alle vorhandenen Stile identifizieren, mit denen Sie arbeiten müssen. Sobald alle diese Elemente dokumentiert sind und bereit sind, entweder korrigiert, veraltet oder in Ihr Design aufgenommen zu werden, sind wir bereit, den nächsten Schritt zu machen. Wir müssen entscheiden, welcher visuelle Stil für Ihre spezielle App am sinnvollsten ist. Etwas, das in einer App gut funktioniert, ist möglicherweise nicht am besten für Ihr Projekt geeignet. Denken Sie an Ihre Benutzer, wenn Sie diesen Schritt ausführen, und denken Sie darüber nach , wie die Erfahrung Ihrer Website sein sollte. Als Nächstes müssen Sie entscheiden, welche Stile Sie in Zukunft übernehmen möchten. Sie möchten auf jeden Fall alle Redundanzen beseitigen. Es sollte zum Beispiel nur eine primäre Taste geben. Sobald wir Entscheidungen getroffen haben, welche Stile mit uns in die nächsten Phasen dieses Projekts gehen werden , sind wir bereit, mit dem Aufbau unseres Styleguides zu beginnen. 4. Einführung in Sketch-Symbole: Für diejenigen unter euch, die ganz neu im Skizzieren sind, werde ich einen kurzen Überblick über die Benutzeroberfläche geben , damit ihr mit dem Rest der Lektion folgen könnt. Wenn Sie daran interessiert sind, in ein wenig weiter zu tauchen, werde ich einige Links unten zu den Skizzen-Assets auf ihrer Website zur Verfügung stellen. Sie haben einige tolle Einführungsvideos, die wirklich helfen , Ihr Wissen zu starten und Sie schnell bewegen. Wenn Sie mehr Erfahrung mit Skizze haben, könnte dies eine kleine Rezension für Sie sein. Sie sind herzlich eingeladen, voran zu springen oder bei uns zu bleiben und nur eine kleine Auffrischung auf der Schnittstelle und wie Sie einige dieser verschiedenen Tools verwenden. Wenn Sie also zum ersten Mal Sketch herunterladen, ist es wirklich einfach. Gerne können Sie eine kostenlose Testversion herunterladen. Es gibt auch eine sehr erschwingliche Lizenzoption. Sie machen es wirklich einfach, loszulegen, wenn Sie Skizze zum ersten Mal öffnen, Sie werden eine Schnittstelle ähnlich dieser sehen. Offensichtlich ist all dieser Inhalt für mich persönlich. Jahre werden nur eine leere Leinwand sein, aber im Moment werden wir uns nur auf die verschiedenen Elemente der Skizzenoberfläche konzentrieren . Auf der rechten Seite, Sie werden den Inspektor finden. Inspector ermöglicht es Ihnen, die Einstellungen für die aktuell ausgewählte Ebene oder die Optionen für das aktuelle Werkzeug, das Sie verwenden, anzupassen. Wenn Sie einen Layer ausgewählt haben, wird der Inspektor in mehrere Abschnitte unterteilt. Dazu gehören Ausrichtungseigenschaften, Dimensionierung, Styling sowie einige Exportoptionen für diese einzelnen Layer oder Elemente. Auf der linken Seite finden Sie das Ebenenbedienfeld. Dies ist eine Layer-Liste, die alle Ebenen auf der aktuellen Seite enthält Sie können beliebige Layer-Attribute anzeigen, z. B. ob sie ausgeblendet oder gesperrt ist, sowie das Dokument durch Reorganisation und Umbenennen von Layern organisieren. Schließlich, oben, werden Sie die Symbolleiste zu finden. Sketch macht einen großartigen Job, um wirklich zu veranschaulichen, was jedes Werkzeug tut und es einfach zu verfolgen. Vor allem, wenn Sie Illustrator oder Photoshop in der Vergangenheit verwendet haben, werden Sie wirklich schon ziemlich vertraut mit vielen der Werkzeuge, die Skizze bietet. der rechten Maustaste oben auf der Seite klicken, gibt es eine Option zum Anpassen der Symbolleiste, die eine Eingabeaufforderung öffnet, mit der Sie verschiedene Werkzeuge ziehen und ablegen können, die Sie in Ihre Symbolleiste einfügen möchten. Vorerst sind die Standardeinstellungen gut, aber es ist großartig, wenn Sie Sketch öfter verwenden um dies anzupassen und Ihnen noch mehr Zeit zu sparen. Wir werden nun untersuchen, wie Symbole erstellt, eingefügt und im gesamten Dokument verwendet werden. Wir beginnen mit einem wirklich einfachen Beispiel, nur einige grundlegende Formen zu erkunden. Aber das wird wirklich helfen, die Macht von Symbolen und verschachtelten Symbolen zu veranschaulichen und wie diese in einem echten Projekt verwendet werden können. Ich beginne mit diesem einfachen Dokument mit nur ein paar Formen. Sie können dies herunterladen und mit mir und den Klassenressourcen folgen. Sie können sehen, dass es mehrere Seiten erstellt, was getan werden kann, indem Sie die Plus-Taste hier drücken, wodurch eine völlig leere Seite erstellt wird, die Sie bearbeiten können wenn Sie bereit sind, einen neuen Abschnitt zu starten. Moment beginnen wir in dieser ersten Seite namens Intro zu Symbolen. Sie können sehen, dass es mehrere ziemlich grundlegende geometrische Formen erstellt. Durch Einfügen, Form, Rechteck, Oval, Stern, was auch immer Sie gerade in der Stimmung sind zu erstellen. Also werden wir beginnen, indem wir dieses grüne Rechteck zu einem Symbol machen , das wir während unseres gesamten Projekts verwenden können. Das erste, was wir tun werden, ist wählen Sie dieses Rechteck, und klicken Sie dann auf die Schaltfläche Symbol erstellen. Es ermöglicht Ihnen, einzugeben, was Sie für einen Namen wollen. Für den Moment werde ich nur dieses Rechteck halten. Auf den ersten Blick sieht es nicht so aus, als wäre wirklich viel passiert. Aber wenn Sie auf dieses Rechteck doppelklicken, können Sie sehen, dass es mich auf eine Seite namens Symbole gebracht hat. Dieses Rechteck befindet sich nun auf der Symbolseite. Wenn wir eine weitere Instanz dieses Rechtecks hinzufügen möchten , steht uns nun in der Symbolbibliothek zur Verfügung. Ich habe ein paar andere Symbole, die hier für kommende Lektionen sind, aber Sie können sehen, dass unser Rechteck Symbol auch zu diesem Abschnitt hinzugefügt wurde. Wenn ich die Rechteck-Option wähle, habe ich jetzt eine andere Instanz des Rechtecks, die meinem Projekt hinzugefügt werden soll. Das wird wirklich interessant, wenn Sie Änderungen an diesen auf der Straße vornehmen möchten . Also sagen, ich habe an einem Projekt gearbeitet und ich wollte dieses Rechteck in lila ändern. In der Vergangenheit könnte dies ziemlich umständlich sein, durch eine ganze App oder alle meine Modelle zu graben und wirklich jedes Beispiel dieses Rechtecks zu finden und sicherzustellen, dass wir jedes zu einer neuen Farbe aktualisieren. Aber mit diesem neuen Prozess der Skizzensymbole kann ich einfach wieder in das ursprüngliche Symbol gehen und die Farbe auf Gelb aktualisieren Wenn ich dann auf meine ursprüngliche Seite zurückkehrte, können Sie sehen, dass beide Instanzen gelb geworden sind. Das nächste, was ich überprüfen möchte ist, wie Sie Ihre Symbole organisieren und sicherstellen, dass sie leicht zu finden sind, auch wenn Sie alleine arbeiten. Aber noch wichtiger ist, wenn Sie mit einem Team von Designern arbeiten, ist es wirklich wichtig, viele verschiedene Symbole schnell zu finden. Nehmen wir an, ich habe ein anderes Symbol, das ich erstellen möchte, das ist ein anderes Rechteck, aber es ist eine Gliederungsversion anstelle der gefüllten Inversion hier. Wenn ich also zum Erstellen eines Symbols gehe, möchte ich sagen, dass diese beiden Symbole in einem Ordner gruppiert werden. Vielleicht möchte ich, dass der Ordner Rechteck genannt wird. Ich beginne mit Rechteck und füge dann einen umgekehrten Schrägstrich und einen anderen Namen hinzu , der dieses Symbol in einen Ordner namens Rechteck hinzufügt. Lassen Sie uns dieses nennen, umreißen Rechteck. Wenn wir auf diesen doppelklicken, wird es uns auch hierher bringen. Da ich dieses ursprüngliche Rechteck bereits benannt habe, muss ich hier in mein Ebenenbedienfeld gehen, um es zu bearbeiten. Aber alles, was ich tun muss, ist das Wort gefüllt hinzuzufügen. Es wäre Rechteck, umgekehrter Schrägstrich, Füllrechteck. Wenn ich nun zu meinem Dropdown-Menü gehe, können Sie sehen, dass ich einen Ordner namens Rechteck und zwei Instanzen darin habe , die diese verschiedenen Rechtecke darstellen. Wir werden das Gleiche mit diesen beiden Ovalen machen. Ovaler Blitz, füllen Oval und ovaler Schrägstrich Umriss. Jetzt werde ich Ihnen den lustigen Teil zeigen und dort werden die verschachtelten Symbole wirklich wichtig. Was wir tun werden, ist ein weiteres Rechteck zu erstellen, ein größeres, und die Ränder in diesem Inspektorfenster hier drüben zurückgeben. Wir werden ein Symbol daraus erstellen. Ich werde diese eine Karte nennen. Nehmen wir an, das ist ein Kartendesign, das ich auf einer App habe, an der ich arbeite. Innerhalb dieser Karte gibt es einige verschiedene Elemente, die sich von Instanz zu Instanz ändern, aber das Design insgesamt ist jedes Mal gleich. Wenn wir darauf doppelklicken, kann ich dann hineingehen und meine Karte so gestalten, dass sie viel dynamischer ist. Ich kann ein Symbol in ein anderes Symbol einfügen, das mir erlaubt, Überschreibungen zu haben. Lassen Sie mich Ihnen zeigen, wie das funktioniert. Es ist also ein wenig einfacher zu verstehen. Wenn ich gehe und ich kann ein Symbol innerhalb dieser Karte Symbole einfügen. Vielleicht möchte ich, dass ein Füllrechteck in dieser Ecke hier unten geht. Ich möchte, dass hier in dieser Ecke ein Kontur-Oval rauf geht. Wenn ich zu meiner Instanz dieser Karte zurückgehe, können Sie jetzt sehen, dass es diese beiden Überschreibungsoptionen gibt, die vorher nicht da waren. Das liegt daran, dass es diese beiden Symbole in diesem Symbol selbst gibt. Aus diesem Drop-down-Menü kann ich nun aus all meinen verschiedenen Formen auswählen. Sie können sehen, wie das wirklich mächtig wäre, wenn Sie Elemente in der Skizze erstellen. Wenn Sie eine Hausliste erstellen, z. B. auf Airbnb, möchten Sie möglicherweise, dass das Bild von Karte zu Karte wechselt, sogar der Name oder der Avatar des Benutzers, der der Gastgeber war. Indem Sie dieses Symbol der Karte erstellen, können Sie andere Symbole innerhalb der Karte platzieren, die dynamisch in jeder Instanz auf Ihrer Website aktualisiert werden können . Ein paar Dinge, die wir hier notieren müssen, bevor wir weitermachen. Diese Symbole sind alle als Überschreibungsoptionen verfügbar da jedes dieser vier Symbole die gleiche Größe Kunstboard hat. Wenn dies unser Brett auf diese nur etwas kleiner geschrumpft wurde. Sie würden sehen, dass jetzt nicht alle diese Optionen als Überschreibungen verfügbar sind. Das ist also definitiv etwas zu beachten. Wenn Sie viele Überschreibungen in Ihre Entwürfe aufnehmen, möchten Sie sicherstellen, dass jedes unserer Platinen wirklich speziell für Elemente ausgelegt ist , die in diesem Überschreibungsfenster angezeigt werden sollen. Eine weitere tolle Sache zu beachten ist, wie diese Namen im Überschreibungsfenster angezeigt werden. Wenn Sie Vorfälle haben, bei denen Sie 30 verschiedene Überschreibungsoptionen haben, möchten Sie sicherstellen, dass sie auf eine wirklich strategische Weise benannt und angeordnet sind. Es ist ganz einfach, Ihre Komponenten zu bearbeiten. Wenn wir in diesem Auto-Design schauen wollen, möchte ich vielleicht diese Schicht hier nennen, Objekt 1 und dieses, Objekt 2. Wenn ich nun zu meiner ursprünglichen Instanz zurückgehe, können Sie schnell eine Bearbeitung sehen, die ich bearbeiten werde. Eine letzte Sache, die zu beachten ist, ist , darüber nachzudenken , welche Elemente in einer Komponente nicht von Instanz zu Instanz geändert werden. Möglicherweise haben Sie eine Karte, auf der ein Symbol vorhanden ist. Sagen wir, es ist unser Umriss Oval. Es ist immer in dieser oberen linken Ecke auf jeder Instanz vorhanden, nur so dass Sie nicht ein sehr aufgeblähtes und schwer zu befolgen Überschreibungen Panel bekommen. Sie werden gehen und diese Ebene sperren wollen. Durch Klicken mit der rechten Maustaste darauf und drücken Sperrschicht. Wenn Sie nun zu Ihrem ursprünglichen Symbol zurückkehren, können Sie sehen, dass dieses Objekt nicht im Überschreibungsfenster angezeigt wird. Dies ist definitiv ein großartiges Werkzeug, wenn Sie viel komplexere Komponenten bauen , um die Vorteile zu nutzen und sich daran zu erinnern. Jetzt, da wir die Grundlagen der Skizze verstehen und ein wenig tiefer wissen, wie man Symbole erstellt, bearbeitet und manipuliert sowie die Macht verschachtelter Symbole und Symbolüberschreibungen nutzt, sind wir bereit, , um einige weitere benutzerdefinierte Elemente zu erstellen, die für die App spezifisch sind, die Sie für Ihr Projekt ausgewählt haben. 5. Anpassen deiner Vorlage: Das Wichtigste einem Designsystem ist wirklich alles, was Sie brauchen, in einer Datei zu haben . Sie können sich also auf wichtigere Dinge konzentrieren als alle UI-Elemente zu sammeln, um mit dem Erstellen von Mock-ups zu beginnen. Heute habe ich eine Vorlage für Sie hinzugefügt, um loszulegen und wirklich in die Erstellung eines Styleguide sehr schnell zu springen. Die Vorlage finden Sie in den unten aufgeführten Klassenressourcen, und es wird eine Menge der Assets enthalten, die Sie benötigen, um mit dem Erstellen Ihrer App oder Website zu beginnen. Dies ist etwas, das immer wieder verwendet werden kann, wenn Projekte gestartet werden. Es ist besonders gut für Freiberufler oder Menschen, die oft an verschiedenen Systemen arbeiten und schnell Styleguides für ihre Projekte erstellen möchten. Dies kann ein großer Mehrwert für Kunden sein und kann wirklich nützlich sein, um Ihren Designprozess zu beschleunigen. Wenn Sie diese Vorlage aus den Klassenressourcen herunterladen, möchten Sie sie öffnen. Hier werden Sie sehen, dass es drei Seiten gibt, die ich erstellt habe. Die erste ist eine Symbolseite. Sei nicht zu überwältigt, wenn du das zum ersten Mal anschaust. Dies sind alle Symbole, die ich bereits für Sie erstellt habe, die dynamisch aktualisiert werden , wenn wir den Styleguide für Ihre App anpassen, an der Sie gerade arbeiten. Ich werde auf ein wenig mehr Details über alle diese Komponenten einzeln springen, aber zuerst werden wir beginnen, indem wir uns hier auf diesen Abschnitt konzentrieren, der die erste Einrichtung besagt. Hier habe ich ein System eingerichtet, das sehr einfach zu aktualisieren ist und Ihren gesamten Designprozess starten kann. Im ersten Schritt werden wir fortfahren und die Farben in unserer App aktualisieren. Sie können hier sehen, dass diese Farben Symbole sind, können Sie an der violetten Schrift erkennen, die oben ist. Wenn Sie eines auswählen, sehen Sie außerdem , dass neben dem Layernamen dieses Symbol angezeigt wird, das anzeigt, dass es sich um ein Symbol handelt. Diese Inhalte unten werden das sein, was tatsächlich in diesem Symbol selbst ist. Es könnte nur ein Element geben, aber wie wir vorher angesprochen haben, werden verschachtelte Symbole mehrere Symbole innerhalb dieses Symbols enthalten. Unter diesem Symbolnamen werden mehrere Elemente angezeigt , die alle Symbole enthalten, die darin verschachtelt sind. Für dieses Beispiel gehen wir voran und wählen Sie dieses Feld hier. Im Inspektor sehen Sie, dass eine Füllfarbe angewendet wird, die der Farbe dieses Feldes entspricht. Diese Farbe ist eigentlich die Skillshare Farbe. Aber ich werde weitermachen und einige Änderungen vornehmen, nur damit Sie sehen, wie sich dies auf das Gesamtdesign aller Komponenten in dieser Vorlage auswirken kann . Nehmen wir an, dass die Farbe der App, die ich baute, war, wie wäre es mit dieser roten Farbe hier? Sofort können Sie sehen, dass alle diese Schaltflächen und verschiedene Elemente hier aktualisiert wurden, um diese Änderung zu widerspiegeln, die ich vorgenommen habe. Dies kann sehr praktisch sein, wenn Sie jemals Änderungen in Ihrer gesamten App vornehmen müssen, oder wenn Sie etwas wirklich schnell anpassen möchten, basierend auf Feedback von einem anderen Teammitglied oder einem Kunden. Gehen Sie voran und aktualisieren Sie alle diese Elemente hier und wie Sie jedes tun, werden Sie gehen und diese Farbe synchronisieren wollen. Was das tut, ist die Farbe in Ihrem Gaumen über die gesamte Vorlage zu synchronisieren , so dass es für Ihre Referenz in der Zukunft. Ich gehe voran und ändere dies zurück, da wir Skillshare Style Guide folgen wollen und ich werde voran gehen und diese aktualisieren. Sie können sehen, dass alles in unsere blaue Farbe zurückgegangen ist. Gehen Sie weiter und kümmern Sie sich um diese. Sie müssen nicht jeden einzelnen verwenden. Ich habe enthalten, was ich dachte, wäre eine ziemlich typische Anzahl von Farben, aber Sie müssen nicht alle diese Optionen nutzen. Das nächste, was wir tun werden, ist, unsere Schrift anzupassen. Sie können auf der linken Seite dieses Bildschirms sehen, dass ich alle Schriftarten enthalten habe , die in dieser Vorlage enthalten sind. Sie können immer mehr hinzufügen oder weniger verwenden, aber ich dachte, dies war ein guter Ausgangspunkt für uns, um ein Gefühl zu bekommen, wie Typstile funktionieren und wie wir diese in unserem gesamten Design anwenden können. Wenn Sie mehr hinzufügen möchten, können Sie das in Zukunft tun. Moment werden wir beginnen, indem wir nur alle diese Art Stile auswählen. Sie können hier sehen, dass es einen Platz für Schrift gibt. Hier können Sie auswählen, welche Schriftart Sie alle Schriftarten auf Ihrer Website verwenden möchten. Für mich weiß ich, dass Skillshare Proxima Nova benutzt. Ich gehe voran und wähle Proxima Nova und drücke die Sync-Taste. Jetzt können Sie sehen, dass jeder Text hier aktualisiert wurde, um in Proxima Nova Schriftart zu sein, und das wird in jeder Anwendung von Steuern in meiner App konsistent sein . Das nächste, was wir tun können, ist wählen Sie bestimmte Schriftfarben. Nehmen wir an, ich möchte, dass mein Primärtext grün ist. Wir können weitermachen und diese Stile synchronisieren. Sie können sehen, dass dies ein wenig härter ist, weil es nicht jede Anwendung von Textil in diesen Komponenten, aber überall, wo dieser Text angewendet wurde, werden Sie jetzt in der Lage sein, diese Änderungen in der App zu sehen. Ich werde das rückgängig machen, da ich möchte, dass mein Text blau ist, aber Sie können jeden dieser Stile aktualisieren, um Ihren Bedürfnissen gerecht zu werden. Ich würde insgesamt sagen, es ist definitiv Best Practice, mindestens eine oder zwei Versionen einer grauen oder schwarzen Schrift zu haben , die Sie in der gesamten App verwenden können, sowie etwas, das in jeder Größe weiß ist, so dass Sie diese auf dunkleren anwenden können -Schaltflächen oder eine dunklere Benutzeroberfläche. Jetzt, da wir unseren Typ angepasst und diese Stile in der App synchronisiert haben, können wir auch Grenzen anpassen. Dies ist definitiv ein optionaler Schritt, weil ich bereits angegliederte Option, eine abgerundete Option, sowie eine quadratische Option der Grenze enthalten habe. Aber wenn es etwas Brauch gibt, das Sie einschließen möchten, gehen Sie weiter. Wählen Sie alle diese Rahmen aus, und nehmen Sie die gewünschten Änderungen am Radius, an der Dicke des Rahmens oder an anderen Stellen vor, die für Ihre spezifische App geeignet sind. Sie wissen nicht wirklich, oder Sie sind nicht sicher, was Sie tun wollen, sich keine Sorgen über diesen Schritt für jetzt. Dies wird ein wenig mehr in der nitty gritty und könnte nützlich sein, wenn Sie an einem anderen Projekt in der Zukunft arbeiten. Letzter Schritt ist das Hinzufügen Ihres Logos. In diesem Beispiel verwende ich Google einfach schnell. Sie können in Ihrem Logo hinzufügen für Ihre App verwenden. Sie möchten auf jeden Fall sicherstellen, dass die Außenkanten Ihres Logos bis zu den Seiten dieses Artboards oder Symbolbehälters gehen. Wir haben einen Platz für Sie, um Ihr weißes Logo sowie Ihr dunkles Logo zu haben. Sie können sehen, dass diese in der Struktur benannt sind, die ich zuvor erwähnt habe. Diese werden in einem Logo-Ordner mit beiden Optionen angezeigt. Sie können auch verschiedene Farboptionen oder Varianten Ihres Logos hinzufügen, je nachdem, was Ihre Bedürfnisse sind. Jetzt haben wir all diese Arbeit getan, um unsere Vorlage hier anzupassen. Wir können mit einigen dieser Symbole spielen, die ich hinzugefügt habe, nur um ein Gefühl für die Macht all dieser verschachtelten Symbole und Anpassungen zu erhalten, die wir in dieser Vorlage getan haben. Ein gutes Beispiel ist diese Form. Sie können sehen, dass es Optionen gibt, um die Textfarbe mit allen verschiedenen Textstilen zu ändern , die wir zuvor eingerichtet haben. Wenn ich möchte, dass der Text meine blaue Farbe hat, können Sie hier sehen, dass dieser jetzt aktualisiert wird. Es ist auch sehr einfach, diesen Text zu bearbeiten. Sie können sagen, Form Titel, und das wird wirklich schnell zu aktualisieren. Sie können auch einige der Styling hier aktualisieren. Wenn Sie einen anderen Formulartyp wünschen, möchten Sie vielleicht ein Symbol dort drin haben, wäre es wirklich schnell, das auch hinzuzufügen. Sie können auch sehen, dass mein Text ein wenig beschnitten wird. Glücklicherweise reagiert diese Komponente auf mich, was wir in zukünftigen Lektionen lernen werden, aber ich kann klicken und ziehen und sicherstellen, dass mein ganzer Text passt. Ich kann diesen Text auch anpassen und alle anderen Optionen ausführen, die ich von hier aus wünschen könnte. Wenn ich möchte, dass mein Rand auch blau oder meine Hintergrundfarbe auch blau ist, ist das sehr einfach zu bearbeiten. Dasselbe mit diesem Knopf. Sie können sehen, dass ich jetzt wirklich schnell Änderungen vornehmen kann. Dies wird sein, wie Sie Instanzen von Symbolen in Ihrer App schnell aktualisieren. Nachdem Sie diese Vorlage angepasst haben, haben Sie sicher ein viel besseres Verständnis dafür, wie leistungsstark diese Konstruktionssysteme mit allen verschachtelten Symbolwerkzeugen in den neuen Versionen von Sketch sein können . Ich hoffe, Sie sind genauso aufgeregt wie ich über all diese Tools und bereit , weitere benutzerdefinierte Elemente für die App zu erstellen, an der Sie gerade arbeiten. 6. Verwenden von Symbolen in deinem Workflow: Ich werde nur schnell durchlaufen und Ihnen ein wenig mehr über einige dieser verschiedenen Komponenten zeigen , die ich bereits für Sie in Ihren zukünftigen Projekten erstellt habe . Ich habe versucht, die Dinge ziemlich einfach zu halten. Sie wollen definitiv nicht diese Designsysteme so erstellen, dass Sie am Ende so viele Elemente und so viele Symbole in Ihrer Datei haben, dass es wirklich schwer ist, alle verschiedenen Optionen zu verwalten und zu verfolgen. Ich habe enthalten, was ich dachte, dass Sie brauchen, um loszulegen Sie sind offensichtlich willkommen, Dinge nach Bedarf zu entfernen und hinzuzufügen. Ich werde in der nächsten Lektion durchlaufen, wie benutzerdefinierte Komponenten erstellt werden. Vorerst habe ich Ihnen Optionen für Add-Ons wie Cursor, einige Avatare, viele Buttons und Badges gegeben. Dies sind definitiv sehr häufige UI-Elemente , die häufig in Ihrer App oder Website erscheinen werden. Ich habe auch viele Formulare enthalten, die auch sehr häufig sind. Einstellungsoptionen wie Radios, Kontrollkästchen und andere Beschriftungssysteme sowie Listen- und Menüelemente, die häufig angezeigt werden, insbesondere in iOS- und Android-Apps. Außerdem verfügen sie über Navigationselemente wie Kopfzeilen, Statusleisten und andere Dinge, die häufig angezeigt werden z. B. eine Registerkartenleiste, die am unteren Rand einer App angezeigt wird. Eine andere Sache zu beachten ist, dass alle diese Textstile, die hier als Elemente angezeigt werden. Wenn Sie möchten, dass Ihre Textstile editierbar sind, müssen Sie sie als Symbol anstelle eines Textstils zu einer Komponente hinzufügen . Wenn Sie möchten, dass der Text immer eine bestimmte Größe, ein bestimmtes Gewicht und eine bestimmte Farbe hat, müssen Sie ihn nicht unbedingt zusammenstellen. Wenn Sie jedoch weißen Text für Schwarz auf einer anderen Schaltfläche von Instanz zu Instanz überschreiben möchten , ist es wichtig, dass Sie diesen als weiteres Symbol in Ihr Symbol einfügen. Zum Beispiel können Sie in diesen Schaltflächen sehen, dass es sich um Textsymbole handelt. hier in Ihrem Ebenenfenster schauen, können Sie dieses kleine Symbol sehen, das anzeigt, dass es sich um ein Textsymbol handelt. Dadurch kann ich es mit anderen Textsymbolen, die dieselbe Größe haben, außer Kraft setzen. Dies ist definitiv praktisch für Schaltflächen, aber es gibt auch Instanzen wie in Formularen und anderen Kopf- und Navigationselementen, die Sie manchmal schwarze Texte verwenden möchten , manchmal weiß verwenden und Sie möchten nicht für jede Textfarbe ein anderes Symbol. Das wäre überflüssig und würde definitiv den Zweck von Symbolüberschreibungen und Skizzen besiegen. Dasselbe gilt für verschiedene Farben und Tastenfüllungen. Da Ihre verschiedenen UI-Elemente von Instanz zu Instanz in Farbe variieren können. Sie möchten sicherstellen, dass diese Farben als Symbolüberschreibungen in diesem bestimmten Symbol verfügbar sind . Sie werden definitiv sehen, dass dies später in dem Prozess ins Spiel kommt. Aber selbst in Instanzen wie Ihren Symbolen oder verschiedenen Tags soll die Farbe dieses Hintergrunds auf dem Tag editierbar sein. Sie können hier sehen, dass der Container tatsächlich ein Symbol ist und das es mir ermöglicht, die UI-Füllung so zu bearbeiten , dass sie je nach Instanz, die ich verwende, unterschiedliche Farben haben. Nehmen wir an, wir wollten hineingehen und hier einen weiteren Textstil von diesem 20 Punkt hinzufügen. Ich werde Ihnen dieses Beispiel im Text zeigen, aber Sie sind definitiv willkommen, diesen ähnlichen Prozess für andere Elementeauf aber Sie sind definitiv willkommen, diesen ähnlichen Prozess für andere Elemente dieser Seite oder bei anderen einfachen Bausteinkomponenten wie diesen durchzuführen, wo Sie das Gefühl haben, dass sie für Ihre App. Wenn wir voran gehen und dieses Symbol kopieren, alles, was ich tue, ist die Kontrolle zu halten und zu ziehen. Sie können auch einfach das Symbol auswählen und „Befehl D“ drücken, was es für Sie duplizieren wird. Eine davon ist eine großartige Option. Hier können Sie sehen, dass es ein Duplikat ist, weil es am Ende das Wort 'Kopieren' hat. Aber ich werde es wahrscheinlich umbenennen wollen. Nehmen wir an, dieser wird primär sein, was darauf hinweist, dass es meine Primärfarbe ist, die hier blau ist und fett sein wird. Die Hintergrundfarbe auf diesem Symbol ist schwarz, nur damit Sie sehen können, dass dieser weiße Text hier ist. Das brauchen wir nicht, denn mein Text wird blau sein. Also werde ich voran gehen und schalten Sie das aus, aber ich werde diesen Text auswählen und ich werde einen neuen Stil erstellen, und das wird heißen 20 mobile normal und dann wieder, primär, fett. Alles, was ich tun muss, ist, zu gehen und zu aktualisieren, um meine blaue Farbe zu sein und „Synchronisieren“ zu drücken. Jetzt haben wir ein Symbol, das meine primäre blaue Farbe ist und es wird mit jedem dieser anderen Symbole austauschbar sein , wenn sie in verschachtelten Symbolen verwendet werden. Um das zu testen, können wir voran gehen und einfach schnell eine neue Seite erstellen. Gehen wir weiter und fügen Sie mein Symbol ein. Wenn wir zu Symbolen gehen und dann unter Text 20, normal und dann primär fett. Das war ein Symbol, das wir gerade erschaffen haben. Sie können sehen, dass dies jetzt zwischen all diesen verschiedenen Elementen austauschbar ist. Dies ist definitiv noch nützlicher, wenn es innerhalb eines anderen Symbols verschachtelt ist. Wenn ich auf meine Symbolseite zurückgehe, lassen Sie uns voran gehen und testen, wie dies verwendet werden könnte. Nehmen wir an, ich weiß, dass dieser Stil der Größe 20 in meinem Knopf, großen Symbolen verwendet wird. Lassen Sie uns fortfahren und eine neue Seite erstellen, indem Sie auf dieses Pluszeichen klicken. Dies ist nur ein Beispiel, so dass wir es nicht benennen müssen. Wir gehen voran und fügen ein Symbol ein und es wird unser großes Tastensymbol sein. Lassen Sie uns einfach eine linke Taste hier machen. Ich möchte, dass mein Text, oh, da ist er, Text 20 Punkt normal primär fett ist. Das ist das Symbol, das wir gerade erstellt haben, und Sie können sehen, dass es jetzt dynamisch innerhalb dieses verschachtelten Symbols austauschbar ist. Sobald ich das ausgewählt habe, wollen wahrscheinlich einen anderen Hintergrund. Sie können schon jetzt sehen, ich bin in der Lage, aus all diesen neuen Hintergrundfarben zu wählen. Vielleicht will ich einen hellgrauen Hintergrund. Jetzt können Sie sehen, indem Sie all diese verschiedenen Optionen haben, habe ich ein wirklich dynamisches System zum Erstellen von Schaltflächenstilen erstellt. Hoffentlich können Sie jetzt die volle Leistung verschachtelter Symbole sehen und wie Sie schnell einen Styleguide erstellen , der Ihren Workflow wirklich beschleunigt. In der nächsten Lektion werden wir einige weitere benutzerdefinierte und komplexe Komponenten erstellen , die Sie in Ihrem App-Design verwenden können. 7. Erstellen von benutzerdefinierten Komponenten mit Symbolen: Um eine schnelle Zusammenfassung zu machen, können Komponenten als größere Elemente betrachtet werden, die aus kleinen, einfachen Elementen innerhalb Ihrer Benutzeroberfläche bestehen. Dies könnte eine Schaltfläche sein, die aus einem Textstil, einer Hintergrundfarbe, besteht. Es könnte auch viel komplexere Elemente sein. Eine Klassenkarte auf Skillshare oder ein Home-Listing auf Airbnb sind beide großartige Beispiele. Es kann auch allgemeinere Elemente geben, die in allen Designs der Benutzeroberfläche verwendet werden , z. B. Formulare, Modelle und andere Elemente, die Sie häufig auf Websites und Apps sehen. Als Sie Ihr Interface-Inventar durchgeführt haben, Sie wahrscheinlich viele dieser Komponenten in Ihrer gesamten Benutzeroberfläche bemerkt und haben wahrscheinlich eine gute Vorstellung von einigen dieser Komponenten, die für Sie eine gute Sache sein könnten, zu erstellen und zu skizzieren. Indem Sie diese als dynamische und flexible Komponenten erstellen, können Sie während Ihres Skizzenentwurfs mehrere Male ein einzelnes Element verwenden und Tonnen Zeit sparen, anstatt jedes Symbol zu bearbeiten. Dann müssen Sie zurückgehen und jedes einzeln aktualisieren, wenn Änderungen vorgenommen werden müssen. Wir wählen 1-3 Komponenten aus , die Sie erstellen und skizzieren möchten. Sie wären hilfreich für Sie, wenn Sie Ihre Benutzeroberfläche in Ihrem Styleguide erstellen. Um zu beginnen, würde ich vorschlagen, etwas ziemlich Einfaches mit nur wenigen Elementen zu wählen. Dann können wir auf etwas komplexeres aufbauen, das dynamischere Updates hat , die über die gesamte Schnittstelle vorgenommen werden müssen. Denken Sie an etwas, das Sie in Ihrer Benutzeroberfläche häufig gesehen haben, das Sie als Komponente erstellen möchten. Wenn Sie an ein Beispiel wie Airbnb denken, das wir diskutiert haben, haben sie diese sehr häufig wiederholte Komponente, die eine Auflistung einer bestimmten Miete ist. Dieses Element selbst ändert sich nicht, aber die Dinge in ihm werden von Instanz zu Instanz aktualisiert. Sie können hier viele verschiedene Home-Listing-Optionen sehen, die alle die gleiche Komponente sind, aber sehr dynamisch sind, um die Bedürfnisse jedes einzelnen Listings widerzuspiegeln. Einige weitere Beispiele, die Sie hier von Airbnb sehen können zeigen, wie viele Komponenten wirklich in einer Schnittstelle verwendet werden. Möglicherweise haben Sie Hunderte von verschiedenen Komponenten, die dynamisch und flexibel genug sind , um Vollbildschirme in Ihrer App zu erstellen. Beim Betrachten der Skillshare App habe ich drei Komponenten identifiziert, die ich als flexible Skizzenkomponenten erstellen möchte. Ich habe versucht, Dinge auszuwählen, die nicht zu kompliziert waren nur um zu veranschaulichen, wie wir diese sehr schnell bauen können. Aber dann wollte ich auch etwas komplexeres bauen, wie eine Reihe von mehreren Klassen, die wirklich schnell eingefügt und angepasst werden können und sich wie eine echte Live-App fühlen würden . Um zu beginnen, wollte ich diesen leeren Zustand unserer App erstellen. Dies tritt häufig im gesamten Design der App auf, aber das Symbol, Text und die Schaltfläche, der Stil und der Inhalt können auf jeder Instanz unterschiedlich sein. Dies ist ein großartiges Beispiel für etwas, das Sie vielleicht als verschachteltes Symbol erstellen möchten. Das erste, was wir tun werden, wenn wir anfangen, über die Konstruktion dieser Komponenten nachzudenken, ist, zu schauen, welche Elemente sich ändern und welche Elemente während des gesamten Designs konsistent sind. Für uns wird sich wirklich alles in diesem spezifischen Beispiel ändern, außer vielleicht der Abstand zwischen jedem Element und der Breite insgesamt. Ich ging voran und kopierte einige dieser Elemente von unten, nur um nur die spezifischen Elemente herauszuziehen, mit denen wir arbeiten werden. Wie bereits erwähnt, ist ein verschachteltes Symbol nur ein Symbol, das andere Symbole darin enthält. Wir werden beginnen, indem wir ein Symbol erstellen, das einfach den gesamten Inhalt dieses Elements hier hat. Erstellen Sie einfach ein Symbol. Moment können wir es Leer State nennen. Später, wenn wir anfangen, mehr Komponenten zu erstellen , werden wir definitiv mehr wissen wollen, wie wir dies benennen und wie es in die Dateistruktur der restlichen Symbole passen wird. Wenn ich darauf doppelklicke, wird es mich zurück zu unserer Symbolseite, und Sie können sehen, dass es hier ein Symbol erstellt hat. Wenn es in einer Gruppe landet, Sie die Gruppierung dort aufheben, damit Sie sehen können, was hier drin ist. Für mich habe ich tatsächlich bereits ein Symbol für dieses spezifische Design verwendet, was großartig ist, weil ich jetzt in der Lage bin, Überschreibungen Panel zu verwenden, um andere Symbole in dieser Option auszuwählen. Wenn Sie hier keine Symbole oder andere Symbole verwenden, möchten Sie diese Dinge als Symbole beantworten. Zum Beispiel sehen Sie, dass diese Schaltfläche tatsächlich nur eine Gruppe ist. Es ist kein Schaltflächensymbol, also wollen wir dies durch ein Schaltflächensymbol ersetzen , so dass wir es dynamisch in verschiedenen Fällen überschreiben können. Wenn wir auf unsere Symbole Drop-down-Menü gehen und wir gehen zu Button, Ich gehe voran und wähle eine kleine und zentrierte Schaltfläche. Sie können sehen, dass das Styling ein wenig anders ist. Dies veranschaulicht wirklich den Zweck, einen Styleguide zu haben. Dieses Schaltflächendesign war eigentlich nicht in meinem Styleguide enthalten, was bedeutet, dass es ein einzigartiges Design war, das nicht mit dem Rest der Benutzeroberfläche in der App übereinstimmte. Es ist wirklich wichtig, sicherzustellen, dass Sie ein gutes Inventar Ihrer Styles halten und das System nicht zu aufgebläht, wenn Ihre App wächst. Wir gehen voran und entfernen tatsächlich einfach diesen alten Knopf, da wir diesen hier jetzt haben. In diesem Überschreibungsfeld bin ich in der Lage, den Inhalt zu aktualisieren, vielleicht wollte ich nur Beispiel-Button für jetzt sagen. Da wir dies als eine Komponente entwerfen, die in meinem gesamten Design verwendet wird, muss es nicht spezifisch für diesen leeren Zustand sein. Ich kann weitermachen und das hier hinzufügen. Wir müssen darüber nachdenken, wie dieser leere Zustand verwendet wird. Werden diese Texte sein Styling ändern müssen? Vielleicht wollen wir ein hellgrau in einigen Fällen, ein dunkelgrau in einigen, vielleicht wäre es manchmal blau. Ich bin mir nicht sicher, aber nur um sicher zu sein, möchte ich hier ein Textsymbol verwenden , damit es viel flexibler auf der Straße ist. Auch hier ist dies Größe 17. Ich werde voran gehen und sagen: „Symbole“. Wir gehen zu Text 17, und werden zentriert sein, und wir wollen graue. Jetzt haben wir unseren Überschrift Text, und ich werde voran gehen und einige Platzhalterkopie hinzufügen, und wir werden es auf die volle Breite davon machen, und wir werden das direkt dort einfügen. Jetzt können wir das Original löschen. Dann wollen wir auch unsere Untertexte haben. Lassen Sie uns ein weiteres Symbol hinzufügen, das Text ist, und dieses ist Größe 14. Wir machen das Zentrieren, und vielleicht fangen wir mit der zweiten Klasse an. Welche Styling-Option Sie ursprünglich ausgewählt haben die Standardoption, die angezeigt wird, wenn Sie dieses Symbol auf der Straße einfügen, aber Sie bleiben nicht an diesem Entwurf fest. Normalerweise versuche ich nur, den Stil auszuwählen, den ich am häufigsten verwenden werde, aber dann können Sie ihn bei jeder Instanz bearbeiten. Gehen Sie weiter und aktualisieren Sie dies, damit es die richtige Höhe hat. Das nächste, was wir tun möchten, ist tatsächlich ein Plug-In für Sketch zu verwenden , das es wirklich viel einfacher macht, diese Elemente so anzuordnen , dass sie in verschiedenen Instanzen unterschiedlich hoch sein können und immer noch den gleichen Abstand haben . Sagen Sie dieses Drop-down-Menü, drei Zeilen oder eine Zeile statt zwei Zeilen zu sein. Mit der Art, wie es derzeit entworfen ist, würde diese Schaltfläche nicht auf diese Änderung reagieren und so würden Sie einige Abstandsprobleme haben. Was wir tun werden, ist ein Plugin namens Launchpad for Sketch herunterladen. Ich füge einen Link dazu unten in den Klassendetails ein, aber es ist kostenlos und es ist sehr einfach zu installieren, einfach herunterladen, doppelklicken und es wird automatisch auf Sketch für Sie installiert. Sobald Sie das installiert haben, wird es in der unteren rechten Ecke Ihres Bildschirms angezeigt und Sie werden einige zusätzliche Funktionen sehen. Die Funktionalität, die wir jetzt überprüfen werden, ist diese automatische Layout-Funktionalität, aber der Rest kann durch die App 'Website erkundet werden. In Ihrer neuen Komponente, die Sie erstellt haben , werden Sie fortfahren und alle verschiedenen Ebenen auswählen Dadurch erhalten Sie viele zusätzliche Optionen, die zunächst nicht in Sketch enthalten sind. Im Moment wollen wir alle unsere Elemente vertikal ausrichten. Andere Optionen wären Linksfutter, aber wir werden an einer vertikalen Linie bleiben und dann wird es Ihnen erlauben , den Abstand zwischen jedem Element anzugeben. Vielleicht wollen wir 15 Pixel zwischen jedem Element, egal wie viele Textzeilen in jeder dieser Elemente sind oder wie groß das Symbol ist. Wir möchten auch, während wir noch in unserem Symbol sind, sicherstellen, dass die Layering dieses Objekts auf eine logische Weise erfolgt , die wir verstehen können , wenn wir die Überschreibungen Panels betrachten. Zum Beispiel, gerade jetzt ist diese Überschrift ganz unten. Vielleicht ein wenig verwirrend, da dieser Button tatsächlich das letzte Element ist. Wir wollen weiter gehen und verschieben Sie dies nach oben, um direkt unter dem Symbol zu sein, und dann werden wir den Subtext hier haben, und wir möchten vielleicht sogar diesen Namen nennen, so dass wir diese Ebene umbenennen möchten, Subheader, und dann werden wir diese Ebene Header nennen, und dann werden wir diesen einen CTA nennen. Toll, jetzt, wenn wir zu unseren Komponenten zurückkehren, können wir sehen, dass der Header und der Subheader deutlich beschriftet sind, so dass wir keine Ratschläge darüber machen müssen, welche Texte wir bearbeiten sollten. Vielleicht möchten wir, dass unser Subheader nur eine Zeile ist. Sie können sehen, dass die Schaltfläche automatisch nach oben verschoben wird, um diese Änderung des Abstands zu berücksichtigen , so dass unser Abstand unabhängig von den Instanzen fixiert wird. Dies ist ein großartiges Werkzeug, das Sie verwenden können, wenn Sie diese dynamischeren Symbole erstellen , die Sie nicht wirklich sicher sind, wie lange jedes Textelement sein wird oder wie groß verschiedene grafische Elemente sein könnten, die viel mehr Abstand erlauben -Konsistenz in der gesamten App. Das nächste, was ich tun werde, ist ein weiteres Beispiel für eine etwas komplexere Komponente zu durchlaufen , die sehr häufig in der Skillshare iOS App verwendet werden würde . Hier können Sie das vollständige Mock-up einer hübschen Standard-Klassenseite auf Skillshare sehen. Dies wird auf jeden Fall verwendet, wenn Sie surfen, suchen, neue Inhalte entdecken oder sogar, wenn Sie sich empfohlene Inhalte auf Ihrer Startseite ansehen. Dies ist ein sehr häufig verwendetes Element, das wir definitiv wirklich wiederverwendbar, einfach zu aktualisieren und an verschiedene Seiten auf einer Website anpassbar sein wollen. Ich werde Sie durch ein wenig von der Logik wie ich ein Element wie dieses bauen könnte. Ich würde damit beginnen, mir anzusehen, welche Teile davon flexibel und verändernd sind und welche in jeder Instanz konsistenter sein könnten. Sie sehen diesen Haaransatz, das ist etwas, das in jedem Fall diese Komponente sein wird. Wenn Sie nach unten schauen, können Sie sehen, dass es auf fast jede Reihe von Klassen angewendet wird. In diesem Fall und wirklich auf allen unseren Seiten. Offensichtlich etwas, das nicht aktualisiert werden würde. Auch in der Lage zu sein, alle Klassen zu sehen ist das wahrscheinlich etwas, das auf jeder Instanz sein wird. Wir würden das eher als statisches Element betrachten. Der Trend Klassen Text ist etwas, das sich auf jedem Element befinden würde, aber ändern kann oder nicht, soweit die Kopie geht. Wir würden wollen, dass das flexibel ist, aber wir hätten das immer als Option in dieser Komponente. Für jede einzelne Klasse möchten wir immer die Zeit anzeigen, aber die tatsächliche Zeit, die dort geschrieben wurde, kann von Instanz zu Instanz variieren. Neben Titel, Künstler und Hintergrundbild des Klassencovers. Die Art und Weise, wie ich darüber nachdenken würde, würde darin beginnen ein einzelnes Element einer Klasse erstellen und dann ein einzelnes Element dieses Headers zu erstellen und das dann in eine größere, mehr verschachteltes Symbol, das als Klassenzeile insgesamt angewendet werden kann. Ich habe das schon ein bisschen vorbereitet, aber ich werde Sie durch einige der Logik hier führen. Ich habe damit begonnen, dieses einzelne Klassenelement zu erstellen, und es besteht wirklich nur aus vier spezifischen Dingen. Eines davon ist dieses Klassen-Hintergrundbild, eines ist die Zeit, und dann haben wir den Titel und die Künstler, und dann haben wir den Titel und den Lehrer. Wir wollen auf jeden Fall darüber nachdenken. Dies sind drei spezifische Punkte, aber wir sind bereits voran gegangen und wir gruppierten diese in eine Gruppe namens Zeit. Wir gingen auch voran und gruppierten das Klassenbild und die Zeit zusammen, da sie sich wirklich im selben Objekt befinden und wir diese zusammen verschachtelt halten möchten. Wir haben auch darauf geachtet, einen bestimmten Textstil zu verwenden. Wir gehen voran und verwenden Größe 12, normal und wir gehen weiter und tun weiß fett hier. Nun, das ist ein Satz Stil, der alles andere in unserer App passen wird. Wir haben auch ein bestimmtes Symbol in diesem Design verwendet, so dass es bearbeitet und aktualisiert werden kann , um andere Symbole zu sein, wenn wir diese Funktionalität in der Zukunft jemals benötigen. Dies bewahrt auch die Konsistenz. Wenn wir jemals das Uhr-Symbol auf der Website aktualisieren möchten, wird es für uns sehr einfach sein es an einem einzigen Ort in unserem Designsystem zu aktualisieren. Wir wollen das Gleiche mit dem Klassentitel und Lehrer machen. Dazu gehen wir voran und wenden Textstil sowie für den Lehrer an. Hier gibt es eine Einstellung, mit der Sie den Inhalt dieser Karte an die Zeichenfläche anpassen können. Wenn ich das zurückgeben sollte, wenn wir hier jemals die Gesamtgröße der Zeichenfläche anpassen. Ich schalte das aus, nur um dies zu bearbeiten, und dann können wir es wieder einschalten, so dass das Symbol immer dann angenommen wird , wenn wir die Instanzgröße ändern. Ich werde dies in der nächsten Lektion ausführlicher behandeln, aber es ist nur wichtig, wenn Sie diese Symbole bearbeiten. Ich ging auch voran und wandte auch unsere gestapelte Gruppenfunktionalität an, und Sie können sehen, wenn ich auf meine gestapelte Gruppenebene treffe, ich kann die Einstellungen erneut anzeigen, damit ich sie immer bearbeiten kann , um näher beieinander oder weiter auseinander zu sein. Gehen wir zurück in meine gesamte Zeichenfläche und schauen uns diese Komposition genauer an. Sie können sehen, dass wir zwei Instanzen dieses Klassenobjekts haben würden, und dann würden wir eine Instanz dieses Header-Element haben. Ich denke, das nächste, was ich tun würde, ist, diesen Header auszubauen. Ich habe dies bereits in meiner Symbolbibliothek begonnen, wie Sie sehen können. Ich habe damit begonnen, eine einfache Komponente zu erstellen, die hier zwei Textstile enthält. Eine davon ist die sehen alle und eine, die populäre Klassen sind, sowie diese horizontale Linie, und wie ich bereits erwähnt habe, diese horizontalen Linien, die über alle Instanzen hinweg konsistent sind. Ich gehe voran und sperre diese Schicht. Das wird es vor dem Override-Panel verstecken und einfach alles ein wenig einfacher machen, damit zu arbeiten. Wenn ich nun zu meinen Symbolen zurückgehe, siehst du das unter „Inhalt“ , so habe ich diese verschachtelt. Ich habe jetzt eine Option für einen Abschnittskopf sowie eine einzelne Klasse. Ich gehe weiter und füge hier meinen Abschnittskopf hinzu, und ich kann diese Objekte löschen, die nicht mehr zusammengesetzt sind. Sie können sehen, dass ich jetzt drei Symbole habe, bei denen es sich um eine ganze Liste von Layern handele. Viel einfacher auf meinem Ebenen-Panel zu sehen und zu verstehen, was ich sehe. Das nächste, was ich hier tun würde, wäre, aus allen drei von ihnen ein Symbol zu erstellen. Das ist nicht unbedingt etwas, was Sie tun müssten, aber ich weiß, dass, da diese Zeile viele, viele Male in der App verwendet werden wird, ich lieber alle diese zusammen haben anstatt immer drei Symbole einfügen zu müssen. Für mich ist das in diesem Fall am sinnvollsten. Ich ging voran und erstellte diese Inhaltsklassen-Zeilenkomponente, die zwei Klassen sowie diesen Abschnittskopf hat, den wir zuvor erstellt haben. Sie können in diesem Objekt sehen, es gibt eine gestapelte Gruppe bereits erstellt und es wird den Header sowie eine Gruppe haben , die zwei Klassen enthält. Wenn Sie eine Gruppe erstellen, zählt die gestapelte Gruppenfunktionalität diese Gruppe tatsächlich als ein Element. Da wir diese zuerst gruppiert haben, sind diese in der Lage, direkt nebeneinander zu stehen. Die Stile aus dem automatischen Layout werden nicht auf jede dieser Komponenten einzeln angewendet. Jetzt haben wir eine ziemlich flexible Komponente, die immer wieder verwendet werden kann. Jetzt möchte ich Ihnen zeigen, wie flexibel diese Komponenten sein können. Wenn wir zu unserer ursprünglichen Seite zurückkehren, können Sie sehen, dass wir einige Instanzen haben, die ich dieses neue Objekt anwenden möchte. Wenn wir zu unserem „Symbol“ gehen und zu unserem Abschnitt „Inhalt“ gehen und wir uns eine Klassenzeile ansehen. Ich kann das hier einfügen, in die gleiche Position setzen und dann einfach voran gehen und die alte löschen. Jetzt haben wir eine vollständige Zeile mit dem gleichen Inhalt wie zuvor, aber jetzt sind wir in der Lage, alle diese Optionen schnell zu überschreiben und anzupassen, ohne diese individuell in einem großen Maßstab zu manipulieren. Das ist definitiv praktisch. Wenn Sie jemals Änderungen vornehmen oder etwas machen wollen, das wie ein sehr realistisches Modell aussieht , ohne so viel Anpassung zu tun. Selbst wenn wir ein Klassenbild hier auswählen, können wir hineingehen und ich habe einige gespeichert, gehe hinein und aktualisiere diese wirklich schnell, und Sie können sehen, anstatt gefälschte Inhalte zu haben, können Sie wirklich die Dinge überzeugend aussehen lassen, was Ideal für Kunden, auch wenn Sie in einem größeren Unternehmen arbeiten, präsentieren Sie den Anspruchsbesitzern. Dies ist definitiv nützlich, wenn Sie Ihre Arbeit anderen präsentieren. Eine letzte Sache, die ich in dieser Lektion zeigen möchte, ist, wie Änderungen an diesen komplexen Symbolen so zeitsparend sein können. Indem Sie hineingehen und in unser Symbol klicken, können Sie auch in ein Symbol innerhalb von assemble doppelklicken, um Sie zu diesem Symbol zu bringen. Dies ist wirklich praktisch, wenn Sie nicht sicher sind, wo sich das Symbol in Ihrer Datei befindet. Mit einem Doppelklick gelangen Sie direkt in dieses Symbol und lassen Sie es von dort bearbeiten. Nehmen wir an, ich habe beschlossen, dass, anstatt diesen Text schwarz zu haben, wir das tatsächlich ändern wollten, einer meiner Kunden, sagen wir, fragt mich, diesen Text zu aktualisieren, um einen blauen und fett Text zu sein. Ich kann dies einfach an diesem einzigen Ort aktualisieren, und jetzt können Sie sehen, dass es in diesem Symbol aktualisiert wird und auch im letzten Mock-up aktualisiert wird. Wenn ich dies 100 Mal in meinem Projekt angewendet hätte, sie alle jetzt aktualisiert, was mir so viel Zeit erspart, jede Instanz zu suchen und sie einzeln zu aktualisieren. Hoffentlich veranschaulicht dies wirklich die energie- und zeitsparenden Funktionen dieser verschachtelten Symbole und Komponenten in Sketch. 8. Größeneinstellungen von Sketch: Sie möchten ein wenig mehr über die Größenänderung erfahren, damit wir unsere Komponenten noch flexibler und reaktionsschneller gestalten können. Dies ist wirklich hilfreich, vor allem, wenn Sie für mehrere Bildschirmgrößen oder Geräte entwerfen. Größenänderungseinstellungen können beim ersten Start etwas kompliziert sein, aber ich habe einige großartige Ressourcen in die Skizzendatei für Klassenressourcen in der Klassenbeschreibung unten aufgenommen , die sich öffnen und eine großartige Vorstellung von vielen die Optionen und wie sie in realen Anwendungen funktionieren. Wenn Sie sich diese Skizzendatei in den Größenänderungseinstellungen hier ansehen, können Sie sehen, dass es ein Beispiel mit vier sehr einfachen Anwendungen, aber unterschiedlichen Größenänderungseinstellungen gibt. Im ersten Beispiel sehen Sie, dass keine Größenänderungseinstellungen angewendet wurden. Dies bedeutet, dass sich diese weiße Box einfach dehnen wird, um das gleiche Verhältnis und die gleichen Proportionen wie die Gesamtgruppe selbst zu passen . Also, wenn ich auf diese Gesamtgruppe gehe und ich gehe, um die Größe zu ändern, können Sie sehen, dass sich dieses weiße Feld einfach dehnt, um das gleiche Verhältnis zu passen , wie ich das Gesamtobjekt heute ziehe. Im zweiten Beispiel wurden unterschiedliche Einstellungen für die Größenänderung angewendet. Dieser hat alle vier Ecken Farbe. Dies bedeutet, dass die Anzahl der Pixel zwischen dem äußeren Rand dieses grünen Feldes und diesem weißen Feld auf allen vier Seiten konsistent bleibt, unabhängig von der Gesamtgröße dieses Objekts. Wenn ich die Größe dieser ganzen Gruppe ändere, können Sie sehen, dass der Abstand an den Seiten des Objekts und der Oberseite konsistent sind. Im dritten Beispiel sehen Sie, dass wir eine feste Breite und eine feste Höhe auf diese weiße Box angewendet haben. Das heißt, wenn ich auf die Gesamtgruppe klicke und die Größe ändere, ändert sich das weiße Feld nicht tatsächlich in der Größe, unabhängig davon, welche Größe die Gesamtgruppe ist. Im vierten Beispiel hier werden ähnliche Einstellungen angewendet, aber wir wenden auch Pin an die obere rechte Ecke an. Es ist also rechts und oben angeheftet. Sie können sehen, dass eine ähnliche Sache passiert außer für das Objekt ist jetzt oben rechts angeheftet. Diese vier Arten von Einstellungen zu verstehen, ist definitiv sehr hilfreich, wenn Sie zuerst beginnen und Einstellungen für die Größenänderung auf Objekte in Ihren Komponenten anwenden. Um einige komplexere Beispiele zu betrachten, können Sie hier mehrere Gruppen von Objekten sehen, die zusammen eine größere Galerie bilden, möglicherweise mit einem Avatar und einigen Steuern oder verschiedenen Objekten hier. Es könnte auf verschiedene Arten angewendet werden. Um sich mit der Funktionsweise einiger dieser Einstellungen für die Größenänderung in diesen größeren Gruppen vertraut zu machen, können Sie mit dieser Beispielgruppe auf der rechten Seite beginnen. einige Änderungen an der Größe und dem Verhältnis dieses Objekts und dann die hier angewendeten Einstellungen erneut referenzieren, erhalten Sie ein besseres Verständnis dafür, wie diese auf tatsächlichen Komponenten funktionieren und wie sie angewendet werden können . auf Ihre spezifischen Komponenten für Ihr App-Design. Um einige etwas realistischere, aber immer noch ziemlich einfache Beispiele zu geben , möchte ich hier auf diesen Menüpunkt sowie auf dieses Formularfeld verweisen , das ich in dieser Datei angewendet habe. Dies ist ein gutes Beispiel, weil Formulare definitiv etwas sind, das auf verschiedenen Geräten und vielen verschiedenen Anwendungen mit unterschiedlichen Einschränkungen verwendet wird . Also scheint diese Instanz genau hier ziemlich gut zu funktionieren, aber sagen wir, wir wollen eine Kopie davon erstellen. Wenn wir das gleiche Design auf Mobilgeräten anwenden würden, könnten wir in der Breite unserer Objekte eingeschränkt sein. Wenn ich voran gehe und das nach unten verkleinere, können Sie sehen, dass sich der Text auf zwei Zeilen erstreckt. Das könnte definitiv ein Problem sein. Es ist nicht sehr lesbar und es ist nicht sehr realistisch suchen, wie dies auf einer Live-Anwendung aussehen würde. Wenn ich hier die Höhe anpassen gehe, können Sie sehen, dass ich dies so eingerichtet habe, dass das Feld selbst eine flexible Höhe anspricht, aber diese anderen Objekte, wie dieses kleine Symbol hier sind eine feste Breite und eine feste Höhe und sie haben unterschiedliche Größenänderungseinstellungen. Indem Sie diese Einstellungen strategisch anwenden, können Sie jedes Element sehr anpassungsfähig und individuell an seine spezifischen Bedürfnisse anpassen. Für ein weiteres Beispiel, für diesen Menüpunkt hier, wenn wir die Breite verkleinern, um viel schmaler zu sein, können Sie sehen, dass jetzt mein Text abgeschnitten wird. Ich möchte vielleicht die Höhe erhöhen, so dass es lesbarer und realistischer aussieht, aber Sie bemerken, dass mein Avatar Einstellungen hat, die feste Breite, feste Höhe in Pin zu Ecke waren , während einige dieser anderen Elemente reaktionsfähiger sind und in der Lage, Textumbruch ohne das Verhältnis der Gesamtkomponente zu ändern. Jetzt möchte ich mit unserer Vorlage wieder in unsere andere Skizzendatei springen und Ihnen zeigen, wie einige dieser Einstellungen auf unsere leere Zustandskomponente angewendet werden können , die wir in der letzten Lektion vorgenommen haben. Komponente in unserer Originaldatei suchen, können Sie sehen, wenn ich die Größe ändere, dass es definitiv einige Probleme gibt, die wahrscheinlich nicht ideal sind. Sie können sehen, dass sich unsere Schaltfläche wirklich nur dehnt, um die Größe der Gesamtkomponente anzupassen, die ich anpasse, aber es funktioniert nicht wirklich gut für die Steuer oder die Lesbarkeit eines dieser Objekte. Darüber hinaus denke ich, dass dieses Symbol an der Spitze besser sein könnte, wenn es eine konsistente Größe war. Ich liebe nicht wirklich, wie es sich mit der Komponente anpasst und wächst und schrumpft, während ich das bewegt. Also werde ich gehen doppelklicken und zurück auf die Symbolseite springen und ein paar Anpassungen vornehmen. Das erste, was ich tun werde, ist mit diesem Knopf umzugehen. Ich wollte definitiv eine feste Breite haben, ich möchte nicht, dass es so eng wird, dass der Text nicht mehr in den Button passt. Ich möchte auch die Höhe fixieren. Wenn ich die Höhe dieses Objekts insgesamt herausziehen muss, möchte ich nicht, dass mein Buttoncontainer wächst und schrumpft. Das zweite, was ich tun werde, ist, meinem Symbol hier eine feste Breite und eine feste Höhe hinzuzufügen. Also, jetzt, wenn ich zurück zu meiner ursprünglichen Seite und Sie können immer sagen, setzen Sie auf Originalgröße als Option, was eine tolle Sache zu haben ist. Jetzt können Sie sehen, wenn ich zurückgehe und die Größe davon skaliere, ist die Schaltfläche viel konsistenter und das Symbol ist auch eine konsistente Größe, was ich mit dieser Komponente gesucht habe. So können Sie sehen, dass diese kleinen Änderungen an den Einstellungen dieser einzelnen Elemente innerhalb einer Komponente viel individueller und flexibler an Ihre spezifische Anwendung sowie dynamischer werden , wenn Sie designen für verschiedene Geräte oder verschiedene Bildschirmgrößen. Hoffentlich hilft dies, Ihre Komponenten und Ihre Designs als viel flexibler und nutzbarer für Ihre Anwendung erscheinen zu lassen. 9. Teilen deines Styleguides: Nun, da wir ein viel umfassenderes Design System etabliert haben, einschließlich reaktionsschneller und dynamischer Komponenten, die nur für eine bestimmte App erstellt werden. Ich denke, es ist an der Zeit, dass wir lernen, wie wir dieses System mit anderen in unserem Team teilen können, oder auch nur über Computer hinweg. Selbst wenn Sie nur ein Freelancer sind, der alleine arbeitet, ist es eine gute Idee, das System auf mehreren Geräten und mit einfachem Zugriffgespeichert zu haben mehreren Geräten und mit einfachem Zugriff falls Sie herumspringen oder mit Kunden teilen möchten. Das erste Tool, das wir betrachten werden, ist ein Plugin namens Craft by InVision. Einige von Ihnen kennen InVision vielleicht als griechische Prototyping-Software. Sie haben auch einige tolle Plugins für Skizze. Es gibt mehrere, die sie anbieten, aber die, die wir heute ansprechen werden, heißt Bibliothek. Sie gehen voran und laden Craft online herunter. Wirklich einfach, kostenloses Tool, das Sie herunterladen und installieren können wirklich schnell. Es wird Ihnen Craft Manager in Ihrer Symbolleiste installiert wo Sie alle verschiedenen Optionen zu installieren sehen, sowie wenn Sie Updates haben, wie ich es derzeit tun, würden Sie in der Lage sein, direkt von hier zu aktualisieren. Da ich es bereits installiert habe, sehen Sie ein Panel direkt neben meinem Inspektor, das es mir ermöglicht, schnell auf die Tools zuzugreifen, die sie zur Verfügung stellen. Diese zweite Option nach unten ist ein Bibliothekswerkzeug. Wenn Sie darauf klicken, werden Sie eine ziemlich einfache Schnittstelle sehen, mit der Sie entweder eine Bibliothek importieren oder eine neue erstellen können. In diesem Fall, da wir derjenige sind, der den Styleguide erstellt, werden wir eine neue Bibliothek erstellen. Du kannst das benennen, was immer du willst. Ich werde voran gehen und meinen Skill Share anrufen. Dann müssen Sie ein Ziel wählen. Ich wähle jetzt nur meinen Desktop aus, aber Sie möchten irgendwo wie Dropbox oder einen freigegebenen Ordner auswählen, wenn Sie dies über mehrere Teams oder sogar mehrere Computer freigeben möchten. Klicken Sie einfach auf Create Library und jetzt sehen Sie eine Schnittstelle, mit der Sie Elemente hinzufügen können. Wenn wir in unsere gehen, Ich werde auf meine Symbol-Seite gehen, so dass ich alle Inhalte sehen kann , die ich hier hinzufügen möchte. Bastelbibliotheken, definitiv ein großartiges Werkzeug, um alle Ihre Typeinstellungen zu speichern , alle Ihre Farben, alles, was eher eine Stileinstellung ist, die Sie auf allen Geräten sehen möchten, dies ist ein großartiges Werkzeug dafür. Speichern von Gesamtkomponenten angeht, werde ich das im nächsten Tool ansprechen, das ich in der nächsten Lektion teile. Für jetzt werden wir einige Farben zu unserer Handwerksbibliothek hinzufügen. Wenn Sie auf „Neues Element hinzufügen“ klicken, können Sie sehen, dass Sie einen Dialog erhalten, um verschiedene Farben von Ihrem Bildschirm zu greifen. Du kannst einfach direkt von deiner Symbolseite greifen und alle diese Farben in deine Handwerksbibliothek hinzufügen. Eine Sache, die eine gute Idee zu tun ist, nachdem Sie diese hinzugefügt haben, während Sie sie hinzufügen, gehen Sie vor und geben Sie ihnen einen Namen, der entspricht , wie Sie auf die Farbe in Ihren Teams beziehen. Das könnte jedoch sein, dass Ihre Entwickler auf die Farbe in ihrer Codebasis verwiesen haben, oder es könnte einfach sein, wie Sie sie in allen Ihren Styleguide Referenzen merken möchten . Sobald Sie alle diese hinzugefügt haben, können Sie auch Ihre Textstile hinzufügen. Eine gute Möglichkeit, dies zu tun, wird nur die Auswahl all dieser Textilien, die wir zuvor als Referenz hatten, und klicken Sie auf „Neues Element hinzufügen“. Könnte eine Minute dauern, nur eine Minute, wenn Sie ein Vielfaches der gleichen Zeit machen. Aber Sie können wirklich schnell sehen, jetzt habe ich alle meine Textstile als Bezugspunkt in meiner Craft-Bibliothek. An diesem Punkt ist es wirklich einfach, dies auf mehreren Computern oder mit Teamkollegen zu teilen . Auch was wir tun müssen, um die gleichen Bibliotheken zu verwenden, wäre es, den gleichen Ordner für sie zugänglich zu haben. Ich empfehle Dropbox-Synchronisierung als gute Option, aber es gibt viele Möglichkeiten, diese Dateien teamübergreifend zu teilen. Wenn jemand in Avas Bibliothek zu seinem Handwerksfeld geht, wählte er einfach „Neue Bibliothek hinzufügen“, „Bibliothek importieren“, und dann wäre er in der Lage, schnell denselben Ort auszuwählen. Auf diese Weise können Sie die Craft-Bibliothek aktualisieren und diese Änderungen auf einem Computer mit Teammitgliedern oder auf Ihrem Heimcomputer widerspiegeln, wenn Sie Änderungen am Arbeitsplatz vorgenommen haben. Definitiv eine gute Möglichkeit, mit Ihrem gesamten Team auf der gleichen Seite zu bleiben und sicherzustellen, dass Änderungen auf allen Computern und allen Instanzen dieser Symbole widergespiegelt werden . Das nächste Werkzeug, das ich heute mit euch teilen werde, ist neu in der Skizzenversion 47, die neueste Version von Sketch ist. Auf diese Weise können Sie alle Symbole in einer einzigen Bibliothek hinzufügen , die aus allen Skizzendateien referenziert werden kann. Auch hier ist dies großartig für Teams, aber es ist auch ideal für alle, die an mehreren Dateien arbeiten, die denselben Styleguide für all diese Dateien oder mehrere Computer verwenden möchten, die dieselbe Bibliotheksreferenz haben möchten. Was wir tun werden, um Sketch-Bibliotheken zu verwenden , ist, dass wir zu unseren „Skizzeneinstellungen“ gehen. und wir werden auf die Registerkarte der Bibliothek klicken. Dies macht es wirklich einfach, neue Bibliotheken in Ihren freigegebenen Bibliotheksordner hinzuzufügen. Alles, was Sie tun werden, ist wählen Sie „Bibliothek hinzufügen“ und wählen Sie eine tatsächliche Datei aus, die als Bibliothek verwendet werden soll. In diesem Fall möchten Sie vielleicht die Datei, an der wir gerade arbeiten, als Sketch Bibliothek auswählen . Was das tun wird, wenn Sie eine auswählen, habe ich ein Beispiel aus meinem anderen Styleguide für die Skill Share Desktop-Version. Ich habe hinzugefügt, dass hier als Beispiel-Styleguide, und was Sie sehen können, ist, dass jetzt alle meine Symbole aus meiner Styleguide Desktop-Version für mich hier verfügbar sind. Es ist eine wirklich gute Möglichkeit, die Dateigröße zu reduzieren und macht Symbole viel einfacher zugänglich, weil sie nicht wirklich in dieser Datei gespeichert sind, arbeiten wir daran dass sie in der Bibliotheksdatei gespeichert sind. Wir müssen nicht jedes Symbol auf unserer Symbolseite aufgelistet haben, wir können eine große Referenzdatei haben, die alle diese Symbole für uns enthält. Dies ermöglicht es uns auch, einmal Änderungen an der Symbolbibliothek vorzunehmen, und das wird dann in jeder Skizzendatei reflektiert, die auf diese Bibliothek verweist. Wenn ich eine Datei hätte, an der ich vor sechs Monaten gearbeitet habe, aber dieselbe Bibliothek darin eingebettet habe, würde ich beim erneuten Öffnen dieser Datei warnen, dass alle meine Stile aktualisiert würden, um die Änderungen zu widerspiegeln , die in dieser Symbolbibliothek erstellt wurden. Dies ist definitiv ein gutes Werkzeug, besonders für größere Teams, wenn jemand dafür verantwortlich ist, Änderungen vorzunehmen sie aktualisieren diese Symbolbibliothek, es macht unsere Arbeit viel einfacher, weil sie nur es an einem Ort und jeder wird automatisch aktualisiert, dass er eine erneute Synchronisierung mit der Bibliothek benötigt. Wie Sie sehen können, waren definitiv die Namenskonventionen und Organisationstools, die ich Ihnen in früheren Lektionen beigebracht habe die Namenskonventionen und Organisationstools, die ich Ihnen in früheren Lektionen beigebracht habe, eine großartige Möglichkeit, alle auf der gleichen Seite zu halten und es jedem zu ermöglichen, von derselben Bibliothek zu arbeiten. Hoffentlich haben Ihnen diese Tools wirklich geholfen, egal ob Sie ein Freiberufler sind, der an mehreren Computern arbeitet oder an einem großen Team arbeitet, um Ihren Workflow effizienter zu gestalten und konsistentere Styleguides zu erhalten über alle Ihre Dateien hinweg. 10. Zusammenfassung: Ich möchte, dass sich alle daran erinnern, dass dieses System für Sie funktionieren soll. Dies ist definitiv nicht eine Größe passt alle und fühlen Sie sich frei, diesen Prozess zu optimieren, oder sogar Ansatz, um besser auf die Bedürfnisse Ihres Projekts oder Ihres Arbeitsstils zu passen. Ich bin wirklich aufgeregt, einige der Arbeit zu sehen, die ihr produziert, und ich würde gerne alle Projekte und Screenshots im Projektabschnitt unten in dieser Klasse veröffentlichen lassen. Definitiv, ich liebe es, alle Fragen zu hören, die Sie haben, Probleme, auf die Sie stoßen, oder alles andere, was Sie über die Erstellung von Styleguides und Designsystemen für Ihre Projekte wissen möchten . Es gibt definitiv so viele Informationen über dieses Thema zu lernen. Es gibt viele Leute, die sehr aktiv in der Community sind , mit denen ich gerne auf dem Laufenden bleiben möchte. Ich werde unten einige Ressourcen posten, besonders von größeren Unternehmen, die wirklich modernste Sachen mit Designsystemen machen und die Branche wirklich vorantreiben, um viel besser an die wie Entwickler arbeiten und die Art und Weise, wie Design-Teams und Entwickler in Zukunft zusammenarbeiten sollten. Vielen Dank, dass Sie diese Klasse besucht haben. Ich hoffe wirklich, dass es hilfreich war, Ihnen zu zeigen, wie Sie diese benutzerdefinierten und dynamischen Designsysteme erstellen , die wirklich helfen können, Ihren Designprozess zu entwickeln und Ihre gesamte App oder Website zusammenhängender zu machen.