Der No Bull-Leitfaden zum Werden eines Figma-Profi im Jahr 2023 und UX/UI/Product Professional

1. Einführung und Trailer: Hey, danke, dass du darauf geklickt hast und wollte mir meinen Kurs über Figma ansehen. Das ist also der edle Kurs über Figma. Und wir werden dir beibringen, wie du dich so schnell wie möglich daran gewöhnen kannst, ein Figma-Profi zu sein. Mein Name ist Chuck, und gemäß der Nobel-Philosophie ist das, was Sie daraus machen was Sie daraus machen werden, nichts Besonderes, nichts Flauschiges. Wir geben dir genau das, was du brauchst, um das Figma-Tool absolut sicher und kompetent zu nutzen, um all die Ideen und Dinge, die du mit deinen Freunden und deinen Teamkollegen diskutierst, zu verwirklichen all die Ideen und Dinge, die du mit deinen Freunden und deinen Teamkollegen diskutierst, und das im Figma-Tool zum Ausdruck zu bringen. Es gibt also ein paar Gründe, warum du mir und diesem Kurs vertrauen und sehen solltest, wie wir dorthin kommen. Die Nutzung meines Kurses ist vierfach. Erstens bin ich seit 2018 Figma-Nutzer. Und nicht nur das, ich bin derzeit ein Freund von Figma für die Gegend von Manchester. Ich fühlte mich also sehr zu Figma hingezogen und ich liebe es wirklich und was ich damit erreichen konnte. Und das möchte ich gerne mit Ihnen allen teilen. Zweitens die Art der Arbeit , die ich auch gemacht habe. Ich war also ein ausgezeichneter Softwareingenieur, der nächste technische Leiter. Ich verstehe also nicht nur, wie man ein Produktdesigner ist und wie man das Beste aus Figma herausholt und Ihren Arbeitsablauf einfach und unkompliziert wie möglich gestaltet. Aber ich weiß, was Ihre Ingenieure benötigen werden, weil ich über diese Fähigkeiten verfüge. Ich weiß, wie alles zusammenpasst. Das ist also der zweite Grund. Drittens gibt es eine Art von Orten , an denen ich auch gearbeitet habe. Es sind also nicht nur Unternehmen, für die ich gearbeitet habe oder Startups, die bei der Arbeit gearbeitet haben, für beide. In Bezug auf Unternehmen und Unternehmen, die in umgekehrter chronologischer Reihenfolge gearbeitet haben , gilt das für Jaguar Land Rover. Davor habe ich bei der Cooperative Bank hier in Großbritannien gearbeitet . Und davor war ich bei einer Beratungsfirma namens KYC Solutions, die jetzt Teil von Disney Streaming ist. Sie wissen also, dass es nicht nur HTML, CSS, einige der grundlegenden Dinge sind. Es werden wirklich komplexe, schwierige Dinge sein, die ich innerhalb der technischen Fähigkeiten erreichen und umsetzen konnte . Ich weiß also genau, wie diese Leute denken, wie diese Leute in diesen Positionen Designs erhalten wollen. Auf der Figma-Seite. Als nächstes kommt mittel. Ich schreibe also seit einigen Jahren Artikel und Medien mit über 300.000 Views, ich möchte das UX Collective hinzufügen, das größte UX-Publikationsmedium. Und ich war sehr daran interessiert , anderen in der Community beizubringen , wie man das macht, von einigen der einfachsten Dinge wie dem Sicherstellen, dass Sie das Frame-Nesting in Figma beherrschen , bis hin zu komplexeren Dingen wie der Fähigkeit, Breakpoints zu prototypisieren und diese Arten von Prototypen zusammenzustellen. Und sie sind nicht immer nützlich. Versteh mich nicht falsch. Aber manchmal sind sie es wirklich wert, wenn Sie etwas wirklich ausprobieren und sicherstellen möchten , dass der Prototyp so gut wie möglich ist Prototyp so gut wie möglich um das bestmögliche Ergebnis für Ihre Benutzer und Ihr Produkt zu erzielen . Und wenn Ihnen das nicht genug ist, habe ich hier mein Treuhänder-Fenster für Haustiere , um die Gesellschaft von Zeit zu Zeit zu behalten. Halten Sie also Ausschau und vielleicht nehmen Sie an einigen Lektionen teil . Das weitere Umschweifen. Wenn Sie bis jetzt nicht überzeugt sind, gibt es keinen Anhaltspunkt, der Sie überzeugen könnte. Also für diejenigen von Ihnen, die durchhalten wollen, vielen Dank, dass Sie sich entschieden haben, ein Risiko mir einzugehen, und ich werde Sie nicht enttäuschen. Lass uns anfangen. 2. Fenster, Paneele und die Hauptbühne: In dieser Lektion behandeln wir die grundlegenden Panels, Fenster und Dinge, auf die Sie achten sollten, wenn Sie eine Datei zum ersten Mal in Figma öffnen und sich orientieren. Was wir also behandeln werden, ist das Ebenen-Panel, das Seiten-Panel, das Design -, Prototyp- und Inspektionsfenster sowie die Bereiche, in denen sich Ihre Standardwerkzeuge und -dinge befinden werden. Wenn Sie also hier ein Figma-Fenster öffnen und eine beliebige Datei öffnen, oder auch wenn Sie die Datei nicht öffnen, sehen Sie oben ein kleines Plussymbol. Und Sie werden diese Seite sehen, die praktisch ist, wenn Sie zwischen einer Designdatei und einer Fig-Gem-Datei wählen möchten . Öffnet hier eine neue Designdatei und hilft Ihnen, sich an den verschiedenen Fenstern zu orientieren und wo sich alles befindet. Wie Sie beim ersten Öffnen sehen können, passiert nicht allzu viel. Du hast die Hauptbühne in der Mitte. Hier werden Sie also den größten Teil Ihrer Designarbeit erledigen. Das Ebenen-Panel hier standardmäßig auf der linken Seite geöffnet. Alle wichtigen Dinge, die Sie kennen und verwalten möchten, werden also da sein. Während ich also einige grundlegende Dinge erstelle, werden Sie sehen, dass die verschiedenen Ebenen hier im Ebenenbedienfeld angezeigt werden . Was Sie sehen werden, ist, dass das Seitenfenster standardmäßig nicht geöffnet ist. Also normalerweise habe ich das selbst geöffnet und meine Datei größer wird und wenn ich organisiert sein und mit anderen zusammenarbeite, öffne ich sie. Und Sie können hier ganz einfach Seiten erstellen. Die anderen Panels, auf die Sie achten sollten befinden sich ebenfalls hier auf der rechten Seite. Wenn ich also ein einfaches Rechteck erstelle, werden Sie sehen, dass das Design-Panel verschiedene Optionen für die Position, die Größe und einige verschiedene Anpassungen bietet, die Sie vornehmen können. Dieses Designfenster ändert sich, je nachdem , welche Art von Ebene Sie geöffnet haben. Sie können also hier mit der Textebene sehen, ich habe die verschiedenen Dinge, die ich aus technischer Sicht öffnen und bearbeiten kann . Die anderen Panels , die Sie sehen werden die, wenn ich einen einfachen Rahmen erstelle Deshalb möchte ich hier einen Prototyp erstellen und einige Flows erstellen , um einen anklickbaren Prototyp zu erstellen. Hier muss ich sein. Sie können also einige Flow-Startpunkte erstellen , je nachdem, welchen Frame Sie haben. Richten Sie die Interaktionen von verschiedenen Frames oder von verschiedenen Ebenen aus ein. Sie können also aus diesen Dingen eine Interaktion erstellen, aber Sie können aus diesen Dingen eine Interaktion erstellen. Was Sie dann noch sehen, ist das Inspektionsfeld auf der rechten Seite. Dadurch entstehen einige automatisch generierte Eigenschaften und Farben. Ich benutze sie persönlich also nicht zu oft. Aber deine Entwickler, Entwickler, mit denen du zusammenarbeitest , können diese selbst verwenden. Und Sie können einige, einige grundlegende automatisch generierte Codes sehen , die sich als nützlich erweisen könnten. Also die zwei Dinge, auf die ich Sie aufmerksam machen möchte, oder drei, sind es tatsächlich. Der erste ist der Hintergrund. Sie können also die Farbe des Hintergrunds ändern , wenn Ihnen das zu spät ist, Sie auf einem dunkleren Hintergrund arbeiten möchten, sagen wir, Sie fühlen sich damit wohler. Es ist also normalerweise schön, es hier zu haben. daran interessiert, das zu ändern, aber ich belasse es gerne als Standard. An zweiter Stelle stehen die lokalen Stile. Das wollte ich mit dir teilen. Also habe ich hier ein Rechteck erstellt und lass uns diese Farbe in etwas Zufälliges wie Limettengrün ändern . Sobald Sie diese Farbe erstellt haben, können wir sie zu unserer lokalen Bibliothek hinzufügen. Indem du das tust. Nennen wir es Limettengrün. Das fügt es Ihren lokalen Stilen hinzu. Es gibt also eine Reihe verschiedener Dinge, die Sie hinzufügen können. Text, Farben, Effekte und Rasterstile, die Sie möglicherweise verwenden möchten, um Ihre Designs und Prototypen zu erstellen . Hier oben ist das Letzte. Ich, eigentlich das vorletzte, bevor ich das durchgehe, das zweite, das letzte, was ich teilen möchte, das zweitletzte, was ich mit dir teilen möchte , ist dieses Ding hier oben. So könnte es sehen, wo sich Ihre Datei befindet, und sie umbenennen. Also meine, meine erste Akte. Von hier aus erhalten Sie verschiedene Optionen, um Ihre Datei zu einem anderen Projekt-Favoriten zu verschieben und sie zu duplizieren, wenn Sie Ihre Bibliothek veröffentlichen möchten. Wenn Sie also anfangen, mit Designsystemen zu arbeiten , sollten Sie das vielleicht verwenden. Das allerletzte , was Sie mit Ihnen teilen und besprechen sollten, ist, dass all Ihre wichtigsten Tools hier oben zu finden sind. Diese sind täuschend einfach. Es gibt nicht viele Tools, mit denen man es vergleichen kann. Wenn Sie ein bisschen altmodisch sind und früher Photoshop benutzt haben . Es gibt ein riesiges Panel mit verschiedenen Tools, die Sie verwenden können. In der nächsten Lektion werden wir uns mit diesen Tools befassen, wie man sie verwendet und wie man das Beste aus ihnen herausholt. 3. Tools und ihre Tastenkombinationen: Als Nächstes behandeln wir die verschiedenen Tools und orientieren uns daran, was die Tools sind, wofür Sie sie verwenden können, welche Abkürzungen Sie ebenfalls verwenden können, und dann zwischen den verschiedenen Dingen wechseln. Also zurück in der Datei beginnt hier in der oberen Leiste von links nach rechts. Das Standardwerkzeug, das Sie haben, ist also das Zeigerwerkzeug. Wenn Sie also ein paar verschiedene Dinge haben, ist das Zeigerwerkzeug gut, um Dinge einfach hin und her zu ziehen. Und die Abkürzung dafür ist V. Ich erinnere mich also , dass der Buchstabe V ziemlich zeigend ist. kannst du also auch verwenden. Zeig umher. Darunter befindet sich das Skalierungstool. Wir haben also eine Weile, um das herauszufinden, aber das Skalierungstool ist wirklich ziemlich cool. Also k ist eine Abkürzung, oder Sie können mit der Werkzeugleiste oben links klicken. Und das ist ziemlich neu , das ist ziemlich neu. Das gab es vorher nicht, und Sie können nach Faktoren skalieren , die Sie standardmäßig skalieren möchten. Die Standardeinstellung ist von unten links, glaube ich. Also machen wir mal zwei. Sie können in der unteren linken Ecke sehen, dass es gewachsen ist. Sie können auch von der Mitte aus wachsen. Wenn ich also nochmal zweimal mache, kannst du sehen, dass es jetzt das Quadrat links von diesem überlappt . Das ist also das Skalierungstool und Sie können auch auf Dinge klicken und nach Belieben klicken und ziehen. Sie können auch skalieren. Es skaliert tatsächlich proportional, glaube ich, das versuche ich zu sagen. Sie sollten sich also nicht zu viele Gedanken darüber machen müssen , die richtige Größe zu finden. Wenn Sie zurück zum Zeigerwerkzeug wechseln, können Sie dann die Form ändern. Wie Sie vielleicht erwarten. Als nächstes haben wir die Frames, Sections und Slice. Frames sind Ihr Tagesgeschäft, daher werden wir diese im nächsten Modul behandeln. So näht man verschiedene Prototypen zusammen und kann an der Rahmenverschachtelung arbeiten. Und wenn Sie das Rahmenwerkzeug verwenden, erhalten Sie auch einige Presets. Es ist also ziemlich cool , dass du Dinge wie die Apple Watch-Voreinstellung verwenden kannst oder du kannst andere Dinge verwenden und sagen, dass ich tatsächlich ein MacBook Air habe und ich möchte einen Prototyp erstellen auf dieser Bildschirmgröße basiert. Das ist also sehr praktisch. Was du auch verwenden kannst. Hier ist das Abschnittstool. Die Abkürzung ist Shift S. Und der Abschnitt ist ziemlich gut um Ihre Sachen zusammenzustellen. So kannst du deine Sachen insgesamt organisieren und Dinge nach links und rechts ziehen. Das ist ziemlich cool. Lass uns das loswerden. Als nächstes haben wir die Formwerkzeuge. Die Standardeinstellung ist also das Rechteck. Wie Sie dort oben gesehen haben, kann ich, wenn ich sie verwende , ein Rechteck zeichnen und es rechts anpassen. Ich habe auch das Linienwerkzeug und das Pfeilwerkzeug. Ich kann also L verwenden, um eine Linie zu zeichnen, oder ich kann Shift L verwenden, um einen Pfeil zu zeichnen. Ich kann 0 für verwenden, es ist das Ellipse-Werkzeug, aber ich erinnere mich daran als 0 für oval. Also werde ich es ziehen. Es wird kein Seitenverhältnis beibehalten. Und siehe Shift runter, es wird genau quadratisch sein. Es. Das ist ziemlich gut, um ovale Formen zu kreieren und Dinge wie Avatare oder einige Icons zu machen. Sie haben auch diese anderen Werkzeuge, das Polygon und den Stern. Stern ist also so ziemlich standardmäßig, Sie erstellen einfach ein Sternsymbol, wie Sie möchten. Und du hast auch das Polygon. Standardmäßig ist das also ein Dreieck. Aber im nächsten Modul sollten wir uns mit der Bearbeitung und einigen ausführlichen Informationen zum Bearbeiten von Formen befassen. Er hat auch ein Bild oder Video von Place bekommen. Und das benutze ich normalerweise nicht. Ziehen Sie tatsächlich direkt vom Desktop oder aus meinem Dateibrowser. Und das finde ich viel einfacher. Als nächstes haben wir das Stift - und Bleistiftwerkzeug. Ich benutze das Stiftwerkzeug nicht so oft, weil es Punkt für Punkt ist, was okay ist. Aber was ich öfter benutzt habe, ist das Bleistiftwerkzeug. Also könnte ich das benutzen, um Dinge zu kommentieren und zu sagen, das ist mein Polygon und das ist ein Stern. Also finde, das Bleistiftwerkzeug ist ziemlich gut und das funktioniert auch auf iPads und Tablets. Das ist also ganz gut, wenn Sie nur etwas skizzieren oder Anmerkungen und Designkritik machen möchten . Du hast die Textebene. So können Sie Textebenen erstellen und Ihren Text in Ihre Designs und Prototypen einfügen . Sie haben die Ressourcen, die Ihre Komponenten, Plug-ins und Widgets abdecken . Das ist also ziemlich hilfreich. Dann hast du das Handwerkzeug. Was Sie vielleicht bemerkt haben, ist, dass ich beim Durchsuchen hin und her gezogen habe , wann immer ich wollte, ein direktes Handwerkzeug verwendet, aber Sie können auch mit der mittleren Maustaste klicken und das verwenden, um in Ihrer Datei zu navigieren. Und schließlich haben wir die Kommentare. Also kann ich C für einen Kommentar drücken und sagen, dass dies eine Textebene ist. Da hast du es. Das sind alle Tools, mit denen Sie arbeiten müssen. 4. Best Practices für Seiten und Seitennamen: Das Letzte, was meiner Meinung nach an sich schon behandelt werden sollte, sind Seiten. Und das liegt daran, dass es nicht immer so ist, dass zunächst nicht klar ist, wie viele Seiten Sie haben sollten , wie Sie das strukturieren sollten, solche Dinge und auch die Einschränkungen. Was die Empfehlungen angeht und wie ich vorschlage, organisierst du deine Seiten und stellst sie zusammen, indem du diese fünf verschiedenen Konstanten verwendest. Also zuerst hast du dein Cover. Das ist also die erste Seite, auf Sie sehen, wenn Sie zum Dateibrowser zurückkehren, alles, was Sie in dieser bestimmten Datei haben. Es kann also auch gut sein. Leg das oben drauf und sag meine erste Akte. Und wenn ich das dann einrahme, kann das das Deckblatt sein. Wenn sich also jemand diese Datei im Dateibrowser ansieht, wird er Folgendes sehen. Sie können also die wichtigsten Informationen eingeben, sie für Status verwenden , solche Dinge. Und das ist sehr hilfreich wenn Sie mit anderen Designern zusammenarbeiten. Und nur um dich daran zu erinnern , woran du gerade arbeitest und was, was in dieser Datei enthalten ist. Der nächste sind diese beiden. Sie heißen also Final und Prototype. Final kann also auch als Hand-Off bezeichnet werden. Manchmal. Ich stelle das gerne als zweite Seite ein. Dies ist der Zeitpunkt , an dem Sie Ihren Designprozess abgeschlossen haben und herausgefunden haben, was Sie bauen möchten, wie Sie es bauen wollen, solche Dinge. Dies ist die Seite , auf die ich meine Ingenieure und Designer verweisen würde , wenn ich möchte sie sehen, was genau gebaut werden muss und was genau als Nächstes ansteht. Und was ich gerne mache, ist das auch ein bisschen aufzuschlüsseln . Das ist also, was Sie als die fertige Seite betrachten würden , wenn Sie möchten. Sie können auch alternative Versionen erstellen. Das kann also manchmal hilfreich sein, wenn Sie den Leuten mitteilen möchten, wir tatsächlich einige wichtige Änderungen vorgenommen haben. Und wir wollen eine Version eins erstellen, aber hier ist eine Version zwei, die wir vielleicht hinzufügen möchten. Der nächste Vorschlag ist ein Prototyp. In diesem Fall haben Sie einen anklickbaren End-to-End-Prototyp und das, was ich vielleicht anderen Designern und Entwicklern usw. mitteilen möchte anderen Designern und Entwicklern usw. mitteilen . Vielleicht anders als der anklickbare Prototyp oder die Benutzertests, die ich zusammenstelle. Deshalb empfehle ich, das als separate Seite zu haben. Arbeiten ist das nächste. Hier verbringst du also den Großteil deiner Zeit oder ich verbringe den Großteil meiner Zeit damit, mit ein paar verschiedenen Abläufen, ein paar verschiedenen Ideen, ein paar verschiedenen Möglichkeiten, etwas zu modellieren oder dem Benutzer etwas mitzuteilen, zu experimentieren ein paar verschiedenen Abläufen, ein paar verschiedenen Ideen, ein paar verschiedenen Möglichkeiten, etwas zu modellieren oder dem Benutzer etwas mitzuteilen, zu und zu sehen, ob wir bis zu einer Entscheidung darüber kommen können , was es sein sollte. Das ist gut, wenn ich auch ein paar kleine Korrekturen und Optimierungen vornehmen muss , ein Update. Dinge wie zum Beispiel, wir möchten vielleicht die Schriftskala der frühen Tage oder später ändern , wir könnten uns dafür entscheiden, den Randradius zu ändern und wir wollen sicherstellen, dass das richtig aussieht, oder die Kopie aktualisieren, z. B. bevor wir zur richtig aussieht, oder die Kopie aktualisieren, z. B. Übergabeseite wechseln. Das letzte, was ich empfehlen würde, sind Komponenten. Es gibt also ein weiteres Modul , in dem wir die Komponenten ausführlich und ausführlich besprechen werden . Aber eine separate Seite mit Ihren Komponenten zu haben, ist sehr praktisch, damit, wenn andere Designer in Ihre Datei kommen, sie nicht auf die Arbeitsdatei klicken und fragen, wo sind all die Komponenten? Oder gehen Sie in den Prototyp und fragen Sie, wo sind all die verschiedenen Teile? Vielleicht überschreiben Sie die falschen Dinge. Also habe ein paar verschiedene Blogs und Dinge, die darüber sprechen , warum das eine wirklich nützliche Sache ist. Aber um es kurz zu machen, wenn Sie eine Seite haben, auf der Sie alle neuen Arbeitskomponenten erstellt haben , sind es alle lokalen Komponenten. Es ist gut, die beiden zu trennen und sie auf derselben Seite zusammenzufügen. Sie können also deutlich sehen, hier sind die Komponenten, die ich erstellt habe und die wieder in ein größeres Designsystem aufgenommen werden sollten . Hier in den lokalen Komponenten, die ich nur lokal für diese Datei verwendet habe nur lokal für diese Datei verwendet , um die Arbeit zu liefern und die Entscheidung zu treffen. Damit ist das erste Modul abgeschlossen. Ich hoffe, das war nützlich und gab Ihnen eine Orientierung, wo sich die verschiedenen Panels befinden und wie Sie sich in Figma in der Designdatei zurechtfinden . Wo finden Sie die wichtigsten Tools, die Sie verwenden müssen, und wie Sie sie verwenden, sowie die Seiten und meine empfohlene Einrichtung für Seiten. Im nächsten Modul werden wir uns den Formen und Werkzeugen befassen und sie ein wenig eingehend verwenden. So können Sie etwas detaillierter sehen , wie das Beste aus diesen Dingen herausholen können, anstatt die verschiedenen Presets einfach per Drag-and-Drop zu ziehen . 5. Checkpoint 1: Atmen Sie ein: Cool. Hoffentlich fühlen Sie sich an dem Figma-Programm orientiert und fühlen sich nicht zu verloren, wenn Sie hineinspringen und versuchen herauszufinden, was dieses Fenster ist, was dieses Fenster ist, was ist dieses Fenster, jetzt haben Sie eine Vorstellung davon, wo all die wichtigen Dinge in einer Figma-Designdatei sitzen . Als Nächstes werden wir uns mit Farben, Linien und Formen und Topographie befassen, nicht in dieser Reihenfolge, aber wir werden diese Dinge durchgehen. Du siehst auch verwirrt aus. Du bist wie das, worüber geschrien wurde. Ja, wir werden diese Dinge durchgehen. Ja, du machst das großartig. Mach weiter so. 6. Formen, Randradius und Formbearbeitung: In diesem Modul wird es ganz einfach sein. Wir werden uns mit Formen, Randradius und Formenbearbeitung befassen. Dies sind die Grundlagen und Sie haben, Sie haben schon Dinge wie Sketch oder Photoshop verwendet oder haben Sie mit der Bearbeitung dieser verschiedenen Formen oder sogar Makromedienfeuerwerke experimentiert Bearbeitung dieser verschiedenen Formen oder , als das noch eine Sache war. Du wirst das ganz natürlich finden. Ansonsten, mach dir keine Sorgen, wir gehen die verschiedenen Details und das Wesentliche ein, das du wissen musst, um ein guter UX UI- oder Produktdesigner zu sein . Zurück im Editor fange ich also mit dem Rechteckwerkzeug an. Die Abkürzung ist wieder unsere, wenn wir sie einfach erstellen, es ist nett, kinderleicht. Sie können etwas anderes erstellen, als einen Randradius hinzuzufügen. Du kannst es hier hinzufügen. Das macht es also, es fügt es zu all den verschiedenen Ecken hinzu. Das ist also ziemlich gut, um ein kartenartiges Ding zu erstellen , z.B. kannst du das auch mit zwei Rahmen machen, übrigens, als schnelle Beilage, sodass du einen Randradius hinzufügen kannst , damit das später nützlich sein wird. Und die Sache, die Sie über Borderradius wissen sollten, ist, dass Sie ihn unabhängig machen können. Also z.B. ich möchte vielleicht die unteren beiden Ecken scharf machen, aber die obere ist tatsächlich abgerundet. Wenn ich z. B. I erstelle rechten Maustaste und drehe vertikal, kann ich das z. B. weiß machen und es kürzer machen. Und dann sieht es ein bisschen mehr wie eine Karte aus. Das ist sehr hilfreich, wenn Sie mit dem Grenzradius arbeiten. Wenn wir ein Polygon hinzufügen, kann ich Ihnen zeigen, wo. Ich denke, hier funktioniert Borderradius immer noch an allen Ecken. Aber was Sie tun können, ist, wenn Sie mit der Formenbearbeitung beginnen, können Sie hier mehr Eckpunkte hinzufügen , ich denke, das ist das richtige Wort. Und alle haben einen unabhängigen Rand- und Radiuswert. Also hier kann ich das auf 999 ändern und das ist wie super gekrümmt hier drüben. Aber ich kann diese beiden so lassen, wie sie sind, und nach Bedarf weitere Dinge hinzufügen. Also brauche ich vielleicht eine andere Form. Das ist also sehr nützlich wenn Sie eine Feinabstimmung an einer Form vornehmen und auf natürliche Weise illustrativere Arbeiten wie das Bearbeiten einer Form ausführen möchten. Und wenn Sie dann den Randradius in Verbindung damit verwenden , können Sie nach Bedarf und nach Belieben einige wirklich komplexe Formen oder einige wirklich faszinierende Formen erstellen. Das ovale Werkzeug ist wahrscheinlich die nächste interessante Sache, die Sie mit Ihnen teilen sollten. Denken Sie also noch einmal daran, dass 0 für oval steht. Und wenn ich die Umschalttaste gedrückt halte, kann ich die Luft ändern und das Seitenverhältnis beibehalten, während ich die Größe aktualisiere. Das ist also wirklich sehr praktisch, wenn ich mit dem Ding arbeite. Die andere zu erwähnende Sache ist, dass es auch die Rotation gibt. Wenn Sie es also falsch machen, können Sie die Drehung des Objekts ändern oder den Mauszeiger in der Nähe einer der Ecken Sie können es in den richtigen Winkel ziehen, den Sie bevorzugen. Halten Sie die Umschalttaste gedrückt. Sie können es auf einen der Snap-Grade ändern. Sie können hier also sehen, dass es sich etwa alle 15 Grad ändert. Wenn Sie den Wert oben rechts im Auge behalten, ist das sehr praktisch, wenn Sie an Formen arbeiten, sie mithilfe des Randradius zusammenfügen, diese Eckpunkte hinzufügen und benutzerdefinierte Formen erstellen möchten sie mithilfe des Randradius zusammenfügen, . Benutze das, um genau das herauszubekommen, was du willst, und sie alle zusammenzufügen. Das Letzte, bevor ich auf zwei Linien weitermache , ist das Star Tool. Und ich bin mir nicht sicher, ob ich ehrlich zu Ihnen sein soll , warum dies ein eigenes benutzerdefiniertes Tool ist. Aber hier drüben hat es diese besondere Eigenschaft, dass es sich bei Speichen um Stacheln handelt , die man im Stern haben könnte. Manchmal macht es einfach Spaß , damit herumzuspielen. Es sieht so aus, als ob 60 das Maximum ist, das Sie tun können. Aber das ist sehr hilfreich, wenn Sie eher eine Sternform benötigen . 7. Tricks mit Grenzradius: Eine letzte Kleinigkeit, die ich dir gerne zeigen möchte, was ziemlich cool ist, wenn du dich daran erinnerst, ist, dass wir 0 verwenden und die Umschalttaste drücken und wir können einen Kreis bilden. nun mit dem Randradius Lassen Sie uns nun mit dem Randradius ein Rechteck derselben Größe erstellen. Und wenn Sie den Randradius auf einen hohen Wert setzen , sagen wir 200. Und jetzt sieht es auch aus wie ein Kreis. Lassen Sie mich einfach die Farbe ändern, damit Sie das ein bisschen klarer sehen können. Aber seien Sie vorsichtig , wenn Sie das verwenden. Denn wenn ich nur das normale Punktzeigerwerkzeug verwende und es dann in der Größe ändere. Und du wirst sehen können, dass einer als Kreis bleibt. Und eines sieht einfach aus wie ein Rechteck mit sehr gekrümmten Kanten. Seien Sie also vorsichtig, wenn Sie diese Technik anwenden, was nicht falsch ist, aber es ist eine nette kleine Technik, die Sie anwenden können. Wenn du schnell einen Kreis machen musst. Und Sie möchten stattdessen das Rechteckwerkzeug verwenden, oder das ist es, was Ihnen zuerst in den Sinn kommt. 8. Linien und Pfeile: Jetzt, wo Sie die Werkzeuge zum Erstellen von Formen und zum Bearbeiten von Formen an, im Randradius, Linien und Pfeilen kennen, was für Sie recht einfach sein wird. Ich zeig's dir. Also werden wir zuerst einige Linien und Dinge erstellen , mit denen wir arbeiten können. Also benutzt ihr die, ihr könnt hier für eine Linie klicken und sie wie gewohnt zeichnen. Oder du kannst l als Hotkey dafür verwenden. Und wenn Sie die Umschalttaste gedrückt halten, können Sie es, anstatt es in freier Form zu haben, in einen bestimmten Winkel nach unten bewegen lassen. Sie können die Dicke ändern. Du hast all diese verschiedenen Einstellungen hier, das ist also ziemlich praktisch. Ich kann z. B. einfach blau eingeben und das tun. Halten Sie die Umschalttaste gedrückt und drücken Sie dann L , um das Pfeilwerkzeug zu öffnen. Es ist also gut, oben links im Auge zu behalten , um zu sehen, welches Tool Sie verwenden. Und dann entsteht ein Pfeil. Und das kann ich verwenden, um meine Designs und Dinge, an denen ich gerade arbeite, zu kommentieren. Also z.B. ich könnte das machen und dann jedes Mal Shift L drücken jedes Mal Shift L um all die verschiedenen Formen, die ich habe, miteinander zu verbinden . Wenn du dem Pfeil eine andere Form geben möchtest, was ich zum Beispiel manchmal lockere, ziehe einen zusätzlichen Eckpunkt und ändere diesen ziehe einen zusätzlichen Eckpunkt und ändere diesen auf 50, vielleicht 200. 200 gibt uns ein bisschen mehr Spielraum. Und gibt ihm eine schöne Kurve. Sie können also doppelklicken , um in die Bearbeitung zu gehen , und dann doppelklicken, um die Bearbeitung zu verlassen. Und von hier aus habe ich jetzt einen netten kleinen Pfeil, den ich hierher ziehen kann. Ich kann zur Ecke gehen und drehen und sagen, hier ist mein, lass uns T für Text verwenden. Nur zur Veranschaulichung und verwende K zum Vergrößern. Also hier ist mein Ausgangspunkt. Und ich kann einen kleinen Float kommentieren. Das gibt Ihnen also eine Vorstellung vom Linienwerkzeug, dem Pfeilwerkzeug, wie Sie es bearbeiten und verschieben können. Und praktisch, wofür Sie es verwenden könnten. 9. Farbstile: In diesem Teil werden wir also über Stile sprechen. Und zuerst werden wir über Farbstile sprechen, wie man sie einrichtet und so schnell wie möglich loslegen kann, damit Sie schneller anfangen können, Dinge zu erstellen. In meiner ersten Datei haben Sie es vielleicht bemerkt, oder falls Sie sich an eine der vorherigen Lektionen erinnern, wir einen grundlegenden Farbstil namens Limettengrün eingerichtet. Und nur um es noch einmal zusammenzufassen, wenn wir so etwas wie ein Rechteck machen. Die Abkürzung ist also R, und du kannst sie einfach auf die Hauptbühne ziehen. Dazu können wir die Füllung mit einem der lokalen Stile aktualisieren , die wir erstellt haben. Eine Sache, die Ihnen auffallen wird, ist, dass ich hier verschiedene Farben habe . Und diese wurden früher standardmäßig bereitgestellt , wenn Sie ein neues Team erstellt haben, aber das ist nicht mehr der Fall. Also werde ich in der Beschreibung einen Link angeben. Wenn Sie sie verwenden möchten oder wenn Sie etwas Moderneres verwenden möchten, werde ich Materialdesign verwenden einige dieser Ressourcen verwenden. Und ich schlage diese vor , um Ihre Palette einzurichten und einfach mit der Arbeit zu beginnen. Also haben wir zB diese Datei, die ich in der Community gefunden habe. Wir haben also ungefähr 5.000 Downloads und es ist sehr einfach. Sie können einfach eine Kopie erstellen. Und alles was Sie tun müssen, ist hier zu klicken. Klicken Sie auf Bibliothek veröffentlichen. Ich verwende den kostenlosen Plan und höchstwahrscheinlich sind es nur zwei Stile. Die Standardfarben. Und veröffentliche diese Stile. Und da hast du es. Von dort aus können Sie zu Ihrer Datei zurückkehren. Sie können auf Figma und dann auf Bibliotheken klicken , um sicherzustellen , dass wir sie geteilt haben. Und Sie können sehen, dass ich diese Bibliotheken zur Verfügung habe , die noch verfügbar sind. Aber bei diesem habe ich gerade das Material Design zweifarbig veröffentlicht . Mit dem kostenlosen Tarif können Sie also die grundlegenden Stile teilen. Das bedeutet also, dass ich jetzt auf Schließen klicken kann und dann die Füllfarbe ändern kann. Und ich habe all diese Farben in einem Farbspektrum verfügbar. Die Reihenfolge ist also okay. Du hast diese wie absolut nein, es ist eigentlich ziemlich gut. Wir haben also Material, um jetzt Material in drei Jahren zu entwerfen, aber das wird Ihnen helfen, loszulegen und zumindest in der Lage zu sein, mit etwas zu arbeiten. Ich kann also den Strich einstellen, z. B. setzen wir das auf zehn Pixel. Vielleicht ist das zu viel, vielleicht fünf. Und wir können hier reingehen und diese Farben aktualisieren und sie nach Herzenslust einstellen, vielleicht eine etwas bessere Farbe als diese. Das bedeutet also, dass Sie diese Stile einrichten können. Und dann , anstatt zu versuchen, sich die Hex-Codes so zu merken, wie sich Dinge wie d9 zu erinnern. Das bedeutet, dass Sie beim Durcharbeiten Ihres Designs versuchen können, sich daran zu erinnern , um welche es sich handelt. Ein Tipp, den ich Ihnen auch geben werde, ist, dass Sie nach Namen suchen können. Sie können also auf der Farbskala für Materialien sehen, dass sie von 50 hier bis zum dunkelsten Farbton reichen, nämlich 900. Und dann haben sie einige Farbtöne von 100, 200, 300 usw. Sie können also nach diesen filtern und einfach pink 700 eingeben und es wird direkt angezeigt. Das ist also eine sehr einfache Möglichkeit für Sie, das Design schnell zusammenzusetzen und sicherzustellen , dass Ihre Farben konsistent sind, sodass, wenn Sie es insgesamt zusammensetzen und einen Schritt zurücktreten, das Design Loch aussieht. 10. Typografie-Stile: Großartig. Nun, da wir Sie mit Farben vertraut gemacht haben, lassen Sie uns mit der Typografie beginnen. Denn sobald Sie diese beiden Dinge zusammen haben und dann die grundlegenden Formwerkzeuge in Figma verwenden, können Sie bereits eine Menge Dinge erstellen, ohne einige der anderen fortgeschritteneren Techniken lernen zu bereits eine Menge Dinge erstellen, ohne einige der anderen fortgeschritteneren Techniken lernen müssen. Spring rein. Wenn es um Typografie geht. Vergiss nicht, dass unsere Tastenkombination T für Text ist. Wenn wir es eingeben, können wir meinen ersten Titel sagen, z. B. was wir tun wollen ist, dass ich dir zeige, wie man es einrichtet. Wenn Sie Ihren eigenen Typografie-Stack erstellen möchten. Und dann zeige ich dir die Abkürzung. Sie können also weiterspringen. Wenn du ein Abkürzungstyp bist wie ich, oder wenn du verstehen willst, wie das funktioniert, ist das auch wie ich. Ich gebe dir ein kurzes Intro. Lass uns meinen ersten Titel festlegen. Nennen wir es einen 24-Punkt. Und wenn du einen Stil erstellen und auf das Plus klicken möchtest , dann vergiss nicht, wir können einen festlegen und Überschriftenstil sagen. Wenn Sie nun weitere Texte erstellen möchten, können Sie einen anderen Text sagen, und es wird standardmäßig Überschriftenstil des neuesten Textes verwendet. Was Sie tun können, wenn Sie einen Fließtext festlegen möchten , ist, dass Sie diesen entkoppeln können. Wenn Sie also einmal nicht weiterkommen, vergessen Sie nicht, dass Sie den Stil jederzeit abnehmen können. Damit gibt es kein Problem. Stellen Sie die Größe ein. Stellen wir das wieder auf unregelmäßig. Und jetzt kann ich einen anderen Stil cool machen. Jetzt, wo ich ein paar verschiedene Dinge habe ein paar verschiedene Dinge , die ich entwerfe oder zusammenstelle. Jetzt habe ich meine lokalen Stile für Überschrift und Text definiert . Und vielleicht kann ich noch ein paar erstellen. Also, wenn Sie eine klare Vorstellung von denen haben , die Sie umsetzen möchten, oder wenn Sie einen Grafikdesign-Hintergrund haben, z. B. oder vielleicht haben Sie einen Hintergrund in oder wenn Sie einen Grafikdesign-Hintergrund haben, z. B. der Frontend-Technik und Sie haben solche Dinge bereits gesehen. Das ist cool. Das kannst du jederzeit einrichten und anpassen und nach Herzenslust spielen. Wenn Sie schnell vorankommen möchten und kein so guter visueller Designer sind . So wie ich es immer noch bis zu einem gewissen Grad bin. Was Sie stattdessen tun können, ist, dass Sie etwas herunterladen können, z. B. wie wir es mit den Farben gemacht haben. Hier ist eine Datei, die ich in der Community gefunden habe. Also habe ich das bereits in meine Entwürfe kopiert. Und genau wie zuvor können wir diese Bibliothek veröffentlichen, nur Stile veröffentlicht werden, sagen wir, grundlegende Fotostile. Sehr einfach. Wir können wieder reinkommen. Klicken Sie im Figma-Menü oben links in meiner Datei auf Bibliotheken . Und dann kann ich diese Dateibibliothek in meiner aktuellen Arbeitsdatei aktivieren . Wenn wir das schließen und dann eine Kopie davon machen. Also kann ich C befehlen, hier mit der rechten Maustaste auf Einfügen klicken. Jetzt kann ich diese ändern und ich kann mir diese Typografiestile des Materialdesigns ansehen. Sagen wir also Überschrift zwei, was sehr umfangreich ist, und wir haben den ersten Teil. Also, wenn Sie Ihre eigenen Designs und Dinge zusammenstellen Ihre eigenen Designs und , die Sie zusammenstellen möchten. Sie können dies auch als Grundlage verwenden und diese Stile dann anpassen. Ich schlage vor, zu versuchen , an einem bestehenden System festzuhalten. Wenn Sie nicht allzu erfahren sind, haben Sie so etwas noch nie gemacht. Ich finde es sehr hilfreich, weil es die Typografie-Skala auf eine nette Art und Weise festlegt , sodass man sehr leicht erkennen kann, was der Titel ist, was ist der Körper und was ist ein Etikett? Wenn ich also z. B. einen Button mache, kann ich zum Button-Stil gehen und den Stil so einrichten , dass Sie ihn visuell erkennen und von den anderen Stilen unterscheiden können . Da hast du es also. Es gibt eine schnelle Einrichtung in Textilien, wie man es selbst macht. Und ein Vorschlag für etwas, mit dem Sie sofort loslegen können. 11. Checkpoint 2: Atmet noch?: Graues Zeug. Ich hoffe, Ihnen gefällt der Kurs bis jetzt. In diesem Modul behandeln wir Frames, Gruppen in Abschnitten. Nun, das verdient ein eigenes Modul, da es einige subtile Unterschiede zwischen einer Gruppe und einem A-Frame gibt. Und Sie werden feststellen, dass Ihr Muskelgedächtnis möglicherweise daran gewöhnt ist Ihr Muskelgedächtnis möglicherweise daran gewöhnt , Dinge zu gruppieren. Es ist wichtig zu beachten, dass es einen Unterschied gibt und Frames tatsächlich leistungsfähiger sind. Und ich zeige Ihnen die Gründe, warum sie leistungsfähiger sind und warum Sie sie häufiger verwenden werden. Aber es ist auch wichtig, sich daran zu erinnern, warum Gruppen auch ziemlich wichtig sind, weil sie auch ihre eigenen Vorteile haben , wenn sie genutzt werden. Sie haben hier auch Abschnitte , was eine relativ neue Ergänzung zu Figma ist. Das ist also wirklich gut für die Organisation Ihrer Arbeit. Ich denke, das fasst wirklich drei verschiedene Tools zusammen , die Sie zusammen verwenden werden. Wenn Sie eher ein Leser sind, dann habe ich diesen Artikel , den ich unten verlinken werde , der vor etwa zweieinhalb Jahren geschrieben wurde. Das erklärt nun die Unterschiede zwischen Verwendung einer Gruppe und der Verwendung eines Frames und wann Sie eines der beiden verwenden möchten. Das ist also ziemlich hilfreich. Und ohne weitere Umschweife, lassen Sie uns weitermachen. 12. Gruppen: Fangen wir also mit Gruppen an, denn für viele Menschen, vor allem, wenn Sie noch nie Designer waren oder in der Vergangenheit einige der Designer-Tools verwendet haben. Gruppen werden Ihnen viel vertrauter sein. Also springen wir in die Figma und ich zeige dir , wie das alles zusammenpasst. Um zu demonstrieren, wie Gruppen funktionieren, werde ich ein paar verschiedene Dinge erstellen. Ich habe also eine normale Textebene, werde einen Kreis haben. Nennen wir diesen Kreis einfach und machen ihn blau, damit er besser zu sehen ist. Dann werde ich auch ein Bild importieren. Und lass uns hoppla. Wie Sie dort sehen können, war das eigentlich ziemlich cool, Sie können es tatsächlich in Objekten platzieren. Wenn dein wichtiges Bild, das wir machen werden , ist es einfach hier rüber zu schieben und es gedrückt halten zu lassen. Sie können tatsächlich zuschneiden, ohne auf Bilder doppelklicken und sie bearbeiten zu müssen. Das ist also ziemlich praktisch. Und hier ist etwas Latte Art, an dem ich gearbeitet habe , um zu lernen, wie man einschenkt. Um Ihnen zu zeigen, wie das alles zusammenpasst, Sie können Sie mit der rechten Maustaste klicken und eine Auswahl gruppieren oder Befehl G drücken , um sie zusammenzuführen. Und wenn das passiert, können Sie die Größe ändern, um zu sehen was mit den Ebenen darin passiert. Während ich das mache, können Sie sehen, dass alles innerhalb der Skala so breit ist wie die Gruppe selbst, verkleinert wird, bis es übereinstimmt. Und mit den Textebenen ist es etwas schwieriger zu erkennen. Aber wenn ich darauf klicke, kannst du sehen, dass sich die Größe auch von selbst ändert, indem du auf die Gruppe klickst und das machst. Sie können sehen, dass das auf die gleiche Größe gestiegen ist. Eine Sache, die Sie beachten sollten, ist, dass Sie einige der Tools, die Sie mit einem Rahmen erhalten, noch nicht sehen werden. Und wenn Sie möchten, dass dies seine Größe beibehält, ist das mit Gruppen nicht mehr möglich, insbesondere wenn Sie den Artikel gelesen haben, den ich über Gruppen im Vergleich zu Frames geschrieben habe. Sie können die Einschränkungen also nicht wirklich bearbeiten. Sie können es nicht bearbeiten, egal ob Sie möchten, dass es skaliert wird oder nicht. Alles, was Sie tun können, ist mit einer Gruppe zu arbeiten, wenn Sie Dinge gruppieren, und Sie erhalten das Standardverhalten, wie Gruppen funktionieren und zusammenpassen. Das ist ein bisschen vertrauter. Das ist wahrscheinlich viel mehr an das, was viele Leute gewohnt sein werden, mit Ausnahme des Textes. Das ist also viel mehr wie das Skalierungstool. Zum Skalieren drücken Sie eine Taste. Denken Sie daran, dass dies oben links ist, und ich skaliere es. Vielleicht ist das ein bisschen vertrauter. Und das zeigt Ihnen einige der kleinen Unterschiede in Figma und darauf, worauf Sie vielleicht einen Blick werfen, wenn wir zu den Bildern übergehen. Wie Sie sehen können, als ich zum Zeigerwerkzeug zurückkehrte. Und wenn ich die Größe ändere, wird alles nach unten gequetscht. Das ist nur die Größe der Ebene selbst, aber Textebenen verhalten sich etwas anders. Wenn Sie also eine Gruppe verwenden, diese, ist dies eine Sache, auf die Sie achten sollten. Wenn Sie also Dinge zusammenfassen, werden sie skaliert. Wenn Sie also die Größe von Dingen ändern müssen, wird es nicht so funktionieren , wie Sie es vielleicht beabsichtigen. Deshalb lasse ich es vorerst dabei, wenn es darum geht, Gruppen zu erklären, wie man das macht und wie sie zusammenpassen. Wenn ich Rahmen bearbeite, werden Sie genau sehen, wo der Unterschied wirklich liegt, und es macht wirklich einen großen Unterschied, wie Sie Ihre Datei zusammensetzen und wie Sie Ihre Prototypen und Designs zusammensetzen. 13. Frames 1 von 2: Also wo Gruppen ziemlich einfach und leicht zu verstehen waren. Hoffentlich war das okay für dich. Lassen Sie uns in die Frames eintauchen. Es gibt viel zu besprechen. Also lasst uns anfangen. Also, was ich tun werde, ist diese drei Dinge zu kopieren. Ich mache eine Kopie. Ihr seht also, da habe ich die Option oder die Alt-Taste gedrückt gehalten und eine Kopie des Originals herausgezogen. Deshalb kann ich tun, die Dinge wieder auf einen groben Maßstab zu bringen , mit dem ich arbeiten kann. Ich werde auch diesen verkleinern oder den Text ändern. Eigentlich mache ich das und ändere es wieder auf das, was es war, 16. Es sind eher 24, so etwas. Also, wenn ich all diese kopiere, sind sie jetzt nicht gruppiert. Ich kann diese Auswahl einrahmen, was anders ist, die Abkürzung ist Befehlsoption G. Und jetzt habe ich einen Rahmen. Und auf den ersten Blick scheint nichts anders zu sein, aber wenn Sie anfangen, die Größe zu ändern, werden Sie feststellen, dass die Dinge ihre Position nicht ändern und sie ihre Größe nicht zu ändern scheinen. Wenn du von links gehst, scheint es links zu bleiben. Und das Gleiche gilt für die Spitze. Und nur wenn Sie sich hier mit diesen Dingen befassen können Sie die Unterschiede erkennen. Wir nehmen das einfach raus. Und wenn ich die Bildebene auswähle, siehst du im Design-Panel , dass sich links und oben neben den Standardeinstellungen dieses Ding namens Einschränkungen befindet. Und so verhalten sich die Dinge im Internet. Wenn Sie es also nicht gewohnt sind, Dinge für das Internet zu entwerfen, werden Sie feststellen, welche Verhaltensweisen Sie sehen möchten. Für digitale Produkte, Dinge, die Sie im Internet und in mobilen Apps sehen werden. Sie verhalten sich viel stärker auf der Grundlage von Einschränkungen als eher traditionelle Gruppen , die Sie in Dingen wie Google Slides oder PowerPoint-Präsentationsdateien finden . Diese sind ziemlich mächtig, weil du Dinge tun kannst , wie wenn ich diesen Kreis auswähle, z. B. lass uns ihn in die Mitte setzen und diesem Rahmen eine Hintergrundfarbe geben. Also verwenden wir die Füllung. Und lassen Sie uns eine hellgrüne Farbe auswählen, und diese befindet sich ungefähr in der Mitte. Wenn ich jetzt die Größe ändere, folgt die Breite jetzt der Mitte. Und hoffentlich können Sie daran erkennen , dass Ihr Gehirn anfängt zu denken und zu sehen. Es gibt verschiedene Dinge, die wir mit Frames erreichen können. Etwas anderes hier. Und was Sie feststellen werden , ist , dass wir es durch die Verwendung dieser Einschränkungen tatsächlich ziemlich leistungsfähig machen können. Wenn wir also links und rechts vorgehen, können wir das Verhalten nachahmen oder wir können die Skala verwenden um es genauer zu replizieren. Eine Gruppe tut es. Also, wenn ich die Breite auf Skalierung setze, können wir das machen. Aber mit dem Rahmen ist es großartig, weil er noch leistungsfähiger ist Während ich das mache, bleibt es gleich. Oder ich kann es stattdessen einfach zentrieren, wenn ich die Größe dieses Rahmens ändere, und dann, ohne Anführungszeichen, in der Mitte dieses Rahmens bleibt . Eines der ersten Dinge, die Sie wahrscheinlich wissen und lernen möchten, ist, wie Sie das Scrollverhalten für Prototypen festlegen. Wir werden uns später eingehend mit Prototypen befassen. Aber was wirklich wichtig , ist das Scrollverhalten. Wenn ich also all diese nehme und sie wieder nach links und oben ändere, kann ich die Höhe ändern und schon ist die Höhe ändern und dieses Ding namens Clip-Inhalt. Und was Sie feststellen werden , ist, dass sich Dinge in einem Rahmen oder in einem Rahmen befinden können . Du kannst abschneiden, was da ist. Und das kann helfen, wenn man ändert welche Dinge sichtbar sein sollten, welche Dinge sollten editierbar sein? Eines der interessanten Dinge, die Sie in Figma tun können , ist das Overflow-Scrolling. Also, wenn ich vertikal scrolle, was wahrscheinlich die häufigste Sache ist, die Sie tun möchten. Jetzt, wo ich das in einen Prototyp gesteckt habe. Machen wir das also nur, um das Verhalten zu demonstrieren. Jetzt kannst du sehen, während ich scrolle Es ist fast wie eine Webseite. Anhand dieser Grundbausteine eines Rahmens, wie dieser anhand der Einschränkungen zusammenpasst, können Sie nun wählen, wie die Dinge tatsächlich zusammen angezeigt werden. Und Sie können dieses Overflow-Verhalten verwenden, um zu bestimmen, wie die Dinge zusammenlaufen und wie Ihre Seite funktionieren soll. Das wird also wirklich sehr nützlich sein. Und eines der wichtigsten Teile Ihres Toolkits. Und mit Figma. 14. Frames 2 von 2: Das Letzte, was ich zum Abschluss dieser Lektion tun möchte, ist , Ihnen ein weiteres Beispiel dafür zu geben , wie mächtig Frames sein können. Lass uns zB ein Overlay machen. Wenn wir also in diesen Rahmen kommen, erinnern Sie sich alle, dass Sie nach unten scrollen müssen , um zum blauen Kreis zu gelangen. Machen wir daraus einen Button. Und was wir tun werden, ist einfach ein sehr einfaches Overlay zu erstellen , wenn du möchtest. Also gruppiere ich das, mache es rot, ändere die Linien. Eine gute Sache, die ich Ihnen hier erwähnen werde , ist, dass Sie auf jeden Fall Ihre Ebenenstruktur im Auge behalten. Das wird dir wirklich weiterhelfen, wenn du dich verirrst oder dir nicht sicher bist. Was ist ein Frame einmal eine Gruppe, damit Sie die verschiedenen Icons hier im Auge behalten können. Das ist also eine Gruppe z.B. mit der gestrichelten Linie. Und der Frame ist eher so etwas wie ein Hash. Hier war ich zu x gegangen, dann Overlay, Overlay-Ding. Und lassen Sie uns hier und hier eine einfache Zeile machen. Machen wir sie ein bisschen langweiliger. Und dann, mach dir keine Sorgen, wir werden diese Art von Dingen etwas später besprechen. In einem der späteren Module sollten das nur zu Demonstrationszwecken loswerden. Wenn wir das also tun, können wir sehr schnell selbst ein Overlay erstellen , etwas Polsterung. Lass uns das machen. Und dann gib etwas Farbe. Vielleicht nicht diese Farbe. Ja, mach weiter, lass uns das machen und ihm einen Grenzradius geben. Also hier haben wir unser grundlegendes Overlay, und das ist ein Rahmen. Und das ist nur möglich , weil es als Rahmen eingerichtet ist. Wenn wir also auf die Registerkarte „Prototyp“ gehen, können Sie tatsächlich eine neue Interaktion erstellen. Und wenn Sie darauf klicken, wird ein Overlay geöffnet. Und wir können den Overlay-Rahmen auswählen. Und wenn wir das tun, können wir einen Hintergrund hinzufügen. Wir haben also den langweiligen Hintergrund im Hintergrund. Und jetzt, wenn Sie diesen Prototyp öffnen , können wir scrollen, wie wir es zuvor gezeigt haben. Und wenn Sie auf den blauen Button klicken, können Sie dann Ihr Overlay sehen. Dies ist nur eines der vielen verschiedenen leistungsstarken Dinge , die Sie mit Frames machen können. Und was ich wirklich mit dir teilen wollte , um dir zu helfen zu verstehen, was der Unterschied zwischen einer Gruppe ist , war der Rahmen und warum haben wir eigentlich diese beiden verschiedenen Dinge? 15. Soll ich Groups oder Frames verwenden: Cool. Jetzt, wo ich Ihnen eine Einführung gegeben habe, was Gruppen sind, was Frames sind, Dinge Sie mit beiden erreichen können, wird hoffentlich klar , welche Dinge Sie wann öfter verwenden sollten. Immer noch wird die Frage gestellt, welches ist besser oder wann sollte ich eines verwenden? Anders als wenn Sie eine schnelle Faustregel wünschen, standardmäßig immer einen Frame verwenden. Und dafür gibt es ein paar Gründe. Auch wenn Gruppen ihren Platz haben und sich immer noch viel mehr wie Bilder verhalten mehr wie Bilder wenn Sie Dinge auf- und abskalieren, insbesondere wenn Sie mit Präsentationsdateien arbeiten, das vielleicht ein Verhalten, an das Sie eher gewöhnt sind, aber das können Sie mit einem ist das vielleicht ein Verhalten, an das Sie eher gewöhnt sind, aber das können Sie mit einem Rahmen immer noch replizieren, indem Sie die Objekte darin auf ein Skalierungsverhalten setzen . Und B, Textebenen verhalten sich einfach nicht auf die gleiche Weise. Sie können stattdessen auch das Skalierungstool verwenden und die Größe der Dinge ändern. Das sind also die Hauptgründe, warum Sie tatsächlich einen Frame einer Gruppe vorziehen würden . Und sie haben ein paar Anwendungsfälle. Aber wenn Sie sich den Artikel ansehen, den ich zuvor geteilt habe, ist die Möglichkeit, Einschränkungen in Gruppen zu verwenden, eigentlich nicht mehr so . Das war also früher der Fall und jetzt ist das weg. Meiner Meinung nach sind sie also eher ein Vermächtnis. Und ich denke, eine der anderen großen, ich würde sagen, Fallstricke, weil es kein großer Vorteil ist wenn ein anderer Designer oder eine andere Person an Ihrer Figma-Datei arbeitet, wenn ich einen Rahmen verlängern möchte. Also z. B. ich habe vielleicht einen iOS-Bildschirm oder einen mobilen App-Bildschirm, an dem ich gerade arbeite. Und ich möchte einen zusätzlichen Abschnitt hinzufügen. Wenn wir das für alle Gruppen verlängern, die sich darin befinden, wird das Ding verlängert. Also werde ich dir jetzt eine kurze Demo davon geben, nur um dir Hallo zu zeigen. Also hier ist ein Beispiel für einen mobilen Bildschirm. Eigentlich, lass uns das mal Hoppla geben. Lassen Sie uns das kurz auffüllen. Nur damit es ein bisschen mehr wie eine Seite aussieht. Was ich gesehen habe ist, dass du hier eine Navigationsleiste hast, diese Gruppe von Sachen. Und warum wir es nur den Filter nennen. Ich will, ich habe schon einmal gesehen , dass das eigentlich nicht die Standardeinstellung ist . Es ist also möglicherweise kein Problem für Sie. Designer jedoch an einer großen Datei arbeiten und gemeinsam große Probleme lösen, die Einschränkungen manchmal standardmäßig auf Skalierung festgelegt. Für eine Gruppe von Dingen sind das normalerweise Symbole oder Gruppen von ein paar verschiedenen Dingen zusammen. Was Sie sehen werden, ist, dass, wenn ich den Bildschirm verlängern muss, solche Dinge passieren. Und das ist wirklich frustrierend. Wenn Sie eine Fußzeile verwenden. Es sollte auf jeden Fall immer unten sein. Sie sich also keine Sorgen, wir werden später auf diese Art von Einschränkungen eingehen. Aber du wirst ein solches Verhalten sehen und das wollen wir nicht. Was wir wollen, ist, dass es uns einfach mehr Platz bietet, mit dem wir arbeiten können , wenn wir an einem Design arbeiten. Das fasst ziemlich gut meine Meinung dazu zusammen, wann Sie eine Gruppe verwenden würden, wenn Sie einen Frame verwenden, eine lange Geschichte, einen kurzen Text, Frames verwenden, sind sie besser. 16. Abschnitte für organisierte Dateien: Cool. Also das letzte, nicht mehr lange, ist das Abschnittswerkzeug hier oben mit dem Rahmen. Du hast auch dieses Ding namens Sektion. Dies ist ein relativ neues Feature für Figma, das sehr empfohlen wurde. Also, während ich diese verschiedenen Lektionen durchgemacht habe und mit Ihnen geteilt habe, wie die Dinge zusammenpassen. Es kann sehr leicht sein, sich zu verirren. Und Sie könnten versucht sein bestimmte Dinge in einem Rahmen zu gruppieren. Aber wenn Sie das tun, können Sie die Integrität von Interaktionen oder die Art und Weise, wie Sie bestimmte Dinge einrichten, verlieren . Und Abschnitte haben leicht unterschiedliche Verhaltensweisen und unterschiedliche Eigenschaften, um es kurz zu machen. Alles, was Sie wissen müssen, ist, dass dies eine sicherere Methode eine Sammlung verschiedener Ebenen und Rahmen und Dinge, an denen Sie gerade arbeiten, zu gruppieren verschiedener Ebenen und Rahmen und ist, eine Sammlung verschiedener Ebenen und Rahmen und Dinge, an denen Sie gerade arbeiten, zu gruppieren , damit es für jemanden einfacher ist, Ihre Datei anzusehen. Also wenn ich z.B. auf das Auswahlwerkzeug oder Shift S für den Shortcut klicke das Auswahlwerkzeug oder Shift S für , kann ich das machen. Ich kann diesem Abschnitt einen Namen geben. Das ist also der erste Satz von Dingen. Und wenn ich einen neuen Abschnitt erstelle, können dies meine Frames sein. Rahmen, Werkzeuge zur Rahmenauswahl. Und was ich tun kann, ist mich zu bewegen. Hoppla. Hat diese Dinge nicht ganz richtig durchgesehen. Was ich tun kann, ist diese Dinge mit dem Befehl Ausschneiden auszuschneiden und sie einfach hineinzufügen. Ich kann das machen und dann all meine Sachen schön und einfach mit mir herumschleppen . Und es ist ziemlich gut , weil ich hier an Formen und Linien arbeite. Und Sie können die Farbe Ihres Abschnitts ändern. Nehmen wir an, ich möchte eher eine hellrote Farbe verwenden, weil ich das loswerden muss und ich das Etikett ändern kann. Das ist wirklich sehr nützlich, wenn Sie Ihre Arbeit organisieren und jemandem klar machen möchten Ihre Arbeit organisieren und jemandem klar machen , wie alt diese Dinge zusammenpassen. Eine der Superkräfte , die du in den Abschnitten findest , ist, dass du sie ineinander verschachteln kannst, aber sie sind eine Sache der Spitzenklasse. Also erkläre, was ich damit meine. Also nehmen wir diesen, diese Auswahl an Rahmen und Abschnitten. Was ich tun kann, ist das auszuwählen und ich kann die Formen und Linien in diesen Abschnitt verschieben . Und jetzt ist das alles zusammen beweglich. Das ist also ziemlich praktisch. Aber eines der Dinge , die an Abschnitten anders sind , ist, dass Sie sie nicht in Frames ziehen können. Nehmen wir an, ich erstelle einen Rahmen in dieser Größe. Und ich möchte diesen Abschnitt ziehen oder eine Kopie ziehen. Ich kann es hierher in diesen Bereich ziehen. Aber wie Sie sehen können, wurde es in diesen Rahmen eingefügt. Eines der Probleme, wenn Sie zuvor Rahmen einrichten und diese verwenden, um Ihre Arbeit visuell zu organisieren, ist dasselbe, aber da sich ein Rahmen innerhalb eines anderen Frames befinden kann, wird er ziemlich schnell sehr unordentlich, sodass diese verwenden, um Ihre Arbeit visuell zu organisieren, ist dasselbe, aber da sich ein Rahmen innerhalb eines anderen Frames befinden kann, Sie versehentlich Dinge gruppieren oder Dinge zu einem Rahmen hinzufügen könnten und zwar falsch. Abschnitte machen also zwei Dinge. Sie ermöglichen es Ihnen, Ihre Arbeit zu organisieren und sie übersichtlich zu machen. Tun Sie dies jedoch auf eine Weise, die es Ihnen oder anderen Designern nicht leicht macht , Ihre Datei zu durchsuchen oder zu bearbeiten , um Dinge so zu organisieren , dass die Integrität der Struktur dessen, woran Sie gerade arbeiten, und diese Dinge zusammenzufügen, verloren der Struktur dessen, woran Sie gerade arbeiten geht. 17. Checkpoint 3: Automatisches Layout, mein Held: Hallo, dein Shirt, neue Beleuchtung, der gleiche hochwertige Inhalt. In dieser Lektion werden wir also über das automatische Layout sprechen. Ich werde Ihnen zeigen, wie all diese verschiedenen Tools und Techniken, die Sie Rahmen des automatischen Layouts verwenden können Ihr Leben wirklich so viel einfacher machen können. Und es kann Ihren Alltag in Figma und beim Entwickeln von Designs wirklich bereichern. Umso mehr ein Vergnügen. Ich werde Ihnen jetzt kurz zeigen, was wir in der Lage sein werden , bis wir Ihnen diese Fähigkeiten beigebracht haben. Hier in Figma haben wir ein triviales Beispiel für eine Website für den Verkauf von Mikrowellen. Und wenn ich nach unten scrolle, scheint es ziemlich typisch zu sein. Nur ein paar Feature-Bilder mit etwas Text, ein Aufruf zum Handeln. Und diese Sache mit der Bright Collection, wann immer wir wollen, wollen wir sie nennen. Und wenn ich beim Vergrößern und Verkleinern nur ein wenig herauszoome , können Sie sehen, wie alles auf die Größe reagiert. Und das werden wir gemeinsam untersuchen. Das scheint entmutigend, mach dir keine Sorgen. Wir gehen es Schritt für Schritt durch und Sie werden erstaunt sein, wie schnell Sie so etwas selbst zusammenstellen können . In wenigen Minuten, sicher in weniger als einer Stunde. Lass uns anfangen. 18. Grundlagen der horizontalen/vertikalen Größenänderung und Abstände: Zunächst werden wir uns mit dem horizontalen und vertikalen automatischen Layout befassen und Ihnen ein kleines Gefühl dafür geben , wie diese Dinge zusammenarbeiten. Ich beginne also gerne mit dieser Navbar und den zukünftigen Komponenten. Und ich zeige dir, wie die zusammenpassen. Nehmen wir zunächst die obere Navigationsleiste. Nimm eine Kopie davon und lass mich sie zuerst zerstören. Also, wenn ich die Gruppierung aufhebe und du siehst, ist das schwer zu erkennen. Ändere das sogar vorübergehend auf, oops, auf eine schwarze Farbe. Wir können hier sehen, dass wir ein Logo haben und dann haben wir einen Rahmen mit diesen verschiedenen Dingen. Also, aber wenn Sie die Gruppierung aufheben, werden Sie wahrscheinlich mit so etwas beginnen. Besorgen Sie sich eine Gruppe von Gegenständen und Sie erhalten etwas anderes, das Sie vielleicht zur Seite legen möchten. Es wird diese hervorheben und dann habe ich daraus einen Rahmen gemacht. Das ist also Befehlsoption G. Zwei Möglichkeiten, wie Sie dann alles zum Layout hinzufügen können, hier ist erstens das ultimative Layout. Sie können einfach hier oder auf die Abkürzung klicken. Ich verwende gerne diese Schicht A, und das gilt automatisch für das automatische Layout. Du kannst hier sehen, dass es eine horizontale Polsterung einrichtet , je nachdem, was am nächsten ist, und sie gleichmäßig aufteilt. Sie können das selbst anpassen, wie Sie möchten. Und das legt die Standardeinstellung oder die Horizontale fest. Wenn ich z.B. drei Kopien davon nehme und sie ungefähr vertikal mache und das Gleiche mache. Sie müssen zunächst nicht gruppieren, Sie können einfach die Umschalttaste A drücken und schon können Sie direkt alles zum Layout hinzufügen . Figma wird herausfinden , dass alles vertikal gestapelt werden sollte , und den ungefähren Abstand herausfinden , der vorhanden sein sollte. Also von hier aus drehen wir dieses Original und beginnen, es zu verschachteln. Das ist also wirklich ziemlich wichtig. Also haben wir uns mit Nesting Frames befasst, und das ist wirklich wichtig , um diese Dinge zu verwirklichen. Also hier habe ich diesen Rahmen auf der linken Seite. Das sind also meine Menüpunkte. Ups. Das ist cool. Diese Menüpunkte. Und es ist dieser. Das ist Jacquard-Weiß, weil ich eine Instanz einer Komponente verwende. Und dann gruppieren Sie diese zusammen und drücken Sie erneut Shift A. Sie werden sehen, dass ich das automatische Layout hinzugefügt habe. Und das ist automatisch erledigt. Das. Eine Sache, die Sie tun sollten, um den tatsächlichen Navbar-Effekt zu erzielen, ist den Abstand dazwischen zu ignorieren. Und füllen wir es aus, damit es leichter zu erkennen ist. Lass uns so etwas machen, damit wir es unterscheiden können. Und das erste , worauf Sie sehr schnell stoßen werden , ist der Abstand. Also werden wir, wir werden, wir werden das machen. Und dieser 12.12. Das setzt also links und rechts und falsch, was Sie bemerken werden , ist, dass es nicht reagiert, wenn ich das mache. Wir möchten, dass es den Abstandsmodus ändert. Wenn ich das rückgängig mache und hier zu den drei Punkten gehe, gibt es dieses Ding namens gepackt, und der Abstand zwischen den Standardeinstellungen ist gepackt und Sie können festlegen wie viel Abstand zwischen den einzelnen Elementen in diesem bestimmten Rahmen bestehen soll . Aber wenn ich jetzt zwischen diesen beiden Objekten in diesem Frame Platz mache , sie beim Wachsen und Schrumpfen bleibt sie beim Wachsen und Schrumpfen immer rechts. Also, wenn ich einfach hinzufüge, damit es ein bisschen natürlicher und normaler aussieht , enthülle die Struktur dessen, was hier drin ist. Um genügend Balken zu schaffen. Wir haben die Menüelemente selbst darin verschachtelt und haben ein eigenes horizontales Layout. Wir haben das Logo auf der rechten Seite. Dann. Für diese Hauptnavigationsleiste hat sie ein eigenes automatisches Layout, aber wir haben den Abstand geändert und ihn gefüllt. Und wir haben den Abstandsmodus angepasst , um diese Reaktionsfähigkeit zu erreichen. Das ist also ein wirklich einfaches Beispiel, das Sie machen können. Und arbeiten Sie es Schritt für Schritt durch, um zu erkunden, wie das Horizontale funktioniert. Die Vertikale funktioniert, und auch einige Dinge wie die Abstände, die wir in einer der nächsten Lektionen etwas näher eingehen werden. Die einzige letzte Sache, die hinzugefügt werden muss, ist , dass dies für die vertikalen Layouts fast dasselbe ist, aber die Dinge laufen einfach in eine andere Richtung. Sie können hier also sehen, wenn ich den Mauszeiger über den Abstand bewege, vertikalen Abstand zwischen den Elementen , wenn ich zwischen horizontal und vertikal wechsle. Wenn Sie sich das Foto ansehen, können Sie sehen, dass jedes dieser Elemente, wie sich diese Impfstoffe voneinander unterscheiden. 19. Ausrichtung und item mit Auto-Layout: In dieser Lektion behandeln wir die Ausrichtung der Artikel und die Reihenfolge der Artikel. Denn eine Sache, die Sie feststellen werden, ist, dass Sie manchmal die Reihenfolge der Dinge neu anordnen möchten oder dass sie in die falsche Reihenfolge kommen und Sie möglicherweise Dinge anpassen müssen. Sehr häufig, aber sehr einfach. Ich zeig's dir. Also hier sind die beiden Beispiele, mit denen ich arbeiten werde die Fußzeile und eines der Hauptbestandteile von Feature-Bild plus Text. Nehmen wir das als Beispiel und orientieren uns an dem , was wir der ersten Lektion gelernt haben, wie es hier der Fall war. Um dies zu erreichen all diese verschiedenen Elemente vertikal ausgerichtet werden. Und dann habe ich einfach die Ausrichtung geändert und du hast dieses wirklich schöne Raster. Dies macht es so einfach, die Art und Weise zu ändern, wie die Dinge angeordnet werden sollen. Also könnte ich sie links und rechts anordnen. Wenn ich mich für eine feste Höhe entscheide, kann ich sie so ändern, dass sie oben links, unten links, drüber nach rechts liegt, genau in der Mitte. Es gibt also so viele verschiedene Optionen , mit denen du spielen musst. Und es ist gut zu bedenken , dass, wenn Sie etwas Komplizierteres wollen , Sie einige Rahmenverschachtelungen vornehmen müssen , um das zu erreichen und den gewünschten Effekt zu erzielen. Um einige dieser Rahmenverschachtelungseffekte zu veranschaulichen, verwende ich dieses Beispiel hier. Lassen Sie uns also die Neuanordnung der Dinge ganz schnell behandeln , bevor wir uns damit befassen. Sie können tun, Sie haben es auf dem anderen Stück gesehen, ich hatte das und sie waren in abwechselnder Reihenfolge. Ziehe deinen Artikel einfach rüber. Und es funktioniert einfach, solange der übergeordnete Frame ein automatisches Layout enthält. Dieses Beispiel bildet 63, es sollte einfach darauf geklickt werden. Beachten Sie, dass beim Ziehen dieses Elements auf Ihre Ebene möglicherweise Dinge außerhalb des automatischen Layoutrahmens verschoben und wieder hinzugefügt werden. Manchmal so einfach oder manchmal ist es ein bisschen knifflig und du kannst anfangen, die Dinge ein bisschen tiefer zu verschachteln. Also zB hier habe ich das Bild in einen anderen Rahmen verschoben . Wenn wir uns also Verschachtelung von Frames ansehen und die Dinge anpassen , lassen Sie uns dies zunächst zur Veranschaulichung etwas größer machen. Sie können also sehen, dass dies in der Mitte ist. Wenn ich die Ausrichtung hier zur Mitte ändere, ändert das den Stil und die Art und Weise, wie das zusammenkommt. Aber wenn ich das mache, können Sie sehen, dass das intern anders gemacht wird. , wenn ich das auf feste Breite ändere keine Sorgen, wenn ich das auf feste Breite ändere, was wir gleich behandeln werden. Und ändere einfach die Breite davon. Ich kann die Breite einiger interner Elemente wie folgt ändern , z. B. können Sie diesen Rahmen mit der gesamten Kopie sehen. Ich kann ändern , wie das angezeigt wird, ob es links oder rechts ist. Aus diesem Grund werden Sie feststellen , dass der Versuch, all diese Schritte Schritt für Schritt zu vermitteln , ziemlich schwierig sein kann , da sie sehr schnell Hand in Hand gehen , um ansprechende Komponenten zu erhalten und responsives Design zu erstellen. Innerhalb von Figma. 20. Umarmung, Füllung und feste Größenanpassung: Als Nächstes schauen wir uns die horizontalen und vertikalen Größenänderungsmodi an. Sie in all diesen Beispielen also die Horizontale, aber die gleichen Regeln gelten für die Vertikale. Ich mache horizontal , weil du wahrscheinlich öfter damit zu kämpfen haben wirst , du anfängst zu lernen, wie all das zusammenpasst. verwende diesen Abschnitt , der die Bright Collection zusammenstellt , wie ich sie genannt habe. Machen wir eine Kopie all dieser Bilder und wenden wir das automatische Layout an. Und denken Sie daran, dass die Abkürzung dafür Shift a ist. Und wenn ich das mache, legt es standardmäßig den Abstand fest. Also ändern wir das auf 40. Es ist also ein bisschen einfacher auf dem Bildschirm zu sehen. Und wir können sehen, dass der Standard-Abstandsmodus für horizontal und vertikal nicht wirklich umwerfend ist. Das bedeutet, dass, wenn ich ein anderes Bild kopiere und einfüge , es in diesen übergeordneten Frame eingefügt wird . Das ist also Frame 63. Schauen wir uns also die Standardeinstellung horizontal bis zur Größenänderung an. Ändern der Größe von Modi. Du kannst sehen, wenn ich Gegenstände hinzufüge, es wird nur die Länge des Dings verlängern. Wir sollten also damit beginnen , zu untersuchen, wie das Verhalten „ Fest“ und „Füllen“ funktionieren. Es nimmt eine Kopie und wir benennen diese in die Standardeinstellung um. Schauen wir uns Fixed an. Wenn ich das also auf fest ändere, bedeutet das dass auch das feste Layout des übergeordneten Frames weiterhin existiert, die Größe dieses Rahmens jedoch gleich bleibt. Wenn ich dieses Ding lösche und wir einen Artikel weniger oder sogar zwei weniger Artikel haben. Sie können sehen, dass die Größe dieses Rahmens selbst immer noch die Originalgröße beibehält. Und das ist wirklich wichtig, wenn Sie Ihr Layout zusammenstellen. Denn wenn ich das z.B. in einen Rahmen wie diesen setze und den Hintergrund ändere. Ändern wir das auf eine etwas andere Farbe. Lass uns einen dunkleren machen. Sie können sehen, dass es so behoben ist. Und wenn ich das automatische Layout hinzufüge und versuche, es in die Mitte zu verschieben, sind es alle Elemente, es sind nur drei. werden also weiter auf die linke Seite dieses Rahmens gelegt . Und das ist vielleicht nicht das, was Sie erreichen möchten. Wenn ich das auf umarmen ändere, dann kannst du sehen, dass sich das automatisch von selbst zentriert. Und eine Sache, die ich hier tun kann, ist wenn ich einfach die Größe dieses Rahmens hier ändere. Wenn Sie es bemerken und genau im Auge behalten haben. Es wurde von der Standardeinstellung des Umarmens unabhängig von der Größe des Inhalts behoben. Und jetzt, als ich die Ausrichtung in diesem neuen Frame 63 Eltern-Frame und diesem festen Frame mit den drei Bildern zusammengemischt in diesem neuen Frame 63 Eltern-Frame habe, haben wir jetzt das Umarmungsverhalten. Das letzte Verhalten , das ich mit Ihnen teilen möchte , ist der Füllbehälter. Und es ist wichtig , sich daran zu erinnern, dass der Füllbehälter nur für einen Behälter in einem anderen funktioniert. Sie können also hier sehen, dass ich dieses feste Paar im Rahmen habe . Nennen wir das. Wie hieß es? Demo zum Füllen des Containers. Und benenne diesen scheinbaren Rahmen um. Wenn ich dieses Bild auf „Füllen“ ändere, können Sie sehen, dass es jetzt den Platz des übergeordneten Rahmens einnimmt , sodass es größer wird. Sie können sehen, dass der Abstand links und rechts gleich ist. Und ich werde es kleiner machen. Der Abstand entspricht auch dieser Größe und dem Abstand. Diese lassen sich also wirklich gut miteinander mischen. Und wenn du anfängst, mit ihnen herumzuspielen, wenn du deine Anzeige hast, wenn ich eine weitere hinzufüge, kannst du sehen, wie sich das füllt, aber es läuft hier weil es den Inhalt nicht umarmt. Das ist also wahrscheinlich das Letzte , was Sie hier wirklich auf diesen Inhalt aufmerksam macht . Der Rahmen selbst, die Füllbehälter-Demo. Wir nehmen den exakten Mittelraum mit gleichem Abstand links und rechts ein. Aber der Inhalt kann überlaufen, wenn ich weitere Artikel hinzufüge. Also je nachdem, was du willst, wenn ich das auf Umarmen ändere, dann ist es ansprechender und es nimmt den Platz ein und wickelt ihn gleichmäßig und schön ein. Hoffentlich war das für Sie als sehr kleines, aber schnelles Tutorial sehr nützlich, um Ihnen zu zeigen, wie die Größenänderungsverhalten „umarmen“, „ fixieren“ und „Container füllen“ funktionieren. 21. Abstands- und spacing des automatischen Layouts: In diesem Teil werden wir uns mit Abständen und Abstandsmodi befassen. Und am besten erkläre ich das eines funktionierenden Beispiels mit einer Schaltfläche oder einem Aufruf zum Handeln sowie anhand dieses Beispiels, dem ich die Größenänderungsmodi erklärt habe. Um zu erklären, wie das funktioniert, ist es am schnellsten, den Aufruf zum Handeln neu wahrscheinlich am schnellsten, den Aufruf zum Handeln neu zu erstellen. Wenn ich also die Alt- oder Wahltaste gedrückt halte, während ich die Ebene darüber ziehe, bedeutet das, dass ich einen Kaffee trinke und was ich mache, ist einfach die Farbe zu ändern, damit wir das sehen können, eine der schnellen Dinge, die Sie tun können , wenn Sie eine Schaltfläche erstellen oder etwas erstellen möchten , wie ich es mit dem Aufruf zum Handeln hier gemacht habe. Drücken Sie einfach die Umschalttaste A und schon ist alles im Layout. Und was das macht, wenn es nur ein Element gibt, es ist standardmäßig und legt den Abstand zwischen den Elementen auf zehn fest, ebenso wie die horizontale Polsterung und die vertikale Polsterung. Wenn es also um Abstände geht, meine ich damit den Abstand , der sich oben, unten, links und rechts von den Elementen in Ihrer automatischen Layoutgruppe befindet. Wenn ich also eine schnelle Füllfarbe festlege, machen wir diese. Lass uns lila werden. Ich finde lila, ganz nett. Jetzt kann ich die Farbe des Textes wieder ändern und ihn ein bisschen besser lesbar machen. Also lass uns das machen, das scheint nicht zu funktionieren. Also werde ich das so ändern. Da haben wir es. Ich wähle das erneut aus und füge einen Randradius hinzu, damit es knöpflicher aussieht. Und was Sie sehen können, ist, dass es von selbst in Ordnung aussieht. Aber wenn Sie mit diesen Werten spielen, können Sie sie verwenden, um den Abstand zwischen Ihren Objekten zu ändern . Das kann also nützlich sein, je nachdem, wie Ihre Elemente entweder automatisch mithilfe des automatischen Layouts fließen sollen oder wie sie angezeigt werden sollen. Wenn du einen Aufruf zum Handeln wie diesen machst, dann mache eher so etwas wie einen Button. Sie können auch hier auf dieses Ding klicken , um die individuelle Polsterung einzustellen. Nehmen wir an, aus irgendeinem Grund wollte ich unten etwa 50 Abstände hinzufügen , weil ich dachte, das wäre gut. Und hier, falls Sie sich erinnern, haben wir die Ausrichtung. Wenn ich es also auf die Mitte und die darin enthaltenen Elemente ausrichte, hat das keinen Einfluss darauf. Es verhält sich also möglicherweise nicht so, wie Sie es beabsichtigen. Also ich habe das versehentlich gemacht, aber ich denke, das ist eigentlich eine sehr gute Lektion. Wo ist die Polsterung auf der Unterseite, die bestimmt, wohin es geht. Also, wenn ich das auf zehn ändere und dann die Höhe dieses Dings ändere, dann kannst du sehen, dass die Höhe fest wird und die Polsterung immer noch da ist, oben und unten, dann fließen die Gegenstände im Inneren zwischen ihnen. Das ist also eine kurze Demo, um die Abstände durchzugehen. Das Letzte, was Sie durchmachen müssen, sind diese grundlegenden Modi. Also aus Gewohnheit finde ich es einfach nett, einen kleinen Schattenbutton hinzuzufügen weil das die Sache einfach schön abrundet. Falls wir uns daran erinnern, oder aus einer der Lektionen, ob du sie durchgemacht hast, hier habe ich diese Füllcontainer-Demo, aber nicht alles sieht gut aus. Es richtet sich nur nach links aus. Es könnte also die Dinge in der Mitte ausrichten. Sie wollten schon immer, dass der Abstand zwischen ihnen allen konsistent ist. Aber manchmal möchte man, dass sie alles in diesem Rahmen ausfüllen . Was Sie also tun können ist, wenn ich zuerst demonstriere, wie das funktioniert, wenn ich das mache, bleibt das im Mittelpunkt. Ich wähle das aus, fülle eine Container-Demo. Wenn ich auf die drei Punkte klicke, erhältst du dann Zugriff auf den Abstandsmodus. Und wenn Sie den Abstand dazwischen verwenden, wird sichergestellt, dass der Abstand dazwischen automatisch geändert wird und sich automatisch anpasst. Mache ich das? Das ist ein sehr einfacher Ein-Klick-Trick. Das bedeutet, dass der Abstand zwischen den beiden immer gleichmäßig und konsistent ist. Nimmt aber den Platz des Containers ein, der einen Füllbehälter verwendet. Horizontaler Größenänderungsmodus oder vertikaler Größenänderungsmodus. Das sind also die konkreten Beispiele, die Sie verwenden können. Und hoffentlich habe ich Ihnen veranschaulicht wie Sie den Abstand für Dinge festlegen, wie Sie den Füllbehälter verwenden und den Abstandsmodus auf wie Sie den Füllbehälter verwenden etwas anderes einstellen. Und diese hoffentlich nutzen, um noch besser zu werden. Lege die Dinge auch selbst fest. 22. Komponenten: Master und Instanzen: Tolles Zeug. Wir werden uns also direkt mit den Komponenten und den beiden Dingen befassen , deren Sie sich bewusst sein müssen, unseren Mastern und Instanzen. Und ich zeige Ihnen anhand eines konkreten Beispiels, was ich meine . für ein kleines Beispiel Lassen Sie uns für ein kleines Beispiel mit der Schaltfläche „ gedemütigt“ beginnen und T verwenden , um eine Textebene zu erstellen. Und ich nenne es meinen Button. Und wenn Sie sich erinnern, wir haben unsere Textilien. Suchen Sie also nach dem Button-Stil. Das ist also etwas, das ich ganz gut gebrauchen kann. Dann können wir einfach das automatische Layout hinzufügen und das gibt uns standardmäßig einige Dinge , die ziemlich hilfreich sind. Geben Sie ihm einen einfachen Randradius und eine Füllung. Lass uns diese Farbe wählen. Ich mag diese Art von leuchtenden Farben. Und lassen Sie mich das darauf aktualisieren. Was Sie von hier aus tun können , ist, dass Sie jetzt diese Button-Sache haben. Aber was ist, wenn Sie es mehrmals verwenden möchten? Wenn ich den Inhalt oder die Farbe bearbeiten möchte, sagen wir, und sie aktualisieren die Farbe von diesen blauen Drei auf etwa Grün. Wenn ich das in einem Prototyp machen muss, wird es überall hingehen. Und ich muss gehen und jeden einzelnen Knopf ändern. Was Sie tun können, ist, wenn ich das rückgängig mache und diese beiden lösche. Eigentlich, lassen Sie mich das nicht, lassen Sie mich das kopieren. Lassen Sie mich das in eine Komponente verwandeln. Es gibt also zwei Möglichkeiten, dies zu tun. Sie können mit der rechten Maustaste klicken und eine Komponente erstellen, oder ich verwende immer die Tastenkombination Befehlstaste. Und damit wird sogenannter Master für eine Komponente erstellt. Und das kannst du an dem kleinen Symbol hier erkennen. Ich glaube also nicht, dass Zoomen einen Unterschied zu machen scheint. Sie können jedoch jederzeit in die linke Seite Ihres Ebenenfensters schauen . Sie können erkennen, ob etwas eine Instanz ist, ein Master ist oder nicht. Und du kannst es an dieser violetten Markierung sehen , ich kopiere es. Jetzt wirst du feststellen , dass es keinen benannten Level hat, obwohl es tatsächlich einen Namen hat. Und Sie können sagen, dass Kundentiefpunkt, nennen wir den Tiefpunkt. Und wenn ich das Label für Ihre Schaltfläche aktualisiere, alle Änderungen übernommen. Dies ist nun eines der mächtigsten Dinge, die Sie mithilfe von Komponenten in Figma verwenden können. Und nicht nur das, es gibt so viele weitere Dinge, die Sie tun können. Aber wenn Sie hier die Grundlagen von Mastern und Instanzen mit Komponenten beherrschen, sind Sie goldrichtig. Als weiteres Beispiel, nur um Ihnen eine Vorstellung zu geben, kann ich meine Instanz hier anpassen. Und selbst wenn ich das auf die Schaltfläche „Sie“ aktualisiere , werden dadurch nur die Fälle aktualisiert, in denen ich die Standardeinstellungen nicht außer Kraft gesetzt habe . Und du kannst das nochmal sehen, wo wenn ich die Farbe ändere, z. B. ich die Farbe auf Gelb ändere, z. B. jetzt, wenn ich die Farbe des Originals , bleibt das Gelb erhalten, ändere, bleibt das Gelb erhalten, aber der untere Button wird lila. Das ist also so etwas wie der, der Aktualisierungszyklus funktioniert irgendwie zwischen einem Master und einer Instanz. Und manches kann man zum Beispiel immer erkennen , weil es lila ist , was den Umriss und das kleine Symbol angeht . Im Ebenen-Panel siehst du, was ein leerer Diamant ist. Es gibt nur, die einzigen anderen Dinge, die Sie vielleicht wissen möchten, ist, dass es so viele andere Dinge gibt , die gemeinsam genutzt werden können, wenn Sie Ihre Komponenten einrichten. Wenn Sie es also einrichten, geht es nicht nur um die Füllung und den Textinhalt. Es gibt auch Dinge wie die Opazität. Also sagte ich, das sind 50 Prozent. , dass sich das bis zum Rand oder zum Strich ausbreitet Ich würde sagen, dass sich das bis zum Rand oder zum Strich ausbreitet. Die so vielen verschiedenen Dinge, die Sie auf Ihrer Komponente einrichten können. Und das ist eine ziemlich einfache bei der es sich nur um eine einzige Textebene handelt, aber Sie können so viele verschiedene Dinge hinzufügen. Also könnte ich z.B. zwei Textsachen hinzufügen und das wieder auf 100% Opazität ändern. Und du kannst sehen, wie bei zwei Textebenen, ich kann hier den Button sagen und das auf ihren Bus ändern. Und damit Sie das anhand eines einfachen Button-Beispiels sehen können , können Sie beginnen, darauf aufzubauen. Und ich ermutige dich, zu experimentieren und zu versuchen , all diese Updates hin und her zu bekommen diese Updates hin und her und sicherzustellen, dass du damit vertraut bist welche Dinge du von deinen Mastern festlegen kannst und welche Dinge auf deine Instanz übertragen werden und welche Dinge sich von selbst retten. Lassen Sie sich von Master-Updates nicht beeinflussen. 23. Component: Als Nächstes bauen wir auf diesem Beispiel auf , indem wir die Komponenten verschachteln. Es klingt also genauso wie auf der Dose. Sie platzieren Komponenten quasi anderen Komponenten und in zwei weitere Frames. Hier drüben. Ich habe mich im Voraus ein bisschen vorbereitet. Also hat es ein kleines Avatar-Ding gemacht. Und sie sind nur 50 mal 50 Pixel, benutzen einfach das Ellipsenwerkzeug für den Kopf und auch für den Körper und drücken es einfach zusammen. Und ich habe hier zwei Textebenen, die nur den Stil Header Six sowie den Style Body One verwenden . Und wir haben den Bus und aus der vorherigen Lektion. Was Sie von hier aus tun können ist, wenn ich ein Beispiel dafür nehme, Sie sicher, dass Sie ein Beispiel nehmen, dann können Sie die anderen Dinge nehmen, die Sie vielleicht möchten. Automatisches Layout dafür. Denken Sie daran , dass die Abkürzung dafür der Buchstabe a ist. Und wir machen die Null dazwischen. Und was ich tun werde, ist eine Kopie dieses Buttons zu machen. Ich ändere einfach den Inhalt einer Ansicht, z. B. jetzt, wenn ich diese Abgangsmitte ändere, anordne, was gut für mich ist, ich wollte das reduzieren. Als Beispiel. Geben Sie es, sagen wir, zehn Abstände rundum ein. Nur damit es wie eine Karte aussieht. Nennen wir es weiß, grau sechs. Eigentlich möchte ich Weiß machen, damit du das hoffentlich leichter erkennen und der Grenzradius normal ist. Und von hier aus haben wir jetzt einen einfachen Prototyp für eine Kartensache. Was Sie tun können, ist Befehlstaste, um sie in eine Komponente umzuwandeln. Oder denken Sie daran, Sie können jederzeit mit der rechten Maustaste auf etwas klicken. Sie können einen Rahmen in eine Komponente verwandeln. Benennen Sie das einfach in eine Profilkartenzeile um, sagen wir. Jetzt haben wir einen guten Master, bei dem wir innerhalb dieser Master-Komponente, der Profilkartenzeile, der Profilkartenzeile, zwei Komponenten haben, die Avatar-Komponente und die reguläre und diese Button-Komponente. Nun, wenn ich ein Beispiel davon nehme, wenn ich einen Bildschirm zusammenstelle, kann ich ein paar verschiedene Kopien davon machen. Fügen wir das automatische Layout hinzu und nennen wir das 20 zwischen jeder Zeile. Und jetzt, wenn ich das aktualisiere, also z.B. wenn ich die Auswahlfarben des Profils auf grün ändere. Lassen Sie mich, vielleicht muss ich mich aus irgendeinem Grund für einige damit befassen . Da haben wir es. Jetzt können Sie sehen, dass sich diese Änderungen jetzt durchsetzen. Sie können also sehen, dass selbst wenn Sie Komponenten nur so leistungsstark verwenden, aber indem Sie Ihre Komponenten verschachteln und den Aktualisierungszyklus zwischen ihnen verstehen, Sie Ihre Designs und Layouts und Dinge, die Sie kommunizieren möchten, wirklich, sehr schnell zusammenstellen können Layouts und Dinge, die Sie kommunizieren möchten . 24. Varianten und Eigenschaften: In dieser letzten wichtigen Lektion, die ich euch beibringen muss , dreht sich alles um Varianten und die Komponenten von Eve waren nicht mächtig, mächtig genug. Varianten sind eine Möglichkeit, viele Dinge anpassbar zu machen und global zu erzählen, anstatt viele Gruppen von Komponenten zu erstellen. Nehmen wir also ein Beispiel, bei dem Sie möglicherweise viele verschiedene Button-Stile haben möchten. Und in der Vergangenheit musste man jeden einzelnen Stil kreieren. Sie müssten also Schaltflächen in der Standardfarbe erstellen, jede Farbe mit Symbolen ohne Nachteile in verschiedenen Größen. Und das wächst einfach exponentiell. Also die Varianten, die das auf einen netten, wirklich kleinen, einfach zu verwendenden Satz von Komponenten mit vielen konfigurierbaren Schaltern reduzieren auf einen netten, wirklich kleinen, einfach zu verwendenden Satz von können. Also machen wir gemeinsam ein funktionierendes Beispiel , um Ihnen zu zeigen, wie das passt, wie das passt und erreicht werden kann. Hier in der Figma-Abrechnung aus dem vorherigen Beispiel habe ich die Profilkartenzeile dupliziert und sie umbenannt. Dies soll Ihnen das Einrichten der Varianz erleichtern. Varianz ist also im Allgemeinen alles, wo sie etwas Ähnliches haben. Also lasst uns jetzt einen weiteren bauen , der etwas größer ist, und dann etwas Schatten hinzufügen, um ihn visuell von allen anderen zu unterscheiden. Also zum Beispiel möchtest du vielleicht etwas austauschen und das hast du gerade hinzugefügt oder so. Wenn ich die Alt-Taste gedrückt halte oder Sie mit der rechten Maustaste klicken, können Sie wie gewohnt kopieren und einfügen. Und was wir tun müssen, ist diese Instanz zu trennen, weil wir sie von einer Instanz in einen eigenen Master verwandeln wollen . Und lassen Sie uns das hervorgehobene umbenennen. Und wir können etwas Einfaches tun. Erhöhen wir einfach die Höhe oder den Standardeffekt , der ein Schatten ist. Und Befehlstaste oder Rechtsklick zur Komponente, und los geht's. Was wir von hier aus tun wollen ist, wenn Sie mehrere Komponenten auswählen, sehen Sie hier auf der rechten Seite, dass es dieses Ding gibt, das als Varianz kombiniert bezeichnet wird. Wenn ich das mache, können Sie sehen, was das automatisch macht. Figma erkennt dies nun als eine einzige Komponente an, hat aber viele verschiedene Stile. Sie können also hier sehen, dass wir dieses Fenster mit den Eigenschaften geöffnet haben und lassen Sie mich diesen Stil umbenennen. Und wir können sehen, dass es dort ein paar verschiedene Stile gibt. Sie haben standardmäßig immer ein hervorgehobenes Feld. Das ist also sehr praktisch, um zu überprüfen, was da anders ist. Und du kannst alle möglichen wirklich coolen Dinge tun. Ich gebe Ihnen einen kurzen Überblick darüber , was Sie tatsächlich tun können. Jetzt, wo wir das mit dieser, dieser Variante gemacht haben, können wir jetzt jede bestehende Instanz gegen eines der hervorgehobenen Dinge austauschen . Jetzt können Sie sehen, wie wichtig es ist, nicht nur Komponenten zu verschachteln und Änderungen hin und her zu übertragen. Aber wir können tatsächlich die Möglichkeit hinzufügen , Dinge rückwirkend umzuschalten. Und jetzt diese verschiedenen Stile. Und solange wir eine Rahmenverschachtelung verwenden und solange wir unser automatisches Layout verwenden, können viele Dinge sehr schnell zusammenkommen. Um Ihnen eine Einführung und eine Abrundung der anderen Dinge zu geben, die Sie tun können werden wir uns mit den Eigenschaftsstilen befassen. Also gebe ich Ihnen eine kurze Vorschau auf all diese. Variant ist die Standardvariante, die Sie festlegen. Das ist also normalerweise gut für Staaten und Stile. Boolean ist gut, wenn Sie etwas verstecken möchten. Normalerweise verwende ich gerne ein Fragezeichen. Also z.B. Titel. Wir können ShowTitle also als hohen Titel bezeichnen. Was ich tun kann, ist in diese Ebene zu gehen. Und was ich tun muss, ist dieses Ding zu verwenden , mit dem ich eine boolesche Eigenschaft anwenden kann. also standardmäßig der Fall, Das ist also standardmäßig der Fall, wenn ich all diese verbinde. An dieser Stelle ist es wahrscheinlich gut zu beachten , dass es gut ist, Ihre Komponente abzulegen und einfach mit zwei oder vielleicht drei zu arbeiten, bevor Sie sie alle anschließen. Bei diesen habe ich jetzt diesen kleinen Schalter, dem der Titel ein- und ausgeschaltet werden kann. Also ein paar andere Dinge, die man machen kann, da gibt es auch den Instanzwechsel und die Texttexte z.B. ich kann einfach hier reingehen. Und für Inhalte können wir das nachschlagen. Also Textsorte von Texten. Nun zu all diesen sollte ich in der Lage sein, da ich mir nur diesen angesehen habe. Ich kann das in ihren Titel ändern. Und das wird automatisch aktualisiert. Und das Letzte ist der Instanzwechsel. Das bedeutet, dass Sie zwischen zwei verschiedenen Komponenten wechseln können . Also hier werde ich diese Komponente als Instanz-Swap und ihre Schaltfläche verknüpfen . Und worum ich die Leute bitten werde, die bevorzugten Swaps, die ich von dir erwarten würde. In Bezug auf die Erstellung des Designsystems wird das so sein. Jetzt kannst du sehen, dass ich zwischen Button und Link wechseln kann. 25. Tipps für die Modellierung von Komponenten: Also hier, aufbauend auf diesen Varianten und Eigenschaften, gibt es ein paar schnelle Tipps, die ich Ihnen geben möchte , um Ihnen das Leben ein bisschen zu erleichtern , während Sie später herausfinden, wie Sie Dinge modellieren können. Deshalb ermutige ich Sie, sich hinzusetzen und zu üben und zu versuchen, herumzuspielen und einige Dinge zu kreieren, einige Fehler zu machen, damit Sie sich an dieses Wissen erinnern und es in Ihrem Kopf festigen können . Aber hier sind auch ein paar schnelle Abkürzungen , mit denen Sie das Lernen beschleunigen können. Okay, als Erstes geht es um die Größe von Dingen, wenn Sie einen Instanzwechsel durchführen. Das baut also auf dem auf was wir zuvor durchgemacht haben. Sie können sehen, dass die Höhe dieser Schaltfläche 39 Pixel beträgt, während dieser Link 19 Pixel beträgt. Also, wenn ich das auf 19 ändere und die Textebene tatsächlich genau in die Mitte lege . Oh, eigentlich muss ich das so machen. Ordne ich die Textebene nicht an. Wenn Sie dann den Instanzwechsel durchführen, ist es normalerweise ein bisschen einfacher, Dinge auszutauschen. Sie können also sehen, dass es normalerweise besser ist, wenn Sie die Größe des Dings anpassen können . Icons sind zum Beispiel gut, tausche solche Dinge aus. Es ist wirklich gut, darauf zu achten, wie die Dinge zusammengestellt werden und wie welche Stile auf das automatische Layout und die Größenbestimmung angewendet werden , solche Dinge. Der nächste Punkt sind die schnellen Tipps die nicht unbedingt Boolean, sondern die Verwendung der Schalter betreffen. Wenn ich das auswähle, können wir sehen, dass ich den Stil mit der Dropdown-Liste auswählen kann , also das ist gut. die Variant-Eigenschaft verwenden, erhalten Sie den Titel, der durch einen booleschen Wert erstellt wird. Sie haben hier die Eigenschaft text und die Eigenschaft instance while. Was Sie aber auch tun können, ist, dass ich das lösche, sodass wir nur noch zwei haben. Und ich benenne Stil von Stil um, um ihn hervorzuheben. Und was Ihnen auffallen wird , ist, dass es sich bei diesem Diamanten immer noch um eine Eigenschaft vom Typ Variant handelt. Aber wenn ich die Stile von oder hervorheben oder sollte ich sagen, von, sagen wir falsch zu wahr, ändere die Stile von oder hervorheben oder sollte ich sagen, von, sagen . Dann kann Figma das automatisch erkennen und es zerreißt das aus der Drop-down-Liste hervorgehobene Element in einen Umschalter. Das ist also wirklich hilfreich. Und einige andere Dinge, die Sie tun können , sind, statt falsch, Sie können auch Ja und Nein sagen. Ich bin mir nicht sicher, ob du das kannst. Sie können sie nicht mischen, also können Sie wahr und falsch verwenden , ja und nein. Das sind also die Typen, die Sie hier verwenden können, wahr und falsch funktionieren. Ja und keine Arbeit. Und diese werden diese zusammenfügen. Das sind also nur ein paar Kleinigkeiten , die mir im Laufe der Zeit aufgefallen sind. Ich baue Komponenten selbst und versuche, baue Komponenten selbst und sie zusammenzusetzen. Und das hat mir wirklich geholfen, zu diktieren und herauszufinden , wie ich dieses Ding am besten modellieren und ausdrücken kann. Damit es für meine Teamkollegen und für andere Leute einfacher ist , die Dinge zu verwenden , die ich zusammengestellt und erstellt habe. 26. Checkpoint: responsive Komponenten: Unglaublich. Wir haben also fast alles, was wir brauchen, um wirklich, wirklich schnell und sehr frei zu sein und all die Dinge auszudrücken, die wir wollen, und verschiedene Prototypen so schnell wie möglich zusammenzufügen . Das ist es, was mich an dem Figma-Tool wirklich angezogen hat und warum ich es immer noch liebe, indem ich es täglich den ganzen Tag benutze. In diesem Modul werden wir also wirklich über responsives Design und responsive Komponenten sprechen . Und wir werden es aus zwei Blickwinkeln betrachten. Zunächst werden wir uns Methoden ansehen, um Dinge in Figma responsiv zu gestalten. Als Nächstes werden wir darüber sprechen , für wen sie responsiv sind. Wenn ich also über responsive Komponenten und Figma und solche Dinge spreche , denke ich normalerweise an die Designer. Wie kann ich mir und meinen Teamkollegen das Leben leicht machen, damit sie in der Lage sind, sehr schnell Prototypen zusammenzustellen und diese Modelle so anzupassen , dass wir das Tempo einhalten können, das wir benötigen. Aber es gibt auch responsives Design. Wir werden also ganz kurz auf responsives Design eingehen. Dies ist kein Kurs, der Ihnen hilft, die Grundlagen des responsiven Webdesigns zu erlernen , aber wir werden darauf eingehen und wie Figma Ihnen dabei helfen kann, dieses Ziel zu erreichen. 27. Reaktionsschnelle Modellierungsmethoden: Aufbauend auf dem, was wir in einer der vorherigen Lektionen gemacht haben, habe ich gerade eine unserer Komponenten genommen , die wir zusammen gebaut haben. Ich habe auch noch einen gemacht, und ich habe ihn noch nicht vollständig eingerichtet. Aber nur um die Unterschiede zwischen den beiden Methoden zur Modellierung von Komponenten für die Reaktionsfähigkeit zu veranschaulichen . Also zuerst dieser Rahmen, der ein automatisches Layout verschachtelt. Was Sie also bemerken , ist, dass, wenn ich diese bestimmte Komponente, die Größe der Dinge, vergrößere und verkleinere , die View-Schaltfläche rechts bleibt. Was Sie feststellen werden, ist, dass wir das gleich beheben werden, aber die Schaltfläche „Ansicht“ befindet sich auch über dem Text. Das ist mit dieser Constraints-Version also etwas responsiv . Was ich stattdessen gemacht habe, ist, dass, wenn Sie sich erinnern, ich die Textebenen zusammen gerahmt habe und es auch Layout und Anwenden auf alle angewendet habe, um auf die gesamte Karte selbst auszulegen. Also das horizontale, es hätte letztlich immer mit dem Constraints-Modell gegolten. Ich habe gerade alles reingeschmissen. Du hast also deinen Avatar, deinen Titel und den Inhalt des Textes und den Button. Und was Sie tun können, ist die Einschränkungen dieser Dinge in Bezug darauf zu ändern , wo sie in den übergeordneten Rahmen passen. Und das ist wirklich wichtig , weil ich denke, dass es mit Gruppen ein bisschen anders funktioniert, aber wir bleiben bei Frames weil ich denke, dass es mit Gruppen ein bisschen anders funktioniert , , weil Frames gut sind. Denkt daran, jetzt, wo ich das gemacht habe, wenn ich das vergrößert und verkleinere, verhält es sich jetzt genauso wie das andere. Es würde also fragen, was ist der Unterschied zwischen diesen beiden? Und noch ein paar andere Dinge, die du tun kannst. Sie können also hier sehen, dass ich diesen Rahmen habe und die horizontale Größenänderung auf Füllen eingestellt ist. Was wir jedoch noch nicht getan haben, ist die horizontale Größenänderung des Titels festzulegen die horizontale Größenänderung und der Text muss gefüllt werden. Was Ihnen auffallen wird, ist, dass, wenn ich das jetzt verkleinere, der Text automatisch umschließt. Du kannst sehen, wie ich das verkleinere, dann geht alles in die Mitte der Karte. Und wenn mir das nicht gefällt, kann ich anpassen, wohin alles geht. Ich kann das Alignment benutzen. Vergiss das automatische Layout nicht und ändere diese Einstellungen, bis ich zufrieden bin. Was Sie feststellen werden, ist, dass, wenn ich etwas Ähnliches mache, ich das tun kann und die Breite, die Breite dieser bis hierher, bis zum Ende, ändern die Breite, die Breite dieser bis hierher, kann. Ich kann diese Einschränkung auch nach links und rechts ändern. Deshalb ermutige ich Sie wie immer, mit diesen Einstellungen zu experimentieren und herumzuspielen , um zu sehen, wie sie alle zusammenpassen. Während ich das mache, können Sie sehen, dass sich der Text jetzt ändert. Was Sie also auch feststellen werden, ist, dass der Hintergrund nicht geändert hat, um ihn zu umgeben. Und hier beginnen die Unterschiede zu zeigen. Wo es viele Dinge gibt, die wir tun werden. Sehr einfache Dinge, um sie responsiv zu machen. Sie funktionieren irgendwie. Aber wenn du willst, dass sich die Dinge um die Dinge wickeln und so funktionieren, brauchst du auch ein gewisses Layout. Das heißt nicht, dass Sie nicht beide mischen können. Dies sind zwar zwei unabhängige Ansätze, es ist sehr gut, wenn Sie versuchen, zu experimentieren und das, was Sie benötigen, zu kombinieren. Es gibt also ein Beispiel für dieses. Ich möchte vielleicht nicht, dass der Avatar tatsächlich in der Mitte steht. Ich will eigentlich , dass es ganz oben ist. Was ich also tun kann, ist, wenn ich das abtrenne , nur um es einfacher zu machen, weil ich die Dinge einrichten muss. Und im Inneren können Sie sehen, dass all diese Dinge im Inneren maßstabsgetreu eingestellt sind. Wenn ich sie also alle so einstelle, dass sie links und oben sind, z. B. jetzt, wenn ich die Höhe ändere, kann ich tatsächlich die Höhe des zu füllenden Behälters ändern. Das bedeutet also, dass sich der Avatar und der Text schöner und natürlicher anordnen. Wenn ich das schon einmal versucht hätte, man sehen, dass es sich so dehnt und einfach skaliert. Ähm, ich denke, das sind gut genug Beispiele , damit du dir ansehen und analysieren und anfangen kannst, damit zu spielen und was du schätzen und anfangen wirst, wovon du profitieren willst ist das Spielen mit diesen Einstellungen, damit du ein Gefühl dafür bekommen kannst wie all diese Dinge zusammenpassen. Ich denke, von hier aus ist das einzig Letzte, was zu erwähnen ist, das automatische Layout und die Reaktionsfähigkeit der Dinge. Versuche, dich an eine Achse zu halten. Versuchen Sie also nicht, es vertikal und an Feiertagen horizontal responsiv zu gestalten . Du wirst sehen, dass ich, wenn ich schrumpfe und das gemacht habe, wirklich nur an der horizontalen Achse gearbeitet habe. Aber sobald ich anfange, die Höhe zu ändern , sieht das nicht wirklich gut aus und fängt an, auseinanderzufallen. Das sollten Sie im Hinterkopf behalten. Versuchen Sie, sich an eine Achse zu halten und mit diesen beiden verschiedenen Arten zu experimentieren, um Versuchen Sie, sich an eine Achse zu halten und mit diesen beiden verschiedenen Arten zu experimentieren diesen beiden verschiedenen Arten Komponenten responsiv zu gestalten. 28. Responsive für Designer: Also, wenn es darum geht, responsiv zu gestalten, aber für Designer, hier ist genau das, was ich meine. Wenn wir das als Beispiel nehmen, nehmen wir an , dass ich einige dieser Profilkartenzeilen verwende. Und ich möchte sie alle anordnen. Also versuche ich, sie so aufzustellen und die Überschrift zu finden. Schreiben Sie einfach, was auch immer ich hinzufügen möchte , in die Mitte etwas anderes. Nehmen wir an, ich habe eine dieser Komponenten, sagen wir. Und ich zoome hinein. Und wenn ich es hier einfügen möchte, müsste ich diese auswählen, nach unten verschieben und dann muss ich den Abstand überprüfen. Sie haben es wahrscheinlich schon bemerkt oder was Sie aus einer der vorherigen Lektionen gelernt haben, ist hoffentlich, dass, wenn ich sie alle auswähle und das automatische Layout verwende, das hilft. Und das kann ich tun , um mir das Leben zu erleichtern. Also hier kannst du sehen, ob ich das mache und all die Dinge darin ändere, um die horizontale Größenänderung zu füllen, dann, wenn ich das mache und vielleicht die Größe von fixed ändere, was in Ordnung ist. Sagen wir 349, weil wir auf einem 375-Bildschirm arbeiten. Und hier kann ich die Höhe der Sachen anpassen. Und nicht nur das, ich kann Dinge problemlos neu anordnen, wenn ich muss. Ich bin sogar, sogar noch mehr. Ich kann einen weiteren Abschnitt hinzufügen und ich kann sagen, ich werde diesen hinzufügen und ihn auf den Bildschirm legen und ihn hier einfügen. Und wenn ich alles richtig eingerichtet habe, werden Sie feststellen und was Sie wahrscheinlich schon bemerkt haben , ist, dass Sie mehrere Frames innerhalb von Frames verwenden , eigentlich kein Problem, solange Sie sie sorgfältig verwalten und jeder Frame einen Zweck erfüllen und etwas bewirken sollte. Sie können dort also sehen , wo ich gerade auch das Layout hinzugefügt habe. Nicht zu viel, es hat sich geändert, aber jetzt habe ich diese Kontexte und andere Kontakte. Nehmen wir an, Sie sind in der Designkritik tätig, arbeiten also professionell und haben einige Designer oder Interessenvertreter. Und sie sagen Eigentlich finde ich, mein anderer Kontakt nach oben gehen sollte. Und lassen Sie uns für einen Moment so tun, der Inhalt darin anders wäre. Ich kann mich einfach bewegen. Und es ist ganz einfach, dass ich sogar eine Kopie davon nehmen und sagen wir, ich sogar eine Kopie davon nehmen und lassen Sie uns es für ein Tablet entwerfen, oder? Also, wenn ich das mache, ist das behoben. Aber was ich hier für die Navbar eingerichtet habe, lassen Sie uns einfach dafür sorgen, dass es sich Container anfühlt. Jetzt siehst du automatisch, dieses Layout nicht so gut funktioniert. Vielleicht sollten wir sie Seite an Seite machen. Also wenn ich diese dann gruppiere, verschiebe a, um das automatische Layout zu machen, und lege sie nebeneinander. Und belassen wir es bei 30. Sie können automatisch sehen , dass Sie versuchen zu entwerfen. Wenn ich als Designer Komponenten habe , die auf diese Weise responsiv sind, macht das mein Leben so viel einfacher. Und es macht Dinge so schnell zu erledigen und zu aktualisieren. Denn wenn alles nur eine Schicht darüber wäre, ja, es ist manchmal ein bisschen frustrierend, das zu tun, hier ist mein Mainframe und das Design für das iPad. Und ich habe meinen Inhalt. Ich muss in diesen Rahmen gehen. Und dieser Frame, der diese Spalte ist, gehe dann in diese Komponente und nimm dann einige Änderungen vor. Aber wenn Sie Ihre Figma-Datei und Ihre Designs als Komposition aufbauen Figma-Datei und , sollten all diese Dinge darin nur Komponenten sein, sollten all diese Dinge darin nur Komponenten sein die leicht auszuwählen und mit den Eigenschaften, die Sie möglicherweise eingerichtet haben, zu basteln den Eigenschaften, die Sie möglicherweise eingerichtet haben, oder sie durch etwas anderes zu ersetzen. Dann kannst du das automatisch sehen, indem du die Größe der Dinge änderst. Wenn ich diese dann von fest auf satt ändere , was du dir vorstellen wirst, wird das zu einem sehr häufigen Verhalten und Muskelgedächtnis, das du mit der Zeit aufbaust. Jetzt kann ich es anpassen und ich kann anfangen mit all den verschiedenen Layouts und Dingen zu spielen und zu sehen, wie sich mein Design wirklich verhalten könnte. Das ist also etwas, das ich auf jeden Fall vorschlage und das gibt Ihnen Gefühl, zu versuchen, zu entwerfen, aber die Dinge für Sie als Designer responsiv zu gestalten. Und es ist wirklich wichtig, auf sich selbst aufzupassen und sich das Leben zu erleichtern. 29. Responsive Webdesign: Wir werden also ganz kurz darauf eingehen, wenn es um die Gestaltung responsiver Websites geht . Und ich mache das mit Absicht, denn auch hier geht es nur darum, Sie auf den neuesten Stand zu bringen und flüssig in Figma zu arbeiten, nicht um Ihnen beizubringen, wie man responsives Webdesign macht, sondern um es zu erkunden und irgendwie verstehen, wie ich zu diesen Entscheidungen gekommen bin. Es scheint also ziemlich vernünftig, diese Seite an Seite anzuordnen. Aber wie passt das alles zusammen und wie machen wir diese Dinge? Die Geschichte dreht sich also ganz kurz um das Layout und die beiden Dinge, die wir uns ansehen wollen, unsere Container in Spalten. Mit Container meinen wir also ein festes Objekt in der Mitte des Bildschirms. Sie werden feststellen, dass, wenn wir ein hypothetisches iPad haben und es so ausdehnen, es eine maximale Größe haben sollte. Wenn ich das noch einmal verkleinere, habe ich auch ein Layoutraster eingerichtet. Und wenn ich Control G verwende, und das kann das hier einschalten , verwende ich Nullen, ein einfaches 12-Spalten-System, was ziemlich normal ist. Und was Sie feststellen werden , ist , dass es nicht perfekt ausgerichtet ist, aber es reicht aus, um Ihnen eine Vorstellung davon zu geben, dass okay, alles in der Mitte ist. Also, wenn ich das umbenenne, könnte das ein Container sein. Und wenn ich diese verkleinere, haben wir diese linke und rechte Spalte. Nennen wir das also Spalte sechs. Und nennen wir das auch Spalte sechs. Und das liegt daran, dass sie, wenn mit Bootstrap als Beispiel in vielen anderen Frontend-Layout-Frameworks und -Systemen arbeiten, sie mit Bootstrap als Beispiel in vielen anderen Frontend-Layout-Frameworks und -Systemen arbeiten, ein zwölfspaltiges System verwenden und die Größe der Dinge anhand von 12 Spalten festlegen . Und Sie können die Komponenten so einrichten, dass sie der Größe von allem entsprechen. In dieser Größe. Wenn du verstehst, was ich meine. Wir haben also Spalte sechs, die sechs Spalten auf der linken Seite einnimmt, und die andere Spalte nimmt sechs Spalten auf der rechten Seite ein. Du könntest es anpassen und du könntest die Aufteilung ändern. Also benötigt eine drei Spalten und die andere neun. Sie könnten sogar ungerade Zahlen verwenden, die nicht passen, wenn Sie Dinge einrichten und responsives Webdesign machen. Das kannst du hier sehen. Eigentlich sollte ich diese Dinge hier anpassen. Also ich habe diese Dinge, das Symbol, lass uns das umbenennen , um das einfacher zu machen. Und dieses B ist weiß. Mein Logo ist weiß. Wenn ich es also auslegen möchte, ändere es auf eine feste Breite und verkleinere es auf ungefähr die gleiche Größe. Und wenn ich den Container dann nenne, ist das in Ordnung. Das ist in Ordnung. Das sollte eigentlich so sein, wie wir es haben, wenn du das auf Leerzeichen änderst, dann bekommst du eine ungefähre Vorstellung davon wie die Dinge wirklich funktionieren und zusammenpassen sollten. Also dieses Container-Konzept, Sie können mehr darüber lesen, Holen Sie sich Bootstrap und suchen Sie einfach nach Containern. Und wenn Sie sich dann die Spalten ansehen, können Sie sich getbootstrap ansehen und sich die Spalten ansehen. Die Dokumentation ist also ziemlich gut, würde ich sagen. Und was du für dieses hypothetische iPad finden wirst, wenn ich es dann superbreit mache. Ich habe also einen Ultra-Breitbildschirm, der z. B. ein Verhältnis von 21 zu neun hat. Sie werden sehen, dass viele Websites tatsächlich nicht wissen, wie man das benutzt. Oder wenn wir es auf das Ganze aufteilen würden, wäre es tatsächlich ziemlich unangenehm zu lesen. Also habe ich das gesagt und es einfach so eingestellt, dass es einen Behälter füllt. Das ist ziemlich schrecklich, nicht wahr? Also schalten wir diese Netze einfach für einen Moment aus. Auch hier, mit der G-Taste, sieht man, dass das etwas schwierig zu sehen und lesen ist, und es ist viel schöner, die Mitte zu halten. Dieser Container gibt Ihnen also eine maximale Größe dafür, wo die Dinge in die Spalten gelangen sollten, gibt Ihnen ein System für Anordnung der Dinge auf der Seite, was aus einer Geschichte des Druckdesigns stammt. Sehr interessant. Ich empfehle, es zu lesen. Und das sollte Ihnen eine ausreichende Vorstellung davon geben , wie diese Dinge zusammenpassen. Leider mag Figma Modelle von ihnen nicht wirklich. So können Sie beispielsweise keine Komponenten ändern, wenn sich die Bildschirmgröße ändert. Aber das ist okay. Es gibt einige Dinge, die es ziemlich genau nachahmen können. Denken Sie jedoch an Figma als Tool , um Ihnen eine Vorstellung zu geben und Ihre Absicht für die verschiedenen Bildschirmgrößen zu kommunizieren . Und dann liegt es an Ihnen, diese Lücke zu schließen , wenn Sie mit Ihren Ingenieuren sprechen. Und du kannst auf jeden Fall viel lernen. Und ich denke, es macht dir das Leben leichter, wenn du lernst, wie das beim echten Encodieren tatsächlich gemacht wird. Denn am Ende des Tages sieht Ihr Benutzer dort, nicht Ihre Figma-Dateien. 30. Prototype: Wir haben also bereits anklickbare Prototypen angesprochen. Aber jetzt lass es uns wirklich machen. Lassen Sie uns eine wirklich gute Gesamtarbeit machen, ein Beispiel, das Ihnen hilft, auch herauszufinden, wie das geht. Deshalb habe ich hier einige der vorherigen Beispiele aus den vorherigen Modulen und Lektionen aufgebaut vorherigen Beispiele aus den vorherigen , um einen sehr einfachen E-Commerce-Ablauf zu entwickeln. Also nehme ich die direkte Idee der Mikrowelle und habe eine kleine Auswahl zusammengestellt, bei der Sie zwischen zwei Mikrowellenstilen und zwei verschiedenen Farben wählen können und , bevor Sie zum Warenkorbbildschirm übergehen und dann zum Anfang der Kasse gehen. Also lasst uns gleich loslegen. Zu Beginn klicken Sie am einfachsten auf die Prototypen oben rechts. Und von dort aus werden Sie sehen, wenn ich über die verschiedenen Ebenen gehe über die verschiedenen Ebenen , dass dieser kleine Kreis auf diesen verschiedenen Ebenen auftaucht. Und wenn Sie Ihre Ebene auswählen, ist das der einfachste Weg für Sie, eine Prototyp-Interaktion zu erstellen. Wenn die Seite, an der Sie gerade arbeiten, also keinen vorhandenen Flow hat, werden Ihnen hier ein paar Dinge auffallen. Bisher gab es keine Interaktionen mit Prototypen. Und wenn ich das rüberziehe , entsteht es und Interaktion. Und die beiden Dinge, die Sie zuerst beachten sollten, sind, dass dadurch ein Flow erstellt wurde , den Sie oben links in der Benennung sehen können Sie können ihn hier bearbeiten, jedoch unter den Interaktionsdetails. Standardmäßig ist das also ein Klick, aber wenn es eine bestehende Interaktion gibt, wird standardmäßig die nächste verwendet. Also wird es weitergehen. Dann beim Schweben, beim Drücken, et cetera, et cetera. Wir bleiben heute bei Unclick. Aber ich überlasse Ihnen einige Übungen, um die anderen zu erkunden. Wenn wir also abklicken und navigieren, und ich möchte, dass es sofort geht, und ich möchte nicht viel anderes tun. Also klicke ich einfach auf Schließen und das bleibt dort. Was ich von hier aus tun kann, ist auf all die verschiedenen Dinge zu klicken auf all die verschiedenen Dinge zwischen denen ich navigieren möchte. Also mit dem Selektor, während ich zwischen den verschiedenen hin - und herwechsle, möchte ich, dass das passiert. Was ich hier tun werde, ist Smart Animate zu aktivieren. Und das wird es so aussehen lassen, als wäre es interaktiver als es war. Also lass es realer aussehen, ich denke, das versuche ich zu sagen. Also, wenn wir das hier durchgehen und das durchgehen, gehen wir einfach die verschiedenen durch. Sie können sehen, dass das Verbinden aller Bildschirme und Abläufe relativ einfach ist, wenn Sie Ihre Bildschirme und Abläufe im Voraus vorbereitet haben Bildschirme und Abläufe relativ einfach ist, wenn Sie Ihre Bildschirme und Abläufe im Voraus . Nehmen wir uns einen Moment Zeit und machen das und stellen wir sicher, dass ich die meisten davon gemacht habe. Und du kannst sehen, dass, wenn ich die Einstellungen geändert habe, für welche ist das b? Dieser, nicht wahr? Sobald ich die Einstellungen dort geändert habe , wurden weiterhin die letzten bekannten Einstellungen beibehalten, die ich vorgenommen habe. Das ist also ziemlich hilfreich. Wir werden hierher gehen. Sie können das hier verbinden. Okay, Tolles Zeug. Also schließen Sie die einfach zusammen an. Jeder sollte also Interaktionen haben , die auf einen der anderen Bildschirme gehen. Von dort. Ich möchte dieses nur zur Veranschaulichung haben. Die Alternative und der weiße Stil , der ist dieser. Und hol dir die Schaltfläche „In den Warenkorb legen“. Und sieh dir das hier an. Also werde ich das wieder auf Instant verschieben. Und das ist natürlicher. Und von hier aus kann ich das und das tun. Die einzige andere Sache, die Sie vielleicht wissen möchten, ist auch der Unclick. Du kannst zurückgehen. Es wird also zum vorherigen Bildschirm oder zur vorherigen Interaktion gewechselt. Es scheint also momentan nicht so interessant zu sein. Aber das ist sehr nützlich, wenn Sie rückgängig machen möchten oder wenn Sie viele verschiedene komplexe Floats haben. Das sind also die wichtigsten Dinge , deren Sie sich bewusst sein sollten. Das ist so ziemlich die Art, wie Sie all Ihre Interaktionen einrichten. Ich werde das nur ganz schnell öffnen . Lassen Sie uns diesen Flow umbenennen. Fluss. Klicken Sie sich durch. Und Sie sollten in einem Moment sehen können , wie das alles zusammenpasst. Während wir scrollen, können wir hier sehen, ich meine Mikrowelle und den Smart Animate baue. Du kannst sehen, wie es zwischen ihnen hin- und herwechselt. Wie cool ist das? Also wähle diese beiden im Warenkorb aus, bringt uns hierher, dann kann ich mit dem Kauf fortfahren und zurück zum Warenkorb bringt uns zurück dorthin. Kurzes, sauberes, einfaches Beispiel Ihnen hilft, sie zusammenzunähen. Als Prototyp für Ausbilder. 31. Mehrere Ströme: In der vorherigen Lektion haben wir einen Flow erstellt. Aber was ist, wenn Sie mehrere Flows teilen möchten? Einer von euch möchte zwei verschiedene Bedingungen gegeneinander testen . Deshalb gebe ich Ihnen eine kurze Einführung und einen Überblick darüber, wie das geht. Was Sie in der Vorschau zunächst beachten sollten, ist, dass Sie beim Klicken verschiedene Steuerelemente sehen können. Oben links hier. Dies wird für Sie am nützlichsten sein. Sie können all die verschiedenen Flows sehen , die Sie zusammengestellt haben. Also hier haben wir den einzigen Flow , den wir zusammengestellt haben, meinen Flow. Aber was wollen wir zusammenstellen? Noch einer? Es ist ganz einfach. Nehmen wir an, wir beginnen aus irgendeinem Grund an der Kasse. Und Sie können auf diesem Prototyp-Tab einfach sicherstellen, Sie erneut auf den Tab Prototyp klicken, wenn Sie ihn nicht ausgewählt haben oder auf ihn geklickt dass Sie erneut auf den Tab Prototyp klicken, wenn Sie ihn nicht ausgewählt haben oder auf ihn geklickt haben. Wenn Sie dann auf den Flow-Startpunkt klicken, können Sie die Checkout-Flow-Bedingung ausführen und dieser einen Namen geben. Dann geht der Prototyp von dort aus. sind also so ziemlich nur Lesezeichen denen Sie von einer IT aus klicken können Sie hier oder oben rechts auf die Play-Schaltfläche klicken können. Was Sie sehen werden, ist, dass jeder, der die Datei geöffnet hat und den Prototyp sehen kann, diese Dinge auch sehen kann. Wenn ich also auf meinen Flow klicke , kehren wir zum Anfang des Flows zurück , den wir zuvor erstellt haben. Es könnte durchgehen, meine Mikrowelle bauen und zwischen den verschiedenen Dingen klicken. Oder wenn ich an dem anderen Ablauf arbeiten und direkt von woanders anfangen möchte an dem anderen Ablauf arbeiten und direkt von woanders anfangen , wir hierher gekommen und du kannst sehen , dass uns das direkt zum Korb führt. Da hast du es. 32. Teilen von Prototypen: Jetzt, wo Sie einen anklickbaren Prototyp haben und die Flows zusammengestellt haben , die Sie mit anderen teilen möchten. Jetzt möchten Sie das mit jemandem teilen, der entweder remote ist oder sagen wir , Sie arbeiten von zu Hause aus oder Sie haben jemanden , der geografisch in einem anderen Büro arbeitet geografisch in einem anderen Büro und Sie möchten das mit ihm teilen. Hier sind also all die Dinge, die Sie wissen sollten um Ihren Prototyp im bestmöglichen Licht zu präsentieren. Bevor wir also zu den Links kommen, möchte ich drei Dinge auf Ihr Radar nehmen. Dies sind die blauen Hotspots, die Zoomstufe und das Ein- und Ausblenden der Benutzeroberfläche. Denn unabhängig von den Einstellungen, die Sie hier auswählen, übernehmen wir den Link zum Teilen , den Sie dann mit Ihren Freunden, Kollegen oder mit wem auch immer Sie ihn teilen möchten, teilen. Daher ist es sehr wichtig , dass Sie diese Einstellungen korrigieren, bevor Sie den Link zum Teilen generieren. Hier oben rechts können Sie ein paar verschiedene Dinge sehen. Zeigen Sie also standardmäßig Hotspot-Hinweise an. Onclick ist immer aktiviert. Wenn ich das mache, können Sie sehen, dass ein Bereich des Bildschirms blau hervorgehoben ist . Manchmal möchten Sie das vielleicht ausschalten. Wenn du den Leuten keine Hinweise geben und es realistischer wirken lassen willst , kannst du das von hier aus nicht ein- und ausschalten. Als nächstes folgt die Zoomstufe. Hier. Es ist eine ziemlich gute Größe, aber Sie sollten sicherstellen, dass der Zoom die richtige Größe für das hat, was Sie teilen möchten. Fit to Screen ist also eines der Formate, die Sie verwenden können. Das ist gut für Präsentationen. Du hast eine gewisse Passform. Es wird also erweitert, bis die maximale Größe Ihres Bildschirms groß genug ist Es wird einfach zu 100% angezeigt. Sie haben auch den Füllbildschirm, der dem Anpassen an den Bildschirm ähnlich ist. Nun, es gibt die tatsächliche Größe. Je nachdem, wie Sie Ihren Prototyp eingerichtet haben und welche Auflösung Sie haben, kann sich das ändern, wie ein Prototyp von der Person wahrgenommen wird , die ihn erhält. Also, wenn ich das zusammenquetsche, wird es nicht funktionieren, oder? Okay, lass uns das nicht zerquetschen. Jedenfalls. es kurz zu machen , wenn Sie versuchen, zu sagen, ändern Sie die Zoomoptionen, bis Sie mit der Anzeige zufrieden sind . Bevor du das tatsächlich an jemanden schickst. Der letzte ist das Ein - und Ausblenden der Benutzeroberfläche. Also jemand, der das liebt, wir besorgen uns auch diese, diese Bar. Und wenn Sie dies öffnen, das sichtbar, sodass Sie möglicherweise die Figma-Benutzeroberfläche ein- oder ausblenden möchten ist das sichtbar, sodass Sie möglicherweise die Figma-Benutzeroberfläche ein- oder ausblenden möchten. Es hat also dieses lustige Symbol hier. Aber die Abkürzung, die ich verwende, ist der Befehl und die Rücktaste, aber der Backslash-Button, tut mir leid, oder das Pipe-Symbol, das genau wie eine vertikale Linie ist. Dann klicken Sie darauf. Sie können sehen, dass die Benutzeroberfläche ausgeblendet ist. Und wenn ich auf etwa klicke, sehe ich nicht mehr, dass ich das wieder aufrufen soll, Befehl, Pipe, umgekehrter Schrägstrich, und dann kann ich all die UI-Dinge wieder sehen. Sobald Sie das eingerichtet haben, sollten Sie zum Link Share Prototype gehen. Deshalb kannst du sehen dass unten ein Link zum Teilen von Kopien erscheint. Denn wenn Sie die Benutzeroberfläche ausblenden, können Sie den Share-Button nicht wirklich sehen. Aber von hier aus wirst du das wahrscheinlich tun wollen. Wenn wir hier reinspringen, kann ich Ihnen zeigen, wie die URL aussieht. Wenn wir hineinzoomen, können Sie sehen, normalerweise können Sie dies verwenden, um sich selbst zu überprüfen. Hier sind diese URL-Optionen, damit ich sie für Sie so zugänglich wie möglich halte. Aber um die Benutzeroberfläche zu verstecken, können Sie hier sehen, dass eine Option und ein hoher DUI hinzugefügt wurden , und das ist eine. Wenn ich möchte, dass sich das tatsächlich von selbst zeigt, könnte ich das auf Null ändern, z. B. und Sie können hier sehen, dass es auch in der Skalierungsoption für den Zoom Das sind alle wichtigen Optionen , die Sie beachten müssen. Und wenn Sie den Link geteilt haben, das Letzte, was Sie tun wollen ist das Letzte, was Sie tun wollen, wenn Sie den Prototyp teilen. Stellen Sie sicher, dass jeder, der den Link ihn sehen kann, und kopieren Sie dann den Link. Du kannst es per E-Mail an Pete them schicken. Sie können die E-Mails oder Figma-Konten von Personen hinzufügen, aber ich finde es am nützlichsten, es einfach an jemanden mit dem Link zu setzen und den Link zu kopieren und ihn an jemanden zu senden. Das deckt also all die Dinge Sie über das Teilen eines Figma-Prototyps und alle Flows, die Sie durchführen möchten und über Benutzertests oder den Austausch einiger Ideen mit Ihren Freunden, Kollegen, Ihrer Familie, wem auch immer Sie mit Ihrem Hund teilen möchten , wissen möchten. Vielleicht z.