NEU Figma 2024: Der Einstieg – vom Anfänger bis zum Profi –

1. 00 Intro Anfänger + Übung: Heute führe ich dich durch die Welt von Figma. Lassen Sie uns lernen, wie wir unsere Ideen mit den unglaublichen Funktionen von Figma zum Leben erwecken mit den unglaublichen Funktionen von Figma zum Leben erwecken Wir werden alles über die Einrichtung und Erstellung grundlegender Designs sowie über die Arbeit mit Komponenten lernen , um wiederverwendbare Designelemente zu erstellen Einrichtung von Stilen und Variablen für Konsistenz und Hierarchie in Bezug auf Farbe, Typografie und Abstände, responsives Design mit automatischem Layout zur Anpassung an unterschiedliche Bildschirmgrößen, grundlegendes Prototyping, um Ihr Design zum Leben zu erwecken, und wie Sie es mit anderen Designern und vor allem Entwicklern teilen und mit ihnen zusammenarbeiten können, um Ihr Design zu Wir fangen bei Null an, indem wir unser Figma-Konto einrichten und uns mit der Feuerstruktur vertraut machen Großartig. Dann befassen wir uns mit den Grundlagen, wie dem Einrichten und Verschachteln von Frames, dem Hinzufügen von Formen, Text, Farben und Rastern und dem Erstellen eines soliden UI-Designs Sobald Sie mit den Grundlagen vertraut sind, stellen wir sicher, dass Ihre Designs nicht nur schöne Bilder sind, sondern auch hochfunktionell und skalierbar sind Ich zeige Ihnen, wie Sie wiederverwendbare Designelemente mit Komponenten und Varianten erstellen wiederverwendbare Designelemente mit , die für ein modernes UI-Design unerlässlich sind. Wir erstellen Variablen und Stile, um Farben, Typografie und Abstände zu definieren und wiederzuverwenden , um die Konsistenz in allen Projekten sicherzustellen und schnelle Änderungen an Ihrem Design zu ermöglichen zu dokumentieren Für eine reibungslose Kommunikation mit der Entwicklung ist es entscheidend, diese Funktionen zu verstehen und effektiv zu Als Nächstes werden wir unsere Designs Bildschirmgrößen mithilfe von automatischem Layout und Einschränkungen an wechselnde Inhalte und Sie werden sehen, dass es mit dem richtigen Ansatz viel einfacher ist, als Sie vielleicht denken. Lassen Sie uns nun unsere Designs zum Leben erwecken und der Mischung einige grundlegende Prototypen hinzufügen Zum Abschluss zeige ich Ihnen, wie Sie Ihr Design mithilfe gemeinsam genutzter Teambibliotheken mit anderen Designern teilen mithilfe gemeinsam genutzter Teambibliotheken mit anderen Designern Und wahrscheinlich eines der wichtigsten , aber oft vernachlässigten Themen. Wir werden darüber sprechen, wie Sie Ihre Designs dokumentieren und teilen können, um reibungslose Kommunikation und Zusammenarbeit mit der Entwicklung zu gewährleisten. Im Laufe des Kurses werde ich auf häufig gestellte Fragen eingehen, z. B. wie man die richtige Bildschirmgröße wählt, wann man Variablen im Vergleich zu Stilen verwendet, und wertvolle Abkürzungen, Tipps und Tricks sowie kleine versteckte Juwelen mit euch teilen . Ich stelle Ihnen eine Figma-Übungsdatei zur Verfügung, mit der Sie das Video Schritt für Schritt an meiner Seite verfolgen der Sie das Video Schritt für Schritt an meiner Seite Sobald wir die Grundlagen beherrschen, wenden wir sie auf ein reales Projekt an und erstellen ein vollständig responsives, erstellen ein vollständig responsives komponentenbasiertes Podcast-Design bereit ist, in Ihrem Portfolio verwendet zu werden Ich halte es kurz und bündig, sodass Sie in kürzester Zeit alles über Figma herausfinden können , was Sie für jedes Projekt benötigen Dieser Kurs ist genau das Richtige für Sie, wenn Sie ein absoluter Anfänger sind oder von einer anderen Designsoftware umsteigen Dies ist der Kurs von Moon Learning Dot AO. 2. 02 Was ist Figma? Wer programmiert die Software?: Also, was ist Figma? Kurz gesagt, Figma ist eine Software zur Gestaltung von Benutzeroberflächen, auch bekannt als UI-Design-Software auch bekannt als UI-Design-Software In Figma können Sie interaktive Drahtrahmen erstellen, erweiterte Benutzeroberflächendesigns einrichten und beeindruckende Prototypen erstellen Das Tolle ist, dass Figma sowohl für Mac als auch für PC funktioniert. Sie können es in Ihrem Webbrowser verwenden oder die Desktop-App verkabeln Figma bietet Ihnen alle Tools, die Sie für das Design für Web oder Apps benötigen, z. B. das Arbeiten mit Komponenten, Einrichten von Stilen und Variablen, Tools für responsives Design sowie automatisierte Informationen für Entwickler Es ist wirklich die Kombination seiner unglaublichen Funktionen, die FIMAS so besonders macht und es als Branchenführer positioniert FIMA ist cloudbasiert und somit die ideale Wahl , um mit anderen Designern zusammenzuarbeiten oder Ihre Designs mit der Entwicklung zu teilen Sie können in Echtzeit mit anderen entwerfen, sodass Sie und Ihr Team gleichzeitig an demselben Projekt arbeiten gleichzeitig an demselben Projekt perfekt aufeinander abgestimmt zu bleiben Okay MA ist unglaublich benutzerfreundlich und hat eine sanfte Lernkurve für Anfänger, aber es kann auch auf sehr fortgeschrittene Stufen gebracht werden, um an den Code anzupassen und komplexe Designsysteme zu erstellen. Nun, eine häufig gestellte Frage, die ich höre, ist, wenn ich eine Website in Figma entworfen habe, wie wird sie dann zu einer echten Website Macht Figma das? Kodiert Figma? Nun, tut mir leid, aber nein. Figma bietet hervorragende Tools, um die Zusammenarbeit zwischen Design und Entwicklung zu erleichtern , z. B. den Def-Modus, in dem Sie CSS-Snippets, Code-Informationen, Komponenten und vieles mehr sehen können Code-Informationen, Komponenten und vieles mehr Aber so etwas wie eine Schaltfläche zum Veröffentlichen gibt es nicht. Dafür benötigen Sie also einen erfahrenen Entwickler. Alternativ können Sie für einfache Websites Tools wie Webflow oder Framer verwenden Figma als Grundlage für die Planung und Einrichtung Ihres Designs verwenden 3. 01 Figma im Browser vs.: Sie können auf zwei Arten mit Figma arbeiten. Sie können entweder direkt im Browser arbeiten, was Sie hier sehen, oder Sie können die App herunterladen Um die App herunterzuladen, gehen Sie zu figma.com (Forward Slash Sie können dann zwischen der MC- und der Windows-Version wählen der MC- und der Windows-Version Es ist wirklich wichtig zu beachten, dass Figma, obwohl Sie in der Desktop-App arbeiten, Cloud-basiert bleibt Das bedeutet, dass alle Ihre Dateien in der Cloud und nicht lokal auf Ihrem Computer gespeichert werden in der Cloud und nicht lokal auf Ihrem Computer gespeichert Daher benötigen Sie immer einen Internetzugang, um an Ihren Figma-Dateien zu arbeiten Sie könnten eine Figma-Datei exportieren und lokal speichern, aber das sollten Sie wirklich nur im Notfall tun, wenn Sie beispielsweise ein Projekt beenden müssten und wissen, dass Sie keinen Zugang zum Internet haben werden Dies kann zu Hürden für die Zusammenarbeit mit Ihrem Team führen die Zusammenarbeit mit Ihrem Daher ist es immer am besten, alles so in der Cloud zu belassen , wie es sein sollte Neben der Desktop-App könnten Sie auch an Figma Mirror interessiert sein, könnten Sie auch an Figma Mirror interessiert sein eine Vorschau Ihrer Designs auf Ihrem Handy oder Tablet Und falls Sie die Desktop-App nicht verwenden können und nur die Browserversion verwenden Ich empfehle dringend, den Font-Installer herunterzuladen. Dadurch erhalten Sie Zugriff auf alle Ihre lokalen Schriftarten. Dies ist jedoch nicht erforderlich, wenn Sie die App verwenden. 4. 02 Der Figma-Dateibrowser – Figmas Startseite: Der Figma-Dateibrowser, oder mit anderen Worten, Wenn Sie Figma zum ersten Mal öffnen, werden Sie etwas Ähnliches sehen Es ist möglicherweise leer, oder Sie haben bereits einige Dateien. Dies ist der Ort, an dem Sie Ihre Dateien und Ihre Teams organisieren. Bevor wir unsere erste Datei erstellen, wir sicherstellen , dass wir die Figma-Dateistruktur verstehen , die am Anfang etwas seltsam ist . Aber spiel einfach mit mir. Erstens haben wir Teams. Sie können für Ihre eigene Arbeit oder für die Zusammenarbeit bestimmt sein. Innerhalb von Teams haben wir dann Projekte, denen Sie Dateien innerhalb eines Teams in verschiedene Projekte gruppieren können. Im kostenlosen Tarif erhalten Sie derzeit ein kostenloses Projekt. In einem Projekt können Sie jetzt mehrere Dateien haben, entweder Fig-JEM-Dateien oder Designdateien In diesen Dateien würden Sie die eigentliche Arbeit erledigen. Sie können sie weiter in Seiten strukturieren. Kehren wir zur Realität zurück. Hier drüben kannst du das Team sehen. Sie können nur Teil eines Teams sein, oder Sie können das Drop-down-Menü öffnen und zwischen verschiedenen Teams wechseln zu denen Sie möglicherweise eingeladen werden. Sie können auch Ihre eigenen Teams erstellen, klicken Sie einfach auf die Plus-Schaltfläche und geben Sie Ihrem Team einen Namen. Dann kannst du wählen, ob du andere einladen möchtest. Wir können das vorerst überspringen. Du kannst später immer noch einladen. Wähle einen Teamplan. Sie können sich jederzeit für den Starter entscheiden und später ein Upgrade durchführen, wenn Sie zusätzliche Funktionen benötigen. Das Team, das Sie erstellt haben, wird dann oben angezeigt. Um das Team zu löschen, verwende einfach ein kleines Drop-down-Menü und wähle eine Option zum Löschen aus. Lassen Sie uns die Teamstruktur etwas besser verstehen. In unserem Team finden wir also die Projekte. Das Wort Projekt ist etwas verwirrend. Es stammt aus den alten Tagen von Figma. Heutzutage kann ein Projekt wirklich für absolut alles verwendet werden Betrachte es einfach als einen weiteren Unterordner und eine weitere Organisationsebene. Sie können dort alle gewünschten Dateien speichern und sie beliebig benennen. Wenn wir auf unsere Projekte klicken, dann findest du darin deine Dateien. Klicken Sie auf eine Datei, um sie zu öffnen, und es wird ein neuer Tab geöffnet. Sie können so viele Tabs öffnen, wie Sie möchten. In Ihrer Datei sehen Sie auf der linken Seite verschiedene Seiten, sehen Sie auf der linken Seite verschiedene Seiten die Ihre Datei weiter strukturieren. Wenn Sie zu Ihrem Dateibrowser zurückkehren möchten, klicken Sie oben links auf ein kleines Home-Symbol. Sie können sehen, dass Ihre Datei geöffnet bleibt, und übrigens, alles wird automatisch in Figma gespeichert Ein kleiner Tipp, eine sehr praktische Funktion ist, dass Sie sowohl Projekte als auch Dateien als Favoriten markieren können Projekte als auch Dateien als Favoriten Hier zum Beispiel, wenn ich das abnehme, ihr seht hier drüben, ich habe meine Startdateien. Mir gefällt es sehr, alle Projekte als relevant zu markieren und dann habe ich hier einen besseren Überblick. Das gleiche funktioniert, wenn du hier reinklickst , wir können das jetzt starten, und dann hast du auch wichtige Dateien für den schnellen Zugriff. Das ist übrigens nur für dich sichtbar. Es ist auch sehr praktisch, denn auf diese Weise können Sie beispielsweise Dateien zwischen Projekten verschieben, dies hier einfach über den Browser tun. Du kannst auch andere in dein Team einladen, zurück zur Übersicht springen und dann auf die Schaltfläche Teilen klicken. Hier kannst du entweder per Link oder per E-Mail einladen. Ganz wichtig: Achte darauf, dass du auswählst, ob du nur zum Ansehen oder Bearbeiten einlädst. Wenn Sie „Bearbeiten“ wählen, überprüfen Sie unbedingt Figma-Preisplan, da dies mit zusätzlichen Kosten pro Person verbunden sein kann Du kannst jederzeit die Art der Rechte ändern und auch die Rechte wieder rückgängig machen, indem du einfach auf den kleinen Pfeil hier klickst und zur Admin-Ansicht gehst , wo du alle Einstellungen findest Ein letzter kleiner Interessenbereich könnte die Community sein. Manchmal siehst du hier oben einen kleinen Globus oder vielleicht findest du den Globus, um die Community hier unten zu erkunden. Es bewegt sich ziemlich viel. Wenn du dort klickst, gelangst du in die Figma-Community, und das ist ein wirklich großartiger Ort, an dem du viele kostenlose Ressourcen, verschiedene Dateien und Plug-ins finden kannst . Du kannst wirklich gerne reinspringen und dir ansehen, wirklich gerne reinspringen und was andere Leute bereits für dich gebaut haben 5. 03 Erstellen von Designdateien: Lassen Sie uns eine neue Designdatei in Figma erstellen. Sie haben vielleicht bemerkt , dass Sie in Figma wählen müssen, ob Sie ein Feigen-Jamboard, eine Designdatei oder ein Slide-Deck erstellen Designdatei oder ein Slide-Deck Wir werden nur mit Designdateien arbeiten. Sie sind hier, um Ihre Designs einzurichten. FIC Jamboards eignen sich eher für Brainstorming, Zusammenarbeit und Das Slidedeck dient, wie der Name schon sagt, der Präsentation. Sie können Ihre Präsentation jedoch auch nur mit Designdateien einrichten . Aber mach dir keine Sorgen. Darauf werden wir in diesem Kurs eingehen. Lassen Sie uns eine neue Datei erstellen. Sie können entweder ein neues Projekt erstellen und dann Dateien in diesem Projekt haben, oder Sie können ein vorhandenes Projekt verwenden um es zu öffnen, und Sie werden jetzt oben die Schaltfläche zum Erstellen eines neuen Projekts finden . Wir werden uns für eine neue Designdatei entscheiden. Dadurch wurde eine neue Datei erstellt und sie wird sofort in einem neuen Tab geöffnet. Sie können jederzeit zu Ihrem Dashboard zurückkehren , und dann können Sie hier unsere neue Datei ohne Titel sehen Wenn wir sie umbenennen möchten, können wir dies direkt in der Datei tun indem wir auf den Namen doppelklicken Sie könnten es auch von hier aus verschieben. Verwenden Sie einfach diesen kleinen Fehler, und Sie können dann auf Verschieben klicken und es in ein anderes Projekt verschieben. Wir können dasselbe auch von unserem Projekt aus tun. Hier haben wir unsere Datei. Wir können dann mit der rechten Maustaste klicken, und dann können Sie sie umbenennen, und Sie können die Datei auch verschieben. Oder du kannst es einfach ziehen. Denken Sie daran, dass ich in meinen Projekten gerne die Hauptrolle spiele. Wenn Sie sie hier oben mit einem Stern markieren, werden sie in der Seitenleiste angezeigt, und das macht es viel einfacher, Ihre Dateien zu verschieben Normalerweise werden Dateien in Figma immer im Dateibrowser geteilt Wenn Sie jedoch jemals eine Download-Datei erhalten, also eine Datei, die mit einem Punkt in Ihrem Dateibrowser endet, stellen Sie sicher, dass Sie die Importschaltfläche verwenden , um sie in Ihrem Dateibrowser zu sehen sicher, dass Sie die Importschaltfläche verwenden , um Es wird nicht funktionieren, wenn Sie einfach darauf doppelklicken. 6. 01 Hinzufügen von Frames zu unserer Datei: Beginnen wir mit einer Basis von allem in Figma. Rahmen. Stellen Sie sicher, dass Sie sich in einer Designdatei befinden. Dieser graue Bereich, den Sie hier in der Mitte sehen , wird Leinwand genannt. Stellen Sie sich das wie die Oberfläche eines Tisches vor, an dem Sie gerade arbeiten. Darüber hinaus fügen Sie Ihre Designs wie Papierblätter hinzu. In Figma werden diese Blätter Rahmen genannt. Sie können diesen Rahmen Bilder, Texte und Formen hinzufügen , um Ihre Designs einzurichten Um einen Rahmen zu erstellen, klicken Sie einfach auf das Rahmensymbol in der Werkzeugleiste oder Sie können auch die Tastenkombination F verwenden . Wir öffnen jetzt das Figma-Menü für voreingestellte Rahmen auf der rechten Seite Wie Sie sehen können, hat Figma die gängigsten Bildschirmgrößen für Sie eingerichtet gängigsten Bildschirmgrößen für Wenn ich auf einen von ihnen klicke, wird der Rahmen in dieser Größe zu meiner Leinwand hinzugefügt in dieser Größe zu meiner Leinwand Falls Sie nicht nach einer bestimmten Bildschirmgröße suchen, können Sie auch einen Rahmen zeichnen. Drücken wir also erneut F, und dann können wir einfach einen offenen Rahmen auf unsere Leinwand ziehen. Das Tolle ist, wenn ich diesen Frame auswähle und zurück zum Frame-Drop-down-Menü springe, könnte ich daraus auch eine dieser Voreinstellungen Sie können ein Tastenkürzel verwenden, um alles auf Ihren CVAs zu zentrieren . Zwei Dinge sind passiert Figma hat diese Rahmen zu unserer Leinwand hinzugefügt, und wir können die Rahmen auch in unserem Ebenenfenster auf der linken Seite sehen in unserem Ebenenfenster auf der linken Seite Das Ebenen-Panel ist im Grunde ein Spiegel von allem , was auf der Leinwand passiert Sie können Ihre Frames umbenennen. Sie können entweder direkt auf den Namen des Rahmens klicken und dann einfach eingeben, wonach Sie suchen, oder Sie können auch im Ebenenfenster auf den Namen klicken. Wir verwenden immer Rahmen und niemals Formen, um unsere Bildschirme in Figma darzustellen Im Gegensatz zu herkömmlichen Zeichenflächen können Sie in Figma Rahmen innerhalb von Rahmen verschachteln , sodass Sie später komplexere Layouts erstellen komplexere Layouts 7. 02 Ein paar praktische Shortcuts: Ein paar praktische Abkürzungen. Im Allgemeinen findest du eine Übersicht über alle Tastenkombinationen, wenn du zum Aktionsmenü springst und dann nach Tastenkombinationen suchst. Sie werden einige blau markiert sehen, das sind die, die Sie bereits verwendet haben, und die weißen, sind diejenigen, die Sie noch nicht verwendet haben. Ich möchte dir vorerst die wichtigsten zeigen. Um die UR ein- und auszublenden, können Sie die Befehlstaste und den umgekehrten Schrägstrich drücken Wenn Sie die Umschalttaste und den umgekehrten Schrägstrich drücken, wird dies nur auf der linken Seite ausgeblendet Sobald Sie etwas auf Ihrer Leinwand ausgewählt haben, werden Sie immer noch alle Eigenschaften auf der rechten Seite sehen , was sehr praktisch ist, wenn Sie etwas mehr Platz benötigen Sie können die Ansicht vergrößern und verkleinern, indem Sie den Befehl n plus oder den Befehl minus drücken . Wenn Sie Shift und Null drücken, erhalten Sie eine 100-prozentige Ansicht. Wenn Sie Shift und eins drücken, erhalten Sie einen Überblick über alles , was sich auf Ihrer Leinwand befindet. Wenn du ein bestimmtes Element auswählst und Shift und zwei drückst, wird nur dieses Element vergrößert. Wenn Sie die Eingabetaste drücken, werden die direkten untergeordneten Elemente dieses Elements ausgewählt . Durch Drücken der Leertaste können Sie sich im Canvas-Bereich bewegen. 8. 03 Designdatei-Übersicht: Verschaffen wir uns einen kurzen Überblick über unsere Designdatei, bevor wir tiefer eintauchen. Standardmäßig ist Ihr Datei-Tab geöffnet, auf dem Ihre Ebenen angezeigt werden. Es gibt auch andere Optionen, also haben wir Dateien, Assets, Design und Prototyping Aber lassen Sie uns vorerst bei den Dateien bleiben und das herausfinden. Sie können gleich hier oben sehen, Sie auch so etwas wie Seiten haben, und wenn Sie auf eine kleine Plus-Schaltfläche klicken, können Sie eine zusätzliche Seite hinzufügen. Und das ist im Grunde ein ganz leerer neuer Lebenslauf. Seiten können verschiedenen Zwecken dienen, und wir werden später mehr darüber sprechen Im Allgemeinen können Sie bei einem kostenpflichtigen Plan so viele Seiten hinzufügen , wie Sie möchten, aber bei einem kostenlosen Tarif Sie möglicherweise auf nur drei beschränkt. Wenn Sie einer Seite einen Namen geben möchten, doppelklicken Sie einfach und Sie können den Namen ändern mit der rechten Maustaste klicken, können Sie eine Seite löschen. Das ist unser linkes Panel. Dann haben wir auf der rechten Seite das Eigenschaftenfenster. Sehr wichtig ist , dass Sie, wenn Sie auf den grauen Hintergrundbereich Ihrer Leinwand klicken , einen Überblick darüber erhalten , was in Ihrer Datei passiert. Später werden Sie alle Stile, Variablen, also alle allgemeinen Einstellungen sehen . Wenn Sie einen Rahmen oder ein bestimmtes Element wie einen Text oder eine Form auswählen , erhalten Sie die Informationen zu dem Element , das Sie gerade ausgewählt haben. Hier oben können Sie sehen, wer in Ihrer Datei enthalten ist. Sie können den aktuellen Modus aufrufen, also entweder in einem anderen Bereich, oder Sie können auch eine Dateivorschau haben, und Sie finden auch den Share-Button hier oben. All das werden wir später genauer kennenlernen. Unten befindet sich derzeit Ihre Werkzeugleiste. Beachten Sie, dass sich diese Dinge möglicherweise bewegen. Früher war sie hier oben. Hier finden Sie all Ihre wichtigsten Werkzeuge, wie Rahmen, alle Formen, Text und so weiter. Beachten Sie, dass die Tastenkombination angezeigt wird, wenn Sie mit der Maus über sie fahren Es lohnt sich wirklich, sich das zu notieren, weil es Ihren Arbeitsablauf wirklich beschleunigen wird , wenn Sie diese kennen Sie finden hier auch das Aktionsmenü. Im Aktionsmenü können Sie buchstäblich nach allem suchen , was mit Ihrer Datei zu tun hat, und Sie finden hier auch Ihre I-Tools. Es gibt einen Bereich für Plug In und Wichets. Auch hier werden wir gleich mehr über Plug-ins erfahren . Hier finden Sie den Schalter für den Gehörlosenmodus. Wir haben den Designmodus, in dem wir uns gerade befinden, und wir können diesen Modus, wenn Sie einen kostenpflichtigen Tarif haben, in den Gehörlosenmodus umschalten , und das ist der Bereich, der für Ihr Entwicklungsteam bestimmt ist Wenn sie ein Element auswählen, erhält es die entsprechenden Informationen für den Einige dieser Funktionen befinden sich möglicherweise hinter einer Paywall. Dies ändert sich ständig Konsultieren Sie daher unbedingt die FICMA-Preisseite, um zu sehen , was derzeit verfügbar ist 9. 04 Hinzufügen von Formen und Farben: Lass uns etwas Inhalt zu unseren Frames hinzufügen. Also hier habe ich einen Rahmen , den ich Frame genannt habe. Jetzt fügen wir einige Formen hinzu. Ich gehe zum Formwerkzeug und kann zwischen Rechteck, Linien, Fehler, Ellipse und Polygon sowie Stern wählen Linien, Fehler, Ellipse und Polygon sowie Stern Beachten Sie nun, dass Sie hinter jeder dieser Formen die Abkürzung sehen werden Ich werde mich für ein Rechteck entscheiden. Und wenn ich es einfach zeichnen würde, würde es die Form nicht behalten. Wenn ich also ein perfektes Quadrat haben möchte, dann kann ich nur die Umschalttaste gedrückt halten und dann zeichnen. Ich kann es auswählen und dann positionieren und feststellen, wie Figma dir hilfreiche Linien geben wird Lassen Sie uns jetzt einen Kreis zeichnen. Wenn ich mir also mein Menü ansehe, sehe ich, dass die Abkürzung lautet. Drücken wir also O. Und wieder halte ich die Umschalttaste gedrückt, um einen perfekten Kreis zu erhalten, und ich füge einen Kreis hinzu. Fügen wir eine weitere Form hinzu. Ich werde mich für ein Polygon entscheiden. Das hier, ich werde einfach so zeichnen. Jetzt merke ich, dass es etwas mehr Platz gibt. Auf der rechten Seite können Sie sehen, dass es jetzt drei zählt. Sie könnten dieses nach oben verschieben und dann weitere Polygone erstellen Ich werde es vorerst bei einem Dreieck belassen. Lass uns dem etwas Farbe hinzufügen. Ich werde hier mit meinem Kreis beginnen. Stellen Sie sicher, dass Sie die Form ausgewählt haben , nach der Sie suchen. Und dann können Sie auf der rechten Seite, im Eigenschaftenfenster, im Eigenschaftenfenster, eine Farbe durch Füllen ändern. Sie können entweder auf das Farbfeld klicken und dann einfach eine beliebige Farbe auswählen, oder Sie können auch eine Hx-Schicht hinzufügen, was ich tun werde Jetzt wähle ich mein Dreieck aus. Dieses Mal verwende ich das Farbrad und entscheide mich einfach für ein schönes Orangerot Für dieses Quadrat hier möchte ich Blau verwenden Spielen Sie mit dem Dateimenü, um sich vertraut zu machen. Sie können die Deckkraft verwenden, sodass Sie einfach eine beliebige Zahl hinzufügen können. Sie könnten die Füllung sichtbar und unsichtbar machen und Sie könnten sogar mehr Dateien hinzufügen Das verwende ich jedoch selten. Wenn Sie auf diese Uhr klicken, können Sie das hier sehen Sie können auch den Farbverlauf ändern, und wir können daraus eine Bildfüllung machen, die wir später verwenden werden. Wir könnten auch einen Strich hinzufügen. Jetzt könnte ich das zu diesem einzelnen Element hinzufügen, oder ich kann einfach alle Elemente auswählen. Halten Sie einfach die Maustaste gedrückt und wählen Sie alles aus. Ich kann jetzt auf die Plus-Schaltfläche neben dem Strich klicken, und du wirst sehen, dass sie jetzt jeweils einen Umriss haben. Ich könnte den Strich in einen dickeren Strich ändern , etwa vier. Wenn du zum Beispiel eine gepunktete Linie möchtest, könntest du das hier tun, indem du auf die drei Punkte klickst und von durchgehend zu da wechselst Genau wie bei der Füllung könnten Sie die Farbe des Strichs ändern 10. 05 Manipulation von Elementen: Lassen Sie uns lernen, Elemente auf der Leinwand zu manipulieren. Wenn Sie ein Element auswählen, werden die Eigenschaften in der rechten Seitenleiste angezeigt Beachten Sie, wie verschiedene Elemente Ihnen unterschiedliche Eigenschaften verleihen. Suchen Sie im ersten Abschnitt normalerweise nach der Positionierung , damit dies funktioniert, wählen Sie mehr als ein Element aus, halten Sie einfach die Maustaste gedrückt, und Sie können sie jetzt ausrichten. Sie können diese kleinen blauen Linien standardmäßig sehen, sie zeigen immer nach links und nach oben in Ihrem nächsten übergeordneten Frame, und Sie können die Positionierung hier sehen, sodass Sie sie sehr spezifisch machen können indem Sie einfach eine bestimmte Zahl eingeben. Wir werden später mehr über das Einschränkungsmenü sprechen , aber Sie können es ein- und ausschalten und dann die Einschränkungen ändern Mit den Beschränkungen wird buchstäblich alles , was Sie ausgewählt haben , an einen Bereich im übergeordneten Frame angeheftet Wenn ich es von links nach rechts ändere und jetzt die Größe ändere, können Sie sehen, dass es jetzt auf der rechten Seite und diese hier immer noch auf der linken Seite Aber mach dir vorerst nicht zu viele Gedanken darüber. Lassen Sie uns einfach alle auswählen und erneut an sie senden. Weiter unten haben Sie das Transformationstool. Wählen wir unser Quadrat aus , um das besser zu sehen. Und damit können Sie Ihre Elemente drehen. Sie können dies direkt hier im Menü tun, oder Sie können auch mit dem Cursor näher an das Element herankommen, und dann sehen Sie diesen kleinen Änderungsfehler. Sobald Sie das sehen, halten Sie die Maus gedrückt, und Sie können jetzt auch auf der Leinwand nach rechts drehen. Und hier können Sie Elemente umdrehen, drehen und so weiter. Nun, dieser Teil hier unten, das Layout, das ist der wichtige Teil mit Ihren Abmessungen. Wenn Sie ein Element ausgewählt haben, wählen wir einfach noch einmal unseren Kreis aus, dann können Sie hier einen kleinen Clip sehen. Derzeit ist er unbeschnitten. Wenn ich diese Breite auf 200 ändern würde und Sie sehen, würde sich nur eine Seite ändern Wenn ich möchte, dass beide gleich geändert werden, stellen Sie einfach sicher, dass Sie den Clip ausgewählt haben, und jetzt können Sie alles ändern und es wird auf beide Seiten angewendet, wirklich praktisch. Das Tolle an diesen Feldern ist, dass Sie nicht nur Zahlen eingeben können, sondern sie auch für einige grundlegende Berechnungen verwenden können, also alles von Plus minus Division bis Multiplikation Wie bei den meisten Dingen können Sie alles, was Sie hier im Eigenschaftenfenster tun können, auch direkt auf der Leinwand tun Wenn Sie näher kommen, können Sie diesen kleinen Fehler hier oben sehen. Sie müssen sich einer Kante nähern, damit das funktioniert. Und wenn Sie jetzt die Umschalttaste gedrückt halten, können Sie die Größe ändern dabei die Proportionen beibehalten Ein kleiner versteckter Tipp. Wenn Sie einen Kreis haben und den Mauszeiger darüber bewegen, wird das Bogenwerkzeug angezeigt Wenn Sie das gedrückt halten, können Sie den Kreis noch weiter nach Ihren Wünschen bearbeiten Kreis noch weiter . Ziemlich cooles Zeug. Wir können auch den Eckenradius hinzufügen, ein oder mehrere Elemente auswählen und dann im Erscheinungsbild den Eckenradius finden, und Sie können ihn gleichzeitig allen Ecken hinzufügen, oder Sie können auch das Menü für einzelne Ecken öffnen und ihn dann einfach auf die Ecken anwenden, die Sie mögen 11. 06 Ausrichten, Aufräumen und Messen: Lass uns lernen, wie du deine Objekte ausrichtest , aufräumst und misst Wir sind also bereits mit der Ausrichtung vertraut. Aber eine weitere Option, die ich wirklich mag ist, wenn Sie mehr Optionen auswählen, dann erhalten Sie hier die Aufräumfunktion. Wenn Sie mit der Maus darüber fahren, sehen Sie diese kleinen Griffe und Sie werden auch diese Kreise sehen Also hat es das aufgeräumt und es wurde der gleiche Abstand zwischen all deinen Elementen geschaffen der gleiche Abstand zwischen all deinen Beachten Sie jetzt, dass ich mein Rechteck verwende, dass es immer noch ein Polygon ist und sich innerhalb seiner Form befindet Was ich jetzt tun könnte, ist, sie alle auszuwählen und diese Ziehpunkte zu ändern , und das wäre dann für alle gleich Ich könnte auch das Eigenschaftenfenster verwenden , um das zu manipulieren, da es mir jetzt den Abstand zwischen diesen Elementen als eigene Eigenschaft gibt. Sie können auch eine dieser Formen auswählen und sie dann ganz einfach austauschen , sobald sie aufgeräumt ist Wenn wir nun alle auswählen, sind sie noch nicht in der Mitte ausgerichtet Sie können jedoch alle zusammen auswählen und verschieben, und dann zeigt Ihnen Figma auch einige Hilfslinien, um die Mitte Ihres Rahmens Ein weiteres praktisches Tool, das ich ständig verwende , ist, dass, wenn Sie eine Form auswählen und die Maustaste gedrückt halten und den Mauszeiger über eine andere Form bewegen, Ihnen die Entfernung angezeigt wird Das funktioniert bis zum Rand des übergeordneten Frames oder zu benachbarten Objekten, wirklich sehr praktisch Sie können es immer noch verschieben, während Sie alles ausgewählt haben, und dann werden Sie sehen, wie die Entfernung zu diesem Objekt ändert. 12. 07 Hinzufügen und Arbeiten mit Text: Lassen Sie uns etwas Text hinzufügen. Wählen Sie in der Werkzeugleiste das Textwerkzeug aus, oder drücken Sie einfach T. Es gibt zwei Möglichkeiten , Text hinzuzufügen. Sie können entweder einfach auf eine beliebige Stelle klicken, um den Text hinzuzufügen, und dann mit der Eingabe beginnen. Sie können auch ein Textfeld zeichnen. Drücken wir noch einmal T, und ich werde ein Textfeld zeichnen, und ich kann den Text jetzt hier hinzufügen. Es spielt keine Rolle, welchen Ansatz Sie verwenden werden da Sie ihn jederzeit über das Textmenü ändern können, was wir jetzt kennenlernen werden. Ich werde beide behalten. Das wird meine Überschrift sein, und ich werde diese behalten und einfach noch etwas Dummy-Text reinkopieren , und wir können ihn als Kopie verwenden Ich kann ein größeres Textfeld öffnen, indem ich einfach meine Maustaste gedrückt halte und es ziehe Zuallererst möchte ich, dass beide das gleiche Schriftbild haben Ich wähle beide aus und wähle über das Menü eine Schrift aus Sie können sehen, dass alle Google-Schriftarten vorinstalliert sind , wenn Sie die Figma-App verwenden Außerdem werden alle Telefone, die Sie lokal auf Ihrem Computer haben , hier angezeigt Ich werde mich für eine Google-Schrift namens Poppins entscheiden. Bevor ich nun die Größe und Breite ändere, können Sie sehen, dass dies ein bisschen überall ist Lass uns das aufräumen. Ich werde mich zuerst für meine Überschrift entscheiden und das auf automatische Breite setzen Das bedeutet, dass sich das Textfeld immer an alles anpasst, was ich hier in der Breite hinzufüge. Mein Kopiertext werde ich auf feste Breite und automatische Höhe einstellen . Das bedeutet, dass es die volle Höhe annimmt und was auch immer ich hinzufüge, es wird sich an diese Höhe anpassen. Der letzte Punkt hier ist feste Höhe und feste Breite. Und um ehrlich zu sein, benutze ich das fast nie. Lassen Sie uns unsere Formen auswählen, sie herunterziehen und etwas mehr Platz schaffen. Also jetzt möchte ich das Gewicht ändern. Ich kann das mit dem zweiten Drop-down-Menü machen, und ich werde meine Überschrift fett formatieren und ich werde meinen Text normal lassen. Ich möchte also natürlich, dass meine Überschrift größer ist, also kann ich das mit der Textgröße hier machen. Sie können entweder eine beliebige Zahl eingeben oder Sie können auch die Pfeiltasten auf der Tastatur verwenden , um auf und ab zu gehen. Auch hier gilt: Wenn du die Umschalttaste gedrückt hast, dann springst du in deinem Nut-Betrag Ich werde hier oben ein großes Hallo haben. Nun, mein Kopiertext, ich werde dieses Feld noch größer machen, ich werde bei 16 bleiben, was die Standardgröße für Kopiertext ist. Der nächste Wert hier ist die Zeilenhöhe. Das ist wirklich wichtig. Die Zeilenhöhe ist, wir können das an unserer Überschrift besser erkennen , dieser kleine Raum oben und unten in Ihrem Text. Das ist wie eine natürliche Lücke, die wir schaffen. Lassen Sie das immer mindestens auf Auto stehen, was 1,5 entspricht, oder Sie könnten sogar noch höher gehen und es auf 1,7 setzen. Kann das berechnen, also könnte man sagen, 16 ist meine Textgröße, und jetzt multipliziere ich das mit 1,75, und das würde mir den Pixelwert 28 geben Sie könnten auch eine Prozentangabe verwenden, also habe ich 175% Wenn das alles neu für Sie ist, lassen Sie es vorerst einfach auf Auto stehen, was Ihnen eine wirklich gute Zeilenhöhe Was auch immer Sie tun, stellen Sie es nicht auf die gleiche Größe wie Ihr Text oder noch weniger ein. Denn was passieren würde , ist , dass Sie die Zeilenhöhe verlieren würden, was bei einer einzeiligen Überschrift in Ordnung sein könnte. Aber in Ihrem Text oder sobald etwas geändert wird, wie sich das Textfeld ändert, ein Browserfenster ändert, dann wird der Text zusammengedrückt, und das wollen wir nicht Die Ausrichtung ist links mittig oder, also ziemlich normal. Dieses kleine Tool hier bedeutet , dass, wenn du mehr Text hinzufügst, in welche Richtung wächst . Die Standardeinstellung, die wir aktiviert haben , bedeutet, dass, wenn ich mehr Text kopiere , wir hier einfach mehr Text hinzufügen, er wird einfach unten hinzugefügt. Wenn Sie das nun zentriert hätten, würde es passieren, dass es von der Mitte aus wachsen würde , und das Gleiche gilt natürlich auch, wenn Sie es nach unten hätten , würde es nach oben wachsen. Sie können auch das erweiterte Menü öffnen und dann finden Sie hier weitere Ausrichtungsoptionen. Bitte verwenden Sie niemals Text mit ausgerichteter Ausrichtung. Um ehrlich zu sein, weiß ich nicht einmal, warum es ihn immer noch gibt. Diejenigen, die Sie wahrscheinlich häufiger verwenden werden Unterstreichen und solche Fälle, und Sie finden fortgeschrittenere Dinge wie vertikales Kürzen, Absatzgestaltung und in Details noch mehr Dinge wie bestimmte Einrückungen, oder wenn Sie bestimmte Zahlenpositionen haben und solche Dinge Aber in den meisten Fällen das Standardmenü völlig in Ordnung Wie bei allen anderen Objekten können Sie Text auswählen und ausrichten. Und bei jeder Änderung der Farbe würden Sie das Filmmenü verwenden. Übrigens hat Text in Figma und im UI-Design im Allgemeinen immer eine eigene Box Überschrift hat ein eigenes Feld und der Kopiertext hat ein eigenes Feld Sie könnten diese Überschrift technisch gesehen in demselben Feld haben , aber so haben wir das UI-Design nicht eingerichtet. 13. 08 Verschachtelungsrahmen – Die Figma-Superkraft: Bei Figma dreht sich wirklich alles um Nistrahmen. Am Anfang mag es nicht so offensichtlich erscheinen, warum alles auf einem Rahmen platziert werden sollte Dies ist etwas, das Sie viel besser verstehen werden , wenn Sie sich mit fortgeschritteneren Funktionen wie der Arbeit mit Komponenten oder auch dem Layout befassen. Schauen wir uns an, wie verschachtelte Frames aussehen würden. Hier haben Sie einen übergeordneten Frame, und innerhalb dieses übergeordneten Frames haben Sie mehr Frames Sie haben also einen orangefarbenen Rahmen, einen roten Rahmen und einen blauen Rahmen. Sie können sehen, dass Sie im Ebenenfenster auf der linken Seite die Rahmen verschieben können, indem Sie sie einfach ziehen. Jetzt habe ich in diesen Frames noch mehr. Wenn ich also auf meinen blauen Rahmen klicke oder ihn über das Ebenenbedienfeld öffne, kannst du sehen, dass ich eine Form habe, aber ich habe auch einen anderen Rahmen, der Text enthält. Das wäre also so etwas wie eine Schaltfläche , die wiederum ein verschachtelter Rahmen wäre Wenn Sie einen beliebigen Rahmen auswählen und ihn verschieben, alles, was Sie darin platziert haben, mit Wenn Sie Elemente zwischen Frames ziehen. Nehmen wir zum Beispiel an, ich ziehe diese Form in den roten Rahmen, dann können Sie sehen, dass sie sich im Ebenenfenster automatisch neu organisiert Sie müssen sich darüber also keine Gedanken machen. Ich kann auch einfach ein Element aus dem übergeordneten Frame ziehen, und es wird automatisch ein weiterer Frame auf meiner Leinwand daneben erstellt . Sie können auch einen Rahmen zeichnen. Wenn ich also F drücke, kann ich hier einfach einen Rahmen hineinzeichnen, und wenn ich ihn über bestimmte Elemente ziehe, dann enthält er diese Elemente. Aber lassen Sie uns eine Sekunde zu unserem ursprünglichen Setup zurückkehren. Wenn Sie alle Ebenen geöffnet haben und sie reduzieren möchten, wählen Sie einfach das übergeordnete Bild aus und klicken Sie auf Option oder altes L. Wenn Sie zum nächsten untergeordneten Element springen möchten , drücken Sie die Eingabetaste. Beachten Sie, dass dadurch alle Frames auf der nächsten Ebene ausgewählt werden. Wenn ich erneut die Eingabetaste drücke, geht es noch einen Schritt weiter und so weiter. Mit dem umgekehrten Schrägstrich können Sie zurück zum übergeordneten Element springen. Und vergessen Sie nicht, dass Sie mit „alt“ und „L “ ältere Schichten zusammenbrechen lassen Wenn Sie eine Ebene tiefenselektieren möchten, also nehmen wir an, Sie möchten diese Schaltfläche hier haben, dann müssten Sie sich zuerst vollständig durchklicken. Was Sie tun könnten, ist einfach die Befehlstaste gedrückt zu halten und anschließend die Ebene auszuwählen Das ist eigentlich die Abkürzung, an die Sie sich wirklich erinnern müssten , weil Sie sie die ganze Zeit verwenden werden Es ist eine gute Praxis, wenn Sie bereits anfangen, über die grundlegenden Elemente Ihres Designs mit Rahmen nachzudenken und sie zu entwerfen, und ich werde Ihnen zeigen, wie das funktioniert. Lassen Sie sich jedoch nicht stressen, wenn Sie hier oder da einen kleinen Fehler machen oder sich nicht sicher sind, was Sie verwenden sollen. Sie können das später jederzeit beheben. 14. 09 Frames vs. Gruppen: Die nächste Frage, die Sie wahrscheinlich haben werden, ist warum Frames und nicht nur Gruppen in FICMA Denn in FICMA könnten wir Elemente einfach gruppieren, indem wir sie auswählen und Befehl und G drücken. Schauen wir uns das genauer an Hier habe ich einen Rahmen, und dieser Rahmen enthält einen weiteren blauen Rahmen und eine Ellipse Und hier habe ich das gleiche Setup, aber das ist eine Gruppe, wie Sie im Ebenenbedienfeld sehen können Jetzt kann ich sie als Gruppe verschieben, also ist es genau das, wonach ich suche, und ich könnte sie sogar in einem anderen Rahmen platzieren. Nehmen wir an, wir zeichnen einen Rahmen um sie herum. Dann können Sie sehen, dass beide gut in diesem Rahmen sitzen , egal ob es sich um einen Minenrahmen handelt oder ob es sich um eine gestanzte Gruppe Am Anfang scheint es keinen großen Unterschied zu geben, warum also nicht einfach diesen wählen Es stimmt, wenn ich mit dem Entwerfen anfange, verwende ich manchmal sogar Gruppen. Sie sind am Anfang irgendwie schneller und einfacher zu verwalten. Wenn ich einen schnellen Entwurf von etwas mache, fange ich oft mit Gruppen an. Sie brauchen sich eigentlich keine Sorgen zu machen denn selbst wenn Sie eine Gruppe haben, können Sie diese später jederzeit in einen Frame umwandeln indem Sie einfach das Drop-down-Menü auf der rechten Seite verwenden, und Sie können jederzeit jeden Frame wieder in eine Gruppe konvertieren, wenn Sie das aus irgendeinem Grund möchten. sich also am Anfang nicht zu viele Gedanken darüber , wie Sie das alles einrichten müssen. Es wird Ihnen einfallen, wenn Sie zu den fortgeschritteneren Dingen übergehen , wie dem automatischen Layoutdesign mit Komponenten sowie dem Prototyping, bei dem Sie feststellen werden, dass Sie einfach einen Rahmen benötigen, oder Figma hilft Ihnen sogar dabei, alles bei Bedarf in Rahmen umzuwandeln alles bei Bedarf in Rahmen Versuchen wir trotzdem, uns daran zu gewöhnen, mit Frames zu arbeiten. Vorerst nur ein paar grundlegende Unterschiede, die Ihnen vielleicht sofort auffallen. Der erste ist, wenn ich einen Rahmen habe, dann kannst du auf der rechten Seite sehen, ich dieses kleine Kästchen ankreuzen kann, das als Clip-Inhalt bezeichnet wird. Nun, Clip-Inhalte sind wirklich praktisch, vor allem, weil wir den Rahmen verwenden, um unser Viewboard oder unsere Gerätegröße darzustellen Daher werden wir Inhalte haben, die im Überfluss vorhanden sind. Das ist etwas, das wir später beim Prototyping vielleicht animieren wollen, aber am Anfang wollen wir nicht, dass dieser ganze Überfluss entsteht, also ist es sehr praktisch, dass wir das ein- und ausblenden können Das kann ich in einer Gruppe nicht machen. Sie werden auch feststellen, dass, wenn Sie dies als Hintergrund verwenden möchten, sagen wir, wir ändern nur die Größe dieses Bildes, dann haben wir genau das gleiche Aussehen. Wenn wir das verwenden, dann fehlen uns einige Funktionen. Schau mal, ob ich auf den Rahmen umsteige. Sie werden sehen, dass ich viel mehr Funktionen wie Layoutraster und all diese verschiedenen Auswahlen erhalte Layoutraster und all diese verschiedenen Auswahlen Hier bekomme ich ziemlich viele. Ich könnte zum Beispiel ein automatisches Layout hinzufügen, etwas, das wir später tun wollen. Wenn ich es abnehme, wirst du feststellen, dass Figma nett genug war, es in einen Rahmen für mich umzuwandeln Anstatt sich über den richtigen Ansatz Gedanken zu machen, empfehle ich, einfach einzusteigen ein paar Traktoren zu besorgen, und sobald Sie die fortgeschritteneren Funktionen erreicht haben, wird alles zusammenpassen 15. 10 Entwerfen mit verschachtelten Rahmen: Lassen Sie uns ein erstes Design mit verschachtelten Rahmen und Figma einrichten. Hier ist ein klassisches Beispiel. Ich habe einen übergeordneten Frame, und dieser heißt Block , der andere Frames und Elemente enthält. Sie können hier sehen, dass ich meine Navigation habe, die auch ein Frame ist, der einen anderen Frame enthält, und darin habe ich einige Zeilen, die das Burger-Menü darstellen. Übrigens, ich kann das einfach hierher ziehen , wenn ich die Reihenfolge ändern möchte. Als Nächstes habe ich meine Überschrift, und Sie können sehen, dass Überschriften oder einfach nur Text als solcher nicht in einem separaten Rahmen platziert werden, es sei denn , er ist Teil einer Karte oder eines anderen Elements. Eine Überschrift können Sie einfach frei in Ihrem übergeordneten Frame platzieren . Dann habe ich meine Karte hier. Sie können sehen, dass ich zwei Karten habe. Auch hier gilt: Wenn ich die Reihenfolge ändern möchte, ziehe sie einfach in dein Ebenen-Panel. Auf meiner Karte siehst du, dass ich eine Form habe, die ich Bild genannt habe, und dann habe ich eine Überschrift und ich habe etwas Text. Lassen Sie uns das also neu erstellen und während des Bauprozesses wird es viel klarer werden, wird es viel klarer werden warum und wie ich die verschiedenen Elemente eingerichtet habe Okay. Lass uns das ein bisschen verschieben. Drücken wir F und fügen direkt daneben einen leeren Bildschirm mit derselben Größe hinzu. Wenn wir zwei verschieben, schicken wir sie genau in die Mitte. Ich werde das ziemlich schnell durchgehen, also zögern Sie nicht, das Video einfach anzuhalten und verschiedene Schritte in Ihrer Freizeit auszuprobieren. Als Erstes drücke ich L und schon wird das Linienwerkzeug aktiviert. Das siehst du hier oben, die Abkürzungen. Und ich werde einen Schlussstrich für mein Burger-Menü ziehen. Lass uns das auf 40 setzen. Und was ich jetzt tun werde, ist diesen Hit Shift Option oder so zu wählen . Und dann ziehe ich eine Kopie herunter. Und Sie können sehen, dass ich jetzt die direkte Größe sehen kann. Wenn du das nicht hast, kannst du es auch auswählen und einfach das Aufräum-Tool verwenden Jetzt wählen wir alle aus und ich werde sie ein bisschen größer machen, damit wir sie besser sehen können, also zwei Pixel Als Nächstes könnten Sie das in eine Gruppe umwandeln , sodass Befehl und G eine Gruppe erstellen würden. Auf der linken Seite siehst du eine Gruppe und du kannst sie Burger nennen. Und um ehrlich zu sein, für den Moment würde das ganz gut funktionieren. Wenn Sie dies später in einen Rahmen ändern möchten, können Sie einfach Ihre Gruppe auswählen und in Ihrem Eigenschaftenfenster auf der rechten Seite können Sie einfach zwischen Frames und Gruppen wechseln. Beachten Sie, dass die Gruppe mir das nicht erlaubt, wenn ich etwas mehr Platz haben möchte . Also, ich werde das vorerst in einen Rahmen umwandeln , und Sie können sehen, dass mir alles angezeigt würde, wenn ich es ausschneide, aber es wird einige Dinge abschneiden. Aber was wir dann tun können, ist einfach die Befehlstaste zu drücken, und Sie können die Größe dieses Rahmens jetzt nach Ihren Wünschen Lassen Sie uns nun die F-Navigation beenden , drücken Sie einfach F. Und anstatt einen Rahmen auszuwählen, werde ich einen Rahmen zeichnen, und ich werde ihn um den Burger herum zeichnen , den ich gerade gemacht Sie können sehen, ob ich es um ein Element herum zeichne, dann wird dieses Element automatisch innerhalb des Rahmens platziert, also bewegt es sich mit diesem Rahmen. Geben wir dem Hintergrund etwas Farbe, damit wir ihn besser sehen können Ich verwende nur meine Füllung und wähle eine etwas dunklere Farbe Stellen wir sicher, dass wir auch hier eine Füllung haben. Falls Sie keine Füllung haben, drücken Sie einfach auf Plus und Sie erhalten standardmäßig Weiß. Sie können hier immer noch Ihren Burger auswählen. Wenn du die Befehlstaste drückst, kannst du sogar tiefenselektieren, also unsere Striche. Am einfachsten ist es jedoch, die Eingabetaste zu drücken, wodurch alle untergeordneten Elemente ausgewählt werden. Anschließend können Sie das Ausrichtungswerkzeug verwenden, um die Mitte Ihrer Navigation, die Sie gerade erstellt haben, zu zentrieren. Als Nächstes folgen einige Texte. Drücken wir T, und ich kann einfach ein Textfeld zeichnen, wo immer ich das hinzufügen möchte Ich kann hier Text hinzufügen, und ich werde einfach den Text kopieren, den ich bereits geschrieben habe, und ich werde ihn hier einfügen Jetzt können Sie sehen, dass der Text automatisch formatiert wurde. Wenn du das ändern möchtest, könntest du das hier machen. Gewöhnen Sie sich an Ihrem Text immer automatische Höhe hinzuzufügen. Das bedeutet einfach, dass das , wenn ich einige Texte lösche oder wenn ich Text hinzufüge Textfeld automatisch reagiert Fügen wir den Rahmen für unsere Karte hinzu. Ich drücke einfach F und anstatt das voreingestellte Menü zu verwenden, zeichne ich diese Karte auf meine Leinwand. Ich füge einen Grundton für einen Effekt hinzu, sodass der Hintergrund einen Schatten erhält. Achten Sie darauf, dass Sie nichts sehen, was sicherstellt , dass Ihr Rahmen eine Füllung hat Wenn Sie nicht einfach auf das Pluszeichen klicken, wird ihm eine weiße Standardfüllung zugewiesen Sie können den Effekt auch ändern indem Sie auf das Effektmenü Ich werde diesen Bereich für das Bild zu meinem Rahmen hinzufügen, also drücke ich R und zeichne ein Rechteck. Wenn ich es auf meinen Rahmen zeichne, können Sie im Rahmenmenü sehen, dass es automatisch zum Rahmen hinzugefügt wird. Wenn ich doppelklicke, kann ich das in ein Bild ändern. Es gibt viele Meinungen darüber, ob ein Platzhalter für ein Bild ein Rahmen oder eine Form sein sollte Mach dir darüber nicht zu viele Gedanken. Es gibt kein Richtig oder Falsch. Beide Ansätze werden funktionieren. Im Allgemeinen verwende ich Formen in den meisten Fällen etwas häufiger als Rahmen , weil ich der Meinung bin, dass es einfacher ist , ihnen Bilder hinzuzufügen. In manchen Fällen macht ein Rahmen jedoch Sinn. Manchmal verwende ich sogar einen Rahmen mit einer Form im Inneren, wenn ich mit fortgeschrittenen Animations- und Zoomeffekten arbeite. Machen Sie sich an dieser Stelle nicht zu viele Gedanken darüber. Verwenden Sie, was für Sie am besten funktioniert. Jetzt fügen wir unsere Überschrift hinzu, also drücke ich T, damit ich mein Texttool erhalte und die Überschrift schreibe. Für meinen Text hier werde ich einfach faul sein und Text aus meinem Beispiel übernehmen. Beachten Sie jetzt, dass dies bereits auf automatische Höhe eingestellt ist, und ich werde es dabei belassen. Sie können es so anpassen, wie Sie diese Karte einrichten möchten. Ich werde diese Überschrift auch auf automatischer Höhe haben. Im Allgemeinen würde ich die automatische Breite für so etwas wie Schaltflächen verwenden, von denen ich weiß, dass sie nicht in eine zweite Zeile fließen wird. Und ich werde sie ein bisschen neu anordnen. Fantastisch. Nun, eine Sache, auf die ich hinweisen möchte, ist, dass wir hier Clip-Inhalte haben. Inhalt ausschneiden, lassen Sie uns hier einfach eine weitere Form zeichnen. Wenn ich, sagen wir, einen Kreis hätte, können Sie sehen, dass er nicht den vollen Kreis anzeigen würde . Wenn Sie den übergeordneten Frame auswählen, können Sie alles außerhalb Ihrer Karte sehen. Manchmal, wenn Sie keine Elemente sehen, vor allem, wenn Sie mit einer Gliederung von etwas arbeiten , dann stellen Sie sicher, dass der Inhalt Ihres Clips festgelegt ist. Um eine Kopie Ihrer Karte zu erstellen, wählen Sie einfach eine Karte aus, drücken Alt-Taste oder die Wahltaste und halten Sie gleichzeitig die Umschalttaste gedrückt. Dann wird es nur in die Zeile darunter kopiert und es bewegt sich nicht nach links und rechts. Bitteschön. Dein erstes Layout ist fertig. 16. 11 reverwendbare Raster mit Stilen: Lassen Sie uns einige wiederverwendbare Raster erstellen. Hier habe ich meine Blockseite und ich habe eine weitere detaillierte Seite, und ich habe eine weitere detaillierte Seite wenn ich auf diesen Artikel klicke Jetzt möchte ich beiden dasselbe Raster hinzufügen, um sicherzustellen, dass sie dem gleichen Gesamtlayout folgen. Um ein Raster hinzuzufügen, wählen Sie einfach einen Rahmen aus. Beachten Sie, dass dies bei jedem Frame funktioniert In diesem Fall wähle ich hier meinen übergeordneten Frame aus, der das Viewport darstellt, und klicke auf der rechten Seite auf Layoutraster Aber standardmäßig bekommst du dieses Pixelraster, aber das wollen wir nicht. Wir wollen Spalten. Klicken Sie auf das Symbol und wählen Sie dann aus der Drop-down-Liste Spalten aus Sie können die Anzahl ändern, sodass ich sie auf vier ändern kann, und ich kann auch einen Rand festlegen Also lass uns etwas wie 24 versuchen. Beachten Sie, dass ich immer mit Vielfachen von vier oder acht arbeite. Und Dn für die Gutter, ich werde mich auch für ein Vielfaches von acht oder 24 entscheiden Lassen Sie uns das ein bisschen auf 32 erhöhen. Jetzt gibt es verschiedene Arten von Gittern. Stretch ist wahrscheinlich die häufigste. Das heißt, wenn ich die Breite ändere , wird sie gestreckt, sodass die Spalte gestreckt und die Dachrinne und der Rand gleich bleiben Denken Sie daran, dass Sie über das Menü jederzeit zur Originalgröße zurückkehren können über das Menü jederzeit zur Originalgröße Wenn ich mich jetzt für die Mitte entscheide, bedeutet das, dass das Raster in der Mitte bleibt. Und ich müsste herausfinden, welche Breite ich hier brauchen würde. Sie müssen also ein bisschen rechnen, um herauszufinden, wonach Sie suchen. Bleiben wir bei unserem Design bei Stretch. Ich könnte jetzt dasselbe Raster auf meinen anderen Rahmen anwenden , indem ich diesen Vorgang einfach noch einmal durchführe, aber es ist viel einfacher und besser es als Stil zu speichern. Ich wähle den Frame aus, in dem sich mein Raster befindet. Wenn ich dann das Raster sehe , das ich gerade erstellt habe, klicke ich auf das Style-Symbol. Sie können jetzt auf das Plus klicken und es speichern. Ich nenne es Mobile Grid. Sie können hier eine weitere Beschreibung hinzufügen und dann den Stil erstellen. Wenn Sie auf die graue Leinwand klicken, wird dieser Rasterstil in Ihrer Übersicht gespeichert. Wenn du schreibst, klickst, dann kannst du es auch ändern oder löschen. Wenn wir es nun auf einen anderen Rahmen anwenden möchten, wählen Sie einfach diesen Rahmen aus. Und wenn Sie dann im Rastermenü den Mauszeiger darüber bewegen, wird das Stilsymbol angezeigt Sie können jetzt das Raster auswählen Ich kann jetzt damit beginnen, zum Beispiel meine Textfelder am Raster auszurichten zum Beispiel meine Textfelder am Raster auszurichten Beachten Sie, dass bei Dingen wie diesen Karten hier später auch das Layout sein wird. Das alles wird also etwas automatisierter funktionieren. Aber lassen Sie uns das vorerst von Hand machen. Ich kann den kleinen Zurück-Knopf hier hineinbewegen , so dass er sich am Raster ausrichtet Bei meinem Bild könnte ich wählen, ob ich möchte, dass dieses Bild an den Rand geht oder ob es im Raster platziert werden soll Wenn du Bilder auf dem Raster positionierst, achte immer darauf, dass du die Dateispalten verwendest, mach nichts wie das, es in der Mitte einer Spalte zu positionieren oder so. Im Moment werde ich also tatsächlich die volle Breite verwenden, und dann werde ich dasselbe mit meinen Textfeldern machen Stellen wir einfach sicher, dass sie gut im Raster sitzen. Sie können das Raster entweder über das Menü auf der rechten Seite ein- oder ausblenden . Wenn Sie den Mauszeiger darüber bewegen, wird das Si-Symbol angezeigt, oder Sie können die Tastenkombination und G verwenden 17. 12 Figma-Community und Plugins: Plug-ins und die Figma-Community. Wenn Sie nach Hause zurückkehren, dann auf der Startseite, werden Sie diesen kleinen Globus hier finden , der derzeit oben und ganz unten angezeigt wird Bitte beachten Sie jedoch, dass sich dies ziemlich häufig bewegt, sodass Sie ihn in Zukunft möglicherweise an anderen Orten finden werden. Wenn du darauf klickst, wirst du zur Figma-Community springen Und hier siehst du alle möglichen Dateien. Das können Präsentationen sein, Designdateien, die Sie verwenden können. Einige von ihnen sind kostenlos und andere können kostenpflichtig sein, aber die meisten von ihnen sind kostenlos. Nehmen wir zum Beispiel an, wir suchen nach einem Icon-Set, dann können wir einfach danach suchen. Und dann siehst du hier verschiedene Consets. Wenn dir einige davon gefallen, kannst du auf die Seite gehen, um sie ein wenig zu durchsuchen, sodass du eine kleine Vorschau davon bekommst , was hier passiert, und du kannst dann einfach auf In Figma öffnen klicken und es wird ein Duplikat dieser Datei in deinem FIMA-Konto erstellt Sie können auch nach Autoren suchen. Du könntest also zum Beispiel meine Seite in der Community durchsuchen, meine Seite in der Community durchsuchen, also tippe einfach Kristine Valor Und wenn du dann hier zu den Creators springst, gelangst du zu meiner Sie können auch den direkten Link verwenden , der ein Schrägstrich auf figma.com ist, und dann einfach das Handle verwenden, das in meinem Fall bei Moon Earning ist Hier findest du alle meine Ressourcen kostenlos und kannst sie einfach duplizieren und mit ihnen in deinem eigenen Figma-Konto spielen mit ihnen in deinem eigenen Eine andere Sache, die wir hier haben, sind die Plug-ins. Sie können sie entweder suchen oder hier oben haben Sie auch eine Plugin-Registerkarte, die Ihnen einige beliebte Plug-ins, Barrierefreiheit usw. zeigt . Schauen wir uns einfach an, was es uns für die Dateiorganisation bietet. Dann bekommst du eine Liste von Plugins. Sie können sehen, wie viele Personen es gerade verwenden, und dann können Sie es einfach in Ihrer Datei öffnen. Sie können Plug-ins auch direkt in Ihrer Designdatei öffnen. Gehen Sie in Ihr Aktionsmenü, und Sie können sie einfach hier in der normalen Suche suchen oder zu Plug-ins und Widgets springen, und dann können Sie auch nach jedem Thema suchen , das Sie interessiert. Ich möchte dir ein wirklich großartiges Plug-In namens HTML to Design zeigen . Sobald Sie das Plug-In sehen, doppelklicken Sie es einfach und es wird geöffnet. Was wir mit HTML to Design machen können, wir können einfach eine URL zu jeder Website hinzufügen und dann können wir aus einer URL diese Website in Figma erstellen Hier können Sie also die Seite sehen, die importiert wurde, und Sie können sehen, dass alles bearbeitet So kann ich zum Beispiel diese Navigation hier herausziehen und dann kann ich einfach damit arbeiten und ich kann hier reingehen, ich kann alle Texte und alles ändern Das ist also wirklich großartig, um mit jeder Website loszulegen, mit der Sie spielen möchten. 18. 13 Hinzufügen von Bildern zu deinen Designs: Hinzufügen von Bildern zu Ihren Designs. Es gibt verschiedene Möglichkeiten, Bilder zu Ihren Designs hinzuzufügen. Du kannst entweder ein Filmmenü verwenden und sie importieren, du kannst sie massenweise importieren, du kannst bestehende Bilder von deiner Zeichenfläche kopieren Sie können sie mit KI erstellen oder Sie können ein Plug-In wie Unsplash verwenden Die erste Option besteht also darin, einfach ein Bild über das Dateimenü hinzuzufügen Wählen Sie also Ihren Rahmen oder Ihre Form aus und springen Sie dann zur Füllung und wechseln Sie dann zum Bild. Sie haben jetzt die Möglichkeit, ein Bild auszuwählen, und Sie können dieses Bild einfach aus Ihrer Datei auswählen. Dies ist jedoch etwas langsam. Wir könnten diese Bilder also auch massenweise auswählen, Umschalttaste oder die Windows-Steuerung drücken und K drücken, und Sie können jetzt mehrere Bilder gleichzeitig auswählen. Sie sehen auf Ihrem Cursor eine Vorschau des nächsten zu platzierenden Bilds und die Anzahl der gespeicherten Bilder. Sie können es direkt auf der Leinwand hinzufügen oder Sie können in eine beliebige Form klicken, um das Bild zu platzieren. Möglicherweise haben Sie auch die Situation, dass Ihre Designdatei bereits Bilder enthält , die Sie wiederverwenden möchten. Jetzt müssen Sie sie nicht mehr exportieren und importieren. Sie können sie direkt von hier aus verwenden. Wählen Sie einfach das Bild aus, drücken Sie die Umschalttaste und C, und es wird ein PNG kopiert. Sie können es einfach einfügen , indem Sie die Befehlstaste oder die Strg-Taste drücken und es in eine andere Form bringen. Eine weitere Option ist, dass wir auch Bilder mit A generieren können. Sie können entweder einfach auf das Aktionsmenü klicken und dann hier ein Bild erstellen finden oder einen Rahmen oder eine Form auswählen und über das Füllmenü Bildfüllung auswählen, Bild austauschen und dann können Sie hier auch Bilder generieren. Und jetzt tippe einfach ein, wonach du suchst. Wenn dir mehr als ein Bild gefällt, kleiner Tipp, ziehe es einfach auf deinen Desktop und dann kannst du es speichern, und später kannst du es immer für andere Elemente verwenden. Die letzte Option, und eigentlich meine Lieblingsoption, ist die Verwendung eines Plug-ins. Öffnen Sie das Aktionsmenü, klicken Sie auf Plug-ins und geben Sie dann Unsplash Doppelklicken Sie darauf, um es zu öffnen, und Sie können entweder alles eingeben, wonach Sie suchen, oder Sie können einige der voreingestellten Kategorien verwenden Die meisten dieser Bilder haben eine hohe Auflösung und sind lizenzfrei Sie können einfach darauf klicken, um beliebiges Bild oder einen Rahmen in Ihr Design Lassen Sie uns also ein Bild zu unserem Design hinzufügen. Ein weiteres Plug-In, das genau wie Unsplash funktioniert und das ich auch sehr mag, ist Lumi Gehe einfach zu deinen Plugins und du kannst entweder Lumi oder das Unsplash-Plug-In wählen und es dann öffnen, Und dann kannst du hier nach den Bildern suchen, die dir gefallen. Lass uns einfach diesen nehmen und du kannst ihn dann direkt innerhalb deiner Form platzieren. Nun, wenn wir hier dasselbe Bild verwenden wollen, was wir tun können, wir können entweder dasselbe verwenden. Nehmen wir an, Sie schließen den Stecker und wissen nicht, wo Sie ihn gefunden haben. Dann können Sie mit der Tastenkombination, dem Umschalt-Befehl und C ein PNG kopieren, dann die andere Form oder den anderen Rahmen auswählen und es jetzt einfach hier einfügen. Wenn Sie die Auswahl des Bildes ändern möchten, doppelklicken Sie darauf, und Sie gelangen zum Bildmenü. Sie hier im Drop-down-Menü, das auf Füllen eingestellt ist, die Option Zuschneiden. Sie können das Bild jetzt verschieben. Sie können auch die Größe ändern, wenn Sie sich den Rändern nähern . Wenn Sie die Umschalttaste gedrückt halten, wird es proportional skaliert 19. 15 Duplikationsmethoden: In Figma willst du ziemlich viel kopieren und einfügen. Es ist also eine gute Idee, die verschiedenen Möglichkeiten zu verstehen , wie Sie duplizieren können Sie können an derselben Position einfügen, mehrfach einfügen, hier einfügen, zum Ersetzen einfügen oder duplizieren. Beginnen wir mit dem Einfügen an derselben Position. Dabei kopieren wir einfach ein Element, das an einer bestimmten Position auf einem Rahmen platziert wurde, wählen dann einen neuen Rahmen aus und fügen ihn dort ein. Wählen wir also unseren Header aus, drücken Command oder Control und kopieren, wählen wir einen neuen Frame aus. Und wenn wir es jetzt einfach mit den Befehlen Strg und V einfügen, wird es an genau derselben Stelle eingefügt. Wir könnten das auch mit mehreren Elementen machen, also können wir mehr als nur eines auswählen, einen Rahmen auswählen und es wird an genau derselben Stelle eingefügt, wirklich praktisch. Und das Tolle ist, dass das auch für Multi-Paste funktioniert. Wir können also genau das Gleiche tun und einfach mehrere Frames auswählen. Nehmen wir an, wir möchten, dass unsere Kopfzeile und unsere Schaltfläche hier unten auf jedem Frame an derselben Position platziert werden , und wir kopieren sie einfach, wir wählen alle Frames und wir fügen sie ein, und sie werden genau an derselben Stelle sein. Wenn wir eine andere Position wollen, können wir hier auch Einfügen verwenden. Also kopieren wir es auch, klicken dann aber mit der rechten Maustaste und wählen „Hier einfügen“ aus unserem Menü. Wählen wir also erneut unseren Kreis aus. Ich habe ihn kopiert, und jetzt wähle ich aus, wo ich ihn platzieren möchte, und ich klicke mit der rechten Maustaste auf Einfügen, und er wird genau an dieser Position platziert. Eine weitere sehr praktische Methode, die ich häufig verwendet habe , ist Einfügen zum Ersetzen. Auch hier kopieren Sie einfach das Element wie zuvor und drücken dann die Umschalttaste und R, oder Sie können auch mit der rechten Maustaste klicken und einfügen, um ein vorhandenes Objekt zu ersetzen. Also werde ich hier das Quadrat auswählen. Ich drücke Command oder Control und C, um es zu kopieren. Ich kann jetzt jedes andere Element auswählen und einfach Shift, Command oder Control und R drücken , und es wird ersetzt. Sie können auch mehrere Elemente auswählen und sie alle gleichzeitig ersetzen. Das letzte, das ich Ihnen zeigen möchte, ist ein Duplikat Sie werden sehen, dass ich es die ganze Zeit benutze. Um zu duplizieren, wählen Sie einfach ein Element aus, drücken Sie Alt und ziehen Sie dann eine Kopie heraus. Wenn Sie zusätzlich die Umschalttaste gedrückt halten, kopieren Sie es in dieselbe Zeile. Sobald Sie eine Kopie erstellt haben, können Sie einfach Befehl und D drücken und schon werden mehrere Kopien mit derselben Entfernung erstellt. Lass uns das ausprobieren. Also kann ich diesen Frame auswählen, T drücken und ich kann jetzt einfach eine identische Kopie herausziehen, aber Sie können sehen, wie sich dieser frei bewegt. Wenn ich dasselbe mache, aber auch die Shift-Taste gedrückt halte, dann kopiere ich in genau derselben Zeile. Und wenn ich einmal ein Duplikat erstellt habe, kann ich jetzt Befehl oder Strg und D drücken, und es werden weitere Kopien in genau derselben Entfernung erstellt. Wenn wir alle auswählen, drücken wir Shift und zwei, damit sie alle in der Mitte positioniert sind. Sie können auf der rechten Seite das Eigenschaftenfenster sehen , ich kann die Lücken zwischen ihnen anpassen. Das liegt daran, dass sie alle den gleichen Abstand haben, sie sind aufgeräumt und daher können Sie sie anpassen und sie mithilfe der kleinen Blasen auch umschalten 20. 16 Zeichnen in Figma: Sie können FIMA auch zur Illustration und zum Zeichnen verwenden. FIMA ist ein vektorbasiertes Programm. Wenn Sie schon einmal mit etwas wie Illustrator gearbeitet haben, wird Ihnen das sehr vertraut vorkommen Es ist wichtig zu beachten, dass FICMA in erster Linie für die Einrichtung des UI-Designs konzipiert ist in erster Linie für die Einrichtung des UI-Designs konzipiert Es geht nicht wirklich um Illustration, aber Sie können einige ziemlich gute Ergebnisse erzielen, wenn Sie beispielsweise Dinge wie Symbole einrichten möchten Sie könnten hier einfach Ihre Formen zur Veranschaulichung verwenden. Wenn ich eine Form zeichne und auf diese Form doppelklicke, dann sehe ich, dass ich ein anderes Menü erhalte und du darauf klicken kannst, sodass du diese neuen Werkzeuge erraten wirst Du wirst diese Kurven und solche Dinge bekommen. Jetzt möchten Sie wahrscheinlich Ihre eigene Illustration erstellen und daher wäre es sinnvoller, sich für Ihren Stift oder Ihr Stiftwerkzeug zu entscheiden. Wenn Sie Erfahrung mit Illustrationen haben und Dinge wie ein Trackpad und Stifte zu Hause haben, sollten Sie sich vielleicht für den Stift entscheiden. Er kann frei zeichnen. Wenn Sie jedoch in einer eher standardmäßigen Konfiguration mit einer Maus arbeiten , sollten Sie sich wahrscheinlich für das Pent-Tool entscheiden Das Pent-Tool ist etwas, an das Sie wirklich gewöhnt sein werden, wenn Sie zuvor mit Illustrationssoftware gearbeitet haben Fügen Sie einfach einen ersten Punkt auf unserer Leinwand hinzu, und dann erhalten Sie eine Linie Wenn Sie die Umschalttaste gedrückt halten, erhalten Sie eine gerade Linie. Lass uns das hier machen. Und deshalb können Sie dann jedes Symbol oder jedes beliebige Illustrationselement zeichnen , das Sie benötigen würden. Wenn Sie nun aus diesem Menü herausspringen, können Sie diese Punkte immer noch durch Doppelklicken abrufen und anpassen. Sie können auch die Bezier-Kurven abrufen. Doppelklicken wir, um zu unserer Abbildung zurückzukehren. Wenn Sie hier klicken, können Sie dann die Kurven abrufen und sie weiter manipulieren. 21. 17 Skalierung in Figma: Skalierung in Figma. Das Skalierungstool in Figma wird oft übersehen , ist aber manchmal sehr praktisch Hier habe ich eine Vektorillustration, und Sie können sehen, dass sie aus verschiedenen Formen besteht und diese Formen einen Strich haben, und diese Formen einen Strich haben der eine unterschiedliche Stärke hat. Manchmal sind es 28 und so weiter. Wenn ich das vergrößern will, könnte ich zum Rand gehen, bis Sie die kleine Roche hier sehen und dann ganz nach unten verschieben, um die Proportionen beizubehalten, und jetzt kann ich die Größe ändern Aber mit den Strichen funktioniert es einfach nicht richtig, geben mir nicht die richtigen Proportionen Ein viel besserer Weg, dies zu tun , wäre die Verwendung eines Skalierungswerkzeugs. Sie finden das Skalierungswerkzeug in der Werkzeugleiste direkt neben dem Verschieben-Werkzeug. Stellen Sie also sicher, dass Sie das Untermenü herausnehmen und dann hier die Skalierung sehen, oder Sie können auch eine Abkürzung k verwenden . Sie werden feststellen, dass der Fehler etwas anders aussieht, und dann auf der rechten Seite können Sie hier das Skalierungsmenü sehen. Im Skalenmenü können Sie also entweder einen Betrag hinzufügen, also das Zweifache der aktuellen Größe Wenn Sie beispielsweise erneut K drücken, gelangen Sie wieder hinein. Sie können auch eine bestimmte Höhe und Breite hinzufügen eine bestimmte Höhe und , sodass diese skaliert werden soll Sie können auch die Skalierungsrichtung wählen. Wir könnten es zum Beispiel von links unten wachsen lassen . Sie können auch auf den Cvas skalieren solange Sie sich im Skalierungswerkzeug Wählen Sie also einfach ein beliebiges Element aus und dann werden Sie einen neuen Fehler am Rand sehen, und während Sie sich im Skalierungswerkzeug befinden, wird es jetzt richtig skaliert Manchmal bleibt man im Skalierungswerkzeug stecken. Wenn Sie also nicht alle anderen Einstellungen finden, liegt das daran, dass das Skalierungswerkzeug immer noch geöffnet ist. Achte nur darauf, dass du es genau hier mit dem X schließt. 22. Teil 1: Lassen Sie mich Ihnen ein wenig über unser Kursprojekt erzählen. In dem Kursprojekt, das über den gesamten Kurs erstreckt, werden wir an einem Podcast-App-Design sowie an einem funktionierenden Prototyp dafür arbeiten Am Ende jedes Kapitels in Ihrer Figma-Arbeitsdatei finden Sie eine Eingabeaufforderung und einen Link, finden Sie eine Eingabeaufforderung und einen über den Sie zum Kursprojekt springen Das Kursprojekt ist eine Ergänzung zum allgemeinen Kurs. Das bedeutet, dass es absolut optional ist. Sie werden keine Informationen verlieren , wenn Sie nur die allgemeinen Klassen durchgehen. Aber lassen Sie mich Ihnen etwas mehr erzählen, bevor Sie sich entscheiden. Wenn Sie die Kursprojektdatei auf der linken Seite öffnen , werden Ihnen Seiten angezeigt. Auf der ersten Seite haben wir unsere Übungen. Sie können sehen, dass wir für jeden Abschnitt des Kurses eine Übung haben. Diese Übungen bauen aufeinander auf und werden mit Anleitungen geliefert. Stellen Sie sicher, dass Sie zuerst die allgemeinen Lektionen durchgehen, z. B. die Grundlagen von Figma oder Komponenten Und wenn Sie sich bereit fühlen, kehren Sie zur Kursprojektdatei zurück und fahren Sie mit den nächsten Schritten fort Beeilen Sie sich nicht, denn das wird Sie nur verwirren. Jeder der Schritte enthält einen Lösungsvorschlag. Beachten Sie, dass es im Design keine endgültige Lösung gibt. Es ist wirklich nur ein Vorschlag. Sie könnten sich etwas ganz anderes einfallen lassen , das genauso gut ist. können sich aber auch einfach meine Lösung schnappen und von dort aus weitermachen. Wenn Sie jemals auf der linken Seite der Seiten hängen bleiben, finden Sie das endgültige Design. Das ist wirklich die polierte und fertige Version. Sie finden auch eine Seite mit Komponenten und Anleitungen. Mach dir keine Sorgen, all das wirst du im Laufe des Kurses lernen . Kehren wir nun zu den Übungen zurück und schauen wir uns unseren ersten Teil an, der die Figma-Grundlagen enthält Ich versuche, diese Dateien auf dem neuesten Stand zu halten. Deine sieht vielleicht etwas anders aus. Alle wichtigen Informationen werden da sein. Keine Sorge. 23. Teil 1: In diesem ersten Teil werden wir aufgefordert, ein Wireframe zu erstellen Und Sie können sehen, dass es ein Bild davon gibt, wie es aussehen sollte, und Sie erhalten einige Anweisungen Sie können das auch wirklich einfach in Ihrer eigenen Zeit bauen. Auf der rechten Seite hier drüben finden Sie meinen Lösungsvorschlag. Das ist wirklich ein Drahtrahmen , durch den man sich klicken kann und im Ebenen-Panel genau sehen kann, wie ich das eingerichtet habe. Du musst es nicht genau so bauen, aber wenn du mal nicht weiterkommst, dann schau einfach mal nach oder so. Fortschrittsbalken hier, das könnte am Anfang etwas schwierig sein. Kopiere es einfach rüber. Es ist absolut in Ordnung. Die Idee dieser Übungen ist, dass du wirklich in dich hineinspringst und es herausfindest. Aber lassen Sie sich zunächst von mir ein wenig anleiten. Ich werde diesen ersten hier kopieren. Und ich werde es rüberbringen und neben meine Drahtrahmen legen , an denen ich arbeiten werde. Los geht's, ich werde das einfach direkt daneben platzieren. Lasst uns die hier aus dem Weg räumen. Lass uns das hier hinstellen. Das mag ziemlich kompliziert und ein wenig überwältigend aussehen , aber es sind eigentlich nur Formen und Text. Das ist alles, was wir während unserer Grundsitzung gemacht haben. Ich fange so an. Ich werde R drücken und diese Hintergrundform zeichnen. Halten Sie die Umschalttaste gedrückt , damit Sie eine gleichmäßige Form erhalten. Das ist mein Hintergrundbild hier hinten. Und ich werde das Gleiche noch einmal tun. Ich drücke erneut R, ich werde hier eine kleinere Form erstellen. Ich möchte nicht, dass sie dieselbe Farbe haben. Sie können von hier aus einfach auf ein beliebiges Grau klicken. Möglicherweise haben Sie hier unten etwas gespeichert. Es spielt keine Rolle , welche Farben Sie verwenden. Sie können auch den Farbwähler verwenden. Sie könnten also auch die Farbe verwenden , die ich in meinem Beispiel verwende Aber für Drahtrahmen ist das wirklich irrelevant. Jetzt werde ich den Text hinzufügen. Also wähle ich mein Textwerkzeug aus der Werkzeugleiste aus und klicke einfach an die Stelle, an ich es platzieren möchte, und fange an, den Podcast-Namen einzugeben. Ich werde das noch einmal duplizieren. Das alles haben wir im Unterricht gemacht. Wenn Sie sich nicht erinnern können, wie man dupliziert, springen Sie zurück zu den Lektionen. Es ist die Option „Verschieben und Ändern“. Und auf diese Weise kann ich direkt unten in derselben Zeile duplizieren. Ich werde das hier platzieren und ich werde es nach Künstler benennen. Ich kann es jetzt auswählen. Und dann könnte ich in der rechten Größe im Eigenschaftenfenster für Text diese Größe zum Beispiel auf Medium ändern und auch die Textgröße ändern. Zum Beispiel 216. Wenn ich den Text auswähle, kann ich die Füllung auch auf Schwarz ändern. Diese Schaltfläche hier oder dieses Etikett. Sie können sehen, dass es sich einfach um einen Rahmen mit einem Text darin handelt. Ich drücke und ich werde einen verschachtelten Rahmen zeichnen. Klicken Sie auf das Pluszeichen neben Phil, falls keine Pille dabei ist Ich gehe jetzt um die Ecken. Ich werde einfach den Text von einem Kollegen kopieren. Klicken Sie auf den Rahmen, fügen Sie die Größe ein und ändern Sie ihn. Einfach ziehen und positionieren. Und Sie können im Ebenenfenster sehen dass, wenn Sie den Rahmen auswählen, alles, was Sie darauf ziehen, automatisch in der Größe platziert wird , wenn Sie einen kleinen Schatten für die Schaltfläche haben möchten , und Sie können einfach rechts im Eigenschaftenfenster auf das Plus neben Effekten klicken . Und das wird hinzugefügt . In meinem Beispiel können Sie nun sehen, dass sich das alles in einem Frame befindet. Das ist alles gruppiert. Ich werde das Gleiche für mein neues Beispiel hier tun. Ich werde all diese Elemente auswählen. Jetzt drücke ich Command und G. Dadurch wird es eigentlich nach Drahtgittern gruppiert. Das ist ganz oder gar richtig. Ich kann diese Gruppe jetzt Held nennen. Aber du solltest vielleicht schon anfangen, in Frames zu denken, denn wir wissen, dass das die Superkraft von Igms ist Was können Sie tun, um das schnell in einen Frame umzuwandeln? Wechseln Sie zum Eigenschaftenfenster auf der rechten Seite und verwenden Sie statt einer Gruppe einfach einen Rahmen. Sie können auch Elemente auswählen und mit der rechten Maustaste klicken. Und dann seht ihr hier die Frame-Auswahl und einen Shortcut zu ihr könntet das auch auf einmal machen oder einfach einen weiteren Frame darum ziehen, am besten pausierst du das Video und probierst es dann selbst aus. Jetzt will ich, dass diese Überschrift hier vor Kurzem abgespielt wird, und wir können sehen, dass das 24 und mittel ist. Also, was ich tun werde, ist, das hier rüber zu kopieren. Oh, und übrigens, ich habe meine Grids nicht eingeschaltet Lass uns das machen. Lassen Sie uns dieses Paar und den Rahmen auswählen. Und dann kann ich auf der rechten Seite sehen, dass kein Raster gilt, aber ich habe bereits einen Rasterstil für Sie erstellt. Klicke auf die kleinen Punkte für Styles und füge einfach das mobile Grid hinzu. Jetzt kannst du es also sehen. Ich kann meine Bilder auch ausrichten. Lass uns das jetzt alt machen. Und hier bekommst du die schöne Entfernung damit du dich daran messen kannst. Ich werde diese Überschrift hier platzieren und ich werde sie kürzlich Plate nennen. Ich werde es auswählen und auf Medium umstellen. Ich möchte diese kleinen Karten hier erstellen. Für diese Karte werde ich eigentlich nur die kopieren, die ich schon habe. Es sieht so aus, als hätten sie so ziemlich die gleiche Größe. Ich werde diesen Namen runterziehen , weil er so aussieht, als ob das 16 ist. Wie viel ist das auch? 16. Okay, großartig. Also werde ich es jetzt einfach in den Podcast-Namen ändern. Ich werde bereits beide auswählen. Diesmal klicke ich mit der rechten Maustaste und sage Frame-Auswahl. Es ist dasselbe, wenn Sie es gruppieren und dann über das Drop-down-Menü hier ändern , oder Sie können einfach einen Rahmen darum zeichnen . Es spielt keine Rolle. Was du am Ende haben wirst, ist dieser Rahmen. Und in diesem Rahmen hast du dein Bild. Sie können diese natürlich umbenennen und schon haben Sie den Podcast-Namen. Nennen wir das hier Karte. Jetzt wollen wir es einfach duplizieren. Lassen Sie uns ein paar Kopien herausziehen. Und ich lasse immer die alte Taste gedrückt , damit ich die Entfernungen sehen kann. Und ich werde diese ganze Gruppe hier auswählen. Lass mich sehen. Eigentlich ja, das sind Einzelstücke in dem. Und ich kopiere einfach die ganze Gruppe und platziere sie hier. Und ich werde auch meine Überschrift kopieren. Und ich nenne das, vielleicht gefällt es dir, wenn du das Video hier nochmal pausierst und es selbst ausprobierst Wie ich schon sagte, vielleicht brauchst du das Video gar nicht. Vielleicht ist es für Sie einfacher, einfach diese Referenz zu haben und von dort aus aufzubauen. Okay, das Letzte, was wir jetzt brauchen ist diese Leiste hier unten, die Tap-Leiste. Ich drücke F und zeichne einen Rahmen dafür. Geben wir dem eine Hintergrundfarbe. Lass uns auf Plus klicken. Und ich werde eigentlich nur die Farbe aus meinem Beispiel hier auswählen . Jetzt könnte ich diese Elemente einfach hinzufügen. Aber wie Sie in der Tab-Leiste hier sehen können, habe ich sie bereits in Unterkategorien unterteilt, sodass es später einfacher wird, wenn wir Reaktionsfähigkeit und ähnliches hinzufügen möchten Sie müssen es nicht so machen, aber ich werde Ihnen zeigen, wie Sie es bereits in diesen drei Abschnitten einrichten Am einfachsten ist es, einfach Ihre Tab-Leiste zu kopieren und sich dann unsere Felder hier oben zu merken, sie können Berechnungen durchführen. Ich werde also addieren, geteilt durch drei. Auf diese Weise erhalte ich den genauen Betrag für eines meiner Symbole, den ich später hier platzieren möchte. Jetzt hole ich mir einfach ein paar Texte. Dieser Text hier ist eigentlich viel kleiner. Das sind nur 12. Ich werde das auf 12 ändern. Ich werde das hier drinnen platzieren . Dann werde ich einfach zuschlagen und einen Kreis zeichnen. Das ist also nur ein Platzhalter für ein Symbol, das später da sein wird Gehen wir etwas näher ran. Wir können unser Ausrichtungstool verwenden. Ups, das ist eigentlich nicht das, was ich wollte, aber nun, lass uns das platzieren Gib ihm etwas mehr Platz. Nennen wir diesen Link oder dieses Symbol oder wie auch immer Sie es nennen möchten. Lass es uns jetzt wieder hineinlegen. Ich kann es jetzt einfach auf diese Weise duplizieren. Ich erhalte drei dieser Links, die genau die richtige Größe haben. Ich nenne diesen hier mein Zuhause. Beachten Sie, dass das wie auf der linken Seite ist. Was ich tun möchte, ich möchte zurückspringen. Ich werde das in die Mitte stellen. Lassen Sie uns die Ausrichtung des Textes so ändern, dass er zentriert ist. Und ich werde das mein Zuhause nennen. Eigentlich werde ich dem Ganzen den Platz geben, der mir zur Verfügung steht, weil ich später vielleicht einen anderen Wortlaut hier habe später vielleicht einen anderen Wortlaut , damit ich sichergehen kann , dass es genug Platz hat Dann nennen wir das hier. Nennen wir das gerettet. Das ist es. Wir haben unseren ersten Bildschirm eingerichtet. Lass uns zum zweiten gehen. Nun, lassen Sie uns tatsächlich auf diesen doppelklicken und ihn unser Zuhause nennen. Bringen wir jetzt unseren zweiten vorbei. Lass uns das einfach kopieren und hier einfügen. Was ich hier machen werde, ist so ziemlich dasselbe. Ich werde das rüberkopieren. Ich werde diese Elemente einfach loswerden . Ich brauche sie nicht. Ich habe diesen kleinen Zurück-Knopf. Ich werde nur etwas Text überschreiben. Lass mich Das ist richtig, wo ist es damals? Ich habe hier auch den Namen der Playlist und den Podcast-Namen. Ich füge einfach wieder mein Layoutraster hinzu, und ich werde es tatsächlich einfach kopieren und in der Mitte platzieren. Und ich werde es einfach an die Ränder ziehen. Ich werde sicherstellen, dass bei einem längeren Namen genügend Platz vorhanden ist. Ich werde ihn auswählen und den Text zentrieren. Dann habe ich etwas Text kopiert. Ich werde hier faul sein und ich werde mir das einfach schnappen und es hier platzieren , weil ich weiß, dass es nur Text ist. Und dann muss ich mehr lesen. Also lass mich das mehr lesen lassen. Ich wähle es aus und wenn du möchtest, dass es unterstrichen wird, gehe in deinen Texteinstellungen auf die kleinen drei Punkte, und hier findest du den unterstrichenen Wenn du doppelklickst, dann wird es einfach von den vier Breiten zu einer anderen Breite wechseln , wenn du das möchtest, weil das eigentlich ein bisschen wie eine Schaltfläche ist Okay, großartig. Jetzt muss ich nur noch die Folgen hinzufügen. Ich kopiere einfach ein Quadrat von denen, die ich schon hier habe. Ich werde es etwas kleiner machen. Wie Sie sehen, muss es nicht im Raster , weil es wie ein eigenes Element ist. Dann werde ich dieses kopieren. Ich werde es wieder links platzieren. Mal sehen, wie groß der ist. Es ist sehr klein, es sind zehn. Sie können entweder alle Großbuchstaben eingeben oder was auch immer. Sie können auch wieder diesen zusätzlichen Einstellungen springen und sie in Großbuchstaben ändern Dann kopiere ich diesen hier und platziere ihn hier. Jetzt werde ich das Gleiche tun. Lassen Sie mich die Einstellungen des Textes so ändern , dass alles auf der linken Seite ist. Und ich werde das unten platzieren. Eigentlich sollten wir auch einen schönen Abstand von acht haben. Ich werde das nochmal kopieren. Sie können hier sehen, dass ich etwas mehr Platz gelassen habe , weil etwas länger sein könnte. Was ich hier gemacht habe, ist, dass ich sehen kann, dass das automatisch ist , das ist eine Zeilenhöhe von 24. Wenn du darauf klickst, kannst du es sehen. Ich gebe eine Größe an. Lass mich das einfach aufziehen. Ich gebe diesen zwei Zeilen, die in etwa 48 passen. Wenn das etwas zu weit fortgeschritten ist, mach dir keine Sorgen. Ziehen Sie es einfach auf, damit es Ihren Bedürfnissen entspricht. Das ist jetzt ganz unten. Das will ich nicht. Ich werde hier die Richtung ändern , um es nach oben zu bringen. Jetzt kann ich es etwas besser ausrichten. Schauen wir uns mal an, was sie hier haben. Sie haben Auto und 48, wahrscheinlich müssen sie das nur loswerden. Okay, jetzt brauche ich nur noch diesen kleinen Play-Button hier. Das ist ein Rechteck. Gehen wir zu unseren Formen. In unseren Formen wählen wir ein Polygon. Lass uns eins zeichnen. Und das ist alles. Nun, das gehört offensichtlich zusammen, also werde ich das alles auswählen. Eigentlich gruppiere ich es diesmal, weil ich möchte, dass sich das, wie Sie hier sehen können, über die gesamte Breite erstreckt. Ich werde tatsächlich zuschlagen und einen Rahmen darum zeichnen. Nun, das ist eine On-Frame-Episode , nennen wir sie auch Episode. Großartig. Jetzt können wir das einfach duplizieren. Beachten Sie, dass ich noch mehr Folgen haben möchte, zum Beispiel hier unten. Das gilt für den sichtbaren Bereich. Denken Sie daran, dass wir, wenn wir einen übergeordneten Rahmen auswählen und den Clip entfernen, alles sehen können, was sich darunter befindet Sie können das also auch in meinem Beispiel tun, und Sie können sehen, dass sie hier eigentlich nur zwei haben Aber ja, alles, was größer als dein Rahmen ist, würde sichtbar werden. Es ist sehr wichtig, sich immer daran zu erinnern. Das Letzte, was ich brauche, ist meine kleine Bar hier unten. Lass uns das einfach kopieren. Wählen Sie den Rahmen aus, und wie wir wissen, wird er an der richtigen Stelle eingefügt. Großartig, also sind wir mit dem zweiten fertig. Okay, großartig. Jetzt brauchen wir nur unseren letzten. Lass uns einen Blick darauf werfen. In unserer letzten Folge wurde festgestellt, dass dies auf einen eigenen Rahmen gelegt wird und wir dann einfach ein Quadrat haben. Wir haben Text, diese Playbar hier. Es ist einfach ein Rahmen mit einer anderen Form im Inneren. Wenn das zu kompliziert ist, dann kopiere einfach den , den ich hier gemacht habe. Und hier haben wir wieder Text. Hier können Sie sehen, dass es sich einfach einen Rahmen mit abgerundeten Ecken und einem kleinen Strich handelt. Und dann habe ich mein Dreieck , das ich erstellt habe, hier platziert . Schauen Sie sich also an, ob Sie das mit der angegebenen Lösung selbst herausfinden können . 24. Teil 1: Als zweiten Teil unserer Grundlagen wollen wir diesen Drahtrahmen zum Leben erwecken und einige Bilder und Farben hinzufügen. Ich habe dir das Material zur Verfügung gestellt. Also hier hast du alle Bilder. Hier hast du auch einige Icons. Und ich verwende einen Farbverlauf. Das kannst du benutzen. Ich werde dir gleich zeigen, wie , aber das musst du nicht. Sie können natürlich auch das ungeschminkte Schwarz oder jedes andere Bild verwenden das ungeschminkte Schwarz oder jedes andere Bild Okay, lass uns hier rüber springen. Was ich tun werde, ist mein Drahtgestell zu kopieren. Sie können entweder die Lösung verwenden, an der Sie gearbeitet haben , oder Sie können die verwenden, die ich Ihnen zur Verfügung gestellt habe. Was ich tun werde, ist , das neben meine Lösung erneut zu kopieren . Das macht es mir ein bisschen einfacher, alles zu packen. Ich brauche die Gitter eigentlich nicht, also lass uns sie ausschalten Ich werde es einfach Stück für Stück machen. Ich werde hier mit meiner Helden-Sektion beginnen und lassen Sie uns unsere Bilder auch etwas näher bringen. Und diesen kleinen Farbverlauf hier werde ich in der zweiten verwenden. Okay, großartig. Also fange ich mit dem ersten Bild an. Ich schnappe mir das, halte die Umschalt-Taste gedrückt und sehe, dass es sich bei dieser Kopie um ein PNG handelt. Wenn Sie sich immer noch nicht sicher sind, wie Sie Bilder verwenden sollen, kehren Sie bitte zum Video zurück, in dem wir die verschiedenen Optionen zur Verwendung von Bildern finden Kopieren Sie entweder ein vorhandenes Bild, Sie können auch einen beliebigen Rahmen oder eine beliebige Form auswählen Klicken Sie auf Füllen, dann auf Bild und wählen Sie ein Bild aus. Oder ihr könnt natürlich den Unsplash-Plug verwenden, den wir uns während der Sessions angeschaut haben Ich werde das noch einmal kopieren, Shift-Befehl, und das ist meine Lieblingsoption Und dann drücke ich einfach den Befehl V und kopiere ihn hierher. Und ich werde das auch mit diesem Kleinen hier machen. Jetzt können Sie sehen, dass ich mehr Kontrast möchte. Deshalb habe ich dieses Overlay hier erstellt. Eigentlich finde ich, dass es in meinem Beispiel ein schöneres Overlay ist, weil es die gesamte Größe des Bildes erstreckt Ich werde das kopieren. Ich werde es hier auf dem Bild platzieren. Jetzt muss ich nur noch zu meinem Ebenen-Panel gehen und ich habe den Bildhintergrund. Ich habe das, okay, das sieht gut aus. Und ich habe das alles noch oben drauf. Also werde ich den Text auswählen. Ich werde das einfach auf Weiß ändern. Das sieht nett aus. Mach dir nicht zu viele Gedanken über Farbverläufe Wir verwenden sie, nicht zu sehr das neue Augendesign, aber wenn du es dir ansehen willst, dann klicke einfach auf den Farbverlauf, den ich erstellt habe Und du kannst sehen, dass du hier einfach anstelle von Bildern auch Farbverläufe erstellen kannst Sie könnten auch die Farben ändern. Ich werde meine Tab-Leiste zur Seite legen und den Rest meiner Bilder hinzufügen und ich werde sie einfach alle mit meinen netten kleinen Abkürzungen kopieren . Dann möchte ich die Hintergrundfarbe ändern. Ich werde mir schon meinen Text holen. Lassen Sie mich das einfach ausschneiden, damit ich den gesamten Text herausnehme. Wenn Sie die Umschalt-Taste und die Befehle auf der Windows-Steuerung gedrückt halten, können Sie mehrere Texte auswählen und sie anschließend tiefenselektieren Da dies verschachtelt ist, wählen wir das alles aus. Wenn nicht nur eins nach dem anderen ausgewählt, gleiches Ergebnis. Und ich werde mich hier für etwas Weißes entscheiden und ich werde dasselbe für die Schlagzeilen tun. Okay, großartig. Also werde ich jetzt meine Hintergrundfarbe ändern. Ich mache das über die Füllung des übergeordneten Rahmens. Nochmals, ich werde es einfach aus meinem Beispiel hier oben auswählen. Lass es uns noch einmal ausschneiden. Das sieht ziemlich gut aus. Und das ist viel einfacher als du dachtest, oder? Ich muss nur meine Tap-Leiste hier unten sortieren. Ich habe ein paar Icons für dich hinzugefügt. Lass mich mal schauen. Die Ikonen, die wir anführen werden, sind das Haus, die Suche und das Herz. Ich werde den Play-Button schon kopieren. Lass uns das hier drüben platzieren. Lassen Sie uns jetzt zunächst unsere Navigation einrichten. Das sieht alles gut aus. Ich werde zuerst die Farbe ändern , die Hintergrundfarbe. Ich werde auch hier aus meinem Beispiel auswählen Dann wähle ich alle Texte aus und ändere sie in Weiß. Ich werde diese kleinen Punkte loswerden, die ich hier hatte. Auch hier gilt: Halten Sie immer Shift und Command oder Control gedrückt. Auf diese Weise können Sie mehrere Elemente tiefenselektieren oder einfach eins nach dem anderen auswählen, falls das immer noch zu schnell geht. Jetzt füge ich hier Little Home hinzu. Ich werde das durch meine Suche ersetzen. Und ich werde meinen Button hier reinstecken, großartig. Jetzt muss ich nur noch diese auswählen, weil ich auch möchte, dass diese Füllfarbe wie in meinem Beispiel aussieht. Okay, großartig, jetzt kann ich es wieder hier hinzufügen Ich werde es einfach kopieren. Und ich kann es schon hier einfügen. Jetzt machen wir einfach dasselbe für diesen. Ich nehme dieses Bild und füge es hier ein. Ich werde das wieder loswerden und ein anderes Symbol verwenden, das mir zur Verfügung gestellt wurde. Ich habe hin und her. Lass uns sie auch kopieren. Bringen wir sie her. Und ich werde das hier platzieren. Schauen wir uns das Beispiel an, weil Sie sehen können, dass ich das bereits auf einem Rahmen platziert habe das Beispiel an, weil Sie sehen können, dass ich das bereits , der sich über die gesamte Breite erstreckt , um es später viel einfacher zu handhaben Ich werde einfach diesen unsichtbaren Rahmen drum herum haben. Okay, großartig. Jetzt gehe ich so wie es ist. Ich werde das vorerst einfach in die Länge ziehen . Ich werde meinen Text auswählen. Jetzt ist alles weiß, ich kann die Hintergrundfüllung wieder ändern. Ich mache das ziemlich schnell durch. Es ist wirklich nur eine Referenz für Sie Nehmen Sie sich Zeit, nehmen Sie die vorgeschlagene Lösung und versuchen Sie wirklich, das in Ihrer eigenen Zeit herauszufinden. Jetzt möchte ich hier an meinen Folgen arbeiten. Ich habe eine Play-Schaltfläche mit den vorgeschlagenen Symbolen. Ich werde dem auch eine Hintergrundfarbe geben, nur damit ich es sehen und ein bisschen besser damit umgehen kann. Im Moment werde ich dieses Dreieck loswerden und meine Play-Taste verwenden. Sie können es schon gut positionieren, müssen es nicht. Und dann wähle den Text aus. Dann ändern wir die Füllung auf Weiß. Dieser hier auch. Stellen Sie sicher, dass wir alles haben. Ich werde das so lassen, wie es ist, weil ich es dann ausfüllen kann. Ich werde das nur für einen Moment beiseite legen. So viel gibt es hier nicht. Ich kann mir jetzt einfach das Bild schnappen. Ich kann es in meine Formen legen. Sobald Sie den Namen des Frames sehen, ist er aus diesem Frame herausgesprungen Was Sie tun können, wenn Sie einen weiteren hinzufügen möchten , dieser aber immer wieder herausspringt, und ihn dann einfach auswählen Machen Sie einfach eine Kopie, nur wirklich, wirklich etwas weiter unten. Und dann benutze es mit den Tasten deiner Tastatur, so bleibt es drinnen. Oder organisieren Sie es einfach in Ihrem Ebenenbedienfeld neu. Okay, jetzt können wir den übergeordneten Frame auswählen . Lass es uns noch einmal ausschneiden. Wir können unsere Bar wieder hier platzieren. Am einfachsten ist es, einfach eine zu kopieren, die bereits oben platziert ist, und sie hier wieder einzufügen. Lass mich diesen hier einfach aufräumen und ihn schön platzieren. Wir könnten die Entfernungen, die wir hier haben, auch ein bisschen organisieren Entfernungen, die wir hier haben, auch ein bisschen Gehen wir nun zum letzten , unserem Overlay Ich werde mir von hier aus die Hintergrundfarbe holen. Beachten Sie nun, dass es sich um einen eigenen Rahmen handelt. Nennen wir das Overlay. Das enthält alle Informationen, denn wenn wir später auf ein Lied klicken, wird es quasi hier reinrutschen und so dastehen Für dieses Overlay habe ich eine etwas, etwas hellere Farbe gewählt Ich werde das auch einfach aus meinem Beispiel auswählen. Lass uns diesen hier loswerden. Wir werden das Gleiche tun wie hier. Wir haben einen kleinen Abwärtsknopf , den wir uns schnappen werden. Ich werde schon einen Rahmen darum legen. Eigentlich war das ein Rechteck. Drücken wir noch einmal. Wir brauchen einen Rahmen, kein Rechteck. Jetzt können wir es herumplatzieren und jetzt können Sie sehen, dass es für das Bild hier gut hineingelegt ist . Ich kopiere einfach mein Bild entweder von einem vorhandenen Design oder von meinen Mustern hier unten. Jetzt kann ich meinen Text auswählen und ihn hier weiß machen. Ich werde eigentlich nur meinen Play-Button benutzen. Ich werde das hier drüben platzieren . Erinnerst du dich, wie wir skalieren können? Erinnerst du dich genau daran? Wir müssen K drücken, die Skalentaste. Und jetzt kann ich entweder einen beliebigen Wert hinzufügen oder ihn vergrößern. Ich werde also doppelt so groß sein müssen oder so. Okay, großartig. Der letzte Teil ist da, mein Text. Achten Sie immer darauf, dass Sie wieder aus dem Skalierungswerkzeug herausspringen . Und jetzt können Sie Ihr allgemeines Eigenschaften-Panel sehen. Also werden wir die Farbe dafür ändern. Jetzt werde ich mir diese kleine Scheune hier schnappen. Auch hier gilt: Wenn Sie eine Tiefenauswahl vornehmen möchten, drücken Sie die Befehlstaste oder die Strg-Taste. Und jetzt wähle ich einfach meine Highlight-Farbe aus. Mal sehen, ob dieses Grau auch, ich denke, es ist etwas heller. Irgendwie habe ich meinen kleinen Kreis verloren. Ich nehme das einfach aus meinem Beispiel. Du kannst einen Kreis auch wieder zerstören, und ich werde ihn hier platzieren. Nun, wenn das so platziert wird, wenn Sie jemals so etwas haben, dann liegt das daran, dass dieser Rahmen Inhalt ausgeschnitten hat Du könntest ihn also einfach ausschneiden. Ich habe ihm nur etwas mehr Platz gegeben , damit meine kleine Blase hier perfekt passt Wie Sie sehen können, erstellen wir ein ziemlich beeindruckendes UI-Design, indem wir einfach allgemeine Formrahmen , einige Bilder ausfüllen und mit der Farbe spielen verwenden, einige Bilder ausfüllen und mit der Farbe spielen. Übrigens, seien Sie nicht frustriert, wenn es nicht so schnell geht , wie ich es Ihnen in diesem Video gezeigt habe Ich mache das schon eine ganze Weile. Außerdem nehme ich das auf, damit ich aufhören und Teile herausschneiden kann. Und das ist einfach ein Video , das dir im wirklichen Leben helfen soll. Das wird einfach länger dauern. Also setz dich hin, nimm dir Zeit und spiel damit. 25. KOMPONENTEN 01 Komponenten und Instanzen in Figma: Lernen wir eine der wichtigsten Funktionen von Figma kennen wichtigsten Funktionen Sobald Sie mit dem Entwerfen beginnen, Sie feststellen, dass Sie werden Sie feststellen, dass Sie dieselben Elemente immer wieder entwerfen Also Dinge wie meine Navigation und meine Karten. Denken Sie übrigens daran, Ihren übergeordneten Frame zu entschlüsseln um den gesamten Inhalt zu sehen Anstatt diese Elemente neu zu erstellen und zu versuchen, mit allen Änderungen Schritt zu halten, ist es viel praktischer, eine Art von Vorlage zu haben, die wir infigma Und von dieser Komponente aus können Sie Kopien von Infigma, wir nennen das eine Instanz, erstellen, die Sie in Ihrem gesamten Design verwenden können . Also lass uns das einrichten Ich werde diese Navigation hier herausnehmen , weil ich es mir sofort zur Gewohnheit machen möchte , meine Komponenten von meinem Design zu trennen. Um die Navigation in Komponenten umzuwandeln, wählen Sie sie einfach aus und klicken Sie im Eigenschaftenbereich auf der rechten Seite auf das Komponentensymbol. Beachten Sie, dass dies zu einem violetten Umriss und einem Komponentenzeichen am Namen führen wird einem violetten Umriss und . Und Sie können dieselbe Änderung im Ebenenbedienfeld sehen. Sie können eine Komponente auch mit der Tastenkombination Alt- oder Wahltaste und K oder einfach mit der rechten Maustaste klicken und Komponente erstellen wählen. Jetzt wollen wir eine Instanz, also eine Kopie dieser Komponente, in unserem Design verwenden . Es gibt auch mehrere Möglichkeiten, wie wir das tun könnten. Sie können eine Instanz erstellen, indem Sie sie einfach kopieren und einfügen oder was etwas schneller geht, halten Sie die Taste gedrückt und ziehen Sie dann einfach eine Kopie heraus, die Sie dann in Ihr Design einfügen können Beachten Sie, dass die Instanz ebenfalls einen violetten Umriss hat, aber eine leere Rautenform andere Möglichkeit, eine Instanz zu erstellen , besteht darin, zum Bedienfeld „Elemente“ zu springen Es befindet sich also direkt neben Ihrem Ebenenbedienfeld. Dort werden alle Komponenten angezeigt , die Sie in dieser Datei oder später erstellt haben und Datei oder später die Sie mit einer externen Bibliothek verbunden haben. Sie können diese Komponente einfach herausziehen und sie dann auf Ihrem Design platzieren. Lassen Sie uns also unsere Navigation von der Artikelseite entfernen und sie dann auch durch unsere Instanz ersetzen. Neben dem Assets-Menü können Sie auch die Suchfunktion verwenden, zu Assets springen und dann einfach nach dem Namen suchen. Machen wir dasselbe mit unserer Karte. Und dieses Mal möchte ich eine Abkürzung verwenden. Wenn Sie jemals eine Abkürzung vergessen haben, einfach mit der Maus über das Komponentensymbol und dann wird es Ihnen hier angezeigt In meinem Fall ist das also Option Command K. Lassen Sie uns nun zum Bedienfeld „Elemente“ springen , wo ich sehen kann, dass meine Karte als Komponente gespeichert wurde , und ich sie in mein Design einfügen kann Ich möchte auch die andere Karte ersetzen, also sollten wir sie loswerden. Übrigens kann ich auch einfach direkt von einer vorhandenen Instanz kopieren . Wenn du Shift gedrückt hältst und Alt gedrückt hältst, kopierst du direkt darunter in dieselbe Zeile. Es kopiert jedoch auch den Inhalt meiner Komponente. Also ich mache meine Komponente normalerweise ziemlich neutral, also würde ich dieses Bild hier loswerden und es durch Klicken auf Plus durch eine neutrale Füllung ersetzen . Und dann meine Überschrift, ich werde auch einfach Überschrift nennen. Ich versuche also generell, alle meine Komponenten möglichst neutral zu halten, und dann füge ich die Informationen, den Inhalt in mein Design ein. Lassen Sie uns herausfinden, wie das geht. 26. 02 Überschreiben von Instanzen: Lasst uns lernen, was und wie man in unseren Instanzen überschreibt. Hier haben wir also eine Reihe von Komponenten, und wir verwenden Instanzen dieser Komponenten in unserem Design Sie können dies sehen, indem Sie sich das Ebenenbedienfeld ansehen, und Sie können die leere Rautenform sehen. Wenn Sie jemals die Originalkomponente sehen möchten, klicken Sie auf der rechten Seite, direkt neben dem Komponentennamen, direkt neben dem Komponentennamen, auf Gehe zur Hauptkomponente, und es wird zur ursprünglichen Komponente gesprungen , mit der Sie diese Instanz eingerichtet haben. Deshalb lasse ich meine Komponenten normalerweise ziemlich neutral und beschreibend Aber in meinem Design möchte ich natürlich etwas Inhalt hinzufügen, also möchte ich diese grauen Hintergründe in Bilder umwandeln und eine Überschrift hinzufügen Für meine Überschrift könnte ich also einfach doppelklicken und sie dann überschreiben Ich kann dasselbe für meine Bilder tun. Ich kann einfach zu Füllen gehen und dann zum Bild wechseln und sie importieren, oder ich kann meine Tastenkombination mit diesem Umschalt-Befehl und K verwenden, und ich werde diese Bilder massenweise importieren. Ich kann sie jetzt einfach in die Formen einfügen. Ich will die Cloud auch hier haben. Ich wähle das mit meiner Tastenkombination Umschalt-Befehl und C aus, wodurch ein PNG kopiert wird, und ich kann es jetzt einfach hier in die Form einfügen. Möglicherweise gibt es jedoch einige Elemente, die Sie eigentlich nicht überschreiben möchten Zum Beispiel diese Zurück-Schaltfläche hier, ich möchte immer, dass sie zurückgerufen wird Ich kann also einfach meine Komponente auswählen und dann den Text auswählen, bei dem ich fest bleiben möchte. in meinem Ebenenfenster Wenn ich in meinem Ebenenfenster mit der Maus darüber fahre, kann ich dieses kleine Schloss sehen und dann diese Ebene sperren Moment wäre im Design niemand in der Lage, auf diesen Text zu klicken und ihn zu ändern Das Tolle an der Einrichtung Ihres Designs mit Komponenten und Instanzen ist, dass Sie Ihre Komponenten trotzdem selbst dann entwerfen könnten, wenn Sie dies überschreiben würden Ihre Komponenten trotzdem selbst dann entwerfen könnten, wenn Sie Hier möchten wir zum Beispiel die Einstellung vielleicht ein wenig ändern Möglicherweise möchten wir den Text vergrößern, und Sie können sehen, dass alle Instanzen folgen werden. Außerdem einige dramatischere Layoutänderungen. Nehmen wir an, wir möchten unser Menü nach links verschieben, sodass alle Instanzen folgen. Zwei kleine Kommentare, Sie fragen sich vielleicht, warum ist diese Komponente hier, diese hintere Komponente über die gesamte Breite angeordnet, warum erstreckt sie sich über die gesamte Breite und hat den ganzen Raum um sie herum? Du musst es nicht so machen. Sie könnten auch einfach den Text nehmen und ihn in eine Komponente umwandeln und das ist Ihre Schaltfläche. Ich mag es so sehr. Auf diese Weise weiß ich bereits, dass dies die Entfernung ist. Ich muss es nur direkt unter meiner Navigation platzieren, und ich muss mir keine Sorgen machen, dass der Abstand zwischen den Bildern gleich ist, wenn ich mehr Seiten erstelle. Aber du kannst gerne deinen eigenen Weg finden , wie du das für dein Design einrichten kannst. Die andere Sache, die Sie sich vielleicht fragen , ist, was ist mit dem Text? Muss das nicht auch eine Komponente sein? Nun, du könntest Text einrichten, wie zum Beispiel hier, wo es Sinn macht , wo der Text ein Link ist, oder das könnte ein Intro sein, wo du mehr Details hinzufügen könntest, vielleicht Icons oder so Vielleicht haben Sie eine festgelegte Komposition und machen daraus eine Komponente Aber kopieren Sie einfach Text, nur Standardtext in Ihrem Design wie diesem, muss überhaupt kein Bestandteil sein. 27. 03 Was man außer Kraft setzen sollte und was nicht: Was Sie überschreiben können und was Sie überschreiben sollten. Jetzt bietet Ihnen Figma viele Optionen zum Überschreiben. Sie können Farben, Bilder, Text, Stile, Opazität, Effekte wie Schatten und Unschärfe und Sichtbarkeit überschreiben Opazität, Effekte wie Schatten und Unschärfe und Sichtbarkeit Aber nur weil Sie theoretisch überschreiben können, empfehle ich nicht, all diese Ich empfehle generell, nur Text und Bilder zu überschreiben, also alles, was aus einer Datenbank stammen würde Wenn Sie weitere Änderungen wie eine Hintergrundfarbe wünschen, dann wäre dies eine neue Version dieser Komponente. Also würde ich dafür eine weitere Komponente einrichten. Sie können diese Versionen später zu einem Komponentensatz mit Varianten kombinieren . Wir werden das zu einem späteren Zeitpunkt des Kurses behandeln. 28. 04 Rückgängig machen von Komponenten und Überschreibungen: Komponenten und Überschreibungen rückgängig machen. Hier habe ich eine Komponente und eine Instanz, und Sie können sehen, dass ich in meiner Instanz einige Dinge überschrieben habe, wie das Bild, den Strich und den Hintergrund Was ist nun, wenn ich damit nicht zufrieden bin? Vergewissern Sie sich, dass Sie die Instanz ausgewählt haben Dann können Sie rechts im Eigenschaftenbereich den Namen der Instanz sehen. Weiter rechts können Sie drei kleine Punkte sehen, das Menü mit mehr Aktionen. Genau hier siehst du die Optionen zum Zurücksetzen. Wir könnten entweder einfach einzelne Elemente zurücksetzen , wie zum Beispiel den Strich zurücksetzen, oder wir können auch die Karte auswählen und alles zurücksetzen. Schauen wir uns an, was wir sonst noch in diesem Menü finden. Wir könnten also auch zur Hauptkomponente springen, was zur Hauptkomponente springen, bedeuten würde, dass wir hier landen würden. Wir könnten dafür eine zusätzliche Komponente erstellen. Wenn ich also hier klicken würde, können Sie sehen, dass dies nur eine weitere Komponente wäre. Achten Sie zu Beginn darauf, dies nicht auf einer bestehenden Instanz zu verwenden , denn was Sie erwarten würden, ist eine weitere Kartenkomponente, aber was sie tut, packt die Instanz in eine andere Komponente namens card, also verschachtelt sie, und das ist wahrscheinlich nicht das, wonach Sie suchen Wenn Sie sich also mit Komponenten nicht wirklich auskennen, versuchen Sie, sich vorerst davon fernzuhalten Wir können die Instanz trennen. Jetzt musst du vorsichtig mit diesem sein. Trennen Sie keine Instanzen, wenn Sie in einem Designsystem arbeiten Wenn Sie jedoch nur Ihr eigenes Design erforschen und zwischen den Dingen hin und her wechseln, ist es absolut in Ordnung, dies zu verwenden Aber was passiert, nehmen wir an, Sie haben nur eine Komponente und Sie haben diese versehentlich erstellt. Jetzt gibt es im Eigenschaftenfenster keine Möglichkeit , nur zum ursprünglichen Zustand eines Frames zurückzukehren. Sie können eine Instanz herausziehen und die ursprüngliche Komponente löschen. Wählen Sie die Instanz aus und stellen Sie fest, dass Sie dadurch auch die Möglichkeit haben, eine Komponente wiederherzustellen. Das sind wirklich gute Neuigkeiten, falls Sie jemals versehentlich eine Komponente löschen Dann können Sie einfach hier klicken und Ihre ursprüngliche Komponente wird wiederhergestellt. Im Moment ist es nicht das , wonach wir suchen. Was wir wollen, wir wollen nur den Originalrahmen davon. In diesem Fall würden Sie jetzt Instanz verwenden und dann hätten Sie wieder einen einfachen Frame. 29. 05 Verschachtelungskomponenten: Das Tolle an Komponenten in Figma ist, dass man sie auch verschachteln kann Verschachteln bedeutet, dass wir zwei Komponenten haben und dann eine Instanz einer Komponente erstellen und sie in einer anderen Komponente platzieren Nehmen wir dieses Beispiel hier. Ich habe eine Navigation, ein Anmeldeformular und nur eine Standardkarte. Ich werde diese drei Elemente in Komponenten umwandeln. Kleiner Tipp: Wenn Sie mehr als ein Element ausgewählt haben, im Drop-down-Menü „Weitere Optionen können Sie im Drop-down-Menü „Weitere Optionen“ mehrere Komponenten gleichzeitig erstellen. Ich kann jetzt Instanzen herausziehen und sie für mein Design verwenden. Ich werde einfach diese Navigation hier und diese Karte als Beispiel verwenden . Beachten Sie jedoch, dass ich dieselbe Schaltfläche in allen Komponenten wiederverwende dieselbe Schaltfläche in allen Komponenten Es empfiehlt sich also , die Schaltfläche herauszunehmen und eine eigene Komponente für die Schaltfläche zu erstellen Ich werde jetzt die zuvor verwendeten einzelnen Schaltflächen löschen und sie durch eine Instanz meiner Button-Komponente ersetzen , die ich gerade erstellt habe. Ich kann den Text jetzt überschreiben, also melde dich hier in der Navigation an, melde dich an und abonniere meine Workshop-Karte Und wie Sie sehen können, spiegelt sich das alles auf der rechten Seite in meinem Design Lassen Sie uns nun unsere Hauptschaltflächenkomponente ändern. Lassen Sie uns ein bisschen einen Radius hinzufügen und die Farbe ändern. Wie Sie sehen können, wirkt sich jede Änderung an der Hauptkomponente auf das gesamte Design aus. Es spielt keine Rolle, ob es in einer Komponente verschachtelt ist oder ob es sich um eine Instanz einer verschachtelten 30. 06 Komponentensets mit Varianten: Figma-Varianten. Manchmal stellen Sie möglicherweise fest, dass Sie Variationen einer Komponente benötigen Hier habe ich ein Beispiel, bei dem ich eine Standardversion einer Karte und eine Hover-Version einer Karte Der einzige Unterschied besteht darin , dass dies eine Hintergrundfarbe hat Sie könnten also sagen, nun, ich könnte einfach diese Hintergrundfarbe in meiner Instanz hinzufügen und sie überschreiben. Bitte gewöhnen Sie sich daran, Layoutänderungen oder Änderungen in der Variante nicht zu überschreiben Wir wollen nur inhaltliche Änderungen wie Bilder oder Text überschreiben inhaltliche Änderungen wie Bilder Dies ist eine neue Variante dieser Karte. Daher muss es sich um eine eigene Komponente handeln, damit spätere Entwickler erkennen, dass sie genau dafür programmieren und planen müssen. Theoretisch könnten Sie es nun einfach so verwenden und aus zwei separaten Komponenten bestehen. In Figma gibt es jedoch eine nette zusätzliche Organisationsebene, Komponentensatz mit Varianten bezeichnet wird Auf diese Weise können Sie verschiedene Versionen derselben Komponente gruppieren verschiedene Versionen derselben Komponente gruppieren Beachten Sie, dass ich die Namenskonvention für Schrägstriche verwende. Sie heißen bereits identisch, sie heißen „ card forward slash default“ und dann „card forward slash und dann „card forward slash Das erste, was hier steht, wäre der Komponentenname und dann der zweite Name nach dem Schrägstrich, das wäre die Eigenschaft Wenn ich jetzt diese beiden Karten auswähle, kann ich auf der rechten Seite sehen, Komponenten als Varianten kombiniert werden Wenn ich darauf klicke, wirst du sehen, dass Figma diesen lila gepunkteten Umriss erzeugt Das Tolle daran ist, Sie jetzt einfach eine Instanz herausziehen können Oder Sie können einfach das Assets-Bedienfeld sowie jede andere Komponente verwenden . Es zeigt Ihnen die erste Variante. Wenn Sie auf diese Instanz klicken, sehen Sie im rechten Bereich mit den Größeneigenschaften ein kleines Drop-down-Menü. Mit diesem Drop-down-Menü können Sie jetzt zwischen den verschiedenen Varianten in Ihrem Komponentensatz wechseln . Jetzt heißt das einfach Property One. Sie können auch auf Ihren Komponentensatz klicken und dann auf die Eigenschaft doppelklicken Jetzt können Sie sie beispielsweise State nennen. Sie könnten weitere Varianten hinzufügen. Nehmen wir an, Sie möchten so etwas wie einen deaktivierten Zustand Öffne das einfach ein bisschen und springe dann hier zu deiner ersten oder auch deiner zweiten Variante, und du wirst dieses kleine Plus-Zeichen hier unten sehen Klicken Sie darauf und es wird eine weitere für Sie erstellt. Nun, was wir tun können, ist , diesem Objekt einfach eine Opazität von 50% zu geben und es dann als inaktiv zu bezeichnen Was ich jetzt tun muss, ist den Staat zu benennen. Es heißt automatisch nur Status drei, aber ich werde das auf inaktiv ändern. Wenn ich jetzt meine Instanz auswähle, können Sie sehen, dass ich in der Drop-down-Liste zwischen dem neuen Status und den beiden Status wählen kann , die ich zuvor erstellt habe. Übrigens, falls Sie Ihre Elemente noch nicht in Komponenten umgewandelt haben , gibt es auch eine Verknüpfung, sodass Sie mehrere Elemente auswählen können Dann erscheint ein kleines Drop-down-Menü neben dem Komponentenzeichen in Ihrer oberen Leiste. Verwenden Sie dieses Drop-down-Menü und wählen Sie Komponentensatz erstellen. Dadurch wird der Komponentensatz sofort erstellt. Jetzt habe ich nicht die richtige Namenskonvention mit dem Schrägstrich verwendet die richtige Namenskonvention mit dem Schrägstrich Ich kann das jetzt auch machen, damit ich dieser einen Karte einen Namen geben kann Dann gehe ich rein und hier habe ich meine eigene Karte, und ich möchte diese als Standard bezeichnen, und ich möchte, dass meine zweite Karte HVA heißt Und ich kann erneut auf meinen Komponentensatz klicken , um ihn in den Status zu ändern Wenn ich jetzt eine Instanz erhalte, können Sie sehen, dass diese genauso funktioniert wie zuvor und dass mein Hova- und Standardstatus eingebettet 31. 07 Komponenten auf die eigene Seite verschieben 2: Wie können wir unsere Komponenten auf ihre eigene Seite verschieben? Hier habe ich meine Komponenten und ich verwende Instanzen dieser Komponenten in meinem Design hier. Es ist in Ordnung, Ihre Komponente direkt neben Ihrem Design zu speichern , während Sie noch an Ihren Designs arbeiten. Aber wenn Sie fertig sind und wissen, wie Sie Ihre Komponenten einrichten möchten, ist es an der Zeit, ein wenig aufzuräumen und einen eigenen Bereich für Ihre Komponenten zu finden . Es gibt fortgeschrittenere Techniken und Sie könnten Ihre Komponenten in externen Bibliotheken speichern. Aber in einem kleinen Projekt wollen wir sie vorerst einfach auf einer eigenen Seite speichern. Gehen Sie also links oben Ihre Datei und klicken Sie auf die Plus-Schaltfläche. Dadurch wird eine neue Seite geöffnet, und Sie können diese Seite als Komponenten aufrufen. Wir können zu unserer ursprünglichen Seite zurückkehren, die wir jetzt auch Design nennen können. Und wenn wir nun einfach diese Komponente kopieren, zur Komponentenseite springen und sie einfügen würden , dann würde das natürlich eine Instanz einfügen. Also wollen wir das nicht. Wie können wir es also von der Designseite auf die Komponentenseite verschieben? Was Sie tun müssen, ist, entweder mit der rechten Maustaste zu klicken und dann können Sie hier „Zur Seite wechseln“ sehen, und dann wird Ihnen die Seite angezeigt , die Sie gerade erstellt haben, oder eine bessere Technik besteht darin , Befehl und X zu verwenden, und dadurch wird die Komponente abgeschnitten. Jetzt können Sie zur Komponentenseite springen und die Komponente hier einfügen. Wenn wir jetzt zu unserer Designseite zurückkehren, können wir sehen, dass, wenn wir hier auf diese Instanz und dann auf unser Komponentenzeichen neben dem Instanznamen klicken , wir zur Hauptkomponente und zur neuen Seite springen. Großartig. Machen wir das auch für die restlichen Komponenten. Wählen wir sie alle aus, geben ein X an, um sie auszuschneiden, und fügen sie dann in unsere Komponentenseite ein. Wenn wir zum Design zurückkehren, können Sie sehen, dass alle Verbindungen intakt sind. Übrigens sieht man manchmal, dass Leute kleine Symbole vor den Namen setzen. Sie können sie einfach hinzufügen, indem Sie entweder den Steuerbefehl und die Leertaste drücken und die Leertaste Dann finden Sie hier verschiedene Symbole. Hier sind einige, die ich zuvor für das Design verwendet habe. Ich würde gerne so etwas wie diesen Regenbogen verwenden. Für meine Komponenten gibt es tatsächlich, wenn du ziemlich tief in deine Emoticons gräbst, ich denke hier nach, du findest ein Komponentenzeichen oder etwas, das wie ein Komponentenzeichen aussieht, und ich verwende dieses sehr gerne 32. 08 Komponenten organisiert: Die Komponenten organisiert halten. Nehmen wir an, Sie arbeiten an Ihrem Design und haben eine separate Seite für Ihre Komponenten erstellt. Jetzt haben Sie alle Ihre Komponenten hier, aber im Moment sind sie ein bisschen durcheinander. Stellen wir also sicher, dass wir selbst, andere Designer und Entwickler, die unsere Datei eingeben würden, verstehen, was vor sich geht. Lassen Sie uns sie also zunächst ein wenig gruppieren. Hier drüben habe ich meine allgemeinen Icons. Dann habe ich meine Karte. Und dann habe ich hier meine Komponenten, die mit Navigation zu tun haben. Sie können also die Kopfzeile, die Tableiste, verschachtelte Elemente und diese Symbole sehen , denen es sich nur um die Leistensymbole mit Klebeband handelt Und dann weiter, ich habe meine Knöpfe. Ich möchte für jeden von ihnen einen eigenen Bereich erstellen. Und nein, wir verwenden Abschnitte und keine Frames, auf denen unsere Komponenten gespeichert werden. Sie finden Abschnitte in der Werkzeugleiste direkt neben Frames, oder Sie können einfach die Tastenkombination Shift und S verwenden, zeichnen Ihre Abschnitte um die Cluster herum zu zeichnen, die Sie erstellt haben. Und ich kann auf den Namen des Abschnitts doppelklicken und ihm einen Namen geben. Ich werde diesen hier Navigation nennen. Lassen Sie uns zum Bedienfeld „ Elemente“ springen und sehen, was passiert ist, und stellen Sie sicher, dass Sie die Option „Unterordner anzeigen“ aktiviert haben Ich werde zum Listenformat wechseln, damit das leichter zu erkennen ist. Sie können sehen, dass alle meine Komponenten nur auf der obersten Ebene aufgelistet sind und dass ein Ordner für meine Navigationselemente erstellt wurde ein Ordner für meine Navigationselemente Ich werde das auch für den Rest meiner Komponenten tun . Ich drücke Shift S und ziehe einen Abschnitt um meine Karte. Ich mache dasselbe für meine Symbole und noch einen letzten für meine Buttons. Schauen Sie sich jetzt mein Asset-Panel hier an. Wenn ich das jetzt umbenenne, habe ich eine Karte, ich habe Symbole und ich habe Schaltflächen. also diese Abschnitte erstellen, können Sie sehen, dass ich in meinem Assets-Bedienfeld jetzt Unterordner habe und es einfacher ist, meine Komponenten zu finden Eine weitere Sache, die ich an Abschnitten liebe , ist, dass du, wenn du den Namen des Abschnitts auswählst, neben dem Abschnitt dieses kleine Symbol mit der Aufschrift „Bereit für die Entwicklung“ siehst Aufschrift „Bereit für die Entwicklung Wenn Sie darauf klicken, erscheint diese grüne Blase. Wenn wir nun in den tauben Modus übergehen, sodass sich Ihre Entwickler Ihre Designs ansehen würden, dann können Sie sehen, dass dadurch ein alter Ordner entsteht , in dem den Entwicklern mitgeteilt wird, welche sind Ihrer Komponenten oder Designs bereits bereit für die nächsten Entwicklungsschritte Machen Sie es sich also zur Gewohnheit, Ihre Komponenten in einem dafür vorgesehenen Bereich auf Abschnitten zu speichern , die Sie dann als entwicklungsbereit markieren können Zunächst speichern wir unsere Komponenten auf einer separaten Seite. Wenn Sie jedoch einen Pro-Plan oder höher haben und in einem größeren Team arbeiten, Sie möglicherweise auch feststellen, dass die Komponenten in einer separaten Datei gespeichert sind und wir die sogenannten gemeinsam genutzten Team-Bibliotheken verwenden, und wir die sogenannten gemeinsam genutzten Team-Bibliotheken verwenden um mit ihnen zu arbeiten. Da unser System immer fortschrittlicher wird, können Sie auch sehen, dass Sie diesen Abschnitten weitere Informationen hinzufügen können . Lass dich deswegen nicht zu sehr stressen. Fangen Sie klein an und organisieren Sie sich in Abschnitten . Zusätzliche Informationen können Sie jederzeit zu diesen Abschnitten hinzufügen. 33. Teil 2: Komponenten: Wenn Sie sich mit Komponenten, Instanzen und Varianten nicht wohl fühlen , können wir jetzt einspringen. Im zweiten Teil unseres Kursprojekts wollen wir das von uns erstellte Design in ein komponentenbasiertes, wiederverwendbares Design umwandeln. Sie können entweder Ihre Lösung aus dem ersten Teil verwenden oder Sie können einfach meinen Lösungsvorschlag von hier oben kopieren, was ich für Sie getan habe. Ich gehe meinen Entwurf durch und ziehe dann einfach die Elemente heraus , von denen ich denke, dass sie als wiederverwendbare Komponenten sinnvoll wären . Jetzt gibt es niemanden, der richtig oder falsch ist, es liegt an dir, und du kannst das auch ändern, oder in Zukunft Gegenstände anders verschachteln. Aber wir müssen irgendwo anfangen. Ich werde dir zeigen, wie ich das angehe. Ich ging Stück für Stück. Ich habe zum Beispiel mit meiner Helden-Sektion angefangen, weil ich dieses Bild hier wiederverwende. Ich habe diesen inneren Teil tatsächlich herausgenommen. Ich habe das alles ausgewählt. Lassen Sie mich hier tatsächlich etwas näher kommen. Ich wähle das Bild, den Text und die Schaltfläche und drücke den Befehl G oder klicke mit der rechten Maustaste und verwandle es in einen Rahmen. Ich nehme das jetzt auseinander, du kannst hier unten sehen, ich habe das gerade Info aufgerufen. Also das habe ich hier erstellt. Dann habe ich dasselbe für die anderen Elemente gemacht. Ich habe die obere Leiste herausgenommen, dann die untere Leiste für das Overlay. Also das ist das hier. Ich habe es Stück für Stück durchgemacht. Also dieses Bild, dann habe ich meine Karten, offensichtlich habe ich hier meine Elemente angetippt. Es liegt eigentlich an dir, wie du das hier einrichten willst. Zum Beispiel verwende ich das als eine Komponente. Sie könnten dies auch als eine Komponente haben. Und loser Text, wie gesagt, es gibt kein Richtig und Falsch. Ich finde es einfach etwas komfortabler , da ich diesen Teil wahrscheinlich noch einmal verwenden werde . Und ich habe beschlossen, dann dasselbe für die Playbar zu tun. Dieser gesamte Kontrollbereich ist also eine Komponente. Auch hier könnten Sie dies später als verschachtelte Komponente verwenden Dies als verschachtelte Komponente liegt ganz bei Ihnen, aber lassen Sie es uns vorerst einfach halten In dieser Datei habe ich jetzt meine endgültige Lösung. Wenn Sie zu Seiten gehen, sehen Sie das endgültige Design und Sie sehen auch eine Komponentenseite. Hier können Sie also alle Komponenten sehen, wie ich sie organisiere, einrichte, benenne und so weiter. Und das verwende ich in meinem endgültigen Design. Ich schlage also vor, dass Sie sich nicht mit meinen Komponenten verwechseln lassen , indem Sie das alles einfach in eine neue Datei kopieren. Lassen Sie uns tatsächlich meine Beispiele auswählen und potenzielle Komponenten heraussuchen, die ich erstellt habe. Und lassen Sie uns zu einer neuen Designdatei springen und diese einfach hier einfügen. Ich mag es sehr, wenn mein Hintergrund etwas heller ist. Und das kannst du übrigens ändern. Wenn du auf die Leinwand klickst, dann siehst du hier oben auf der Seite, dass du die Farbe ändern kannst. Ich finde das einfach ein bisschen bequemer. Jetzt können Sie Ihre eigene Datei mit Ihren Komponenten haben ohne mit derselben Benennung verwirrt zu werden. Ich kann entweder jede dieser Komponenten einzeln auswählen und sie dann in Komponenten umwandeln, oder ich kann sie alle auswählen. Klicken Sie auf ein kleines Drop-down-Menü und erstellen Sie mehrere Komponenten. Kein Komponentensatz, das ist etwas anderes, wie wir jetzt wissen, sondern mehrere Komponenten. Nun, ich verschachtele einige dieser Komponenten, zum Beispiel die Icons. Ich muss das nur bereinigen, weil diese Komponente nicht wissen wird , dass Sie sie verschachteln wollen Ich werde hier nur eine Instanz von diesem, von diesem aufrufen Ich werde diese Elemente jetzt hier durch die verschachtelten Gegenstücke ersetzen , damit alles schön und sauber bleibt Das würden wir tun, und lassen Sie mich für alle Symbole zum Beispiel nach unserer Play-Schaltfläche hier suchen unserer Play-Schaltfläche Wir würden das auch durch eine Instanz ersetzen, und wir haben hier dieselbe. Sie können also schon sehen, dass wir es wieder verwenden, was wirklich nett ist, wenn wir etwas an der Play-Schaltfläche ändern würden. Das wird überall gleich sein. Dies könnte immer noch ein skalierter Play-Button sein, oder Sie könnten dies als eigene Komponente haben , wiederum liegt bei Ihnen Okay, jetzt müssen wir diese Designs einrichten, wieder mit den Komponenten Nun, das klingt mühsam, ist aber eigentlich ziemlich schnell. Also lass uns das machen Lassen Sie uns das loswerden, und ich werde einfach unser Cover hierher ziehen und dann unsere Informationen. Und dann werde ich hier dasselbe tun. Ich werde die Dosis löschen und sie durch Instanzen ersetzen. Was wir natürlich tun müssen, ist, dass wir unsere Bilder wieder platzieren müssen. Außerdem werde ich das wahrscheinlich etwas aufgeräumter machen , als ich hier arbeite. Halte Abstand und so, aber tu das nur, um es dir schnell zu zeigen Halte es so. Wir brauchen unsere Bilder. Lass uns wieder hierher gehen. Und wir können unsere Bilder einfach in diese Datei kopieren . Wir haben sie zur Hand. Denn was ich sowieso tun würde, ich werde wahrscheinlich die Bilder in meiner Komponente loswerden Achten Sie auch darauf, immer das Bild aufzunehmen und nicht unsere kleine Verlaufsüberlagerung, die wir Jetzt müssen wir eine Füllung hinzufügen. Das ist in der Tat ein bisschen mühsam. Wir müssten diese Bilder erneut platzieren. Wir würden sie in unseren Komponenten schön und neutral haben. Und dann müssten wir in unserem Design unsere Bilder neu Aber auf diese Weise können wir unser Design ziemlich schnell wieder einrichten, da Sie natürlich alle Änderungen sehen werden , denn jetzt, wo es auf Komponenten basiert, wird es einfach folgen und es wird wirklich einfach sein , alles auf dem neuesten Stand zu halten Dann schnappen wir uns einfach auch unsere Tab-Leiste. Sie können einfach so sehen, dass ich jetzt dasselbe Design als komponentenbasiertes Design habe. Ich würde dasselbe tun, damit meine anderen Seiten funktionieren. Es ist in Ordnung, alles auf einer Seite zu haben, aber denken Sie daran, wir möchten, dass unsere Komponenten unter Seiten gespeichert werden. Stellen Sie sicher, dass Sie eine eigene Seite mit dem Namen Komponenten erstellen. Sie können Ihre Komponenten jetzt dorthin schicken, indem Sie entweder alle auswählen, mit der rechten Maustaste klicken und zu Seite und Komponenten wechseln. Oder Sie können sie ausschneiden, was Befehl ist und X nicht Befehl und Kopieren. Es muss x sein. Und du kannst sie jetzt hier einfügen, sie behalten die Verbindungen bei. Wenn Sie zum Beispiel hier klicken, können Sie jetzt auf das kleine Komponentensymbol klicken und es wird zu Ihrer Hauptkomponente auf der Seite springen. Denken Sie daran, dass wir unsere Komponenten in Abschnitten speichern möchten. Abschnitte befinden sich hier oben unter Frames. Wir wollen Abschnitte erstellen, zum Beispiel 14 Symbole, und dann alle unsere Symbole hier oben platzieren, dann eines für die Navigation und so weiter. Sie können Ihre Übungsdatei unter Komponenten und Anleitungen aufrufen. Hier bekommst du eine Vorstellung davon, wie ich meine Komponenten organisiere. Ich verwende übrigens ein kleines Dateiverwaltungssystem, das ich erstellt habe. Du musst das nicht benutzen, aber du kannst es benutzen. Ich habe hier Schlagzeilen und kleine Seifenblasen. So kann ich umschalten, ob etwas läuft oder gerade im Entstehen ist. Und ich habe auch ein paar Sticky Nodes, um Kommentare hinzuzufügen. Denken Sie auch daran, dass wir hier Komponentensätze haben. Ich habe jetzt unsere Komponenten organisiert, wir erstellen sie. Und ich habe meine Backbar, meine Over-Liber-Bar, ziemlich ähnlich, sodass ich sie als Varianten kombinieren kann Wenn ich sie zum Beispiel in meinem Design verwende, dann kannst du hier sehen, dass ich ein kleines Drop-down-Menü habe, um zwischen ihnen zu wechseln Das musst du nicht tun. Aber es ist schön, wenn Sie ähnliche Artikel haben und diese so organisieren möchten, wie wir es in unseren vorherigen Sitzungen besprochen haben. Letztlich besteht unser Design ausschließlich aus Instanzen, außer vielleicht ein bisschen Text hier und da. Und denken Sie daran, dass wir in Fällen, die wir überschreiben können, ältere Bildfüllungen überschrieben haben, also ältere Bilder hinzugefügt Und das Gleiche können wir auch mit Text machen. Wir können hier zum Beispiel den Namen von Alben ändern, wenn Sie diese kleinen drei Punkte hier haben möchten. Wenn etwas zu lang ist, dann kannst du das tun. Kehren wir zu unseren Komponenten zurück. Sie können dies tun, indem Sie den Namen auswählen und dann auch zu den Extras gehen. Und hier unten findest du den Text, der mit kleinen Punkten abgeschnitten wird. Denken Sie daran, dass jede Änderung an einer Komponente, lassen Sie uns zum Beispiel diese hier umdrehen, einer Änderung in der Instanz führt. 34. 01 Einführung in Variablen: Einführung in Variablen. Eine Variable ist ein symbolischer Name für ein Datenelement. Es ist also wie ein Platzhalter. Nehmen wir an, wir haben eine Variable x und weisen sie der Farbe Rot zu Wir können es dann in unserem gesamten Design verwenden. Sobald wir unsere Variable x in die Farbe Blau ändern, behalten wir also den Variablennamen bei, ändern aber den Variablenwert, dann würde alles in unserem Design folgen. Wir verwenden immer noch Komponenten. Wir haben unsere Komponenten, aber innerhalb und um diese Komponenten herum gibt es viele Dinge wie Abstände und verschiedene Farben, die wir verwenden werden Für all das werden wir Variablen verwenden. Kurz gesagt, Komponenten sind wiederverwendbare Objekte. Variablen sind wiederverwendbare Eigenschaften , die wir auf diese Objekte anwenden können. Klingt alles immer noch ein bisschen abstrakt. Mach dir keine Sorgen. Lass uns reinspringen und es selbst ausprobieren, dann wird es viel, viel klarer werden. 35. 02 Arbeiten mit Farbvariablen: Arbeiten mit Farbvariablen. In unserem Design haben wir normalerweise eine festgelegte Farbpalette, und wir möchten sicherstellen, dass alles in unserem Design dieser Palette folgt. Jetzt, wo ich mein Design hier habe, können Sie sehen, dass ich Rot verwende, aber einige Rottöne sind etwas anders. Ich könnte jetzt all die verschiedenen Elemente auswählen, meinen Farbwähler verwenden und dann loslegen und die richtige Farbe auswählen Das wäre jedoch ziemlich mühsam. Irgendwann möchte ich vielleicht auch dieses Rot hier in eine andere Farbe ändern Deshalb nenne ich meine Farben auch nicht beim Namen, also nenne ich sie auch nicht Orange, Rot und Blau. Ich gebe ihnen semantische Namen, damit ich sie jederzeit ändern kann Deshalb nenne ich sie primär für meine Markenfarben und gebe ihnen eine Zahl. Dadurch habe ich genug Platz, um beispielsweise einen weiteren Ton zwischen 20 und 50 hinzuzufügen, und ich habe einige neutrale Auch hier könnte ich weitere Töne zwischen 30 und 90 hinzufügen zwischen 30 und 90 Sie können ihnen auch einen anderen Namen geben, zum Beispiel Call to Action oder Hintergrund. Achte nur darauf, dass es semantisch ist. Um diese Farben wiederzuverwenden, richten wir sie nun als Variablen ein, die wir auf unser Design und unsere Komponenten anwenden können Um Ihre Variablen zu öffnen, stellen Sie sicher, dass Sie auf den grauen Canvas-Bereich klicken und dann auf der rechten Seite lokale Variablen sehen können. Wenn Sie auf das Symbol klicken, wird ein Modus geöffnet. Um eine Variable zu erstellen, klicken Sie auf Variable erstellen und wählen Sie dann Farbe. Jetzt nenne ich das einfach 120. Jetzt kann ich meinen Shortcut verwenden, um mehr zu erstellen. Ich werde Shift und Enter gedrückt halten, und ich nenne das 150, ich werde Shift drücken und erneut Enter drücken, und ich werde 80 wählen. Sie könnten auch das Drop-down-Menü hier unten verwenden , um weitere Variablen zu erstellen. Um nun einen Wert hinzuzufügen, klicken Sie einfach hier auf dieses Feld und wählen Sie dann einen Farbwähler und wählen Sie Ihren Wert entweder aus dem Stylesheet, das Sie eingerichtet haben, oder direkt aus Ihren Designs Lassen Sie uns auch unsere neutralen Farben erstellen. Ich nehme noch einen mit 90. Dann verwende ich wieder mein Tastenkürzel und nehme 3010 und Null Und jetzt mache ich dasselbe. Ich werde sie einfach aus dem Stylesheet auswählen , das ich bereits eingerichtet habe. Wenn Sie den Mauszeiger über Ihre Variable bewegen, Sie auf der rechten Seite sehen Sie auf der rechten Seite das hinzugefügte Variablenzeichen Sie können hier auf dieses kleine Symbol klicken und jetzt können Sie es hinzufügen, weitere Informationen hinzufügen und auch den Gültigkeitsbereich festlegen Geltungsbereich bedeutet, dass er nur für bestimmte Felder verfügbar sein wird . Großartig. Jetzt haben wir unsere Variablen erstellt, also wenden wir sie jetzt an. Ich könnte also ein beliebiges Element auswählen und dann über das Dateimenü auf das Style-Symbol klicken. Es ist immer noch ein bisschen seltsam, dass wir das Style-Symbol verwenden , um Variablen zu verwenden. Ich würde erwarten, dass sich das in Zukunft ändern wird. Lassen Sie uns vorerst hier klicken, um unsere Bibliotheken zu öffnen. Hier finden Sie alle Variablen, die Sie eingerichtet haben. Beachten Sie, dass Variablen ein S und Stile einen Kreis haben. Wir können darauf klicken und das würde die Farbvariable anwenden. Jetzt könnte ich das für mein gesamtes Design tun, was wiederum ziemlich mühsam wäre Denken Sie daran, dass wir mit Komponenten arbeiten wollen, und Sie können sehen, dass mein Design in Instanzen aufgebaut ist Gehen wir also wieder hierher zurück. Lassen Sie uns diese Füllung zurücksetzen und zu den Komponenten springen denen ich dieses Design erstellt habe. Ich platziere das Design neben meiner Komponente, damit Sie es besser sehen können. Normalerweise hätte man das auf einer eigenen Seite oder sogar einer externen Datei. Was wir jetzt tun wollen, ist, dass wir alle unsere Komponenten durchgehen und sicherstellen , dass unsere Variablen angewendet werden , weil Sie auch einige davon sehen können, wie zum Beispiel das höchste Datum meines Buttons, das in meinem Design nicht einmal sichtbar ist, aber trotzdem möchte ich hier die Informationen über die richtige Variable geben hier die Informationen über die richtige Variable Lassen Sie uns das einfach überprüfen , denn hier können wir sehen , dass derzeit nichts angewendet wird Jetzt könnten wir diese Komponenten nacheinander durchgehen, also könnte ich hier den Hintergrund auswählen, eine Variable anwenden und dann den Text auswählen. Aber es gibt tatsächlich eine ganz nette Art, das zu tun. Wählen Sie also einfach alles aus, und dann können Sie hier die Auswahlfarben sehen. Jetzt kann ich hier sehen, dass ich sogar einen alten Stil angewendet habe und meine Variablen verwenden möchte. Ich habe auch eine Mischung von Farben angewendet, sodass Sie sehen können, dass ich verschiedene Rottöne habe, also möchte ich, dass all dies auf meine Variablen abgestimmt ist. Was wir tun werden, ist zum Beispiel, wenn wir einen alten Stil haben, dann trennen wir diesen Stil einfach Und jetzt gehen wir Stück für Stück Rot vor. Also gehe ich davon aus, dass das ein Weiß ist, und dann wähle ich für jede dieser Farben eine Variable aus. Weil ich die Auswahl verwende, ist das die Gliederung meines Komponentensatzes. Ich werde das in Ruhe lassen. Weil ich diese Auswahl verwende , werden mir wirklich alle Farben angezeigt. Und los geht's. Der letzte, lass uns das Rot unseres kleinen Lesezeichens ausgleichen das Rot unseres kleinen Lesezeichens Und jetzt schauen wir uns unser Design an. ich ein Element in meinem Design auswähle, können Sie sehen, dass die Variable angewendet wurde. Das ist dieses kleine Quadrat, man sowohl in der Farbe als auch im Namen sehen kann. ich hier durchlaufe, sogar bis zur tiefsten Verschachtelung, kann man sehen, dass alles richtig aufgetragen ist Vielleicht gibt es hier einige Elemente auf meiner Leinwand, zum Beispiel diesen Text , der kein Bestandteil ist Was Sie tun können, ist, dass Sie auch den gesamten Rahmen auswählen können, und dann können Sie einige übrig gebliebene Elemente sehen, und wir können sie auch bereinigen Wenn Sie irgendwann Ihre Variablen bearbeiten möchten, klicken Sie einfach auf den Canvas-Hintergrund, öffnen Sie lokale Variablen und ändern Sie Ihren Variablenwert Ihr gesamtes Design wird folgen. 36. 03 Organisieren mit variablen Sammlungen und Gruppen: Organisation Ihrer Variablen, Sammlung und Gruppierung. Damit er sehen kann, dass ich alle meine Variablen habe. Aber auf meinem Stylesheet kategorisiere ich sie tatsächlich, also habe ich primäre, sekundäre und ich habe einige neutrale Variablen Anstatt sie alle in einer Zeile zu haben, möchte ich etwas Ordnung schaffen, und das kann ich durch Gruppieren tun Um Ihre Variablen zu gruppieren, wählen Sie sie einfach aus und halten Sie dann die Umschalttaste gedrückt und klicken Sie mit der rechten Maustaste. Jetzt erhalten Sie ein Menü, in dem Sie wählen können, ob Sie gruppieren möchten Sie können die Gruppe auf der linken Seite sehen, und Sie können darauf doppelklicken und ihr dann einen Namen geben. Also werde ich diese Gruppe primär nennen. Wenn ich wieder alle meine Variablen sehen möchte, muss ich nur oben klicken. Ich werde dasselbe für mein Blau tun. Ich werde das als zweitrangig bezeichnen. Und ich gehe zurück, damit ich alles sehen kann, und ich werde das auch für meine neutralen Farben tun, also wählen wir sie alle aus, indem wir sie umschalten und mit der rechten Maustaste klicken, und dann nennen wir sie Neutrale Okay, das ist also die Organisation meiner Sammlung selbst, aber ich kann auch mehrere Sammlungen haben . Also, was bedeutet das? Dies ist eine Kollektion, die alle meine Farben enthält. Oben links in Ihrem Variablenmodus sehen Sie ein kleines Drop-down-Menü Wenn du darauf klickst, benennen wir diese Kollektion zunächst benennen wir diese Kollektion und nennen wir sie Markenfarben Jetzt möchte ich eine weitere Sammlung hinzufügen. Ich werde auf Sammlung erstellen klicken. In dieser Kollektion möchte ich meine Größe speichern. Es könnte der Abstand sein, das könnte die Größe bestimmter Karten oder Elemente sein. Ich nenne das einfach Einheitsgröße. Ich kann hier jetzt mehr Variablen hinzufügen, und ich werde mich diesmal für Zahlen statt für Farben entscheiden. Ich kann zum Beispiel mein Abstandssystem einrichten. Ich könnte sagen, der kleinste Abstand, der acht ist heißt eigentlich X S, und dann kann ich einen weiteren erstellen und ich nenne diesen S, und das wäre 16. Ich könnte auch Zahlen hinzufügen, die meiner Kartenbreite entsprechen könnten, also könnte ich diese Karte nennen und zum Beispiel eine Karte haben, sagen wir mal 320. Welche Art von Sammlungen, wie viele und auf welche Weise Sie benötigen hängt ausschließlich von Ihrer Einrichtung und Ihrem Projekt ab. In der Regel benötigen Sie mindestens eine Farbkollektion. Wenn Sie zu Ihrer Farbsammlung zurückkehren möchten, können Sie einfach zum Drop-down-Menü gehen und zu Ihren Markenfarben zurückkehren Sie können sie hier sehen und bearbeiten. 37. 04 Größen- und Abstandsvariablen: Größenvariablen. Wir können in Figma auch mit Größenvariablen arbeiten Um sie anzuwenden, wählen Sie einfach ein Element dann auf der rechten Seite, im Eigenschaftenbereich, Wenn Sie dann auf der rechten Seite, im Eigenschaftenbereich, den Mauszeiger über die Felder bewegen, wird überall dort, Sie sie anwenden können, ein Variablensymbol wo Sie sie anwenden können, ein Variablensymbol angezeigt Wir könnten also unsere Variable für eine Breite und auch für Dinge wie den Radius hinzufügen eine Breite und auch für Dinge wie den Radius Wenn Sie diese Größen nun einfach auf ein beliebiges Design anwenden, werden Sie feststellen, dass das nicht wirklich funktioniert , weil das Design nicht reagiert. Damit das funktioniert, müssen Sie Ihre Komponenten also auch als Layoutkomponente einrichten . Das werden wir zu einem späteren Zeitpunkt tun. wir also anfangen, automatisches Layout hinzuzufügen, werden Sie feststellen, dass hier die Magie von Variablen und Größenangaben stattfindet. Denn wenn wir jetzt unsere Größen anwenden, reagiert die gesamte Karte darauf. Außerdem können wir den gesamten Abstand und die Ränder mit unseren Variablen hinzufügen Das heißt, wenn wir diesen Abstand und diesen Rand festlegen und dann die Größe unserer Komponenten ändern, bleibt alles Aber dazu gleich mehr. 38. 05 Und was ist mit Stilen?: Wofür sind Stile in Figma also da? Sie haben vielleicht bemerkt , dass Sie in Figma Variablen einrichten können, aber Sie können auch Stile einrichten In manchen Fällen, wie zum Beispiel bei Farben, ist es fast identisch, sie zu erstellen und zu verwenden. Es ist also ziemlich verwirrend zu verstehen, warum wir das eine oder das andere verwenden sollten. Lasst uns das besser verstehen. Wir verwenden Variablen für einzelne Werte, also Dinge wie eine Farbe oder eine Größe. Stile hingegen verwenden wir, um mehrere Werte zusammenzuhalten. Stell sie dir wie eine CSS-Klasse vor. Eine Variable könnte auch ein Element in einem Stil sein. Nehmen wir an, ich habe eine Variable namens Variablengröße S erstellt, die den Wert 24 hat. Ich habe einen Stil namens Headline Strong erstellt. Jetzt besteht mein Stil aus mehreren Werten. Um nur einige zu nennen. Dies können Schriftart, Größe, Zeilenhöhe und Stärke sein. Derzeit stelle ich sie alle manuell ein. Ich sage also, dass Größe als 24 definiert ist. Was ich auch tun könnte, ist, dass ich hier eine Variable verwenden könnte. Also kann ich die Größe auf die variable Größe setzen, die im Moment ebenfalls 24 ist, also würde es keinen Unterschied machen. In einem ausgefeilteren Designsystem wäre dies jedoch sehr praktisch, da ich dann mehrere Textilien hätte. Nehmen wir an, ich habe dieselbe Überschrift, aber eine Softversion, und ich könnte dieselbe Variable verwenden. Wenn ich nun irgendwann möchte, dass sich die Größe all dieser Überschriften ändert , müsste ich nur meine variable Größe S ändern und alles würde folgen. Es gibt kein Richtig oder Falsch. Sie können keine oder so wenig Variablen verwenden, wie Sie in Ihren Stilen keine oder so wenig Variablen verwenden, wie Sie benötigen, oder sie alle so weit variieren lassen, wie Sie möchten. Ich würde empfehlen, wenn Sie gerade erst anfangen, es einfach zu halten, da das sonst ziemlich überwältigend sein könnte. Es ist wirklich etwas, das Sie in einem anspruchsvolleren Designsystem verwenden würden . Andere Bereiche in Figma, denen wir Stile verwenden würden, sind zum Beispiel Effekte also jede Form oder jeden Rahmen in einem Eigenschaftenfenster auf der rechten Seite sehen, Effekte sehen, auf Plus klicken und dann den Effekt auswählen Sie haben also Dinge wie Streuung, Schatten, Unschärfe und so weiter Sie können hier auch auf das Little Sun-Symbol klicken und einen dieser Werte ändern Wenn Sie in allen Stilen mit der Maus über das Eingabefeld fahren, das kleine Variablensymbol angezeigt Klicken Sie darauf und Sie können es durch eine beliebige Variable ersetzen , die Sie zuvor erstellt haben Sobald Ihnen Ihr Effekt gefällt, können Sie ihn jetzt als Stil speichern Klicken Sie auf das Style-Symbol und dann auf die Plus-Schaltfläche. Sie können Ihrem Stil jetzt einen Namen geben. Sie können auch eine Beschreibung hinzufügen und dann den Stil erstellen. Wenn Sie auf den grauen Canvas-Bereich klicken, wird eine Übersicht der Stile angezeigt , die Sie derzeit in dieser Datei gespeichert haben. Bei jedem anderen Objekt können Sie jetzt einfach zum Effekte-Menü gehen, mit der rechten Maustaste auf Stile klicken und dann den Stil auswählen und anwenden. Wir sind bereits auf Rasterstile gestoßen. Zur Erinnerung: Sie können ein Raster auf Ihr Layout anwenden. Klicken Sie auf das Symbol, um es in ein Layoutraster umzuwandeln. Sobald Ihnen Ihr Raster gefällt, können Sie es jetzt als Stil speichern. Gleiches Verfahren. Klicken Sie auf das Style-Symbol, klicken Sie auf die Plus-Schaltfläche, benennen Sie es und speichern Sie es als Stil. Wenn Sie auf den grauen Hintergrund Ihrer Leinwand klicken, werden hier alle Ihre Stile in Ihrer Datei angezeigt. Sie können auch auf das hinzugefügte Feld klicken, um sie zu ändern. Um Ihnen derzeit in Figma einen Überblick zu geben, haben wir Farbnummernzeichenfolgen und boolesche Und dann haben wir für Stile Rastereffekte, Typografie Und auch dies könnte sich im Laufe der Zeit leicht ändern. Wenn Sie also gerade erst anfangen, können Sie sie einfach isoliert verwenden. Sie möchten zum Beispiel vielleicht Variablen für Farben verwenden, aber dann haben Sie vielleicht einfach Typografie-Stile , bei denen Sie überhaupt keine Variablen verwenden Und das würde immer noch gut funktionieren. Aber wenn Sie Ihr Design skalieren und es systematischer angehen, wie bei einem Designsystemansatz. Sie werden feststellen, dass Sie möglicherweise Variablen innerhalb dieser Stile verwenden möchten , sodass Sie wiederverwendbare Werte haben. Sie werden nicht alle Variablen in allen Stilen benötigen. In Rastern benötigen Sie zum Beispiel wahrscheinlich nur Zahlen, um Ihre Dachrinne und Ihre Ränder festzulegen, und dann werden Sie in so etwas wie einem Farbverlauf wahrscheinlich nur Farbvariablen verwenden In der Typografie werden Sie eher eine Mischung sehen, zum Beispiel Zahlen zur Definition von Größe und Aber Sie werden eine Zeichenfolge haben, weil Sie so die Schriftfamilie definieren würden Wenn Sie gerade erst anfangen, würde ich empfehlen, Ihre Farbvariablen einzurichten. Das ist wirklich ein Muss, und Sie sollten auch Typografie-Stile haben Später möchten Sie vielleicht Zahlenvariablen hinzufügen. Zum Beispiel, wenn Sie mit dem automatischen Layout arbeiten , um Ihre Abstände zu steuern, und Sie vielleicht auch einige Rasterstile verwenden möchten. Sie können natürlich Effekte und Farbverläufe verwenden. Das hängt davon ab, was Sie für Ihr Design benötigen. Aber halte es einfach und ich würde sie vorerst getrennt halten. Sobald Sie sich wohl fühlen, können Sie Ihre Stile jederzeit bearbeiten und dann jeden festen Wert in Variablen umwandeln. 39. 06 Typografie und Stile: Textstile einrichten. Um einen Textstil zu erstellen, wählen Sie einen Text Auf der rechten Seite Textmenüs sehen Sie das Stilsymbol. Klicken Sie darauf. Klicken Sie auf Plus und Sie können dem Stil jetzt einen Namen geben. Ich nenne das einfach Textstil. Sie können eine Beschreibung hinzufügen und Ihren Stil erstellen. Ich kann jetzt jeden anderen Text auswählen und das über das Menü „Stile“. Ich kann einen meiner erstellten Stile auswählen und er wird angewendet. Wenn Sie die Farbe ändern möchten, ist dies unabhängig vom Stil. Wählen Sie einfach eine beliebige Variable aus, die Sie über das Füllmenü eingerichtet haben. Wenn Sie einen Stil trennen möchten, wählen Sie einfach einen Text aus und dann finden Sie direkt neben dem Stilnamen das abgetrennte Symbol Wenn Sie einen Stil löschen möchten, klicken Sie auf den grauen Canvas-Bereich in dem Sie eine Übersicht über alle Stile finden Sie können hier Stile bearbeiten, und Sie können auch mit der rechten Maustaste klicken und den Stil löschen. Wenn wir mit A arbeiten, das mit Komponenten entworfen wurde, empfehle ich, dass Sie Ihren Stil immer auf Ihre Komponenten anwenden. Anstatt Texte nach dem Zufallsprinzip auszuwählen und sie in Stile umzuwandeln, ist es besser, einen systematischeren Ansatz zu verfolgen. Ich persönlich mache das gerne Sobald ich weiß, dass mir mein Design gefällt, werde ich es noch weiter verfeinern und eine Kopie des gesamten Textes herausziehen, eine Kopie des gesamten Textes herausziehen den ich in meinem Design verwende Das könnten meine Komponenten sein. Wenn ich schon welche erstellt habe, könnte das nur aus einem Rohdesign stammen. Also wähle ich alles aus, was ich benutzt habe, und ordne es dann. Also von der größten, prominentesten bis zur kleinsten, und das ermöglicht mir, eine Hierarchie zu erstellen. Also habe ich am Ende so etwas. Auf diese Weise verschaffe ich mir einen guten Überblick. Ich kann auch Text kombinieren , der ziemlich ähnlich ist, und ich kann ihn nach Dingen wie der Zeilenhöhe bereinigen. Ich benenne es dann entsprechend. Es spielt keine Rolle , welche Namen Sie verwenden. Stellen Sie einfach sicher, dass Sie ein semantisches Setup haben. Ich mache es gerne so, aber manche Leute ziehen es vor, zuerst eine Hierarchie zu erstellen und sie dann für ihre Designs zu verwenden . Das liegt an dir. Sobald ich mit meinem Setup zufrieden bin, kann ich jetzt damit beginnen, es mit den angegebenen Namen zu speichern. Sobald wir das für all unsere Styles gemacht haben, klicken Sie auf den grauen Hintergrundbereich und Sie können sie alle hier sehen. Sie könnten sie weiter organisieren, indem Sie bestimmte Stile auswählen und dann entweder rechten Maustaste klicken oder die Tastenkombination Command NG verwenden, und Sie können beispielsweise einen neuen Ordner für all Ihre Schlagzeilen erstellen . Wenden Sie also die Stile auf meine Komponenten an, ich wähle einfach den Text aus, und übrigens, wenn Sie die Umschalttaste gedrückt halten, können Sie mehrere gleichzeitig auswählen und jetzt aus dem Drop-down-Menü meine neuen Stile anwenden. Ich kann auch kleine Ungenauigkeiten korrigieren. Zum Beispiel möchte ich hier wahrscheinlich eine Standardstärke haben. Sobald ich das für meinen gesamten Text in allen Komponenten getan habe und zu meinem Design übergehe, können Sie sehen, dass sie von meiner Komponente erben, auch wenn sie überschrieben werden, weil das nur den Inhalt betrifft, nicht den Stil Jede Änderung des Stils würde sich natürlich auf alle Komponenten und somit auf alle 40. 07 Dokumentieren von Variablen und Stilen: Lassen Sie uns einen Moment über die Dokumentation des Systems hinter unserem Design sprechen die Dokumentation des Systems hinter unserem Bei unseren Komponenten benötigen wir eine Komponente als Master, auf die unsere Instanzen zurückverweisen können Wir müssen also jede Komponente irgendwo speichern, idealerweise auf eigenen Seite oder einer eigenen Datei mit einigen zusätzlichen Informationen. Jetzt verweisen unsere Stile und Variablen nicht auf einen Master-Stil oder eine Mastervariable. Wir würden also keine Referenz oder Übersicht in unserer Datei benötigen . Ich empfehle jedoch dringend, trotzdem einen Überblick zu erstellen , um ein umfassendes Verständnis und eine umfassende Dokumentation der Verwendung zu vermitteln und eine umfassende Dokumentation der Verwendung Dies ist nicht nur für Sie selbst nützlich, sondern auch für andere Designer und vor allem für andere Entwickler, die später Ihr Design erstellen werden Schauen wir uns also an, wie man Farben dokumentiert. Für Farben ist es am einfachsten, ein Farbfeld mit Ihrer variablen Farbe hinzuzufügen Ihrer variablen Farbe und den Namen einzufügen, dem Sie es zugewiesen haben Wir möchten semantische Benennungen verwenden, also vermeiden Sie Namen wie Orange, Rot oder Blau Verwenden Sie stattdessen beschreibende Namen wie primärer, neutraler Hintergrund oder etwas Ähnliches. Die Zahlen hinter dem Namen dienen dazu, es Ihnen zu ermöglichen, weitere Farbvariationen hinzuzufügen Daher würde ich empfehlen, Schritte von 100 oder Schritte von zehn zu verwenden , denn wenn Sie eins, zwei, drei machen und später etwas dazwischen hinzufügen möchten, dann haben Sie kein Leerzeichen. Ich empfehle, eine zusätzliche Ebene hinzuzufügen und separate Variablen für Ihre Textfarben zu erstellen, auch wenn diese Farbe bereits in den neutralen Farben dargestellt wird in den neutralen Farben dargestellt Das macht es einfacher, die Gesamtkontrolle zu behalten und sicherzustellen, dass der Kontrast stimmt Sie können sogar noch weiter gehen und überprüfen, ob diese Farben den richtigen Kontrast zu den Farben Ihrer Marke haben. Sie können dafür ein Online-Tool wie Web Aim oder ein beliebiges Plug-In in Figma verwenden, oder ein beliebiges Plug-In in Figma verwenden, etwa Stark oder ein anderes Abstand. Jetzt möchte ich auch einige Informationen über die von mir verwendeten Abstände hinzufügen, aber dafür ist nicht viel Dokumentation erforderlich. In den meisten Fällen würden Sie ein Abstandssystem mit einem Vielfachen von vier oder acht verwenden . Acht ist aus verschiedenen Gründen eine magische Zahl im Webdesign, unter anderem zur Vermeidung von halben Pixeln. Wenn Sie zum Beispiel bei der Verkleinerung fünf verwenden würden, wird daraus 2,5, was nicht ideal ist. Ein Abstandssystem erspart Ihnen außerdem eine Menge Diskussionen mit Entwicklern, denn wenn Sie hier und da um ein Pixel abweichen, wissen sie, worauf sie auf- oder abrunden müssen. Normalerweise füge ich meinen Stylesheets ein einfaches Informationsblatt über das Acht-Punkt-Abstandssystem bei, zusammen mit einem Beispiel , wie man es benutzt. Ich richte Variablen auch gerne entsprechend ein. Hinweis. Im Webdesign verwenden wir kein sogenanntes Hard Grid. hartes Raster bedeutet , dass sich im Hintergrund ein Pixelraster befindet, an dem die Ausrichtung vorgenommen werden kann. machen wir nicht. Wir verwenden ein sogenanntes Soft-Grid. Das bedeutet, dass unser Abstandssystem immer von einem Element zum anderen funktioniert und zum Beispiel auch innerhalb unserer Komponenten. Ich wende das gleiche Prinzip auf die Typografie an. Ich füge ein Übersichts-Stylesheet für meine Typografie bei, wobei der Schwerpunkt auf der Darstellung der Hierarchie Sie können eine Hierarchie nach dem Zufallsprinzip erstellen oder ein systemähnliches Verhältnis verwenden Zu diesem Zweck stehen großartige Online-Tools zur Verfügung. Alternativ können Sie einfach mit Schritt acht fortfahren, was mit Ihrem Abstandssystem hervorragend funktioniert. Für jeden der Stile gebe ich zusätzliche Informationen wie die Textphase, die Zeilenhöhe, das Gewicht und alles andere an. Ich bevorzuge es, diese Informationen in einem Diagrammformat darzustellen, aber sie können auch direkt im Figmus-Entwurfsmodus oder im Gehörlosenmodus angezeigt werden , sodass Sie sich möglicherweise dafür entscheiden, sie nicht einmal hinzuzufügen Auch hier würde ich empfehlen, einen semantischen Benennungsansatz zu verwenden Es gibt keine strengen Regeln, aber vermeiden Sie es, nach dem genauen Stil zu benennen Verwenden Sie also nicht so etwas wie Poppins 24 Bold. Entscheiden Sie sich stattdessen für Namen wie Überschrift 03 oder Überschrift S. Wenn Sie für eine responsive Seite entwerfen, müssen Sie möglicherweise Ihre Textgröße an bestimmten Umbruchpunkten anpassen Ihre Textgröße an bestimmten Umbruchpunkten und diese Informationen auch zu Ihrer Schriftskala hinzufügen diese Informationen auch zu Ihrer Schriftskala Das ist ein fortgeschritteneres Thema, und ich habe einen eigenen vertieften Kurs zu diesem Thema. Ich habe auf meiner Figma-Community-Seite einige kostenlose Beispiele für verschiedene ansprechende Typskalen , die Sie herunterladen Alle zusätzlichen Stile wie Farbverläufe oder Schatten , die Sie möglicherweise verwenden Stellen Sie nur sicher, dass Sie Ihrer Dokumentation auch eine Seite mit den Informationen hinzufügen Ihrer Dokumentation auch eine Seite mit den Informationen hinzufügen Sie können diese Informationen zu Ihren Stilen und Variablen auf einer separaten Seite in Ihrer Datei speichern Ihren Stilen und Variablen auf einer separaten Seite in oder ihr eine eigene Datei zuweisen und sie als externe Bibliothek verwenden Im Allgemeinen reicht die Dokumentation von sehr einfach bis sehr detailliert und Am Ende ist es wichtig, das System, das Sie verwenden, so zu kommunizieren , dass es zu Ihrem Team, Ihren Ressourcen und Ihrem Budget passt Ihrem Team, Ihren Ressourcen und Ihrem Budget Fangen Sie also klein an und Sie können Ihre Dokumentation jederzeit ergänzen und verbessern. 41. Teil 3 Farbvariablen: Wenn du dich mit Variablen und Stilen unwohl fühlst, dann lass uns das zu unserem Kursprojekt hinzufügen. Variablen ändern sich immer noch stark. also sein, dass Sie in Ihrer Übungsdatei einen anderen Aufbau sehen als den, den ich auf dem Bildschirm zeige. Ich versuche immer, die Übungsdatei auf dem neuesten Stand zu halten. Achte also auch darauf, dass du die neueste Version herunterholst. Was wir tun wollen, ist, mit der Erstellung unserer Farbvariablen zu beginnen . Ich habe alle Farben aus unserem Projekt für Sie bereits in diesen Farbfeldern herausgenommen , und jetzt müssen wir sie nur noch auf der rechten Seite einrichten Wenn Sie auf die Leinwand klicken, sehen Sie hier lokale Variablen. Sie können die Farbvariablen öffnen, die ich bereits für Sie erstellt Wenn Sie sie nicht sehen, gibt es einen kleinen Umschalter. Möglicherweise siehst du einige Hilfsfarben, die ebenfalls eingerichtet sind. Vergewissere dich, dass du in der Kollektion Farbe ausgewählt hast. Dann kannst du die verschiedenen Farben sehen, um sie anzuwenden. Denken Sie daran, wir können einfach jede Füllung haben. Und dann klicken wir über die Füllung auf die Little-Stile. Und wie gesagt, ich gehe davon aus, sich das in Zukunft ziemlich ändern wird. Und dann können wir eine der Variablen auswählen , die wir eingerichtet haben. Denken Sie jetzt daran, dass wir unsere Komponenten in einer separaten Datei erstellt unsere Komponenten in einer separaten Datei haben und dasselbe mit unseren Farbvarianten tun möchten , da wir sonst nur in Konflikt mit denen geraten würden , die ich bereits in dieser Datei mit einer Lösung für Sie erstellt habe. Lassen Sie uns zu der Datei springen , in der wir unser Design eingerichtet haben. Und denken Sie daran, dass wir unsere Komponenten hier auf einer separaten Seite haben. Lassen Sie uns einfach zu unserer Komponentenseite springen und unser Farbset hier einfügen. Wir können einen Abschnitt darum herum zeichnen und diesen auch gut organisieren. Nennen wir das Farbe. Sie können auch die Farbe eines beliebigen Abschnitts ändern. Ich nehme stattdessen dieses Weiß. spielt keine Rolle, was Sie verwenden, es dient nur der besseren Sichtbarkeit. Jetzt möchte ich meine Variablen erstellen und klicke auf lokale Variablen und es wurde noch nichts erstellt. Und ich klicke auf Farbvariable. Jetzt kann ich einfach den Namen auswählen, den ich ihm gegeben habe. Auch hier können Sie dem einen beliebigen Namen geben , versuchen Sie einfach, semantisch zu sein Wählen Sie nun das Swatch aus. Und mit dem Picker wähle ich die Farbe aus meinem Set aus. Kleine Abkürzung. Drücken Sie Shift und Enter. Auf diese Weise können Sie schnell mehrere Variablen erstellen und diese dann ausfüllen. Ich werde das für dich tun. Hier sind meine Variablen. Ich füge sehr gerne separate Variablen hinzu. Vier Texte, das müssen Sie nicht, Sie können das auch verwenden, aber ich werde eine weitere Farbvariable hinzufügen, die ich Text auf dunkler Primärfarbe nenne. Das wird eigentlich genau dieselbe Farbe haben wie hier. Es wird nur ein schlichtes Weiß sein. Aber ich mag es sehr, es getrennt zu halten , falls ich später etwas ändern möchte. Ich kann auch überprüfen, ob der Kontrast stark genug ist. Hier siehst du, dass ich diesen Bereich angebe, was bedeutet, dass du diese Farbe für all diese neutralen Farben verwenden kannst diese Farbe für all diese neutralen Und ich habe das vorher überprüft. Ich werde einen zweiten erstellen, den ich auf der Sekundärseite Text nenne. Auch das ist momentan einer meiner neutralen Werte, aber das könnte sich in Zukunft auf diese Weise ändern Ich habe es schön und getrennt. Es gibt noch eine Kleinigkeit: Sie können Farben bestimmen. Lassen Sie uns das hier einfach etwas größer machen. Was Sie dann tun können, ist, wenn Sie mit der Maus über die Farbe fahren, dann können Sie dieses kleine Bearbeitungsfeld sehen Und hier könnte man sagen , dass diese Variable nur sichtbar sein soll, wenn Sie Text auswählen Ich werde das vorerst nicht tun weil es etwas fortgeschritten ist, aber sei dir bewusst, dass es da ist. Auch hier ändern sich Variablen schnell, also könnte dies woanders platziert werden, aber es wird sicherlich mit dem Bearbeitungsfeld gefunden. Jetzt, wo wir unsere Variablen erstellt haben, wollen wir sie anwenden, und was sehr wichtig ist, wir wollen sie nicht hier drinnen anwenden. Wir wollen sie nicht in unser Design aufnehmen. Wir könnten sie in unser Design aufnehmen. Aber es ist viel sinnvoller, zu unseren Komponenten zu gehen und sie auf unsere Komponenten anzuwenden, weil dann alle unsere Instanzen erben werden, was jetzt vielleicht minus angezeigt wird Aber wenn Sie Hunderte von Bildschirmen haben, dann macht das einen großen Unterschied Es ist tatsächlich viel schneller, sie auf Ihre Komponenten anzuwenden . Ich wähle all diese Komponenten aus. Und dann, wo die Auswahlfarbe hier ist, werde ich einfach schnell all diese auswählen und sie in, ähm, meine variablen Farben ändern . Ich werde hier dasselbe tun, und ich kann das jetzt auswählen. Wohlgemerkt, ich arbeite mit separaten Farben für meinen Text. Wenn ich das tun würde, müsste ich den Text immer noch separat auswählen. Und dann wechsle ich einfach von diesem hier zu meiner Textfarbe. Wenn das ein bisschen zu weit fortgeschritten ist, wenn das ein bisschen überwältigend ist, dann geh einfach Stück für Stück. Wählen Sie diese aus und wenden Sie eine Farbe an. Wählen Sie dann die nächste aus und wenden Sie die nächste an. Es liegt wirklich an dir. Wenn es zu überwältigend ist, dann geh einfach einen Schritt zurück. Aber vorerst werde ich den schnellen Weg gehen. Ich werde das Gefälle in Ruhe lassen. Sehr wichtig, und ich werde einfach diesen Weg gehen. Das ist auch sehr praktisch, wenn du beim Designen ähnliche Farben verwendest und beim Aufräumen bist. Dann kannst du sie hier einfach kombinieren und sicherstellen, dass alles mit deinen Variablen gut eingestellt ist. Nur wenn ich das nochmal gemacht habe, dann muss ich sicherstellen, dass mein Text in der Textvariablen gesetzt ist. Sobald ich fertig bin, suche ich mir einfach den Text aus. Ich werde diesen Text hier in einen Primärtext umwandeln. Ich müsste tatsächlich einen anderen erstellen, für diesen hier auf lange Sicht, einen dunklen Text und für diesen. Aber im Moment lasse ich die einfach in Ruhe. Habe ich mir den geschnappt? Lass mich mal schauen. Dieser hier ist der Text auf der Sekundärseite. Sie können sehen, das ist wie das graue. Wenn wir jetzt eine unserer Instanzen auswählen, wählen wir hier zum Beispiel diesen Text aus. Dann können Sie sehen, dass die Variable automatisch angewendet wird. Wir müssen uns keine Gedanken über das Design machen. Es gibt noch einige Elemente, wie zum Beispiel Hintergrundfarben, die ich möglicherweise aussortieren muss. Normalerweise gehe ich das durch und dann zum Beispiel diese Füllung, ich würde gerne meinen Variablen entsprechen. Ich würde das hier ein bisschen bereinigen, zum Beispiel diesen Text. Eine weitere gute Möglichkeit, dies zu tun, besteht darin, diesen Rahmen auszuwählen. Und dann können Sie hier unbenutzte Farben sehen. Wenn ich auf dieses kleine Ziel klicke, wird es mir sagen, welche keine Variablen verwenden oder welche diese Farbe verwenden. Ich kann sie einfach so ändern. Natürlich wird jede Änderung der Variablen, lassen Sie uns zum Beispiel unsere Markierung auf Rot ändern, lassen Sie uns zum Beispiel unsere Markierung auf Rot ändern, zu einer Änderung des gesamten Designs führen. 42. Teil 3 Textstile: Jetzt wollen wir neben Farbvariablen auch unseren Text in Stile umwandeln Auch dies sind derzeit Stile. Hoffentlich wird uns Figma bald auch dafür Variablen zur Verfügung stellen Und ich werde darauf hinweisen, dass ich meine Auswahlmethode verwende , die ich in den Kursstunden besprochen habe den Kursstunden besprochen Auch hier möchte ich nur betonen, dass Sie zuerst alle Sitzungen durchgehen , bevor Sie mit diesen Übungen beginnen. Andernfalls werden sie sehr überwältigend sein. Wie sie wieder funktionieren, lassen Sie uns einfach aktualisieren, ist, dass ich einfach alles herausziehe , was ich in meinem Design verwende. Von hier aus muss ich das nur noch kopieren. Kopieren und einfügen. Ich erstelle diese kleinen Hierarchien. Ich verwende hier auch meinen kleinen Text. Auf diese Weise clustere ich sie. Wenn wir zu Ihrer Übungsdatei zurückkehren, können Sie das sehen. Das hier habe ich alles und ich habe es geclustert. Und Sie können das hier oben sehen Ich habe mir einige Überschriften mit 24 Pixeln ausgedacht, dann 16 Fließtext und so weiter, und eine sehr kleine hier unten. Wenn du frei gestaltest, dann hast du vielleicht etwas, wo du 32, 34 hast, und das ist auch der Moment, in dem du sie alle gruppieren kannst. Es wird nicht immer so klar sein. Es wird wahrscheinlich ein bisschen Aufräumen sein wenn Sie sich intensiver mit einem kreativeren Projekt beschäftigen. Nachdem ich sie gruppiert hatte, habe ich Titel eins, Titel zwei, Titel drei usw. und einige Haupttexte erstellt Titel zwei, Titel drei usw. und einige Haupttexte erstellt Und ich habe diese Skala. Und ich möchte das jetzt in Styles umsetzen. Und du kannst sehen, ob du auf die graue Hintergrundfarbe klickst . Ich habe diese Stile bereits in Ihren Übungsdateien erstellt, sodass sie sofort verwendet werden können. Ich könnte einfach hier klicken und dann in den Bereich „Stil“ springen und einen dieser Stile auswählen. Jetzt möchten wir dieselben Stile in Ihren separaten Dateien erstellen . Also werden wir dasselbe tun wie mit unseren Komponenten und Farben. Wir werden hier in die separate Datei springen , die Sie erstellt haben, und wir werden hier unsere Stile hinzufügen. Auch hier können wir einen Abschnitt um ihn herum hinzufügen, um alles übersichtlich zu halten, sodass dieser auch weiß ist, damit er besser sichtbar ist. Jetzt gehe ich einen nach dem anderen vor und speichere diese Stile. Ich werde mich hier für diesen entscheiden und ich werde auf die Stilschaltfläche klicken und ich werde diesen einen Titel eins nennen. Ich kann dort, wo es verwendet wird, weitere Informationen hinzufügen und ich kann diesen Stil erstellen. Jetzt mache ich dasselbe wie zuvor mit meinen Farbvariablen. Ich werde diesen Stil hier nicht anwenden. Figma würde mich das machen lassen. Und das ist ein bisschen gefährlich. Das wollen wir nicht in unserem Design haben . Das wollen wir in unseren Komponenten haben. Also folgt alles in unserem Design. Für meinen Titel würde ich hier beginnen. Ich würde alles auswählen , was ein Titel ist, und dann würde ich den Titel wählen. Ich würde dann meinen Titel erstellen. Zweitens bevorzuge ich es, zuerst alle Stile zu erstellen und dann Schritt für Schritt alle meine Komponenten durchzugehen , um sicherzustellen , dass alles eingerichtet ist. Wenn du zu deinem Design springst und hier auf den Titel klickst, dann bekommen wir einen besseren Preis. Es hat nicht geerbt Wenn ich hier auf den Titel klicke, hat er übernommen. Was manchmal passiert ist , wenn wir Text einfügen, obwohl wir das nicht wollten, haben wir versehentlich einen Stil überschrieben. In diesem Fall müssen wir unsere Instanz auswählen und sie dann zurücksetzen die drei kleinen Punkte alle Änderungen zurücksetzen, und leider werden dadurch auch die Überschreibungen zurückgesetzt Ich muss den Text nur noch einmal hier reinschreiben. Wenn ich jetzt auswähle, können Sie sehen , dass es jetzt den richtigen Stil hat. 43. 01 Was ist Auto-Layout?: Lassen Sie uns also eine Vorstellung davon bekommen, was automatisches Layout ist und wofür wir es verwenden? Mit dem automatischen Layout können wir unsere Designs in Figma so einrichten , dass sie der sich ändernden Größe entsprechen Das funktioniert zum Beispiel bei einzelnen Komponenten, aber auch bei Gruppen dieser Komponenten Das bedeutet, dass wir das automatische Layout wirklich verwenden können, um alles einzurichten , von einer Schaltfläche bis hin zu einer ganzen Seite. Sie werden feststellen, dass das automatische Layout manchmal sehr gut funktioniert und sehr einfach ist. In anderen Fällen verhält es sich jedoch einfach auf die seltsamste Weise, und Sie müssen verstehen Das liegt daran, dass das automatische Layout nicht nur eine Schaltfläche ist , auf die Sie Es besteht aus drei Säulen, und Sie müssen jede von ihnen genau verstehen. Die erste betrifft das Layout und die Positionierung, die zweite das Verhalten bei der Größenänderung und die dritte die Verschachtelung Wir werden jede dieser Säulen genauer verstehen und sie dann als Ganzes zusammenfügen, sodass Sie sich absolut sicher sein können, sodass Sie sich absolut sicher alles mit automatischem Layout einzurichten 44. 02 Einrichten von Auto-Layout-Frames: Lassen Sie uns lernen, wie Sie einen automatischen Layoutrahmen einrichten. Mit dem automatischen Layout können unsere Designelemente auf ihren Inhalt reagieren. Also hier habe ich einen Button. Ohne automatisches Layout können Sie sehen, dass sich nichts anpassen würde, wenn ich den Inhalt ändere . Wenn ich nun ein automatisches Layout hinzufüge, was ich einfach tun kann, indem ich diese Schaltfläche und dann auf der rechten Seite im Eigenschaftenfenster auswähle und dann auf der rechten Seite im Eigenschaftenfenster im Layout auf die Schaltfläche für das automatische Layout klicke. Wenn ich jetzt den Text ändere, können Sie sehen, dass er sich automatisch an den Inhalt anpasst, den ich erhalte. Machen wir dasselbe für meine Karte. Ich habe ausgewählt. Ich füge automatisches Layout hinzu und habe es jetzt in einen automatischen Layoutrahmen umgewandelt. Und Sie können jetzt sehen, ob ich etwas am Inhalt ändere, dann passt sich alles an, aber es behält trotzdem seine gesamte Polsterung Nun, diese Polsterung und Abstände, wenn Sie den automatischen Layoutrahmen erneut auswählen, können Sie das im Eigenschaftenfenster auf der rechten Seite sehen Im Menü hier können Sie also sehen, dass Sie zuerst etwas bekommen, das als Lücke zwischen den Elementen bezeichnet wird Das sind also alle untergeordneten Gegenstände. Meine untergeordneten Artikel hier wären also mein Bild, meine Überschrift und mein Text. Lassen Sie uns diesen einfach wieder in seinen ursprünglichen Zustand versetzen. Wenn ich das also ändern würde, dann können Sie sehen, dass es die Lücke zwischen diesen Elementen verändert. Wenn du die Shift-Taste gedrückt hältst, springt sie um deinen n-Wert hoch und runter. Sie können auch alles direkt auf der Leinwand anpassen, oder Sie können doppelklicken und dann den gewünschten Wert eingeben. Das funktioniert genauso für Ihre Polsterung. Hier hast du deine horizontale und deine vertikale Polsterung. Das könntest du gleich hier ändern. In Ihrem Eigenschaftenfenster können Sie auch einfach eine beliebige Zahl eingeben, und Sie können sie auch auf der Leinwand anpassen, indem Sie die Griffe verwenden oder einfach doppelklicken und einen beliebigen Wert hinzufügen. Mit dem Ausrichtungsmenü können Sie Ihre Elemente jetzt innerhalb Ihres automatischen Layoutrahmens ausrichten . Lassen Sie uns dieses Bild einfach kleiner machen , damit Sie es besser sehen können. Sie könnten alles nach rechts, alles nach der Mitte oder alles nach links ausrichten alles nach der Mitte . Dadurch wird das gesamte Textfeld ausgerichtet, nicht der Text selbst. Wenn Sie den Text ausrichten möchten, müssen Sie trotzdem die Einstellungen für die Texteigenschaften verwenden Das Layout ist wirklich gut darin die Richtung zu erraten, in der Sie entwerfen Aber wenn Sie es jemals ändern möchten, könnten Sie diese Fehler hier oben verwenden, sodass Sie von vertikal zu horizontal wechseln könnten RAP ist etwas , das wir verwenden würden wenn wir mehr automatische Layoutelemente hätten, also verschachtelte Elemente nebeneinander Es ist am Anfang nichts, was du gerade brauchst. Sie können Elemente im Layout oder in ein Layout verschieben , indem Sie sie einfach ziehen , oder Sie können die Fehlertasten auf Ihrer Tastatur verwenden , um nach oben und unten zu wechseln Sie werden sehen, dass sie im Ebenenbedienfeld ihre Position ändern, sie im Ebenenbedienfeld ihre Position ändern, je nachdem, wo Sie sie platzieren. Sie können die automatische Layoutfunktion auch jederzeit entfernen Wählen Sie einfach den Rahmen und klicken Sie dann erneut auf die Schaltfläche für das automatische Layout. Es bleibt nur noch ein einfacher Rahmen übrig . Neben dem Eigenschaftenfenster können Sie auch die Tastenkombinationen Shift und A verwenden , um einen automatischen Layoutrahmen zu erstellen und ihn mit Shift und A zu entfernen, oder Sie können einfach mit der rechten Maustaste klicken. Die Tastenkombination ist sehr praktisch, wenn Sie zum Beispiel nur Text haben, dann wird die Option für das automatische Layout nicht im Eigenschaftenfenster angezeigt , aber Sie können Shift und A drücken Dadurch wird ein automatischer Layoutrahmen daraus. Wenn wir also etwas Füllung hinzufügen, können Sie sehen, dass dadurch ein Rahmen um Ihren Text hinzugefügt wurde. Wenn Sie das automatische Layout deaktivieren, können Sie sehen, dass Sie mit einem Rahmen und Ihrem Text darin geblieben sind. diesem Grund wird es auch als automatisches Layoutrahmen bezeichnet , da es nur mit einem Rahmen funktioniert. Wenn Sie es also nur auf einen Text oder eine Gruppe anwenden , wird es für Sie immer in einen Rahmen umgewandelt. 45. 03 Auto-Layout-Komponenten und Variablen: Wenn Sie Variablen verwenden und eine Sammlung mit Ihren Abstandswerten einrichten , können Sie diese im automatischen Layout verwenden. Dies ist eine hervorragende Möglichkeit, die Konsistenz aller verschiedenen Elemente und Komponenten in Ihrem Design sicherzustellen aller verschiedenen Elemente . Um sie auf einen automatischen Layoutrahmen anzuwenden, wählen Sie einfach den Rahmen und dann in Ihrem Auto-Layout-Menü, wo Sie Ihre Werte für Abstand und Abstand finden Wenn Sie mit der Maus über sie fahren, wird ein kleines Variablenzeichen angezeigt Klicken Sie darauf und Sie erhalten ein Drop-down-Menü mit allen Werten. Sie können jetzt den Wert im Folgenden auswählen. Sie können ihn auch für Ihren Abstand verwenden. Sie müssen nur über das Drop-down-Menü Variable anwenden und können jetzt jede Variable auswählen, die Sie anwenden möchten. Und Sie können dieselbe Variable natürlich mehrmals auf verschiedene Elemente anwenden dieselbe Variable natürlich mehrmals . Sie können die Variable jederzeit ändern indem Sie einfach darauf klicken und einen anderen Wert aus der Liste auswählen einen anderen Wert aus der Liste oder sie entfernen, indem Sie auf den kleinen Clip klicken Wenn Sie diesen Clip in einigen Feldern nicht sehen, drücken Sie zweimal die Zurück-Taste Und denken Sie daran, dass wir in figment mit einem komponentenbasierten Ansatz arbeiten. Es wäre also eine gute Praxis, Es wäre also eine gute Praxis jeden Auto-Layout-Frame, der mehrfach verwendet wird, in eine Komponente umzuwandeln Wenn wir jetzt eine Instanz herausziehen, können Sie sehen, dass die Instanz alle Abstandswerte erbt , die Sie mit Variablen angewendet haben Während ich den Text in der Instanz ändere, bleiben diese Variablen an Ort und Stelle Und natürlich würde dies, wie bei jeder anderen Komponente, auch mit jeder anderen Variablen funktionieren Wenn Sie also beispielsweise eine Farbvariable für Ihre Komponente festlegen würden , erben alle Instanzen 46. 04 Größenänderungseinstellungen: Größenänderung mit automatischem Layout. Wir haben also gelernt, dass wir jedes Element einfach in einen automatischen Layoutrahmen umwandeln können . Wir können den Abstand, die Größe und den Abstand anpassen, und wenn wir den Inhalt ändern, können wir sehen, dass unser Rahmen dem entspricht Nun, das funktioniert wirklich gut, denn wenn wir noch einmal hinschauen, ist das ein vertikaler automatischer Layoutrahmen Wir möchten aber auch , dass dieser Rahmen auch so reagiert, wenn wir seine Größe ändern auch so reagiert, wenn wir seine Damit das funktioniert, müssen wir eine zusätzliche Ebene für das automatische Layout hinzufügen , die als Größenänderungseinstellungen bezeichnet wird Sie finden die Einstellung zur Größenänderung oben im Layoutfeld Wenn Sie das automatische Layout angewendet haben, kann es sich um den übergeordneten Frame oder den verschachtelten Frame Sie finden es dann hier Aber auch jedes Element innerhalb eines automatischen Layoutrahmens. Wenn Sie darauf klicken, erhalten Sie das Layout-Feld mit den Größenänderungseinstellungen für dieses Element, und das ist der Teil, an dem wir interessiert sind Es ist also wirklich wichtig zu verstehen, dass wir zwar das automatische Layout auf den übergeordneten Frame anwenden, das Auto-Layout-Menü jedoch das Verhalten aller untergeordneten Elemente innerhalb dieses Frames bestimmt das Verhalten aller untergeordneten Elemente innerhalb dieses Frames Also die Ausrichtung für all diese Elemente, der Abstand für all diese Elemente. Wenn wir nun festlegen möchten, wie sich diese Elemente einzeln verhalten sollen, müssen wir sie auswählen und ihr Größenänderungsverhalten festlegen, nicht das Größenänderungsverhalten des gesamten Rahmens. Aktuell haben wir die Wahl zwischen einer festen Größe, dem Füllen des Containers oder dem Umschließen des Inhalts Auto Layout wurde wirklich gut darin, zu erraten, welches Verhalten Sie sich wünschen könnten Sie könnten also tatsächlich damit durchkommen. Zum Beispiel ist dieses Bild hier bereits so eingestellt, dass es den Container füllt. Und das liegt daran, dass das automatische Layout links und rechts einen ähnlichen Rand erkannt hat. Ich würde Ihnen jedoch dringend empfehlen, sich nicht auf diese Voreinstellungen zu verlassen und wirklich einmal zu versuchen, zu verstehen, wie Sie die richtige Größenänderung einrichten Die Größenänderung ist normalerweise der Teil bei dem die Leute am meisten verwirrt sind, was das automatische Layout angeht, aber das ist nicht so schwierig Es geht wirklich nur darum, es einmal zu verstehen und ein bisschen zu üben . Der entscheidende Teil ist, Schritt für Schritt vorzugehen . Du kannst das nicht überstürzen. Gehen Sie also Stück für Stück vor. Das erste, was wir auswählen werden, ist unser Bild. Gehen wir nun zu unserem Drop-down-Menü und stellen wir ein, dass der Container gefüllt wird. Das heißt, wenn wir die Größe des Containers ändern, wird er, nun ja, das, was er sagt, gefüllt, wobei immer der Abstand eingehalten wird, den wir links und rechts angegeben haben Hier haben wir es mit einem horizontalen Aufbau zu tun, also mache ich mir nicht zu viele Gedanken über den vertikalen Trotzdem werde ich diesen hier in einer festen Höhe haben. Das bedeutet, dass mein Bild immer auf dieser bestimmten Höhe fixiert ist . Jetzt gehe ich zum nächsten Element über, das ist mein Text, und ich möchte dasselbe tun. Ich möchte nicht, dass das an der Größe festgemacht wird. Ich möchte, dass es horizontal ist , um den Behälter zu füllen. Und ich werde dasselbe für meinen Kopiertext tun. Ich möchte auch, dass das den Behälter füllt. Jetzt mit Text, ich möchte die Höhe nicht korrigieren, weil ich nicht weiß wie hoch sie sein wird, wenn ich mehr Text hinzufüge oder wenn ich die Größe ändere Deshalb möchte ich, dass es sich umarmt. Umarmung ist ein wirklich süßes kleines Feature. Stellen Sie sich das im Grunde so vor, als würden Sie den vertikalen Inhalt umarmen Wenn es um das Kopieren von Text im automatischen Layout geht, und damit meine ich alles, was keine Schaltfläche oder ein Link ist, dann stelle sicher, dass es immer auf automatische Höhe eingestellt Normalerweise erledigt das automatische Layout das von selbst. Und das ist schon so ziemlich alles. Lassen Sie uns jetzt die Größe unserer Box ändern, und Sie können sehen, dass alles gut folgt Und selbst wenn ich meinen Text ändere. Lassen Sie uns hier also noch etwas mehr Text hinzufügen. Sie können sehen, dass die Box automatisch erweitert wird und das automatische Layout reagiert, da diese Option auf automatische Höhe und Hug eingestellt ist Box automatisch erweitert wird und das automatische Layout reagiert, da diese Option auf automatische Höhe und Ich kann immer noch Dinge wie meinen Abstand und meine Größe mit dem Auto-Layout-Menü ändern meinen Abstand und meine Größe mit dem Auto-Layout-Menü Aber wenn ich die Größe ändere, wird sich alles so verhalten , wie es beabsichtigt war Die automatische Layoutfunktion in Figma ist ziemlich intelligent. Wenn ich hier zum Beispiel eine Schaltfläche habe, die ich hinzufügen möchte, und ich daraus ein automatisches Layout mache, dann können Sie sehen, dass es nicht nur automatisch den gesamten Abstand aufnimmt, sondern mir auch bereits eine vorgeschlagene Größenänderungseinstellung gibt Nun, in einer Schaltfläche machen Horizontal umarmen und Vertikal umarmen Sinn, denn wenn ich das ändere, also sagen wir, ändere es, um mehr zu lesen, dann können Sie sehen, dass ich möchte dies auch horizontal umarmt werden soll. Übrigens kann ich auch einen Auto-Layout-Rahmen in einen anderen ziehen einen Auto-Layout-Rahmen in einen anderen Schaltfläche wäre verschachtelt und behält ihre Größenänderungseinstellungen Wenn wir es verschieben wollten, könnten wir die Ausrichtung verwenden Und wir könnten auch die Einstellungen zur Größenänderung ändern . Wenn wir zum Beispiel eine Schaltfläche in voller Größe haben wollten, könnten wir diese so ändern einen Behälter füllt und er würde in der Mitte Hinweis: Wenn Ihr Text links klebt, liegt das wahrscheinlich daran, dass die Ausrichtung der Schaltfläche immer noch links ist und Sie sie in die Mitte ändern können. 47. 05 Die Auto-Einstellung: Es gibt eine Funktion, die etwas versteckt ist, aber ich benutze sie ständig. Ich möchte Sie darauf aufmerksam machen, und es heißt Auto. Diese Funktion wurde zuvor in Figma Leerzeichen genannt und wird in Flexbox immer noch so genannt, sodass Sie möglicherweise auch hören, dass auf diesen Namen verwiesen wird Also im Grunde haben wir hier unseren Rahmen mit drei untergeordneten Elementen Und wenn ich die Größe ändere, dann kannst du sehen, dass ich es ausrichten kann , jetzt ist es in der Mitte, ich kann es links ausrichten, aber der Abstand bleibt immer erhalten Jetzt kann ich im Drop-down-Menü den Abstand auf Automatisch umstellen Mit Auto wird der Raum gleichmäßig zwischen den Kindern verteilt Neben dem Drop-down-Menü können Sie auch einfach auf die Griffe klicken. Wenn Sie nun einen Wert eingeben, springt er zur ursprünglichen Einstellung zurück. Oder wenn Sie erneut doppelklicken und Auto eingeben, springt es zum Leerzeichen dazwischen, oder wie wir es jetzt Auto nennen. Mein bevorzugtes Tastenkürzel: Klicke einfach auf das Alignment-Menü, um zwischen Packed und Space zwischen zu wechseln , oder du kannst im Alignment-Menü auch das Tastenkürzel X verwenden im Alignment-Menü auch das Tastenkürzel X Auto ist wirklich sehr praktisch, wenn wir Dinge wie eine Navigation erstellen möchten , bei der wir einige Elemente links platzieren und andere rechts platzieren Das Tolle ist, wenn wir mehr Elemente hinzufügen, hängt es davon ab, wo wir sie hinzufügen. Das wäre jetzt also ein direktes Kind. Jetzt haben wir also drei untergeordnete Elemente. Wenn wir also die Größe ändern, verteilt sich der verfügbare Speicherplatz auf drei Aber wenn ich das hier innerhalb meines verschachtelten Rahmens platziere, kehre ich zu meiner ursprünglichen Einstellung zurück In den meisten Fällen ist Auto genau die Lösung, nach der Sie gesucht haben . Also behalte es im Hinterkopf. 48. 06 Lerne über Verschachtelung und Eltern-Kind-Beziehung: Lassen Sie uns das Verschachteln und eine Eltern-Kind-Beziehung verstehen. vertraut zu machen Übrigens ist es wichtig, die Eltern-Kind-Beziehung zu verstehen, um sich mit der Verschachtelung sowohl im automatischen Layout als auch im Code vertraut zu Eltern-Kind-Beziehung Hier siehst du ein Kartendesign, das ich eingerichtet habe. Jetzt wurde bisher kein automatisches Layout angewendet. Sie können sehen, dass diese Karte Cluster hat. Dieser Trap hier gehört zusammen, und dann haben wir einen Text und einen Link, die zusammen gehören Wenn ich nun diese Karte auswählen und einfach das automatische Layout anwenden würde , dann würde das passieren Was passiert ist, ist, dass das automatische Layout den gleichen Abstand zwischen allen Elementen hinzugefügt hat. Der Grund dafür ist, dass das automatische Layout es so betrachtet. Unser Frame ist das übergeordnete Element, und alles, was es direkt darunter auf der ersten Hierarchieebene findet , sind die untergeordneten Elemente. Alle Regeln für das automatische Layout werden auf all diese Kinder angewendet. In diesem Fall unser Abstand. Wenn wir jetzt weitermachen und das verschachteln, habe ich hier einen verschachtelten Rahmen mit automatischem Layout, und ich habe diesen Teil auch verschachtelt Dann wird das automatische Layout das Design so betrachten Wir haben den verschachtelten Beispielrahmen , der immer noch das übergeordnete Element ist, aber jetzt haben wir nur noch drei untergeordnete Elemente Wenn wir jetzt zum Beispiel unseren Abstand ändern , wirkt sich das nur auf die untergeordneten Wir haben immer noch alle unsere Kinder, aber sie sind jetzt Enkelkinder Sie werden der Regel ihrer eigenen Eltern folgen. Je nachdem, wie Ihr Design ändern und wie es sich verhalten soll, müssen Sie diese Verschachtelung anpassen Nehmen wir zum Beispiel an, Sie möchten ein Bild in voller Breite. Was wir tun müssen, ist, unsere Polsterung auf beiden Seiten zu entfernen Was wir aber auch wollen, ist, dass wir hier noch einen gewissen Spielraum haben wollen Was wir jetzt tun können, ist, diese beiden auszuwählen, ein weiteres verschachteltes automatisches Layout zu erstellen und die Ränder jetzt wieder links und rechts anzuwenden Wenn wir den oberen Teil loswerden wollen, können wir das auch tun, indem wir ihn auf Null setzen Jetzt können Sie sehen, dass Sie ein völlig anderes Layout haben, das auch seine eigenen Verschachtelungsrollen benötigt diesem Grund ist es so wichtig , dass Sie sich mit dem Verschachteln auskennen, und es geht wirklich nur um und es geht wirklich nur Beim automatischen Layout geht es also wirklich nicht nur darum, diese kleine Schaltfläche hier anzuwenden Es geht darum, über die allgemeine Struktur Ihres Entwurfs nachzudenken , über die allgemeine Struktur Ihres Entwurfs dann automatische Layoutrahmen dort anzuwenden , wo Sie sie benötigen, und was sehr wichtig ist, dass Sie all diese Auto-Layout-Rahmen, die Sie verschachtelt haben, sowie alle Ebenen darin, sorgfältig darüber nachdenken müssen welches Größenänderungsverhalten Sie haben möchten Es geht wirklich darum, die drei Säulen des automatischen Layouts zu verstehen und zu kombinieren 49. 07 Auto-Layout vorschlagen: Fügen wir etwas Magie hinzu, die auf ein automatisches Layout hindeutet. Hier habe ich einige Designs, die eine Verschachtelung benötigen würden , wenn ich sie in ein automatisches Layout umwandeln möchte sie in ein automatisches Layout umwandeln möchte Das erste ist ziemlich einfach, also dieser Teil wäre ein verschachteltes Auto-Layout, dann dieser Teil und dann ist das alles ein vertikales Auto-Layout Die zweite Karte ist etwas komplexer. Bei diesem rechten Teil müsste es sich um eine vertikale automatische Layoutverschachtelung handeln und dann die Karte selbst um eine horizontale automatische Layoutverschachtelung Und dann haben wir eine Navigation, also müsste dieser rechte Teil verschachtelt werden Und zwischen dem Logo und diesem rechten, verschachtelten Teil müssten wir Auto, auch bekannt als Leerzeichen, setzen Jetzt können wir das alles von Hand machen oder wir können einen kleinen Trick anwenden Fangen wir mit dem ersten an. Wenn ich einfach einen Rahmen auswählen und automatisches Layout anwenden würde , dann würde das passieren, nicht nett. Und wenn wir uns den zweiten ansehen, brauchen wir hier definitiv etwas Verschachtelung. Aber was wir tun können, ist mit der rechten Maustaste zu klicken, und dann sehen Sie unter Automatisches Layout hinzufügen eine weitere Option namens Automatisches Layout vorschlagen Oder wir können auch die Tastenkombinationen Shift Strg und A verwenden Im Ebenenbedienfeld können Sie sehen, dass das automatische Layout uns eine Verschachtelung vorgeschlagen Jetzt haben wir einfach diesen Frame aufgerufen, damit wir einen zusätzlichen kleinen Tipp hinzufügen können einen zusätzlichen kleinen Tipp hinzufügen Klicken Sie auf das AI-Menü und benennen Sie Ihre Ebenen einfach um Und dann bekommst du auch ein paar nette Ebenennamen für diese verschachtelten Elemente Schauen wir uns jetzt an, ob das funktioniert, und das sieht ziemlich gut aus, wenn ich die Größe hier Wenn wir hier hineinklicken, können wir sehen, dass dadurch auch unsere Größenänderung hinzugefügt wurde. Dies ist auf Füllen eingestellt, und auch mein Elternteil hier ist auf Füllen eingestellt. Wenn ich das jemals ändern möchte, kann ich diese Elemente einfach löschen oder in mein Ebenenfenster ziehen und meine Verschachtelung ändern Versuchen wir es mit dem nächsten und wählen wir diese Karte, Umschalttaste und A aus. Ich werde die Tastenkombination verwenden Außerdem werde ich die Ebenen umbenennen. Lass uns einen Blick darauf werfen. Das sieht auch ziemlich gut aus. Ich kann immer noch Anpassungen vornehmen. wir an, ich möchte, dass Nehmen wir an, ich möchte, dass dieses Bild die Hälfte des Containers einnimmt, dann kann ich es einfach auswählen und meine Größe ändern, um den Container zu füllen. Auf diese Weise habe ich es so angepasst, wie es sich verhalten soll. Unser letzter, schauen wir uns die Navigation an. Shift, Control und A, unser Shortcut, und machen wir es uns auch zur Gewohnheit, die Ebenen umzubenennen Dadurch wird alles umbenannt , was ich noch nicht benannt Diese, die ich zuvor benannt habe , werden sie nicht überschreiben Schauen wir uns an, ob das von selbst automatisch angewendet wurde. Ja. Perfekt, wir können hier im Alignment-Menü sehen , dass das Auto angewendet wurde. Das war wirklich etwas , das sehr schwierig war , bevor wir diese kleine Funktion hatten. Nutze es. Dennoch möchte ich Sie dringend dazu ermutigen, sich daran zu gewöhnen, auch manuelles Verschachteln zu verstehen, denn irgendwann möchten Sie Dinge ändern und müssen verstehen, warum die Dinge auf eine bestimmte Weise eingerichtet sind Kleine Randnotiz, zum Zeitpunkt der Aufnahme dieser Funktion ist sie ziemlich neu und wenn man bedenkt, ist sie ziemlich neu und wie mächtig und wichtig sie ist, würde ich erwarten, dass sie aus diesem kleinen Untermenü Rechtsklick in unser Hauptmenü für das automatische Layout bald aus diesem kleinen Untermenü mit Rechtsklick in unser Hauptmenü für das automatische Layout entfernt wird. Achten Sie einfach darauf. 50. 08 Auto-Layout ignorieren: Automatisches Layout wird ignoriert. Was bedeutet das? Also hier habe ich einen automatischen Layoutrahmen. Ich möchte diesen neuen Aufkleber hierher ziehen, und ich möchte, dass er über meinem Bild sitzt. Wenn ich ihn nun einfach in den Rahmen für das automatische Layout ziehe, werden Sie feststellen, dass ich ihn nicht über das Bild ziehen kann da er Teil des automatischen Layouts wird , sobald er in den Rahmen kommt. Was ich jetzt tun kann, ist, es innerhalb des Rahmens zu platzieren , es auszuwählen und dann im Eigenschaftenfenster unter Position dieses kleine Symbol namens Automatisches Layout ignorieren zu finden. In früheren Versionen wurde dies als absolute Position bezeichnet. Sie können Ihr Element jetzt frei um den Rahmen für das automatische Layout ziehen . Kleiner Tipp: Es gibt auch eine Tastenkombination: Halten Sie die Steuerung gedrückt und ziehen Sie sie einfach in einen automatischen Layoutrahmen Dann müssen Sie das automatisch angewendete automatische Layout ignorieren . Wenn Sie es entfernen möchten, klicken Sie einfach erneut auf das Symbol. Da ich die Größe der Karte geändert habe, werden Sie jedoch feststellen, dass sie nicht mehr auf die Breite reagiert Das liegt daran, dass es nicht mehr Teil des automatischen Layouts ist. Daher gilt die Größenänderung nicht. dieses Problem zu lösen, kann ich das Element in einem Menü auswählen , das sich an der nächsten Position befindet , und es dann nach rechts verschieben Das funktioniert nur für Elemente , bei denen es sich nicht um ein automatisches Layout handelt. Dies eignet sich auch hervorragend zum Erstellen von Dingen wie Warnblasen. Ziehen Sie es einfach in Ihren automatischen Layoutrahmen, ignorieren Sie das automatische Layout und positionieren Sie es dann an der gewünschten Stelle. Jetzt wird es wahrscheinlich standardmäßig abgeschnitten. Stellen Sie sicher, dass Sie das übergeordnete Bild auswählen, und wechseln Sie im Menü für das automatische Layout von Clip-Inhalt zu Inhalt anzeigen. Das bedeutet, dass alles angezeigt wird, was über den Rahmen hinausgeht 51. 12 AUTO LAYOUT: 09 Bilder mit festem Seitenverhältnis: Richten Sie jetzt Bilder mit dem Seitenverhältnis mit Figma ein. Hier habe ich eine Autolayout-Karte mit einem Bild. Wählen Sie nun einfach das Element aus, auf das Sie das Seitenverhältnis anwenden möchten. Das funktioniert übrigens auch für Frames. Und dann siehst du direkt neben deinen Größen dieses kleine Schloss. Klicke darauf. Und wenn Sie jetzt die Größe ändern, können Sie sehen, dass das Bild das Seitenverhältnis gut beibehält Ein kleiner Wermutstropfen, wenn Sie zu diesem Zeitpunkt in den Taubmodus wechseln, aber denken Sie daran, dass dies die Übersetzung ist, die wir gerade veröffentlicht dies die Übersetzung ist, die Idealerweise hätten wir ein Seitenverhältnis, wie wir es in CSS sehen, aber das ist noch 52. 09 Auto-Layout-Seiten: Wir können auch Verschachtelungen verwenden, um ganze Seiten mit automatischem Layout einzurichten In meinem Beispiel hier habe ich ein Komponentensatz mit zwei Varianten, eine für Mobilgeräte und eine für größere Bildschirme Hier habe ich eine Instanz dieser Komponente, und Sie können sehen, dass sie bereits mit automatischem Layout eingerichtet ist. Und ich habe eine Kartenkomponente, die auch mit automatischem Layout eingerichtet ist. Auf der rechten Seite können Sie sehen, dass ich eine Reihe von Instanzen habe und hier bereits einige Inhalte, einige Bilder und Schlagzeilen hinzugefügt habe. Jetzt wollen wir einen Rahmen einrichten , der all das enthält. Drücken wir F. Wir erhalten unser Rahmenmenü und ich wähle einfach eine zufällige iPhone-Größe aus. Ich kann jetzt meine Instanzen zu diesem Frame hinzufügen, und da sie alle bereits mit automatischem Layout eingerichtet sind, muss ich mir keine Gedanken über die Details machen. Ich kann mich jetzt für das größere Layout entscheiden. Jetzt könnte ich meine Karten einzeln hinzufügen, aber was ich stattdessen tun werde, ist , sie alle auszuwählen. Ich drücke die Umschalttaste und A. Jetzt habe ich hier einen automatischen Layoutrahmen erstellt und nenne diese Kartengruppe. Ich kann diese Gruppe jetzt aufräumen. Lassen Sie uns zum Beispiel etwas Abstand hinzufügen. Was ich jetzt tun kann, ist, dass ich das in meinen Rahmen einfügen kann. Denken Sie daran, wir können den übergeordneten Frame auswählen und dann mit dem Clip-Inhalt den gesamten Inhalt sehen, der überläuft Lassen Sie uns hier ein wenig heranzoomen , damit wir das besser sehen können Und was ich tun möchte, ich möchte das vielleicht ein bisschen ummischen Ich kann das machen, indem ich mit den Pfeiltasten auf und ab gehe. Jetzt habe ich mein allgemeines Layout, und was ich jetzt tun möchte, ist, die Größenänderung so hinzuzufügen , dass sie sich an meinen Rahmen anpasst Daher muss ich diesen übergeordneten Rahmen auch in einen automatischen Layoutrahmen umwandeln Es setzt den übergeordneten Rahmen automatisch auf fest und fest, und das ist in Ordnung, weil ich es mit dieser voreingestellten festen Größe zu tun habe. Was wir jetzt tun werden, ist dass wir das Gleiche tun werden, als wir unsere Elemente wie die Navigation und die Autos eingerichtet haben . Wir werden es Stück für Stück durchgehen die Einstellungen zur Größenänderung einrichten Wir müssen uns keine Gedanken über die Autos und die Navigation selbst machen , da diese bereits in der Komponente eingerichtet ist Also werde ich diese Instanz als Ganzes nehmen und sagen, diese gesamte Instanz, bitte füllen Sie den Container. Schauen wir uns also an, ob das schon funktioniert. Okay, das ist großartig. Jetzt holen wir uns unsere Karten. Auch hier kann ich zuerst die übergeordnete Gruppe nehmen, also die Kartengruppe, und ich kann jetzt Container füllen sagen. Jetzt wissen meine Karten innerhalb dieser Gruppe immer noch nicht, wie sie sich verhalten sollen. Wenn ich eine von ihnen auswähle, kannst du sehen, dass sie immer noch repariert sind . Lassen Sie uns alle auswählen. Lassen Sie uns unsere Tastenkombination verwenden, um eine Kartengruppe auszuwählen, die Eingabetaste zu drücken und dann alle untergeordneten Elemente gleichzeitig auszuwählen. Jetzt sage ich „Behälter füllen“ und „Inhalt in Höhe angeben“, weil ich nicht weiß, wie sich die Größe ändern soll. Das ist großartig Aber ich möchte links und rechts etwas Polsterung. Jetzt habe ich die Polsterung bereits in meiner Navigation, da dies ein natürlicher Teil der Navigation ist Bei meinen Karten kann ich sie also einfach zu meiner Kartengruppe hinzufügen, also wähle ich meine Kartengruppe und füge dann etwas Polsterung hinzu Ich verwende meine Variablen. Sie könnten hier auch links und rechts eine Zahl hinzufügen. Jetzt wird alles korrekt skaliert. Wenn Sie es mit mobilen Bildschirmen zu tun haben, empfehle ich Ihnen, das voreingestellte Menü zu verwenden , da Sie auf diese Weise eine genauere Darstellung verschiedener Bildschirmgrößen erhalten . Das funktioniert also gut, aber ich möchte vielleicht noch ein paar Größen hinzufügen. Drücken wir also erneut F und nehmen wir an, ich möchte auch eine Desktop-Version haben. Also werde ich eine Instanz meiner Navigation kopieren. Und ich kann diese Instanz entweder direkt von hier kopieren oder ich kann die kleine Version verwenden und sie einfach in meinem Fenster mit den Komponenteneigenschaften ändern . Bevor wir das automatische Layout hinzufügen, fügen wir es vorerst einfach von Hand hinzu. Und Sie können sehen, dass dies auch bereits mit dem automatischen Layout eingerichtet ist , sodass wir uns keine Gedanken über diese Komponente oder Instanz selbst machen müssen . Ich möchte meine Karten hinzufügen. Ich kann das entweder von Grund auf neu einrichten oder ich kann sie einfach von meiner mobilen Version kopieren. Wenn ich sie nur an die Bildschirmgröße anpassen würde , dann würde das passieren. Das liegt nun daran, dass das automatische Layout auf ein vertikales Layout eingestellt ist . Aber für dieses Layout müssten wir es auf horizontal ändern. Umschalten könnte am Anfang etwas verwirrend sein . Also arbeite einfach von vorne. Ich möchte den Rand und die Polsterung anpassen. Hier können Sie also sehen , dass ich in meiner Navigation einen linken und rechten Abstand von 48 habe Wählen wir also auch meine Kartengruppe und setzen wir auch das Padding auf die Variable 48. Wir können die Höhe unserer Kartengruppe auch so einstellen , dass sie sich an den Inhalt anpasst, sodass sie immer so hoch ist wie die Und wir könnten jetzt den gesamten Bildschirm in einen Bildschirm mit automatischem Layout umwandeln, und dabei können wir auch Variablen verwenden, um den Abstand dazwischen anzupassen Sie können wählen, ob Sie Variablen verwenden oder einfach diese Zahlen eingeben möchten. Da wir das Größenänderungsverhalten hier bereits festgelegt und es kopiert haben, bleibt es gleich. Es wird also auf Füllen gesetzt, das ist auf Füllen eingestellt, das ist auf Füllen eingestellt und alle untergeordneten Elemente sind ebenfalls auf Füllen eingestellt Wenn ich also die Größe des übergeordneten Elements ändere, können Sie sehen, dass sich die Größe aller Elemente entsprechend ändert Ein kleiner Extra-Tipp, etwas fortgeschrittener. Sie können Ihre Komponente auswählen und dann über das Drop-down-Menü für die Breite eine Mindest- und Maximalbreite auswählen Wenn ich nun eine Mindestbreite festlege und sagen wir einfach, ich stelle diese vorerst zufällig auf 260 Pixel Dann können Sie sehen, dass ich, wenn ich einen Moment herausziehe, diesen Wert nicht kleiner als den eingestellten Betrag machen kann. Das Tolle daran ist, dass ich jetzt die ganze Zeile auswählen und sie so einstellen kann, dass sie beendet wird. Bevor wir das tun, schauen wir uns das normale Verhalten an, damit es hier einfach aufhören würde. Wenn wir es auf Umbruch setzen würden, würde es jetzt in eine neue Zeile umbrechen. Übrigens können Sie nicht kontrollieren, wann Ihre Navigation beispielsweise zu klein wäre. Also in dem Moment, in dem Sie auf die andere Version umsteigen müssen . Das müssen Sie wirklich von Hand in Figma testen und dokumentieren Wie Sie sehen, ist es sehr wichtig , zuerst Ihre Komponenten einzurichten und sicherzustellen, dass sie reagieren Und sobald mit Ihren Komponenten alles in Ordnung ist, können Sie sie übernehmen und Ihre Seiten in responsive Seiten umwandeln. Wenn Sie möchten, müssen Sie das nicht tun. 53. 10 Welche Einschränkungen sind in Figma?: Einschränkungen in Figma. In Figma haben wir noch eine weitere Funktion, mit der wir das Verhalten bei der Größenänderung steuern können . Diese Funktion wird als Einschränkungen bezeichnet Wählen Sie ein beliebiges Element innerhalb eines Rahmens Dabei muss es sich nur um einen einfachen Rahmen handeln, nicht um einen Rahmen mit automatischem Layout Und jetzt sehen Sie blaue gepunktete Linien , die auf den nächsten übergeordneten Rahmen zeigen Dies sind die Einschränkungen. Sie können sie auch im Menü auf der rechten Seite unter Einschränkungen sehen . jedoch nur für Standardrahmen und Sie sind jedoch nur für Standardrahmen und nicht für Rahmen mit automatischem Layout verfügbar . Standardmäßig sind diese Einschränkungen auf oben und links festgelegt. Und beachten Sie, dass selbst verschachtelte Rahmen immer bis zum nächsten übergeordneten Element verschoben werden. Wenn wir also die Größe ändern, scheint nichts zu passieren weil sie auf links und oben gesetzt sind Wenn wir diese Einschränkungen jedoch ändern, also setzen wir sie zum Beispiel auf links, rechts, auf dieses Feld und dann auf diesen roten Punkt hier, werde ich sie auf unten und rechts setzen Beachten Sie, wie sie sich ändern, und sie zeigen Ihnen, an welcher Seite sie angeheftet sind, und lassen Sie uns diese hier auf die Mitte setzen Sie können die Drop-down-Menüs verwenden, oder Sie können einfach das Symbol verwenden und auf die verschiedenen Richtungen klicken wir sie in ihren neuen Richtungen anheften und jetzt ihre Größe ändern, können Sie sehen, dass sich dadurch ihr Verhalten ändert , und wir können sie horizontal oder auch vertikal einstellen also naheliegend, sie an eine Seite scheint also naheliegend, sie an eine Seite oder an den Boden Aber manchmal sind wir etwas verwirrt , wenn wir über die Mitte, die sogenannte Links-Rechts-Methode und die Skalierung sprechen die sogenannte Links-Rechts-Methode und die Skalierung Der Unterschied zwischen beiden ist, dass Fixed einfach einen festen linken und rechten Rand hat. Wo auch immer Sie es platziert haben, wird dieser Abstand beibehalten Skalierung hat einen prozentualen Rand für die Position, an der Sie sie platziert haben, und die Mitte bleibt einfach in der relativen Mitte. Und das Gleiche funktioniert offensichtlich horizontal und vertikal. Kleiner Tipp, manchmal möchten Sie nur die Größe des übergeordneten Frames ändern und die Einschränkungen ignorieren Halten Sie in diesem Fall die Befehlstaste gedrückt, und die Beschränkungen werden einfach ignoriert , solange Sie sie gedrückt halten 54. 11 Einschränkungen und Raster: Beschränkungen und Raster. Anstatt alles mit automatischem Layout einzurichten, könnten wir unsere Komponente einfach als Auto-Layout-Komponenten einrichten als Auto-Layout-Komponenten Dann könnten wir sie mit links und rechts an die linke und rechte Seite anheften, und das Gleiche machen wir hier. Wir können hier sogar Elemente wie diese kleine Blase hinzufügen und sie nach unten und rechts platzieren. Wenn wir nun die Größe ändern, erhalten wir so ziemlich das gleiche Ergebnis, aber es ist viel einfacher als das Einrichten eines automatischen Layoutrahmens. Sie werden jedoch feststellen, dass dies zwar für einfache mobile Setups mit nur einem Element sehr gut funktioniert , sobald Sie weitere Elemente hinzufügen, wird es einfach nicht funktionieren Denn das Problem hier ist , dass, wenn wir links nach rechts verwenden , es die volle Entfernung in Anspruch nimmt Es weiß nichts über diese anderen Elemente in der Umgebung. Wir könnten sie alle auswählen und maßstabsgetreu einstellen. Aber damit würde es funktionieren, aber wir würden keinen festgelegten Abstand einhalten. So konnten wir unsere Polsterung beispielsweise nicht wirklich an unsere Navigation anpassen Eine gute Möglichkeit, damit umzugehen, besteht darin, ein Raster hinzuzufügen. Denn schauen Sie mal, wenn ich meine linken und rechten Beschränkungen in einem Raster hinzufüge , dann wird es sich jetzt die nächstgelegene Spalte ansehen , weil es die Spalten als Eltern verwendet. Wenn wir also all diese Karten auswählen und sie alle auf links und rechts setzen würden diese Karten auswählen und sie alle auf links und rechts setzen , würden sie bei der Größenänderung in den dafür vorgesehenen Spalten verbleiben. Jetzt können wir das Gleiche für unsere Navigation hier oben tun. Stellen wir es auf links und rechts ein. Sie können sehen, dass wir mit nur wenigen Klicks und sehr wenigen Komplikationen und sehr wenigen Komplikationen ein responsives Setup erhalten und unser Design testen können. Das ist wirklich praktisch für einen schnellen Test Es funktioniert auch sehr gut, wenn Sie zum Beispiel mit ungeraden Zahlen arbeiten. Nehmen wir an, Sie möchten nicht alles gleichmäßig verteilen. Das würde auch mit dem Layout nicht funktionieren, aber es funktioniert wirklich gut mit einem Raster. Dies hat jedoch auch Nachteile, da das Raster keinen der vertikalen Abstände berücksichtigt, sodass es den Abstand zwischen hier und hier nicht kennt Wenn Sie weitere Elemente wie Text hinzufügen, beginnen die Dinge ineinander zu fließen Aber das ist nur ein Figma-Problem. Dies wird später kein Problem im Code sein. Deshalb verwende ich immer noch gerne Raster für schnelle Tests. Dies ist jedoch kein Ersatz für das automatische Layout. Ihre Komponenten sollten immer mit automatischem Layout eingerichtet werden, aber manchmal ist es einfach viel schneller, sie schnell mit einem Raster und Einschränkungen zu testen. Ein kleiner Tipp: Sie können das Raster auch jederzeit ein - und ausschalten Verwenden Sie das Eigenschaftenfenster auf der rechten Seite und klicken Sie einfach auf das Symbol, oder Sie können auch die Tastenkombinationen Strg und G verwenden . Wenn Sie das Raster ausgeschaltet haben, bleiben alle Einschränkungen weiterhin bestehen 55. Teil 4 Responsive: Sobald Sie sich mit dem automatischen Layout und den Einschränkungen vertraut gemacht haben, lassen Sie uns mit unserem Kursprojekt beginnen. Denken Sie daran, dass darin keine neuen Informationen enthalten sind. Dies ist nur eine zusätzliche Übung , um Ihr Verständnis dieses Themas zu vertiefen Im vierten Teil „Responsive finden Sie einige Anweisungen und auch einige Beispiele, bei denen die tatsächliche Reaktionsfähigkeit jedoch in den Komponenten stattfindet jedoch in den Wenn wir zu unserer Komponentenseite springen, dann zu jeder Komponente, bei der es Sinn macht Zum Beispiel nicht zu meinen Symbolen, sie benötigen kein automatisches Layout, aber alles, was ihre Größe ändern würde , hat Inhalt , der neu gemischt wird Ich habe automatisches Layout hinzugefügt, sodass Sie sich durch diese Komponenten klicken und auch sicherstellen können diese Komponenten klicken und auch sicherstellen , dass Sie die Ebenen öffnen Hier kannst du also sehen, wie ich alles verschachtelt habe. Und dann kannst du auf der rechten Seite und im Eigenschaftenfenster die Einstellungen für das automatische Layout sehen und auch die Einstellungen zur Größenänderung nicht vergessen. Öffne diese Ebenen wirklich, damit du sehen kannst , wo alles verschachtelt ist Verschachtelung ist wirklich wichtig, um das richtig zu machen. Und denken Sie daran, dass responsives Design der schwierigste Teil von Figma ist also vorsichtig mit sich selbst um und verwenden Sie einfach diese Komponenten, die ich für Sie eingerichtet habe, als Referenz Dies ist ein Teil , den wir zu einigen Komponenten hinzufügen , wo wir ihn benötigen Zum Beispiel bräuchten meine Symbole kein automatisches Layout, es sind nur Standardsymbole. Dann gibt es noch einen anderen Teil. Wenn wir also in unser Design springen, werden jetzt alle unsere Instanzen hier erben Sie können also auf der rechten Seite sehen , dass hier alle Einstellungen von zuvor Und Sie können auch hier drinnen , im Ebenen-Panel, sehen , dass es dieselbe Verschachtelung hat Das alles erbt. Ich muss das nicht jedes Mal hinzufügen, wenn ich diese Komponente oder eine Instanz davon verwende Wenn ich es jedoch in ein neues Design einfüge, muss ich ihm jetzt sagen, wie es sich in Bezug auf diese neue Umgebung verhalten soll , in der es platziert wird. Es gibt mehrere Möglichkeiten , dies zu tun. Sie könnten den gesamten Rahmen mit automatischem Layout einrichten , oder Sie könnten Einschränkungen verwenden, was ich verwende, da ich das etwas einfacher handhaben kann und mir auch immer noch mehr Flexibilität beim Design bietet . Sie können zum Beispiel sehen, dass in dieser Instanz Einschränkungen auf links, rechts und oben gesetzt sind. Und Sie können zum Beispiel sehen, dass die Tippleiste hier unten links, rechts und unten hat. Wenn ich jetzt den Bildschirm auswähle und dann mein Drop-down-Menü verwende, kann ich jetzt alle verschiedenen Größen aktueller Telefone ausprobieren Also probiere ich meistens die kleinste aus. Das ist keine übliche Größe, aber vielleicht gibt es sie immer noch. Also achte ich darauf, dass alles noch passt und verwende dann die größte. Und ich kann hier einfach dazwischen springen und sicherstellen , dass mein Design für alle Größen gut funktioniert. Du könntest es dir natürlich auch einfach schnappen und die Größe von Hand Ich finde es jedoch etwas zuverlässiger dieses Drop-down-Menü hier mit echten Größen zu verwenden Lassen Sie mich Ihnen beim Einstieg in diese Übung eine kleine Anleitung geben, da Sie dies zu den Komponenten hinzufügen müssten , die Sie in Ihren separaten Dateien erstellt haben, auf die immer noch kein automatisches Layout angewendet wurde. Wenn Sie das noch nicht eingerichtet haben, können Sie einfach zu den Übungen zurückkehren und sich die vorgeschlagenen Komponenten schnappen , die ich in Übung zwei für Sie erstellt habe. Jetzt müssten Sie das in eine neue Datei kopieren, sie alle in Komponenten umwandeln und dabei sicherstellen, dass Sie diese Symbole wieder verschachteln, oder Sie können sie einfach loswerden und die Verschachtelung für eine Minute vergessen und sich auf das automatische Layout konzentrieren Das wäre auch in Ordnung. Sie können dann Ihr Design mit diesen Komponenten einrichten. Wenn das ein bisschen schnell geht, springen Sie zurück zu dieser Sitzung. Kehren Sie zum zweiten Teil unseres Kursprojekts zurück, in dem wir über Komponenten sprechen. Wenn Sie nun alle verschiedenen Schritte des Kursprojekts befolgt haben, sollten Sie das jetzt wissen. Wahrscheinlich haben Sie Ihr Design hier eingerichtet und Sie haben auch Ihre Komponenten, und Ihr Design besteht aus Instanzen dieser Komponenten. Derzeit gibt es jedoch noch keine Einschränkungen. Lassen Sie uns zunächst auf unsere Komponenten eingehen und sicherstellen, dass sie sich korrekt verhalten. Wir fangen ganz am Anfang an. Ich muss dort kein automatisches Layout hinzufügen, so wie es sie gibt. Einfach in Ordnung. Jetzt ist unsere Tippleiste hier, ich muss das automatische Layout hinzufügen. Ich habe diese Tap-Leiste bereits so eingerichtet, dass jedes dieser Symbole hier seinen eigenen Rahmen hat. Das macht es mir ziemlich einfach. Ich kann einfach das automatische Layout anwenden. Ich wende automatisches Layout auf diesen Rahmen an. Ich wende es auf diesen Rahmen an und wende es auf diesen Rahmen an. Ich kann jetzt das automatische Layout auf die gesamte Leiste anwenden. Ich muss jetzt einfach die Eingabetaste drücken. Auf diese Weise wähle ich alle verschachtelten untergeordneten Elemente gleichzeitig aus und kann sie jetzt so einstellen, dass sie den Container füllen Sie werden einfach den verfügbaren Speicherplatz, geteilt durch drei, ausfüllen den verfügbaren Speicherplatz, geteilt durch drei Schauen wir uns an , ob das funktioniert. Also werde ich einfach eine Instanz herausziehen und die Größe ändern Das. Sieht fantastisch aus. Das war das. Okay, der nächste, unsere Top-Bars hier. Du könntest sogar argumentieren und sagen, naja, ich werde es mit Einschränkungen belassen und es würde funktionieren. Es würde funktionieren, aber sobald ich die richtige Größenänderung vorgenommen habe, möchte ich, dass alles einheitlich ist. Auch um all diese Abstände hier mit dem automatischen Layout korrekt zu Also werde ich dem ein automatisches Layout hinzufügen. Ich werde es wieder auf die volle Größe bringen. Ich glaube, ich habe alles bei 390. Es wäre eigentlich egal, weil es jetzt responsiv ist, aber ich hätte das trotzdem gerne. Jetzt räume ich einfach auf, damit Sie hier sehen können, das schon gut funktioniert Ich habe links und rechts, ich werde nur in der Mitte linieren, also muss ich unten links und rechts, all die schönen Abstände Schauen wir uns an , ob das funktioniert. Ja, das ist in Ordnung. Ich werde dasselbe mit dem hier unten machen. Ich werde auch ein Layout anwenden. Sie können zum Beispiel hier sehen, der Abstand etwas abweicht. Ich werde das auch 390 machen. Auch das kann jede Größe haben, es reagiert. Jetzt werde ich das aufräumen und das auch mit 16 erledigen. Auf diese Weise sind beide mit allen Abständen identisch Okay, großartig, lass uns hier drüben springen. Unsere Designelemente in meinem Playlist-Cover. Eigentlich werde ich das hier belassen und Einschränkungen verwenden. Obwohl ich gerade gesagt habe, dass ich es vorziehe , alles mit automatischem Layout zu haben. Ich finde, dass es etwas schwierig wäre, damit anzufangen. Es würde immer noch mit dem automatischen Layout funktionieren. Sie könnten es auswählen, Sie könnten ein automatisches Layout hinzufügen. Dann müssten Sie diesen Farbverlauf hier auswählen. Du müsstest es absolut positionieren, es wieder reinbringen, du kannst sehen, dass es immer noch funktioniert. Aber es wird ein bisschen knifflig. Lass uns wieder hierher springen. Ich werde das einfach hier einstellen, also das Overlay, es sollte eigentlich Gradient heißen Den Farbverlauf werde ich auf links, rechts einstellen , und das Bild werde ich auch auf links, rechts einstellen Ich werde tatsächlich dasselbe für oben und unten tun. Das bedeutet, dass sie immer korrekt skalieren werden. Jetzt dieser Kleine hier, ich muss hier auf jeden Fall ein automatisches Layout hinzufügen. Wir müssen zuerst verschachteln, denn was würde passieren, wenn wir einfach das automatische Layout anwenden würden? Es würde so etwas tun. Das wollen wir nicht, wir müssen nisten. Ich möchte eigentlich, dass die beiden hier ihren eigenen Abstand haben. Ich wähle sie aus, drücke Shift und A, dann wähle ich Shift und A. Und jetzt kann ich das automatische Layout auf den gesamten Rahmen anwenden. Okay? Denken Sie also daran, dass wir unsere drei Schritte machen. Wir denken zuerst über die Verschachtelung nach, dann fügen wir das automatische Layout hinzu und dann ändern wir die Größe. Jetzt müssen wir das Verhalten zur Größenänderung hinzufügen. Ich werde hier mit dieser Schaltfläche beginnen. Das ist in Ordnung, so wie es eigentlich ist. Nein, lassen Sie uns einstellen, dass dies eigentlich auch ein automatisches Layoutelement sein muss. Fügen wir diese Umarmung hinzu. Das ist perfekt. Das ist jetzt hier, ich möchte den Behälter füllen. Ich möchte den Behälter füllen. Dann dieser Behälter, ich möchte den Behälter auch füllen. Und das hier, ich lasse es reparieren. Lass uns das ausprobieren. Lassen Sie uns einfach eine Instanz abrufen , um sicherzustellen, dass sie funktioniert. Das nein, tut es eigentlich nicht. Dieser hier, das haben wir vergessen, muss auch den Behälter füllen. Lass uns einfach etwas mehr Text hinzufügen und sehen, was passiert. Wir können sehen, dass ein kleiner Fehler vorliegt. Okay, lassen Sie uns diesen Fehler finden. Füllen Sie den Behälter, das füllt auch den Behälter. Das heißt, lass uns einfach Stück für Stück füllen. Das soll füllen, das heißt immer noch k. Hier haben wir das Problem, den Behälter zu füllen. Du kannst sehen, ob du diese kleinen Tests hier herausziehst, dann ist das wirklich hilfreich. Eine andere Sache, die ich wahrscheinlich tun würde, ist, das in den Mittelpunkt zu stellen. Es wäre also so etwas. Okay, fantastisch, das funktioniert jetzt auch. Sie können hier in Ihrer Übungsdatei sehen , dass das tatsächlich das Beispiel ist, das ich verwende. Sie können also sehen, dass wir zuerst an das Nistnest denken und dann an die automatische Layouteinstellung Sie können tatsächlich eine Position sehen, alles unten, es liegt an Ihnen Und dann wende ich die Komponente hier ganz am Ende an. Es spielt keine Rolle, wann Sie daraus eine Komponente machen. Sie können hier auch mit diesen Beispielen spielen. Gehen wir zurück, unser Cover. Unser Deckmantel. Ich mache das Gleiche wie hier. Ich lasse es einfach wichtig. Nimm einfach immer alle Elemente im Inneren und stelle sicher, dass sie alle eine Art von Einstellung haben. Sie könnten Bilder direkt auf dem Rahmen platzieren. Ich verwende diese kleine Form einfach, weil ich dadurch Bilder schneller kopieren und einfügen kann. Aber eine Form ist in Ordnung oder ein Rahmen ist in Ordnung. Es liegt wirklich an dir. Diese Karte hier. Das ist wirklich einfach, weil es nur zwei untergeordnete Elemente hat wir direkt auf das Layout anwenden können, ohne dass weitere Verschachtelungen erforderlich Das Einzige, was ich tun werde, ist, diesen Text so einzustellen , dass er den Container füllt Lass uns das einfach auch versuchen. Lass uns noch etwas Text kopieren. Und du kannst sehen, ja, das hat tatsächlich kleine Punkte. Ich will nicht, dass das in die nächste Reihe kommt. Perfekt. Denken Sie daran, wenn Sie das wollen, das ist in dem kleinen Extra-Menü Ihrer Texteigenschaften, und dann finden Sie es hier unten. nächste ist dran. Dieser muss auch ein bisschen verschachtelt werden. Übrigens kann es sein, dass Sie auf geringfügige Unterschiede stoßen zwischen dem, was ich Ihnen hier zeige, und meinem endgültigen Aufbau in der Übungsdatei Es gibt mehrere Möglichkeiten, dies zu optimieren, aber es sollte ähnlich sein Das Wichtigste ist, eine Instanz herauszuziehen, sie zu trocknen und sicherzustellen, dass sie funktioniert Hier brauchen wir zunächst eine Verschachtelung, also nehmen wir die beiden, Shift und Acht, und erstellen einen automatischen Layoutrahmen Lassen Sie uns nun das automatische Layout auch zum übergeordneten Element hinzufügen und dafür sorgen, dass alles aufgeräumt ist Also ich möchte, dass es auch 16 ist. Wenn wir nun eine Instanz herausziehen, können Sie sehen, dass sie sich noch nicht so verhält, wie wir es uns wünschen. Also, was ich tun möchte, ist, diesen mittleren Teil zu nehmen und ich sage Behälter füllen. Und jetzt wird das den gesamten verfügbaren Speicherplatz beanspruchen. Und es wird im Grunde diesen kleinen Knopf nach rechts drücken diesen kleinen Knopf nach rechts und er wird immer noch links bleiben. jedoch immer darauf, dass Sie auch mit mehr Inhalten testen. Hier kannst du also sehen , dass wir jetzt vergessen haben , die inneren Kinder festzulegen, also drücke ich die Eingabetaste, ich erhalte alle untergeordneten Elemente. Du kannst sie auch einfach eins nach dem anderen auswählen und ich stelle sie so ein , dass sie den Behälter füllen. Und dieser hier oben auch, um den Behälter zu füllen. Wenn du also eine Instanz herausziehst und ein bisschen mit dem Inhalt herumspielst, kannst du immer ein ziemlich gutes Ergebnis erzielen. Übrigens eine Vorstellung davon, was passiert, um solche Dinge zu vermeiden, wenn das zu klein wird, der Überlauf, das ist kein automatisches Layout, das ist einfach der Inhalt unseres alten Freundes Gehen Sie die restlichen Komponenten einfach selbst durch. Also nur die beiden, um fertig zu werden. Denken Sie daran, dass wir zuerst verschachteln, dann das automatische Layout hinzufügen und dann die Größe der Heiligen Drei Sobald du damit fertig bist, habe ich das für dich gemacht. Dann springen wir zurück zu unserem Design. Sie können sehen, ob wir einfach auf eine klicken, dann können Sie sehen, dass sie alle diese Einstellungen geerbt haben. Jetzt müssen wir hier nur noch unser Größenänderungsverhalten hinzufügen. Ich gehe Stück für Stück. Ich wähle diesen links und rechts und oben aus. Dann dieser hier drin. Lassen Sie mich eigentlich mein Raster einschalten , weil ich es mit dem Raster positionieren möchte. Denken Sie daran, dass sich Einschränkungen mit dem Raster verhalten. Ich werde das auch auf links und rechts setzen . Dann hier mein Text , um sicherzustellen, dass er links und rechts die volle Breite des Rasters hat. Ich habe schon damit gespielt. Offenbar ist das auch auf links und rechts eingestellt. Jetzt diese hier, ich muss sie auswählen. Und jetzt klicke ich mit der rechten Maustaste und rahme die Auswahl ein, weil ich möchte, dass sie das tun. Andernfalls würde es an der Körnung im Hintergrund haften bleiben und versuchen, sich selbst neu anzuordnen Das ist jetzt wie ein Element, das ich links und rechts positionieren kann Ich werde das Gleiche mit dem hier unten machen. Ich mache die Rahmenauswahl links und rechts. Offensichtlich meine untere Leiste links und rechts, und ich möchte, dass sie unten bleibt. Lass es uns ausprobieren, und wie immer es nur darum, Dinge auszuprobieren und zu reparieren. Wenn es nicht so funktioniert, wie Sie es erwarten, lassen Sie uns vielversprechend aussehen. Schauen wir uns unseren Kleinen an. Und das sieht auch gut aus. Perfekt. Kehren wir zu unserer Standardgröße zurück. Geh das einfach Stück für Stück durch. Also wähle das alles hier aus, kleiner Tipp, dieses ganze Overlay Sie müssen sicherstellen, dass es am Boden haftet. Wenn du die Größe änderst, wenn du eine dicke Spitze haben möchtest, dann springe einfach zu unserer Übungsdatei. Im endgültigen Design können Sie meine Designs sehen. Und du kannst einfach hier reinklicken. Und Sie können sehen , wie ich die Einschränkungen für die verschiedenen Instanzen eingerichtet habe . Und ja, am Anfang wird es sich ein bisschen wie die Arbeit mit Kaugummi anfühlen , aber glauben Sie mir, Sie werden es schaffen Es wird einfacher werden, je mehr du es tust. 56. 01 Der Figma-Prototyp-Arbeitsbereich: Lassen Sie uns also mit einigen Grundlagen rund um den Arbeitsbereich beginnen, wenn es um das Prototyping Hier haben wir also einige Design-Setups, einige für Mobilgeräte und einige für den Desktop, und standardmäßig befinden wir uns im Design-Tab Neben der Registerkarte „Design“ finden Sie die Registerkarte „ Prototyping Sie können auch die Tastenkombination verwenden , um zwischen ihnen, alt oder Option acht und neun, umzuschalten alt oder Option acht und neun Deshalb werden wir dieses Menü hier genauer kennenlernen Menü hier genauer Beachten Sie zunächst, dass Sie, wenn Sie auf die graue Leinwand klicken, die allgemeinen Einstellungen für den Prototyp festlegen. Also jedes Gerät, das Sie einrichten möchten, werden später mehr darüber erfahren und ob Sie den Hintergrund ändern möchten, und das wird in der Präsentationsansicht angezeigt, die wir uns gleich ansehen werden. Wenn Sie jedoch einen beliebigen Rahmen auf Ihrer Leinwand auswählen, werden Sie feststellen, dass sich das Prototyping-Menü hier ändert, und hier werden wir die meiste Zeit arbeiten Hier in unserer Designdatei werden wir das Design und das gesamte Verhalten unseres Prototyps einrichten das gesamte Verhalten unseres Prototyps Wenn wir unseren Prototyp in Aktion sehen wollen, müssen wir den kleinen Play-Button oben rechts in Ihrer Datei drücken. Dies springt dann in den Präsentations- oder Vorschaumodus. können einfach Ihre Tastaturtasten verwenden , um zum nächsten Bild zu springen, auch wenn Sie noch keine Verbindungen eingerichtet haben Beachten Sie die Reihenfolge, die Figma hier verwendet. Das ist wirklich praktisch, weil Figma tatsächlich das erste Bild auswählt es findet, und dann die Reihe von Bildern durchläuft Wenn es keine Frames mehr gibt, springt es zum nächsten verfügbaren Frame Das muss keine klare Zeile sein. Es könnte so etwas sein, aber Figma wird das als eine Reihe interpretieren und den Frame nacheinander durchgehen Kann auch ein Gerät für die Vorschau einstellen. Stellen Sie sicher, dass nichts ausgewählt ist, und klicken Sie auf den grauen Canvas-Hintergrund . Daraufhin wird das Drop-down-Menü für Geräte in einem Prototyping-Menü angezeigt Hier kannst du ein Gerät auswählen. Vergewissern Sie sich, dass das Gerät, das Sie auswählen, der Größe Ihrer Rahmen entspricht. Wenn wir jetzt einen Bildschirm auswählen und den Schimpansen wieder in den Präsentationsmodus versetzen, können Sie sehen, dass wir jetzt ein Gerät in der Nähe haben Wir können immer noch zwischen den Designs hin- und herschalten. Beachten Sie jedoch, dass es nur für das von Ihnen eingestellte Gerät geeignet ist. Sobald wir zum Beispiel zu unseren Desktop-Layouts gehen , würde das nicht mehr funktionieren. Die Lösung hierfür wäre , Ihre Mobil- und Desktop-Designs für Ihr Prototyping auf verschiedenen Seiten zu speichern Desktop-Designs für Ihr Prototyping auf verschiedenen Seiten Übrigens können wir unseren Designs auch Videos oder animierte Geschenke hinzufügen unseren Designs auch Videos oder animierte Geschenke hinzufügen In unserem Designmodus würde dies nicht angezeigt, aber sobald Sie in den Präsentationsmodus wechseln, können Sie Ihre Videos in Aktion sehen. Dies ist nur ein Profi-Feature. Neben dem Präsentationsmodus können Sie in Figma auch einzelne Bildschirme auswählen und dann die Umschalt-Taste und die Leertaste drücken, um die Vorschau in der Datei anzuzeigen Wenn Sie diese Tastenkombinationen vergessen haben, Sie direkt neben der Play-Schaltfläche finden Sie direkt neben der Play-Schaltfläche ein kleines Drop-down-Menü Sie können auch die INF-Vorschau aktivieren und die verschiedenen Tastenkombinationen sehen 57. 02 Einstellen des Scrollverhaltens: In Figma können wir unsere Designs so einrichten, dass im Präsentationsmodus einige Elemente fest und andere scrollbar sind . Lass uns einen Blick darauf werfen Hier habe ich das Design eines mobilen Bildschirms. Ich möchte, dass die Navigation oben unverändert bleibt, während der Inhalt scrollt Ich habe hier unten noch einen Anzeigen-Button , den ich auch gerne unverändert lassen möchte. Schauen wir uns den Präsentationsmodus an, wie das jetzt aussieht. Also drücke ich auf die Play-Taste, ich kann meinen Prototyp sehen und ich kann sehen, dass absolut nichts passiert, wenn ich versuche , ihn zu scrollen Lassen Sie uns also zurückspringen und das einrichten. Damit das Scrollen tatsächlich funktioniert, benötigen wir Inhalte, die größer als der Frame sind. Hier wähle ich den übergeordneten Frame namens Mobile aus, und auf der rechten Seite siehst du ein kleines Kontrollkästchen namens Clip-Inhalt. Wenn ich dieses Kästchen deaktiviere, können Sie sehen, dass meine Kartengruppe tatsächlich viel größer ist als mein ursprünglicher Rahmen Das ist wirklich wichtig. Wenn du keine Inhalte hast, die du ausschneiden kannst und die deinen Frame quasi überlaufen lassen, dann kannst du keinen Scroll hinzufügen Sie können dieses Häkchen setzen oder deaktivieren. Es macht keinen Unterschied. Was Sie jetzt tun müssen, ist, in den Prototyping-Modus zu wechseln Klicken Sie also oben rechts auf die Registerkarte Prototyping und wählen Sie dann im Overflow-Scrolling die Option Vertikales Scrollen . Klicken Sie also oben rechts auf die Registerkarte Prototyping und wählen Sie dann im Overflow-Scrolling die Option Vertikales Scrollen. Lassen Sie uns zurück in unseren Präsentationsmodus springen und Ich kann jetzt also durch den Inhalt scrollen, aber wie du siehst, sind mein Header und mein Button hier nicht repariert. Gehen wir also zurück und richten das ein. Wählen Sie das Element aus, in meinem Fall den Header, den Sie unverändert lassen möchten, und beginnen Sie mit dem Prototyping Unter Position findest du die Option „Reparieren“, „An Ort und Stelle bleiben Beachten Sie, dass Sie hier im untergeordneten Element auch die Option haben, das Überlaufverhalten festzulegen Das wäre also das Scrollverhalten innerhalb dieses verschachtelten In diesem Fall wollen wir kein Verhalten. Wir haben unseren vertikalen Scrollvorgang bereits auf den übergeordneten Container eingestellt . Lassen Sie uns diesen Button auch hier unten reparieren. Wir werden auch dafür sorgen, dass es an Ort und Stelle bleibt. Und jetzt drücken wir auf Play und schauen uns an, wie das aussieht. Mein übergeordneter Container scrollt also gut und alle meine festen Elemente bleiben an Ort und Stelle Wenn Sie jemals feststellen, dass das Scrollen nicht funktioniert, stellen Sie sicher, dass Sie drei Dinge überprüfen Sie zunächst auf der Registerkarte „Design“ sicher, dass Sie Inhalte beschnitten haben , die größer als der Rahmen, mit dem Sie es zu tun sich im Prototyping-Menü, Vergewissern Sie sich im Prototyping-Menü, dass Ihr Overflow-Scrolling Sobald Sie das übergeordnete Element eingerichtet haben, wählen Sie nun das untergeordnete Element aus, das Sie reparieren möchten Gehen Sie zur Prototypenentwicklung und dann zur Positionierung wählen Sie Fixed Stay in Place 58. 03 Verbindungsbildschirme: Verknüpfen von Bildschirmen in Figma ist eigentlich sehr einfach Hier habe ich ein einfaches Beispiel. Auf diesem Startbildschirm habe ich verschiedene Farbformen. Sobald ich auf eine dieser Farbformen geklickt habe, wollte ich zur Detailseite für jede Farbe springen. Stellen Sie sicher, dass Sie sich im Prototypmodus befinden, und wählen Sie dann eine beliebige Form oder einen Rahmentext aus, das spielt keine Rolle. Sobald Sie mit der Maus darüber fahren, werden Sie sehen, dass diese kleinen Blasen erscheinen Sie können einfach eine beliebige Blase auswählen. Es spielt keine Rolle, für welche Seite Sie sich entscheiden. Ziehen Sie nun einen Stecker heraus und befestigen Sie ihn einfach an dem Rahmen, mit dem Sie verbunden werden möchten, und lassen Sie ihn los. Und das ist alles. Figma öffnet automatisch Fenster mit den Interaktionsdetails für Sie, und hier können Sie Ihre Interaktion weiter anpassen Sie können dies sofort tun, oder wenn es geschlossen ist, klicken Sie einfach auf den Konnektor oder direkt auf die Interaktion im Panel, und es wird wieder geöffnet Eine Interaktion besteht immer aus einem Auslöser, einer Aktion und einem Ziel. Dies ist der obere Teil dieses Panels hier. Ein Klick ist unser Auslöser, dann ist unsere Aktion Navigate two, und das Ziel ist unser Frame namens Orange. Jetzt kann ich die Trigger-Aktion und das Ziel ändern , indem ich einfach darauf klicke. Ich könnte den Trigger zwischen Klicken, Ziehen, Bewegen, Maus, Enter und so weiter wechseln , Maus, Enter und so weiter Wenn wir den Bildschirm wechseln möchten, erfolgt dies normalerweise per Mausklick Ich werde es vorerst dabei belassen. Meine Aktion ist Navigate Two. Das heißt, wir werden zu einer neuen Seite springen, und das ist die, die Sie wahrscheinlich am häufigsten verwenden werden. Es gibt auch Zurück, das heißt, Sie springen zurück zur vorherigen Seite. Dann gibt es noch einige erweiterte Einstellungen Sie mit Variablen vornehmen könnten. Sie können zu Elementen auf derselben Seite scrollen. Sie können externe Links öffnen und Sie können Overlays öffnen und sie austauschen . Dann das Ziel Ich könnte auch jeden anderen Frame aus dieser Drop-down-Liste wählen. Sie werden jedoch feststellen, , wenn Sie es mit mehr Frames zu tun haben dies etwas mühsam ist Ich bevorzuge es also, einfach meinen Konnektor auszuwählen und dann einen anderen Rahmen auszuwählen indem ich ihn einfach verschiebe Unten ist der Animationsteil. So werden die Dinge animiert und verhalten sich, sobald die Interaktion stattfindet Nun, das ist der schicke Teil, der Teil, in dem Sie all dieses magische Verhalten einrichten, Dinge, die sich ineinander verwandeln und so weiter Aber nur ein Wort der Vorsicht. Mikrointeraktionen sind wirklich nützlich. Ich empfehle Ihnen jedoch, zunächst sicherzustellen , dass Ihre tatsächliche Verbindung und Ihre Benutzerfreundlichkeit funktionieren und alles Sinn macht. Und später können Sie mit Ihrem Entwicklungsteam darüber nachdenken, welche Animationen und Interaktionen Sie hinzufügen möchten. Denn was manchmal nur ein Klick in Figma ist, ist in CSS eigentlich ziemlich schwierig einzurichten Also, nur damit es ein bisschen glatt wird, werde ich mich für Dissolve entscheiden Er kann die Zeit festlegen, die benötigt wird , um sich auf einem anderen Bildschirm aufzulösen, und wir könnten auch eines der voreingestellten Verhaltensweisen wählen. Ich werde es vorerst einfach in Ruhe lassen, was ziemlich nett ist. Schauen wir uns an, wie das in unserer Vorschau aussehen würde . Ich wähle den übergeordneten Frame und füge einfach ein Modell hinzu. Ich arbeite an einem iPhone 14-Größe. Okay, lass uns auf Play klicken. Also hier sehe ich meinen Startbildschirm, und wenn ich jetzt auf meine orangefarbene Form klicke, kann ich sehen, dass sie zur Unterseite navigiert Wenn ich jedoch auf Zurück klicke, passiert nichts Lassen Sie uns also auch die anderen Interaktionen einrichten. Lassen Sie uns also zu unserer Figma-Datei zurückkehren. Hier werde ich zunächst die anderen beiden Formen verbinden Ich ziehe einfach einen Stecker heraus und Sie können sehen, dass Figma die Voreinstellungen gespeichert hat , die ich gerade für den orangefarbenen verwendet Das ist wirklich nett und hilfreich, um Ihre Arbeit zu beschleunigen. Als Nächstes möchte ich, wenn ich auf Zurück klicke, zurück zur Startseite springen oder wo auch immer ich hergekommen bin. Ich kann all diese Schaltflächen gleichzeitig auswählen. Wenn Sie die Umschalttaste gedrückt halten, können Sie mehrere auswählen. Jetzt könnte ich entweder die Verbindung von hier herausziehen oder ich kann auf die Plus-Schaltfläche für Interaktionen im Eigenschaftenbereich auf der rechten Seite klicken . Hier kann ich die Interaktion einstellen, und ich werde einfach zurück wählen. Lassen Sie uns also zu unserem Prototyp übergehen, und der funktioniert einfach perfekt. 59. 04 Dropdown-Menü mit Overlays: Schauen wir uns die Overlays in Figma an. Ein perfektes Beispiel für Overlay ist also ein Menü. Es ist also im Grunde ein eigener Rahmen. Wenn wir aber zum Beispiel auf Arbeit klicken, möchten wir nicht, dass der gesamte Frame zu diesem Menü wechselt, sondern wir möchten, dass das Menü hier unter unserer Navigation erscheint. Wir haben sie so ziemlich wie jede andere Verbindung eingerichtet. Wählen wir also Arbeit aus. Link zum Menü. jetzt klicken, wählen wir, anstatt durch zwei zu navigieren, die Option „Overlay öffnen“ Im Overlay-Menü kann ich jetzt die Position wählen, also Mitte, oben links, unten usw., im Verhältnis zum übergeordneten Frame, oder ich kann auch manuell wählen, was ich hier benötigen würde Ich kann jetzt diese kleine Vorschau meines Overlays sehen und es nach Bedarf auf dem Rahmen positionieren Ich kann wählen, dass es automatisch geschlossen wird , wenn jemand nach draußen klickt , also in jeden Bereich hier, und ich könnte einen Hintergrund für ein Menü hinzufügen , das nicht wirklich Sinn macht, also lasse ich es Wie üblich kann ich meine Animation wählen, also werde ich sie auch wie gewohnt auflösen lassen. Schauen wir uns an , wie das aussehen wird. Lass uns auf Play klicken und ich kann sehen, dass mein Menü erscheint, wenn ich auf Arbeit klicke, und wenn ich erneut auf Arbeit oder irgendwo anders auf der Leinwand klicke, wird es wieder verschwinden. Also kann ich jetzt einfach eines dieser Untermenüs hier mit einem neuen Bildschirm verbinden . 60. 05 Animationstypen: Verschiedene Arten von Animationen. Beim Prototyping haben wir die Möglichkeit, Art der Animation zu ändern Standardmäßig ist immer auf Instant eingestellt. Drücken wir die Umschalttaste und die Leertaste, und dann erhalten wir unsere Dateivorschau. Wenn ich hier klicke, kannst du sehen, dass ich sofort eine Änderung vorgenommen habe. Übrigens, wenn Sie R drücken, wird das zurückgesetzt. Wechseln wir von Instant zu Dissolve. Sie können sehen, dass ich mehr Optionen habe. Dies ist die Zeit, die es dauern wird, bis sich alles aufgelöst hat. Dann können Sie hier sehen, dass ich die Art von Ease In, Ease Out usw. wählen kann . Klicken wir darauf, um es uns anzusehen. Sie können sehen, dass ich diese flüssigere Animation erhalte. Im weiteren Verlauf erhalten Sie die sogenannten bewegten Animationen. Einziehen, Ausziehen, Schieben und so weiter. Lassen Sie uns drücken, und Sie können sehen, dass Sie ein kleines Bild von der sich bewegenden Animation bekommen. Sie können wählen, wohin Bewegung erfolgen soll, z. B. von unten nach oben oder von links, rechts usw. Lassen Sie uns jetzt einen Blick darauf werfen. Sie können sehen, dass dadurch der gesamte neue Bildschirm angezeigt wird. Jetzt möchte ich eine letzte Animation hervorheben, nämlich Smart Animate, und das ist wirklich die magische Smart Animate sucht nach Ebenen mit derselben Hierarchie und demselben Namen zwischen verschiedenen Frames oder auch innerhalb eines Komponentensatzes zwischen verschiedenen Varianten und animiert sucht nach Ebenen mit derselben Hierarchie und demselben Namen zwischen verschiedenen Frames oder auch innerhalb eines Komponentensatzes zwischen verschiedenen Varianten dann mit Smart Animate Dinge wie Farbe, Größe, Position und Drehung auf magische Weise Größe, Lassen Sie uns unseren Frame zurücksetzen und einen Blick darauf werfen, was Wir können mit der Geschwindigkeit spielen, und Sie können sehen , dass wir diese wirklich schönen, flüssigen Animationen bekommen diese wirklich schönen, flüssigen Animationen Wir können auch mit unseren Auslösern spielen. Ich werde diese Animation loswerden. Ich werde tatsächlich das gesamte Bild auswählen , um es zu diesem Bild zu animieren, und ich werde sagen, dass wir nach einer Verzögerung von und ich werde sagen, dass wir nach einer Verzögerung von die gleichen intelligenten Animationen beibehalten werden Ich sage, wenn ich hier auf dieses Bild klicke, wird es hier intelligent animiert Öffnen wir also unsere Vorschau, und Sie können jetzt sehen, wie sie automatisch vom ersten bis zum zweiten Bildschirm animiert wird vom ersten bis zum zweiten Bildschirm animiert . Lass uns das nochmal machen. Wenn ich jetzt auf das Vorschaubild klicke, wird es intelligent vom zweiten Bildschirm zum dritten Bildschirm animiert vom zweiten Bildschirm zum dritten Bildschirm Damit das funktioniert, ist es wichtig , dass Sie den gleichen Namen und die gleiche Hierarchieebene zwischen Ihren verschiedenen Bildschirmen benötigen den gleichen Namen und die gleiche Hierarchieebene zwischen Ihren verschiedenen Nun spielt es keine Rolle, ob innerhalb einer Hierarchieebene beispielsweise Sie innerhalb einer Hierarchieebene beispielsweise die Bilder verschieben würden oder ob Sie einen automatischen Layoutrahmen oder einen Standardrahmen haben . Der wichtige Teil ist derselbe Name und dieselbe Hierarchie, damit Smart Animate funktioniert Wenn wir also auf unseren zweiten Bildschirm schauen und den Inhalt ausschneiden, können wir sehen, dass dieser Text zum Beispiel schon immer da Sonst könnte er nicht so schön animiert werden. Es würde immer noch animiert werden, es würde auftauchen, aber es hätte nicht diese schöne Bewegungsanimation Und das Gleiche gilt für meine Bilder Wenn ich möchte, dass sie sich bewegen, müssen sie zunächst ihre Hierarchie beibehalten, also gehören sie immer noch zu einer Bildgruppe und haben immer noch den gleichen Namen Und dann die , die unsichtbar sind, setze ich einfach die Deckkraft des zweiten Frames auf Null Sie müssen also ziemlich clever sein, wenn es darum geht, Ihre Ebenen ein-, auszublenden und zu positionieren um die richtige Animation zu erhalten diesem Grund würde ich auch empfehlen, Ihr Prototyping von Ihrem Design zu trennen 61. 06 Interaktive Komponenten: Bisher haben wir Animationen zwischen verschiedenen Frames verwendet, und jetzt zeige ich Ihnen eine meiner Lieblingsfunktionen, interaktive Komponenten. Sie sind im Grunde wiederverwendbare Animationen die in Ihrer Komponente gespeichert sind. Wie der Name schon sagt, benötigen wir Komponenten oder besser gesagt Komponentensätze mit seitlicher Varianz, damit das funktioniert benötigen wir Komponenten oder besser gesagt Komponentensätze mit seitlicher Varianz Falls Sie damit nicht vertraut sind, besteht ein Varianzsatz im Grunde aus zwei Komponenten, eigentlich aus zwei oder mehr Komponenten, und Sie können hier sehen, dass ich die Benennungskonvention verwende : Schrägstrich vorwärts, Schrägstrich (Standard), Button forward slash Button forward Sie gehören derselben Familie an, sie sind nur ein anderer Staat derselben Sache Dann hier auf der rechten Seite kann ich sagen, als Varianten kombinieren. Das Tolle daran ist, wenn Sie jetzt die Instanz hier herausziehen, dann können Sie sehen, dass innerhalb dieser Schaltfläche beide Instanzen einfach als unterschiedliche Zustände gespeichert werden. In meinem Design werde ich viele Exemplare dieser Elemente verwenden . Ich kann also nicht nur die verschiedenen Zustände speichern , die sie in dieser Instanz haben, sondern ich kann auch das Verhalten speichern. Ich muss also auf meinen Prototyp-Einstellungen sein. dann zum Beispiel das Verhalten einer Schaltfläche zu speichern, Hover-Status, möchte ich hinzufügen Ich verbinde einfach meine beiden Tasten wie ich es zuvor mit jedem anderen Rahmen tun würde Jetzt können Sie das in meinem Menü sehen, es heißt bei Klick, oder ich ändere das auf beim Bewegen des Mauszeigers, und es hat sich geändert. Diese Änderung hier wird nur innerhalb von Komponentensätzen aktiv sein Jetzt kann ich Instant Dsolve oder Smart Animate verwenden. Ich werde Smart Animate verwenden, da es einfach eine Farbe ist Schauen wir uns nun an, was das bewirkt Damit wir uns das in unserem Vorschaumodus ansehen können, muss ich einen Rahmen zeichnen und kann diesem muss ich einen Rahmen zeichnen Rahmen nun eine Instanz meiner Schaltfläche hinzufügen Schauen wir uns das jetzt an. Wenn ich mit der Maus über meine Schaltfläche können Sie sehen, dass ich diese Verhaltenssicherheit habe, fahre, können Sie sehen, dass ich diese Verhaltenssicherheit habe, und das gilt überall dort, wo ich diese Taste verwende Okay. Jetzt möchte ich dasselbe für meinen Schalter hier haben, aber ich möchte, dass er hierher gezogen wird und dann zu diesem Schalter wird In diesem Fall möchte ich nicht, dass der gesamte Schalter aktiviert wird, sondern ich möchte diese kleine Blase hier verwenden. Ich möchte diese Blase auswählen, eine Animation zeichnen und Sie werden sehen, dass sie beim Klicken angezeigt wird. In diesem Fall möchte ich ziehen, zwei ändern und hier intelligent animieren. In diesem Fall muss ich mich revanchieren. Also beim Ziehen wird es wieder in meinen ursprünglichen Zustand zurückkehren. Jetzt ziehe ich eine Instanz heraus, platziere ziehe ich eine Instanz heraus, sie auf meinem Frame und schauen wir uns an, ob das funktioniert. Also hier ist mein Schalter, ich ziehe ihn und Sie können sehen, dass er mit Smart Animate die Farbe ändert mit Smart Animate die Farbe 62. 07 Figma Mirror – Vorschau auf deinem Gerät: Figma hat eine fantastische App, mit Sie eine Vorschau Ihrer Prototypen auf Ihrem Handy Gehen Sie zur Figma-Website und zu den Produkten finden Sie den Tab Downloads Im Rahmen von Downloads können Sie entweder die IOS- oder die Android-Version der App auf Ihr Telefon herunterladen die IOS- oder die Android-Version der App auf Ihr Telefon Sobald Sie die mobile App geöffnet haben, werden Sie aufgefordert, sich anzumelden. Verwenden Sie für die Anmeldung einfach Ihr Standard-Figma-Login. Es ist tatsächlich wichtig, dass Sie genau das gleiche Login wie für Ihre Arbeitsdateien verwenden genau das gleiche Login wie für Ihre Arbeitsdateien Andernfalls wird Mirror nicht funktionieren. Sie sehen dann eine Übersicht über die Dateien in Ihrem Konto. Schauen Sie jedoch unten rechts nach und klicken Sie auf Spiegel. Sie klicken auf Mit dem Spiegeln beginnen Dadurch wird jeder Frame, den Sie gerade auf Ihrem Desktop auswählen, gespiegelt . Alle Prototyp-Einstellungen werden hier automatisch sichtbar sein Ich liebe es also, das geöffnet zu haben , während ich an meinen mobilen Designs arbeite. Dadurch kann ich mein Design beim Entwerfen realistischer sehen und testen . Stellen Sie nur sicher, dass die Größe des Rahmens, auf dem Sie entwerfen, tatsächlich der richtigen Größe für das Mobiltelefon entspricht, das Sie verwenden. In meinem Fall habe ich ein physisches iPhone 14. Daher ist mein Bildschirm auch auf diese Abmessungen eingestellt. O. Die App skaliert Ihr Design nach oben und unten. So sieht es auch dann echt aus, wenn Sie eine andere Größe verwenden. Dies kann jedoch wirklich zu Fehlern führen, wenn es beispielsweise darum geht, Berührungszielgrößen zu testen. Sie können Ihre mobilen Prototypen auch über den Link teilen. Stellen Sie sicher, dass Sie den Link aus der Präsentationsansicht kopiert haben. Es wird dann automatisch in der mobilen Figma-App geöffnet , wenn es auf einem Telefon installiert Sie auch hier sicher, dass die Größe Ihres Prototyps der physischen Größe des verwendeten Telefons entspricht der physischen Größe des verwendeten Telefons In diesem Fall müssen Sie sich keine Gedanken über die Auflösung , da der Link zurück zu Figma führt , das sich darum kümmert 63. Teil 5 Prototyping: Lassen Sie uns aus unserem Kursprojekt einen interaktiven Prototyp für das Prototyping machen einen interaktiven Prototyp für das Prototyping Stellen Sie sicher, dass Sie auf den Seiten zur Prototyping-Seite springen Hier findet ihr wie gewohnt die Übung sowie eine Lösung auf der rechten Seite Wenn wir den ersten Bildschirm in der Lösung auswählen, können wir entweder Shift und Leertaste drücken und unsere Vorschau öffnen Dies ist eine wirklich nette und schnelle Möglichkeit, dies in Ihrem Arbeitsbereich zu erledigen Aber es ist wahrscheinlich schöner Präsentationsmodus zu wechseln Klicken Sie einfach oben rechts auf die Play-Schaltfläche und schon wird Ihr Prototyp angezeigt Im Präsentationsmodus können Sie skizzieren und auch auf Ihren Prototyp klicken und mit ihm interagieren Das werden wir bauen. Machen wir es zunächst scrollbar und korrigieren wir bestimmte Elemente wie die Tippleiste Zuallererst wähle ich alle Bildschirme aus , die Überlaufinhalte hatten Denken Sie daran, dass Sie hier den Clip öffnen können und alle Inhalte sehen können , die über unsere Sichtweisen hinausgehen Wir springen jetzt hier zum Prototyp. Wir können das auf vertikales Scrawl einstellen. Wenn wir diesen Frame auswählen und Shift und Leertaste drücken, erhalten wir unsere Vorschau Jetzt können wir sehen, dass es kritzelt. Es scrollt jedoch nicht weit genug , weil es das im Grunde nicht respektiert Hier unten habe ich diese Tapa. Was ich tun muss, ist, ihm eine Art Puffer zu geben, eine Art zusätzlichen Speicherplatz Und es gibt mehrere Möglichkeiten, wie Sie das tun könnten. Sie könnten einfach einen weiteren Rahmen in den Hintergrund zeichnen , der größer ist, oder ich habe diesen ausgeschnitten, damit Sie ihn besser sehen können Ich habe diese Kartengruppen im Grunde hier verpackt. Ich habe es Card Group genannt und einen Rahmen darum gelegt. Was ich jetzt tun werde, ist Befehls-/Strg-Taste in Windows gedrückt zu halten und einfach etwas zusätzlichen Speicherplatz hinzuzufügen. Das wird im Grunde nur den Speicherplatz verbrauchen. Schau dir jetzt an, was passiert, wenn ich jetzt wieder kritzel. Jetzt funktioniert es Dies ist auch einer der Gründe warum ich immer empfehlen würde, das Prototyping auf einer separaten Seite zu veröffentlichen, da wir an Ihren Designs einiges anpassen Jetzt müssen wir sie nur noch verbinden. Ich habe hier einige Fehler hinzugefügt. Ich wähle dieses Vorschaubild aus, vergewissere mich, dass du dich gerade im Prototypenbau befindest, und dann siehst du die kleinen Und ich werde mich jetzt mit diesem verbinden. Ich werde auf Tab durch zwei navigieren. Übrigens, vielleicht siehst du hier klicken oder Tab, es ist genau dasselbe. Navigiere auf zwei Landingpages, und ich möchte eigentlich, dass sich das auflöst. Könnte hier wahrscheinlich sofort angezeigt werden, das ist die Standardeinstellung. Ich möchte, dass sich das auflöst. Dann möchte ich von hier aus ein Overlay öffnen. Beachten Sie, dass dieser Rahmen etwas kürzer ist als der andere Rahmen Ich möchte, dass es einzieht und über dieses ursprüngliche Design auf Tabulatur gelegt wird. Das ist richtig. Jetzt müssen wir das ändern, um das Overlay zu öffnen Das ist einfach der Name dieses Frames. Ich möchte, dass es von unten einzieht. Ich habe eine untere Mitte. Ja, das ist richtig. Ja, ich habe nah dran. Wenn ich nach draußen geklickt habe, habe ich einen Hintergrund von 50% hinzugefügt . Du kannst die Position beim Kritzeln zurücksetzen Das heißt, wenn du zurückgehst, geht es hier einfach wieder nach oben , was ganz nett ist Ich werde noch zwei kleine Dinge tun. Ich werde diesen hier auswählen und eine Interaktion hinzufügen. Und ich werde auf Tab sagen, geh zurück. Es wird dorthin zurückkehren, wo es hergekommen ist. Denn später könnte ich es von jedem anderen Ort aus betreten . Ich werde dasselbe für das Overlay tun. Sei dir nur bewusst, dass wir auf dem Overlay jetzt auf der Registerkarte wollen. Wenn wir jetzt zurückgehen, würde es zum vorherigen Frame zurückkehren , zu diesem Weil ein Overlay kein echter Frame ist, es ist nur ein Overlay Was wir also tun wollen, ist, dieses Overlay zu schließen. Okay, jetzt schauen wir uns an, was gut funktioniert. Ich klicke hier. Es funktioniert jetzt auch. Ich möchte das Overlay öffnen. Fantastisch. Lassen Sie uns jetzt das Overlay wieder schließen Großartig. Wenn ich hier klicke, gehe ich zurück nach Hause. Ich habe hier ein kleines Extra für dich. Das ist schon ziemlich weit fortgeschritten, aber wenn wir den Clip öffnen, können Sie sehen, dass ich horizontales Material habe , das gekritzelt werden muss Nun, was Sie tun können, wie ich Ihnen bereits gezeigt habe habe das in einem neuen Rahmen namens Karte platziert, und ich kann diesen jetzt so einstellen, dass er mit dem Elternteil kritzelt Das ist richtig, aber horizontal. Und ich werde dasselbe für diesen hier unten tun , Horizontal. Ein wichtiger Teil, damit das funktioniert , ist zu beachten, dass dieser Rahmen kleiner ist, also hat dieser Rahmen die gleiche Größe. Er endet am Rand des übergeordneten Rahmens. Es würde nicht funktionieren, wenn ich das in voller Länge hätte, du kannst es dir ansehen und damit spielen, aber wie gesagt, es ist etwas fortgeschrittener. Lass uns einen Blick darauf werfen. Und das funktioniert auch sehr gut. Okay, letzte Kleinigkeit zur Demo im Präsentationsmodus. Sie haben hier auch Geräte. Sie können sehen, dass ich das bereits standardmäßig eingerichtet habe, es ist auf „Nichts“ eingestellt. Sie können hier ein Gerät auswählen. Jetzt ist es wichtig, dass Sie genau das Gerät auswählen, das Ihrer Bildschirmgröße entspricht. Lass uns einen Blick darauf werfen. Ich habe 390 mal 844. Wenn ich zu Prototyping und Gerät übergehe, muss ich etwas wählen, das 390 x 844 ist, Telefon 14. Wenn ich jetzt auf Play drücke, können Sie sehen, dass ich dieses Gerät jetzt in der Nähe meines Designs habe dieses Gerät jetzt in der Nähe meines Es funktioniert einfach wie ein normaler Prototyp, ist aber in diese nette Vorschau eingebettet. 64. 01 Teilen und Einladen anderer: Einer der großen Vorteile von Figma besteht darin , dass Sie andere zu Ihren Dateien, Teams und Projekten einladen und in Echtzeit zusammenarbeiten Wenn Sie eine Datei teilen möchten klicken Sie einfach auf die Schaltfläche Teilen, und das Freigabemodell wird geöffnet Sie können sehen, wer bereits Zugriff auf die Datei hat, und Sie können auch sehen, welche Art von Zugriff ihnen gewährt wurde. Das können Rechte zum Ansehen oder Bearbeiten sein. Wenn Sie ein Administrator sind, können Sie auch die Art der Rechte in diesem Fenster hier ändern . Wenn du andere einladen möchtest, kannst du das tun, indem du ihre E-Mail-Adresse eingibst und einfach eine Einladung verschickst oder einen Link zum Teilen kopierst. Der interessante Teil ist dieser hier. Im Moment sieht es so aus, als ob die Leute nur Leserechte erhalten, wenn du einlädst . Das ist kein Problem, denn später, sobald sie eingeladen wurden, kannst du das jederzeit über deine Admin-Einstellungen ändern und kontrollieren . Jetzt kannst du das ändern. Sie können zu einer beliebigen Person wechseln und diese dann ändern, um sie anzusehen oder zu bearbeiten. Wenn Sie auf Bearbeiten klicken, seien Sie bitte vorsichtig und überprüfen Sie zuerst Ihren aktuellen Figma-Plan, da zusätzliche Bearbeitungsplätze mit zusätzlichen Kosten verbunden sein können und Sie keine große Überraschung erwarten wenn Ihre Rechnung am Ende des Monats eingeht Die Art und Weise, wie Sie Ansicht und Bearbeitung steuern wurde im letzten Monat erheblich geändert Möglicherweise sehen wir hier auch einige Änderungen. Passen Sie einfach auf und achten Sie darauf, wem Sie Ansicht gewähren und wem Sie Rechte einräumen Dann kannst du hier sehen, dass jeder im Design, momentan ist es eine Person, darauf zugreifen kann Das bedeutet, dass unser Team hier Moon Team heißt, und dann haben wir ein Projekt namens Design. Hier unten hast du andere Links, du kannst also nur einen Def-Modus-Link teilen Wenn Sie mit der Entwicklung arbeiten, ist es sehr sinnvoll , ihnen nur einen Link für den tauben Modus zu geben Dann haben wir hier nur einen Prototyp-Link. Das teile ich sehr gerne, zum Beispiel mit Kunden, damit sie keinen Zugriff auf die eigentliche Datei erhalten. Sie können in der Community veröffentlichen und den Code auch in andere Seiten einbetten. Wenn du in den Gehörlosenmodus wechselst, kannst du auch direkt von hier aus etwas teilen Dadurch sollte ein Link zum Gehörlosenmodus für dich kopiert Wir können unsere Datei auswählen, die Sie wahrscheinlich am häufigsten verwenden werden, aber wir können uns auch dafür entscheiden, unser Projekt oder unser gesamtes Team mit anderen zu teilen Du kannst einfach auf eines deiner Projekte klicken und dann findest du hier auch eine Schaltfläche zum Teilen und dann siehst du dieses Projekt teilen. Auch hier kannst du deinen Link kopieren oder eine Einladung senden. Und Sie können eine Hierarchieebene nach oben gehen und Ihr gesamtes Team gemeinsam nutzen. Wenn Sie Ihr Team teilen, sieht das etwas Unglückliche wieder anders aus Sie können also zwischen Anzeige- und Bearbeitungsrechten wählen und haben hier weitere Optionen zur Steuerung. Auf Teamebene kannst du auch auf Admin-Ansicht klicken. Wenn Sie also der Administrator sind , können Sie alle Rechte vom Panel aus steuern. Dies hängt auch von der Art des Tarifs ab, den Sie bei FIMA haben Es kann also etwas anders aussehen, wenn Sie beispielsweise einen Enterprise-Plan haben, der Ihnen mehr Überblick und mehr Kontrolle über die Steuerung Ihres Teamzugriffs bietet mehr Überblick und mehr Kontrolle über die Steuerung Ihres Teamzugriffs 65. 02 Einrichten eines Thumbnails: Ein Vorschaubild hinzufügen. Standardmäßig gibt Ihnen Figma als Miniaturansicht einen Überblick darüber, was sich in Ihrer Datei befindet Nun hast du vielleicht in einigen Dateien gesehen , dass sie ein schönes Vorschaubild haben, einen Namen angibt und einen Lass mich dir zeigen, wie das funktioniert. Lassen Sie uns hier in diese Designdatei springen. Jetzt können Sie sehen, dass ich bereits ein Vorschaubild eingerichtet habe. Ich könnte eine separate Seite hinzufügen und diese Startseite nennen und sie hier hinzufügen, oder ich kann sie einfach zusammen mit meinem Design haben . Es spielt keine Rolle. Unser Vorschaubild ist nur ein einfacher Rahmen mit einer Größe von 16 bis 9. Sie können dies einfach einrichten, indem die Präsentationsfolien aus Ihrem Rahmenmenü Ich füge dann gerne Dinge wie eine Kategorie hinzu. Dies wäre zum Beispiel eine Designdatei. Dann füge ich gerne einen Projektnamen hinzu, eine kurze Beschreibung. Und es ist auch immer eine gute Idee wenn Sie als Team mit vielen Personen hinzufügen , wer dafür verantwortlich ist oder wer diese Datei zuletzt bearbeitet hat. Nun, auf der rechten Seite, bearbeite ich gerne ein Bild, und Sie können das alles wirklich so einrichten, wie Sie möchten. Es ist nur ein Rahmen, im Grunde nur ein anderes Design. Was ich gerne mache, ist, ein paar Informationen darüber hinzuzufügen , wie das aussieht. Kopieren Sie einfach einige repräsentative Bildschirme oder nur eine repräsentative Komponente hierher. Dann kann ich einfach die Größe ändern , denk dran. Der Trick ist, K zu drücken, und ich bin jetzt im Skalierungsmenü, und jetzt kann ich es verkleinern, und ich füge es einfach zu diesem Frame hinzu , um etwas mehr Kontext zu geben Sobald ich mit meinem Design zufrieden bin, wähle ich einfach diesen Daumennagel aus und klicke mit der rechten Maustaste. Im Menü findest du Set as Umbnail. Sie werden das kleine Daumennagelsymbol neben dem Namen sehen. Wenn wir jetzt zurück zur Startseite springen, können Sie sehen, dass ich jetzt mein Vorschaubild eingerichtet habe Wenn du meine Community-Seite auf figma.com und dann auf Moon Earning besuchst , kannst du dir das Bezeichnungsset für Mo Earning Dateien ansehen und du kannst ein kostenloses Exemplar erhalten 66. 03 Geteilte Teambibliotheken in Figma: In FiMA können wir gemeinsam genutzte Teambibliotheken erstellen. Gemeinsam genutzte Teambibliotheken bieten Teams die Möglichkeit , eine zentrale Bibliothek mit Design-Assets zu erstellen , die in mehreren Designprojekten gemeinsam genutzt und wiederverwendet werden können mehreren Designprojekten gemeinsam genutzt und wiederverwendet Sie könnten Ihre Variablen, Stile und Komponenten in externen Bibliotheken speichern Stile und Komponenten in externen Bibliotheken Also deine Farben, das Typografie-Setup und alle Komponenten, von Symbolen, Schaltflächen bis hin zu Karten und Navigationen Eine Aktualisierung des variablen Stils oder Komponente in der gemeinsam benutzten Teambibliothek würde zu einer Aufforderung führen , alle Designdateien zu aktualisieren , die die Stilkomponente oder -variable verwenden Sie können mit einer oder mehreren Teambibliotheken arbeiten. Es ist wichtig zu beachten, dass Sie für die Nutzung einer Funktion für gemeinsam genutzte Teambibliotheken in Figma einen Figma Pro-Plan oder höher benötigen Dies bedeutet, dass je nach Anzahl der Redakteure, die Sie in Ihrem Team haben, zusätzliche Kosten anfallen je nach Anzahl der Redakteure, die Sie in Ihrem Team haben, zusätzliche Kosten anfallen Bitte stellen Sie sicher , dass Sie sich an den aktuellen FIMA-Preisplänen orientieren, um weitere Informationen zu erhalten 67. 04 Teambibliotheken: Gemeinsam genutzte Teambibliotheken. Hier habe ich zwei Dateien, und ich stelle fest, dass es sich im Moment nur um normale Designdateien handelt. Sie sehen, wenn Sie mit der Maus über sie fahren, erhalten Sie diese blaue Designdatei, die ich kann Nun, diese heißt Bibliothek, und hier speichere ich meine Komponenten Und was ich tun möchte, ist daraus eine Bibliothek zu machen, und dann hier in meiner Designdatei möchte ich mein Design einrichten, möchte ich mein Design einrichten diese Komponenten aus der Bibliothek verwende. Das erste, was wir tun müssen, ist dieser Datei im Grunde zu sagen, dass es sich nicht mehr um eine Designdatei handelt, sondern dass es sich jetzt um eine Bibliothek handelt. Also lass es uns öffnen. Und dann können Sie im Inneren sehen, dass ich hier Komponenten habe, und ich habe auch einige grundlegende Variablen eingerichtet. Lassen Sie uns also zum Bedienfeld „Elemente“ springen, und dann finden Sie hier das Bibliothekssymbol. Klicken Sie darauf und Sie sehen die aktuelle Datei und die Option zum Veröffentlichen. Lassen Sie uns nun eine kurze Beschreibung hinzufügen. Hier solltest du so spezifisch wie möglich sein. Ich werde nur hinzufügen, dass ab jetzt zuerst veröffentlicht wurde. Dann erhalten wir einen Überblick, sodass Sie hier sehen können , dass wir unsere vier Variablen haben, und wir könnten all das veröffentlichen, oder wir könnten einfach bestimmte Komponenten oder Variablen auswählen , die veröffentlicht werden sollen. Lassen Sie uns nun veröffentlichen, und wir haben unsere Bibliothek erfolgreich veröffentlicht. Jetzt scheint so ziemlich nichts passiert zu sein. Aber wenn wir zurück zu unserem Zuhause springen, können Sie sehen, dass unser Symbol jetzt von blau zu schwarz geworden ist. Ein schwarzes Symbol, Sie werden sehen, dass es sich bereits um eine Bibliothek handelt. Um unsere Bibliothek zu nutzen, öffnen wir unsere Designdatei. Übrigens können Sie Bibliotheken auch in Designdateien oder in anderen Bibliotheksdateien verwenden . In unserer Designdatei springen wir zum Bedienfeld „Elemente“. Sie können sehen, dass wir auch einige Voreinstellungen von Figma haben , mit denen wir herumspielen könnten, aber wir möchten unsere Bibliotheken durchsuchen oder einfach erneut auf das Bibliothekssymbol klicken Und jetzt schauen Sie sich über das Drop-down-Menü Ihr Team oder ein anderes Team an, schauen Sie sich über das Drop-down-Menü Ihr Team oder ein anderes Team an je nachdem, wo sich Ihre Bibliothek befindet Er kann den sehen, den wir gerade veröffentlicht haben. Fügen wir das unserer Datei hinzu. Jetzt können Sie im Asset-Panel sehen, dass wir unsere Bibliothek haben und hier können wir all die verschiedenen Komponenten sehen. Wir können sie natürlich überschreiben und mit ihnen entwerfen, genau wie in jeder anderen Datei Denken Sie daran, dass wir auch einige Variablen hatten. Wenn wir auf lokale Variablen klicken, finden wir sie hier nicht. Aber nehmen wir an, wir zeichnen einfach eine Form oder einen Rahmen und dann über das Füllmenü werden Sie sehen, dass Sie hier eine neue Palette haben, in der unsere Bibliotheksfarben gespeichert sind. Und das kannst du übrigens auch trennen. Sie könnten zwei Bibliotheken abrufen, eine für Komponenten, eine für Variablen, und sie dann hier kombinieren. Sie würden sie einfach alle hier im Assets-Bereich finden . Wie Sie sehen können, können Sie sie einfach erweitern, wenn Sie auf Weitere hinzufügen klicken . Wenn Sie es auf die gleiche Weise entfernen möchten, klicken Sie natürlich einfach auf die Schaltfläche Entfernen. Wenn Sie in einer Designdatei arbeiten und zur ursprünglichen Komponente zurückkehren möchten , können Sie einfach eine beliebige Instanz auswählen und dann über das Eigenschaftenfenster auf Gehe zur Hauptkomponente klicken, um der Datei zu gelangen, in der sich Ihre Originalkomponenten befinden. Was passiert, wenn Komponenten aktualisiert werden? Nehmen wir an, wir fügen einen gewissen Radius hinzu, und dann kommen wir auch zu unseren Variablen. Lassen Sie uns diesen hier einfach durch eine, sagen wir, grüne Farbe ersetzen, nur um sicherzugehen, dass wir die Änderungen sehen. Jetzt können Sie sehen, dass es in unserer Bibliothek eine kleine Blase gibt. Überprüfe also Unveröffentlichte Änderungen. Lass uns darauf klicken und dann auf Veröffentlichen klicken. Und Sie können auch sehen, wo Sie Änderungen gefunden haben. Lass uns das jetzt veröffentlichen. Wir hätten übrigens eine Beschreibung hinzufügen sollen. Wenn wir nun eine Datei öffnen, in der wir eines der geänderten Elemente verwenden, wird hier auch diese kleine Blase angezeigt. Wenn Sie darauf klicken, erhalten Sie einen Überblick über das Update, das stattgefunden Sie können sie entweder einzeln aktualisieren oder einfach auf Alle aktualisieren klicken. 68. 05 Verschieben von Komponenten in externe Bibliotheken: Komponenten verschieben. Hier haben wir unser Design und unsere Komponenten. Jetzt ist der einzige Ort, an dem wir sie wirklich nicht wollen, auf derselben Seite. Wenn wir sie einfach kopieren und dann in eine neue Seite einfügen würden , dann wäre das eine Instanz. Das wird nicht funktionieren. Dafür können wir entweder mit der rechten Maustaste klicken und zu einer neuen Seite wechseln , oder wir drücken die Befehlstaste und X. Dadurch werden die Komponenten ausgeschnitten und dann können wir sie auf die neue Seite einfügen, und dann würde unsere Verbindung aufrechterhalten. Wenn wir hier klicken, können Sie sehen, dass wir auf der Seite landen , auf der sich unsere Komponente jetzt befindet. Was passiert nun, wenn wir diese Komponenten in einer völlig anderen Datei platzieren und sie wieder mit unserem Design verbinden wollen einer völlig anderen Datei ? Damit das funktioniert , müssen wir zunächst zum Bedienfeld „Elemente“ springen und diese Datei speichern, obwohl dies Ihre Designdatei als Bibliothek ist. Lassen Sie uns das veröffentlichen, und der wichtige Teil ist, dass die Komponenten, die Sie verschieben möchten, veröffentlicht werden. Jetzt werden wir eine zusätzliche Datei erstellen. Ich werde diese Bibliothek einfach anrufen. Ich wähle jetzt diese Komponenten und sobald ich sie auf die neue Seite verschiebe, drücke ich die Befehlstaste und X, um sie auszuschneiden. Ich springe jetzt zu der Bibliothek, die ich gerade erstellt habe, und füge sie ein. Sie können sehen, dass es eine kleine Warnung gibt weil ich sie Bibliothek genannt habe, aber es ist noch keine Bibliothek , weil wir sie veröffentlichen müssen. Es heißt, grundlegende Komponenten in diese Datei zu verschieben Bibliotheksupdate zu veröffentlichen. Lass uns das veröffentlichen. Sie können hier meinen Button und meine Karte sehen. Gehen Sie zu dieser Datei und Sie können sogar weitere Informationen erhalten. Schauen wir uns an, was das aussagt. Die Komponente wird verschoben. Diese Datei und die Instanzen werden in Zukunft mit dieser Datei verbunden. Großartig. Das ist alles was wir wollen. Wir warnen Sie hier ein wenig, wenn Sie die Komponente sowohl verschieben als auch ändern. Jeder, der das Bibliotheksupdate akzeptiert, kann Override verlieren. Also ja, das ist die große Gefahr hier. Die Overrides sind nicht unbedingt sicher. Manchmal funktioniert es, manchmal nicht. Trotzdem müssen wir sie verschieben, also klicken wir auf Veröffentlichen. wir jetzt zu unserer Designdatei zurückkehren, gehen wir hier zu Seite eins. Wir können jetzt sehen, dass wir hier auch ein kleines Update zur Überprüfung erhalten , und Sie können sehen, dass wir diese beiden Komponenten aus dieser Datei entfernt haben. Wir wollen das natürlich aktualisieren. Nun wollen wir sehen, ob wir Glück haben, wir Glück haben und unsere Überschreibungen noch intakt sind Wie bereits erwähnt, kann dies manchmal dazu führen, dass Ihre Überschreibungen verloren gehen Jetzt hatten wir Glück, dass alles funktioniert hat. Wenn wir hier zur Hauptkomponente springen, können Sie sehen, dass ich zu meiner neuen Bibliotheksdatei übergehe. Wenn wir zurück zu unserer Designdatei und tatsächlich zum Bedienfeld „Elemente“ springen , können Sie sehen, dass diese neue Bibliothek verbraucht, aber die Datei selbst ist keine Bibliothek mehr , da keine Komponenten mehr hinzugefügt wurden. Wenn wir hier zu unserer Übersicht springen und einen Blick darauf werfen, dann können Sie sehen, dass dies jetzt ein schwarzes Symbol hat und unsere Bibliothek ist, und dass unsere Designdatei wieder zu einer Designdatei zurückkehrt. 69. 07 Design, Komponenten, Stile und Variablen teilen: Schauen wir uns an, was wir teilen würden. Wie würden wir also unser Design, unsere Komponenten, Stile und Variablen dokumentieren ? Lassen Sie mich Ihnen also einen kurzen Überblick über eine Datei geben. Fangen wir mit den Komponenten an. Wir speichern unsere Komponenten entweder auf unserer eigenen Seite in unserer Designdatei oder wir speichern sie in einer völlig separaten Datei. Wir können eine separate Bibliotheksdatei mit unseren Konstruktionsdateien verbinden , also gemeinsam genutzte Teambibliotheken. Wo auch immer Sie Ihre Komponenten lagern, ich empfehle Ihnen, sie in Abschnitten zu platzieren. Dadurch werden Ordner im Assets-Bedienfeld erstellt, sodass es viel einfacher ist, alles für Sie und alle, mit denen Sie Inhalte teilen, zu organisieren. Du kannst dein Projekt einfach umbenennen und neu organisieren dein Projekt wächst ohne dass die Verbindungen zu den Instanzen verloren gehen Außerdem können Sie diesen Abschnitten jederzeit weitere Informationen zu Ihren Komponenten hinzufügen diesen Abschnitten jederzeit weitere Informationen zu Ihren Komponenten Aber machen Sie sich am Anfang nicht zu viele Gedanken darüber. Beginnen Sie damit, sie einfach in einem eigenen Bereich zu platzieren. Ein weiterer Vorteil von Abschnitten besteht darin, dass Sie sie als entwicklungsbereit markieren können. Das gleiche Prinzip gilt für unsere Stile und Variablen. Sie können lokal in derselben Datei gespeichert werden. Wenn Sie auf den grauen Canvas-Bereich klicken Sie im rechten Seitenbereich eine Übersicht. Alternativ können Sie sie in externen Dateien speichern über gemeinsam genutzte Teambibliotheken eine Verbindung zu Designdateien herstellen. Im Gegensatz zu Komponenten besteht bei Stilen und Variablen keine Verbindung zu einem Canvas-Element. Dennoch empfehle ich dringend, sich selbst, anderen Designern und Entwicklern einen Überblick zu verschaffen. Für unsere Farbvariablen wäre das ein Farbstylesheet. Dann füge ich eine Typografie-Hierarchie und Informationen zu gängigen Abstands- und Layoutregeln Sie können auch andere Regeln oder andere Stile wie Unschärfen, Schatten und Dies hilft nicht nur bei der Vermittlung technischer Informationen, sondern bietet auch Einblicke in die verwendeten Designs und das zugrunde liegende System Wie immer beim Design Einrichtung einer visuellen und funktionalen Hierarchie von entscheidender Bedeutung. Zusätzlich zu diesen Richtlinien möchten wir jetzt natürlich unsere Designs teilen. Für das mobile Design verwende ich nur eines. Aber für Web-Apps und Websites habe ich normalerweise zwei Hauptbildschirme. Einer für Mobilgeräte und einer für den Desktop. Es gibt keine festen Regeln. Passen Sie das an Ihre Projektanforderungen an. Dies ist also eine Figma-Seite die einen Überblick über alle Bildschirme bietet Einige Teams haben auch eine Seite pro Funktion. Auch hier liegt es ganz bei Ihnen, wie Sie das strukturieren. Und ich kann auch Abschnitte verwenden, um meine Designs zu strukturieren und markieren, was für die Entwicklung bereit ist. Wenn du mit Prototyping arbeitest, empfehle ich, eine weitere Seite für deine Prototypen oder vielleicht sogar eine weitere Datei hinzuzufügen , da dies einige Anpassungen und zusätzliche Bildschirme erfordern kann Übrigens prototypisiere ich in der Regel wichtige Arbeitsabläufe wie Anmeldungen und bestimmte Funktionen und das gesamte Produkt Sie können Flows verwenden, um die verschiedenen Abschnitte in Ihrem Prototyp zu markieren . Ich persönlich bevorzuge es, eine Seite in meiner Datei als Spielwiese zu nutzen, um das Reaktionsverhalten und etwaige Unsicherheiten zu testen das Reaktionsverhalten und etwaige Unsicherheiten zu Ich nehme sie jedoch nur dann in meine Komponenten- oder Konstruktionsdokumentation auf, wenn sie relevant sind Ich verwende auch eine Art Dateiverwaltungssystem, in dem ich Überschriften und einige zusätzliche Informationen mit Aufzählungspunkten hinzufügen kann Überschriften und einige zusätzliche Informationen mit Aufzählungspunkten hinzufügen . Das ist es. Du bist bereit zu gehen. 70. 08 Dev-Modus Teilen mit der Entwicklung: So teilen Sie Inhalte mit Entwicklern, die den Gehörlosenmodus verwenden. Bitte beachten Sie, dass der Gehörlosenmodus nicht im kostenlosen Tarif enthalten ist Also hier habe ich mein Design, das aus Komponenten besteht, die auf einer anderen Seite gespeichert sind Um einen besseren Austausch mit der Entwicklung zu ermöglichen, hat Figma einen sogenannten Deaf-Modus Sie können den Gehörlosenmodus über die Werkzeugleiste einschalten. Sie haben dieselbe Designübersicht, aber Sie werden feststellen, dass sich Ihre Bedienfelder links und rechts leicht Wenn wir ein Element auswählen, können wir auf der rechten Seite sehen, dass wir Informationen erhalten die für die Entwicklung geeignet sind. Schauen wir uns das genauer an. Zuallererst können wir hier oben sehen, dass dies eine Komponente ist und wir eine Instanz verwenden. Wir könnten zur Hauptkomponente springen indem wir auf das Komponentensymbol klicken. Hier können Sie sehen, dass es automatisch auf die andere Seite gesprungen ist und mir die detaillierte Komponente zeigt Wir können entweder die Komponente oder die Instanz inspizieren. ich hier zum Beispiel Wenn ich hier zum Beispiel den Text auswähle, können Sie sehen, dass ich die Farbe erhalte, in diesem Fall die Variable, die Schriftfamilie, die Größe usw. Übrigens können Sie wählen, ob diese Informationen in CSS, IOS, Android oder auch in RAM oder Pixeln angezeigt werden sollen . Darüber müssen Sie sich keine Sorgen machen, aber Ihre Entwickler werden es sehr praktisch finden, dies einzurichten. Wenn wir weiter auf unsere Komponente klicken, können Sie sehen, dass all die kleinen Abstände und Abstände, die wir eingerichtet haben, gut angezeigt werden und einfach kopiert werden können. Lassen Sie uns zunächst zu unserer Instanz zurückkehren. Und Sie können sehen, dass wir all diese Informationen sowie die Entfernung zu benachbarten Objekten erhalten, wenn Sie einfach Maus über unsere Instanz wir all diese Informationen sowie die Entfernung zu benachbarten Objekten erhalten, wenn Sie mit der Maus über unsere Instanz fahren Eine weitere Funktion, die ich wirklich liebe, ist, dass, wenn Sie eine Instanz auswählen , die Teil eines Komponentensatzes ist, eine kleine Schaltfläche namens Spielplatz öffnen angezeigt wird Und auf diesem Spielplatz können Sie die verschiedenen Varianten dieses Komponentensatzes sehen. Sobald Sie damit beginnen, noch komplexere Komponenten mit Komponenteneigenschaften einzurichten , wird dies auch hier angezeigt. Eine weitere tolle Sache ist, dass all Ihre Assets, zum Beispiel Bilder oder hier oben, Sie können unser kleines Symbol sehen, wirklich einfach heruntergeladen werden können. Sie müssen Ihre Assets also nicht mehr separat exportieren. kann sehen, dass dies automatisch als SVG heruntergeladen wird. Wenn wir dieses Bild hier auswählen, können Sie es als PNG, JPEC usw. herunterladen JPEC usw. Sie können auch auf Exportieren klicken und sogar andere Auflösungen wählen Für höhere Bildschirmauflösungen können Sie zwei X, drei X usw. wählen und diese in ein beliebiges Format exportieren. Auch hier gibt es nichts, worüber Sie sich als Designer Gedanken machen müssen , denn jetzt haben Ihre Entwickler all diese Tools zur Hand. Das sind also alle wichtigen Details, und Sie könnten zum Beispiel sogar einen Link zu tauben Ressourcen erstellen Also hier können Sie einen Link hinzufügen. Wenn Sie bereits Komponenten eingerichtet haben, z. B. in Gup , können Sie eine Verbindung zu Tokens usw. Dies ist ein wirklich, wirklich mächtiger Bereich, und ich empfehle Ihnen dringend , sich mit Ihrem Entwicklungsteam zusammenzusetzen und sich das anzusehen Außerdem wird es Ihnen auch bei der gesamten Kommunikation helfen . Sie können jetzt hier sehen, dass es bereit für die Entwicklung ist, und wir haben nichts markiert. Nun, wenn wir zu unserem Entwurfsmodus zurückkehren, können wir einen Abschnitt um jedes Design zeichnen. Sie finden also einen Abschnitt in Ihrem Frames-Menü oder Sie können die Tastenkombinationen Shift und S verwenden einen Abschnitt in Ihrem Frames-Menü oder Sie können die Tastenkombinationen Shift und S diese Desktop-Version hier ist bereits fertig, aber an meiner mobilen Version arbeite ich noch. einen Abschnitt drum herum gezeichnet und wir können die Hintergrundfarbe ändern um sicherzustellen, dass wir das etwas besser sehen können. Wenn Sie den Mauszeiger hierher bewegen oder auf den Namen klicken, erscheint dieses kleine Schild, das bereit für die Entwicklung Wenn Sie darauf klicken, dieser Abschnitt und alles, was Sie darauf platzieren, jetzt als bereit für die Entwicklung markiert Wenn wir in den tauben Modus zurückkehren, können Sie auf der linken Seite sehen, dass wir jetzt alles haben, was für Entwickler zur Inspektion bereit ist für Entwickler zur Inspektion bereit Und sobald ich mit meinen anderen Rahmen in meinem Design fertig bin , könnte ich sie einfach zu meinem Abschnitt hinzufügen, und Sie können übrigens so viele Abschnitte hinzufügen , wie Sie möchten Wenn ich also wieder zu „Bereit für die Entwicklung“ zurückspringe, dann können Sie jetzt sehen, dass beide hier markiert sind. Wenn ich sie anklicke, zoome ich heran und kann mir das genauer ansehen. Eine weitere Funktion, die ich wirklich liebe, ist, dass sie Ihnen alle Änderungen an Ihrem Design anzeigt. Lassen Sie uns zu unserem Design zurückkehren und das einfach ein wenig ändern. Sagen wir einfach, ich ändere hier die Polsterung. Der Abstand dazwischen ist jetzt größer, also etwas ganz Subtiles Wenn ich in meinen Todesmodus zurückkehre und dieses Design auswähle, kann ich jetzt hier die Änderungen vergleichen. Lass uns darauf klicken. Und Sie können jetzt sehen, dass einige geringfügige Änderungen hinzugefügt wurden. Manchmal sind sie also sehr subtil, und hier verwende ich die Overlay-Funktion sehr gerne Und jetzt können wir die Änderungen sehen und Sie können diese kleine Änderung in der Polsterung sehen Wenn Sie darauf klicken, erhalten Sie auch detailliertere Informationen Darüber hinaus empfehle ich immer, dass Sie weitere Informationen zu Ihren Komponenten hinzufügen und mit einem Stylesheet einen Überblick über Dinge wie die Verwendung von Farben und die Typografiehierarchie geben Dinge wie die Verwendung von Farben und die Typografiehierarchie Du kannst direkt aus dem Gehörlosenmodus heraus teilen indem du einfach auf die Schaltfläche „Teilen 71. 99 Danke: Gut gemacht, dass Sie diesen Kurs abgeschlossen haben. Fühlen Sie sich frei, uns bei Moonlearningt zu kontaktieren. Wir sind immer an Ihrem Feedback interessiert. Sie würden uns auch einen großen Gefallen tun, wenn Sie sich nur eine Minute Zeit nehmen und hier eine Bewertung hinterlassen könnten . Wenn Ihnen dieser Kurs gefällt , sollten Sie sich auch unsere zusätzlichen Kurse bei Molearn ansehen . Wir decken alle Themen ab, von den Grundlagen des UI-Designs bis hin zu Figma und sogar einigen Code-Grundlagen Besuchen Sie unbedingt unsere Website unter Molar Dot O, wo Sie sich auch für unseren Newsletter anmelden können