Figma: Der absolute Anfänger bis zum Profi beim Erstellen einer App

1. 000 Figma Intro: Heute werde ich dir alles beibringen , was du über Figma wissen musst. Wir beginnen bei Null, richten ein Konto ein und lernen die Figma-Struktur kennen. Während des gesamten Kurses werden wir an einem echten Projekt arbeiten, um eine App zur Stimmungsverfolgung vom ersten Schritt bis zum fertigen Design zu erstellen . Während du ein Wireframe und Figma einrichtest, lernst du alle Grundlagen kennen, wie das Einrichten von Rahmen, Hinzufügen von Formen, Text und Farben. Wir werden dann den Wireframe zum Leben erwecken und unser UI-Design einrichten. Während des Kurses werde ich Sie durch alle unglaublich leistungsstarken Funktionen von Figma führen Sie durch alle unglaublich leistungsstarken Funktionen von Figma , z. B. die Verwendung von Figma-Stilen für Farbe und Topographie. Wie man Raster hinzufügt und verwendet. Und wir werden lernen, wie wichtig die Verwendung von Komponenten und welche Varianz für jeden UX-UI-Designer ein Muss ist. Ich zeige Ihnen, wie Sie Einschränkungen verwenden können, um Ihr Design auf verschiedenen Bildschirmgrößen zu testen. Wir werden den leistungsstarken Figma-Community-Bereich kennenlernen. Sobald wir fertig sind, werden wir sicherstellen, dass unser Design in jeder Präsentation glänzt. Zum Abschluss des Kurses zeige ich Ihnen, wie Sie eine Teambibliothek erstellen und Ihre Dateien mit anderen Designern und Entwicklern teilen können. In weniger als 2 Stunden erfährst du alles über Figma, was du brauchst, um jedes Projekt in Angriff zu nehmen. Lass uns anfangen. Dieser Kurs ist genau das Richtige für dich. Wenn Sie ein absoluter Anfänger sind oder von einer anderen Designsoftware wechseln . Dies ist ein Kurs von Moody Learning Punkt io. 2. NEUE VERSION VERFÜGBAR!: Vielen Dank, dass Sie an diesem Kurs teilgenommen haben. Ich möchte Sie nur darauf aufmerksam machen, dass ich gerade eine neue Version dieses Kurses veröffentlicht habe. Wenn du also zu meinem Profil springst, gehe zu Christine Valor oder du kannst auch einfach nach Moon Learning suchen Und dann kannst du hier alle meine Kurse sehen. Und wenn du ganz nach unten gehst, siehst du normalerweise die neuen Kurse, die ich gerade veröffentlicht habe. Und wenn du darauf klickst, kannst du sofort mit dem neuesten Material und den neuesten Updates für den neuen Kurs beginnen. Ich habe all Ihre großartigen Rückmeldungen und lieben Kommentare berücksichtigt , die ich in den letzten zwei Jahren mit dem alten Kurs erhalten habe. Also habe ich es ein bisschen geändert und es sind jetzt mehr Vorträge in Bite Size. Etwas, das dir in den anderen Deep-Live-Kursen sehr gut gefallen hat . Das bedeutet, dass Sie schneller in die verschiedenen Fächer einsteigen können . Und es wird mit einer Übungsdatei geliefert, sodass Sie mit mir an allem arbeiten können , was Sie auf dem Bildschirm sehen. Ich habe Themen wie Prototyping etwas mehr Tiefe verliehen. Und natürlich werden wir im neuen Kurs die neuesten Versionen wie Figma-Variablen behandeln im neuen Kurs die neuesten Versionen wie Figma-Variablen 3. 0101 Was ist Figma? Wer macht die Programmierung?: Was ist Figma? Kurz gesagt, Figma ist eine Designsoftware für Benutzeroberflächen, auch als UI-Designsoftware bezeichnet wird. In Figma können Sie interaktive Wireframes erstellen, sehr fortschrittliche Benutzeroberflächendesigns einrichten und auch beeindruckende Prototypen erstellen. Das Tolle ist, dass Figma auf Mac und PC gleichermaßen arbeitet. Du könntest es in einem Browser oder über eine App verwenden. Figma bietet Ihnen alle Tools, um ein Design für Web oder App einzurichten. Dinge wie Arbeitskomponenten, Einrichten von Stilen und die Verwendung von Einschränkungen für reaktionsschnelles Design. Es ist wirklich die Summe seiner unglaublichen Eigenschaften, die Figma so besonders macht und daher branchenführend ist. Es ist Cloud-basiert, was es zur idealen Wahl macht mit anderen Designern zusammenzuarbeiten oder Ihr Design mit Entwicklern zu teilen. Jetzt höre ich die Frage oft, also warte mal, also warte mal, wenn ich eine Website in Figma entworfen habe, wie kommt sie von Figma online? Wie wird es zu einer echten Website? Macht Figma das? Tja, tut mir leid, aber nein. Figma bietet Ihnen alle Tools, um eine Website so einzurichten , dass Entwickler sie mit Code lebendig machen können. Figma bietet Ihnen großartige Tools, zum Beispiel das Inspect-Tool, mit dem Sie CSS-Snippets sehen können. Aber das reicht nicht wirklich aus, um eine vollständige Website von Figma zu erstellen. Man braucht wirklich einen erfahrenen Entwickler. Sie könnten auch ein Tool wie Webflow für eine wirklich einfache Website verwenden und Figma als Basis verwenden, um Ihr Design einzurichten und zu planen. Denken Sie daran, als würden Sie in alten Zeiten, eine Broschüre entwerfen, wenn Sie eine Broschüre entwerfen, etwas wie InDesign oder eine andere Software verwenden . Hat diese Software Ihr Booklet ausgedruckt? Natürlich war es das nicht. Es ist genau das Gleiche hier. 4. 0102 Kursprojekt – Was wir erstellen: Willkommen zu deinen ersten Schritten in Figma. Ich möchte Ihnen das Projekt vorstellen, an dem wir in diesem Kurs arbeiten werden , da wir alles an echten Beispielen lernen werden . Sie benötigen absolut keine Vorkenntnisse, da wir bei Null beginnen und uns für ein kostenloses Figma-Konto anmelden. In der ersten Hälfte des Kurses werden wir ein handgezeichnetes Wireframe neu aufbauen, wo ich Ihnen alle Figma-Grundlagen vorstellen werde. Im zweiten Teil verwandeln wir unser Drahtgitter in ein UI-Design. Wir werden alle Aspekte und Funktionen abdecken , die Figma zu bieten hat. Im letzten Teil werde ich Ihnen beibringen, wie Sie Dateien mit Designern und Programmierern teilen können. Lassen Sie mich Ihnen einen Überblick über den Ausgangspunkt unseres Projekts geben. Hier ist der handgezeichnete Drahtgitter , an dem wir arbeiten werden. Wir werden eine Stimmungsverfolgungs-App aufbauen. Lasst uns das schnell durchgehen. Unsere Bildschirme enthalten einen Header, der in einigen Fällen, wie zum Beispiel unser Startbildschirm, auch einen wöchentlichen Überblick enthält. Wir haben auch eine Tab-Leiste am unteren Bildschirmrand, die als Navigation fungiert uns zu verschiedenen Bereichen unserer App springen lässt. Unser Zuhause ist auf heute eingestellt und enthält verschiedene Stimmungsschaltflächen, mit denen ich einen auswählen und anklicken kann. Der, den ich wähle, wird dann als Stimmung für dieses bestimmte Datum hinzugefügt . Ich sehe auch, dass in meiner Übersicht der Daten hier vergangene Stimmungen gezeigt werden. Ich brauche wahrscheinlich etwas Farb- oder Mustercode, um sie in meinem Design zu identifizieren. Es gibt auch eine vollständige Kalenderübersichtsseite, auf die ich zugreifen kann, oder ich hatte eine Tab-Leiste oder die Kopfzeile. Der dritte Navigationspunkt ist ein Blog, der eine Reihe von Artikeln enthält. Wenn ich auf eine klicke, gehe ich zur Artikeldetailseite. Großartig, lasst es uns in Figma einrichten und ich verspreche Ihnen, dass Sie alle wichtigen Dinge lernen, die Sie wissen müssen , um Projekte in Zukunft anzugehen. Ich habe eine Figma-Datei mit allen Arbeitsmaterialien vorbereitet , die Sie herunterladen können. Sobald wir Figma installiert haben, erzähle ich Ihnen mehr darüber, wie Sie diese Materialien erhalten und wie Sie Figma-Dateien hochladen können. 5. 0103 Figma bekommen – Registrierungsprozess: Figma zu bekommen ist super einfach. Alles, was Sie tun müssen, ist zu figma.com zu gehen und dann diese Schaltfläche „Anmelden“ zu drücken, Ihre E-Mail einzugeben, ein Passwort auszuwählen und auf „Konto erstellen“ zu klicken. Sie werden nach einigen grundlegenden Informationen gefragt, wie den Namen, den Sie verwenden möchten, der Bereich, in dem Sie arbeiten, und ob Sie der Mailingliste beitreten möchten. Klicken Sie auf „Konto erstellen“ und bestätigen Sie Ihre E-Mail. Das war's, fertig. Sobald Sie Ihre E-Mail verifiziert haben, werden Sie zu diesem Begrüßungsbildschirm geführt. Wenn du willst, kannst du jetzt ein Team gründen, ich nenne diesen Mond einfach. Sie werden dann gefragt, ob Sie andere einladen möchten, das überspringe ich vorerst. Als Nächstes werden Sie aufgefordert , Plan zu wählen. Ich werde nicht über die Preisgestaltung sprechen , da sich dies von Zeit zu Zeit ändert Weitere Informationen finden Sie daher auf der Figma-Website. Um loszulegen, gehen Sie einfach mit der kostenlosen Version vorerst, Sie später immer aktualisieren können. Figma wird Sie dann fragen, ob Sie mit FigJam eine Designdatei oder ein Whiteboard erstellen möchten . Wenn Sie sich nicht sicher sind, überspringen Sie einfach diesen Schritt, Sie können einen dieser Schritte später jederzeit erstellen. Der Unterschied zwischen den beiden besteht darin, dass das Whiteboard, das Sie zum Planen, Diskutieren und Brainstorming verwenden würden. Wenn Sie bereit sind, ein Drahtgitter oder ein Design einzurichten, wählen Sie die Entwurfsdatei aus. Ich überspringe das vorerst und fange alleine an. 6. 0104 Figma: Werfen wir einen Blick auf den Figma-Arbeitsbereich. Ich verwende jetzt eine Desktop-App, aber es wird ziemlich gleich sein , wenn du im Browser bist. In der Mitte des Bildschirms sehen Sie die neuesten Dateien. Wenn du es wie ich entworfen hast, dann richtet Figma grundlegende Dateien und Vorlagen ein, mit denen du spielen kannst. Auf der linken Seite siehst du deine Teams. Wir haben ein Team namens Moon gegründet, als wir uns angemeldet haben. Lassen Sie mich Ihnen einen Überblick über die Figma-Dateihierarchie geben. Erstens haben wir Teams. Sie können für Ihre eigene Arbeit oder für die Zusammenarbeit sein. Innerhalb von Teams haben wir dann Projekte, mit denen Sie Dateien in verschiedenen Projekten innerhalb eines Teams gruppieren können. Auf dem kostenlosen Tarif erhalten Sie derzeit ein kostenloses Projekt. In einem Projekt können Sie jetzt mehrere Dateien haben, entweder FigJam-Dateien oder Designdateien. Diese Dateien sind der Ort, an dem Sie die eigentliche Arbeit machen würden. Sie können sie weiter in Seiten strukturieren. Kommen wir zurück zum echten Ding. Hier haben wir unser Team. Wenn Sie es löschen, bearbeiten oder umbenennen möchten , können Sie dies mit der rechten Maustaste tun. Dann haben wir unsere Projektdatei. Sie sich befinden, könnten Sie auch weitere Projekte erstellen Je nach Plan, auf dem Sie sich befinden, könnten Sie auch weitere Projekte erstellen. In meinem Projekt kann ich jetzt Dateien hinzufügen. Ich kann entweder FigJam-Dateien hinzufügen, die eher zum Brainstorming dienen, oder ich kann tatsächliche Designdateien hinzufügen, was ich jetzt tun werde. Dies öffnet einen Tab. Ich kann die Datei benennen, indem ich auf den Namen doppelklicke. Ich könnte diese Datei jetzt weiter strukturieren, indem ich Seiten hinzufüge. Derzeit habe ich eine Seite. Ich könnte weitere hinzufügen, indem ich auf den Plus-Button klicke, und natürlich kann ich sie durch Doppelklick benennen. Wenn Sie zurück zu Hause oder zu Ihrem gesamten Arbeitsbereich springen möchten , klicken Sie oben links auf das kleine Haussymbol. Sie können jetzt die neue Datei sehen, die wir in unserem Team und unseren Projekten erstellt haben . Ich könnte jetzt so viele Dateien erstellen, wie ich brauchte. Beachten Sie, wie Sie auf „Status open“ tippen, damit ich hin und her springen kann. Über deinen Teams siehst du auch aktuelle Dateien, an denen du gerade gearbeitet hast, sowie Entwürfe. Wenn Sie nur herumspielen möchten oder die gesamte Dateihierarchie zunächst etwas überwältigend erscheint , erstellen Sie einfach Ihre erste Designdatei hier in Entwürfen. Sie können später Dateien zwischen Teams und Entwürfen per Drag & Drop ziehen. Im linken Menü finden Sie auch Zugriff auf die Community-Bereiche, finden Sie auch Zugriff auf in denen Sie Tausende von Vorlagen, Widgets und Plugins der Figma-Community erkunden können . Wir werden uns dies während unseres Projekts genauer ansehen. Sie können auch jederzeit andere einladen und ihnen entweder Anzeige- oder Bearbeitungsrechte erteilen. Sie können auch sehen, wer in Ihrem Team ist und den Plan, auf dem Sie sich gerade befinden, sowie die verfügbaren Dateien , die mit diesem Plan geliefert werden. Falls Sie ein Upgrade durchführen möchten, können Sie das auch hier tun. 7. 0105 Figma Figma in Browser vs. Figma App: Sie können auf zwei Arten mit Figma arbeiten. Sie können entweder direkt im Browser arbeiten, was Sie hier sehen, oder Sie können die App herunterladen. Um die App herunterzuladen, gehen Sie zu figma.com/downloads. Sie können dann zwischen der Mac- und der Windows-Version wählen. Es ist wirklich wichtig zu wissen, dass obwohl Sie in der Desktop-App arbeiten Figma, obwohl Sie in der Desktop-App arbeiten, Cloud-basiert bleibt. Das bedeutet, dass alle Ihre Dateien in der Cloud und nicht lokal auf Ihrem Computer gespeichert werden . Daher benötigen Sie immer einen Internetzugang, um an Ihren Figma-Dateien arbeiten zu können. Sie könnten eine Figma-Datei lokal exportieren und speichern. Aber das ist etwas, das man wirklich nur im Notfall tun sollte . Zum Beispiel, wenn Sie ein Projekt abschließen müssten und wissen, dass Sie keinen Zugang zum Internet haben. Dies kann zu Hürden für die Zusammenarbeit mit Ihrem Team führen. Daher ist es immer am besten, alles in der Cloud so zu lassen , wie es sein sollte. Neben der Desktop-App könnten Sie an Figma Mirror interessiert sein, um Vorschau Ihrer Designs auf Ihrem Handy oder Tablet anzuzeigen. Falls Sie die Desktop-App nicht verwenden können und wir nur die Browserversion verwenden, empfehle ich dringend, das Schriftinstallationsprogramm herunterzuladen. Auf diese Weise erhalten Sie Zugriff auf alle Ihre lokalen Schriftarten. Dies ist jedoch nicht erforderlich, wenn Sie die App verwenden. 8. 0106 Einrichten von ersten Frames: Beginnen wir mit unserer Figma-Designdatei. Dieser graue Bereich, den Sie hier sehen, heißt Leinwand. Stellen Sie sich das vor wie die Oberfläche eines Tisches, an dem Sie arbeiten. Darüber hinaus fügen Sie Ihre Entwürfe wie Papierbögen hinzu. In Figma werden diese Blätter als Frames bezeichnet. Sie können Ihren Rahmen Bilder, Texte und Formen hinzufügen , um Ihr Design einzurichten. Um einen Rahmen zu erstellen, können Sie ein Rahmenwerkzeug aus der Symbolleiste auswählen oder einfach F drücken, um das Frame-Menü auf der rechten Seite zu öffnen . In Figma sind alle gängigen Bildschirmgrößen bereits in Form von Frames für Sie eingerichtet. Ich wähle ein iPhone X für meine mobilen Designs aus, um von Anfang an zu beginnen. Falls Sie nicht nach einem bestimmten Bildschirmgrößenrahmen suchen, können Sie Ihren Rahmen auch einfach von Hand zeichnen. Sobald das Frame-Tool aktiviert ist, passierten zwei Dinge. Figma hat den Rahmen zu deiner Leinwand hinzugefügt und du kannst den Rahmen auch in deinem linken Ebenenbedienfeld sehen. Die Seitenleiste auf der linken Seite ist im Grunde ein Spiegel jedes Elements, das Sie auf Ihrer Leinwand haben werden. Da wir überall immer mehr Elemente hinzufügen werden, können Sie auch alle hier dargestellt sehen . Sie können Ihre Wireframes entweder direkt hier im Ebenenbedienfeld auf der linken Seite umbenennen direkt hier im Ebenenbedienfeld auf der linken Seite oder indem Sie auf den kleinen Namen über Ihrem Frame auf der Leinwand doppelklicken . Benennen wir es in wireframe/home um. Beachten Sie, dass ich einen Schrägstrich verwende. Dies ist die Benennungskonvention in Figma und erstellt im Grunde eine Kategorie für Frames. Dies ist sehr nützlich , wenn Sie Ihre Frames später exportieren und organisieren. Im Gegensatz zu traditionellen Kunsttafeln können Sie in Figma Rahmen ineinander verschachteln. Auf diese Weise können Sie komplexere Layouts erstellen. 9. 0107 nützliche Shortcuts Pan, Zoom und mehr: Ich möchte Ihnen ein paar nützliche Befehle zeigen , die Ihren Workflow beschleunigen , auch wenn Sie ganz am Anfang von Figma stehen. Figma hat viele tolle Abkürzungen und Helfer. Sie finden sie alle, wenn Sie über das linke Menü zu Verknüpfungen navigieren . Alles, was Sie bereits benutzt haben, ist blau markiert, und diejenigen, die Sie noch nicht benutzt haben, sind grau. Im Moment zeige ich Ihnen nur die wichtigsten für die Navigation. Um zu schwenken, halten Sie einfach die Leertaste gedrückt und bewegen Sie sich mit der Maus. Um ein- und auszuzoomen, drücken Sie „Plus“ und „Minus“. Sehr wichtig, um Ihre Arbeit zu 100 Prozent zu sehen , drücken Sie „Command 0". Sie können zwischen einer Übersicht aller Ihrer Frames und der spezifischen Auswahl wechseln , indem mit Umschalt 1 oder Umschalt 2 umschalten. Um die Benutzeroberfläche ein- und auszublenden, drücken Sie einfach „Command full stop“ und offensichtlich den allmächtigen Befehl alles rückgängig zu machen, was Sie gerade getan haben. Sie werden weitere Abkürzungen kennenlernen, während wir weitermachen. Denken Sie daran, dass Sie alle im Kontextmenü nachschlagen können , das natürlich auch eine Verknüpfung, Umschalt, Steuerung und Fragezeichen hat . Dies ist auch hilfreich, wenn Sie einen PC verwenden , da ich an einem Mac arbeite, und Sie werden nur die Mac-Verknüpfungen mit der automatischen Tastaturausgabe auf dem Bildschirm sehen , die manchmal geringfügig abweichen können. 10. 0108 Formen zu einem Rahmen: Lassen Sie uns anfangen, unseren Frame in ein tatsächliches Drahtgitter umzuwandeln , indem wir einige Inhalte hinzufügen. In einem Drahtgitter halten wir uns an einfache Formen wie Rechtecke und Kreise. Wir finden sie alle im Shape-Menü oben. Klicken Sie einfach auf das Icon und wählen Sie das Symbol aus, nach dem Sie suchen. Beachten Sie, wie Sie neben dem Shape die Verknüpfung sehen können. Ich könnte einfach R für Rechteck oder O für einen Kreis drücken. Halten Sie die Umschalttaste während des Zeichnens und Ihre Form wird gleichmäßig dimensioniert. Wenn das Shape ausgewählt ist, können Sie die Bemaßungen in der darunter liegenden Blase sehen. Sie sehen die gleichen Bemaßungen im rechten Eigenschaftenfenster. Genau hier im Eigenschaftenbedienfeld können Sie die Größe auch von Hand anpassen. Geben Sie einfach die Nummer ein, nach der Sie suchen. Sie können dieses Feld auch verwenden, um Berechnungen durchzuführen. Der Clip neben den Messungen sperrt oder öffnet die Abmessungen. Sie können wählen, ob Sie die gesamte Form oder nur eine Seite skalieren möchten , probieren Sie es aus. Sie können die Form auch drehen, indem Sie einen Winkel hinzufügen oder einfach die Form auswählen. Kommen Sie mit dem Cursor näher an die Kante bis Sie das kleine Rotationssymbol sehen. Um den Eckenradius Ihrer Form zu ändern, wählen Sie die Form aus und kommen Sie dann sehr nahe, bis die Punkte angezeigt werden. Halten Sie die Maus gedrückt und ziehen Sie nach innen. Oder verwenden Sie das Eigenschaftenbedienfeld. Sie können alle Ecken gleichzeitig abrunden oder frühzeitig bestimmte Ecken auswählen. 11. 0109 Duplikation: Großartig. Jetzt, da wir wissen, wie man Formen zeichnet, richten wir unser erstes grundlegendes Layout des Drahtgitters ein. Wir beginnen mit unserem Home-Bildschirm. Ich drücke R für meine Verknüpfung, um ein Rechteckwerkzeug auszuwählen, und wir zeichnen die Kopf- und Fußzeile. In einem Drahtgitter sind genaue Größen nicht so wichtig wie im endgültigen Design, daher werde ich sie von Hand nach meinen Wünschen anpassen. Ich werde jetzt die vier Kreise zeichnen , die meine Stimmungsknöpfe sein werden. Ich drücke O für das Kreiswerkzeug und zeichne meinen ersten Kreis. Da ich möchte, dass alle die gleiche Größe haben, kopiere ich einfach den ersten Button. Es gibt mehrere Möglichkeiten, dies zu tun. Sie können die Befehlstaste oder Windows drücken , dies ist Steuerelement und C zum Kopieren und Befehl oder erneut Control und V zum Einfügen. Sie können auch eine Kopie der ursprünglichen Form ziehen , indem Sie die Option und die Umschalttaste gedrückt halten die Option und die Umschalttaste gedrückt und mit der Maus eine Kopie drücken und ziehen. Ich könnte das für alle anderen Kreise tun oder einfach Befehl drücken oder unter Windows, Control und D drücken. Dies wird sie mit genau der gleichen Entfernung wie der erste duplizieren . 12. 0110 Zeichnen von Zeichnen in Figma: Lassen Sie uns die Gesichter zu unseren Stimmungsknöpfen hinzufügen. Ich werde Augen zeichnen, indem ich Kreise hinzufüge. Ich werde später mehr über Farbe sprechen. die Augen sichtbar zu machen, wählen Sie sie aus gehen Sie dann im rechten Eigenschaftenfenster zu Füllen, und wo Sie den Farbwert hinzufügen würden , schreiben Sie einfach „grau“. Dies ist ein kleiner Trick, wenn Sie eine schnelle Farbe benötigen. Um eine Nase zu zeichnen, brauche ich einen Strich, also wähle ich das Linienwerkzeug oder drücke einfach L und halte die Umschalttaste gedrückt, um eine gerade Linie zu erhalten. Für den Mund wähle ich das Stift-Werkzeug, Sie können auch einfach die Verknüpfung P verwenden. Wenn Sie einen ersten und zweiten Punkt festlegen und die Maustaste gedrückt halten, können Sie die Linien kurven. Neben einem Stiftwerkzeug können Sie auch ein Bleistift-Werkzeug verwenden. Sie können Freihand zeichnen, was bei der Verwendung einer Maus ein wenig Übung erfordert. Aber wenn Sie an ein Trackpad oder einen Stift gewöhnt sind, können Sie erstaunliche Ergebnisse erzielen. Wenn Sie mit dem Zeichnen fertig sind, drücken Sie einfach Escape, um den Zeichnungsmodus zu verlassen. Wenn Sie eine der Shapes auswählen, können Sie jetzt ihre Darstellung mit dem rechten Eigenschaftenbedienfeld ändern . Sie können die Farbe und die Strichgröße ändern und sogar eine andere Art von Strich und runden Ecken wählen . Sobald ich mein Gesicht mag, dupliziere ich es einfach auf alle anderen Knöpfe und passe die Stimmung an. 13. 0111 Gruppen erstellen: Derzeit werden alle Layer auf derselben Hierarchieebene nebeneinander platziert . Sie können Ebenen gruppieren, um mehr Struktur zu erstellen und die Handhabung Ihres Designs zu erleichtern. Wählen Sie einfach die Layer aus, die zu einer Gruppe gehören möchten. Sie können dies tun, indem entweder die Umschalttaste gedrückt halten und nacheinander darauf klicken oder die Umschalttaste und die Maustaste gedrückt halten und dann einen Auswahlbereich zeichnen. Drücken Sie dann Command oder in Windows, Control, G, um sie zu gruppieren. Sie können auch Gruppen innerhalb von Gruppen verschachteln. Wenn ich zum Beispiel jede dieser Schaltflächen zu einer Gruppe mache , wähle alle Schaltflächen aus, ich kann sie erneut gruppieren. Jetzt habe ich eine Knopfgruppe und darin habe ich vier Gruppen von Einzelknöpfen. Ich kann jetzt die Gruppe als Ganzes verschieben, und ich kann auch die ganze Gruppe duplizieren und ich kann auch die ganze Gruppe duplizieren und an einen anderen Ort einfügen. Sie können Elemente innerhalb der Gruppe weiterhin bearbeiten, indem Sie entweder doppelklicken, bis Sie das gewünschte Element erreicht haben , oder halten Sie Befehl oder Strg gedrückt und klicken Sie zum Auswählen. Beachten Sie, dass alles, was wir dem Frame hinzugefügt haben , im Ebenenbedienfeld dargestellt wird. Gruppen werden als kleine gepunktete Rechtecke angezeigt. Wenn Sie darauf klicken, können Sie den Inhalt darin sehen und Elemente auch in und aus Gruppen verschieben. Doppelklicken, um umzubenennen. Ich nenne meine Gruppe Circle Group und die Gruppen der einzelnen Kreise im Inneren Circle. 14. 0112 Text hinzufügen und Styling: Wir möchten jetzt etwas Text zu unserem Drahtgitter hinzufügen. Wählen Sie das Textwerkzeug aus oder drücken Sie einfach „T“ und klicken Sie dann entweder auf Ihr „Wireframe“, um mit der Eingabe zu beginnen oder ein Textfeld zu zeichnen. Auf der rechten Seite im Eigenschaftenbedienfeld sehen Sie jetzt die Texteigenschaften. Umgang mit Topographie ist ein ziemlich großes Thema im UI-Design. Im Moment gebe ich Ihnen nur einen schnellen Überblick über das Eigenschaftenfenster. Wir werden dieses Thema weiter untersuchen , sobald wir uns in Figma wohl fühlen. Im Dropdown-Menü können Sie eine Schrift auswählen. Wenn Sie mit einer Figma-Desktop-App arbeiten, sehen Sie alle Ihre lokalen Schriftarten und alle Google-Schriftarten automatisch. Ich empfehle Ihnen wirklich, die App wann immer möglich zu verwenden. Wenn Sie im Browser arbeiten, installieren Sie unbedingt das Figma Font-Installationsprogramm, das Sie unter figma.com/downloads finden. Sie könnten dann auch alle Ihre lokalen Schriftarten sehen. Wenn Sie eine Google-Schriftart verwenden möchten, laden Sie sie herunter und installieren Sie sie auf Ihrem Computer. Ich arbeite in der App, also verwende ich eine meiner Lieblings-Google-Schriftarten namens Poppins. Im Dropdown-Menü unten kann ich das Schriftgewicht auswählen. Daneben finde ich eine Schriftgröße und setze diese auf 24, und setze diese auf 24 da dies vorerst mein Haupttext ist. Zeilenhöhe und Buchstabenabstand bleibe ich vorerst bei der Standardeinstellung. Dies ist etwas , das wir später in unserem UI-Design retuschieren werden. Weiter unten kann ich wählen , ob ich Text links, rechts oder in der Mitte ausrichten möchte, und ich werde vorerst an meine Texte senden. Wir können auch das Breiten- und Höhenverhalten unserer Lehrbücher festlegen . Wenn Sie die automatische Breite wählen, bedeutet dies, dass das Textfeld genau die Größe des Textes hat. Dann haben wir die automatische Höhe, was bedeutet, dass wir eine festgelegte Breite haben und wenn wir Text hinzufügen, wird er sich entsprechend unten sortieren. Wir werden dies oft verwenden, wenn es um unser UI-Design geht , da es unsere Zeilenhöhe respektiert. Was dann entscheidend sein wird. Wir haben auch eine feste Größe, was ehrlich gesagt ist, etwas, das ich selten benutze. Unter mehr können Sie Dinge wie Basiswert oder Großbuchstaben anpassen . Ich lege meinen Text fest, um hier in der Mitte zu sitzen. Ich werde auch die Texte, die ich hier habe, in meinem Header hinzufügen. Dies wird unterstrichen, da es später anklickbar sein wird. 15. 0113 Positionierungsrichtung und Nudging: Sie können Elemente innerhalb des Rahmens positionieren , indem Sie sie einfach ziehen. Sie werden sehen, dass Figma Anleitungen erstellt, die Ihnen helfen, jedes Element mit dem Rest auszurichten. Um Ihrer Positionierung mehr Details hinzuzufügen wählen Sie ein Objekt oder eine Gruppe von Objekten und halten Sie die alte Maustaste gedrückt, während Sie den Mauszeiger über den Rand Ihres Rahmens oder eines anderen Objekts bewegen. Ihnen wird der genaue Abstand zwischen diesen Objekten angezeigt. Das ist super praktisch und wirklich etwas , das Sie ständig brauchen werden. Sie können die ausgewählten Objekte auch mit der Tastatur verschieben , Pfeile nach links, rechts, oben und unten, während die Entfernungen aktiv sind. Wenn Sie die Umschalttaste gedrückt halten, springt es in größeren Entfernungen. Das nennt man Nudging. Standardmäßig ist Ihr Nudging auf 10 eingestellt. Ich habe meine auf Schritte von acht eingestellt. Suchen Sie einfach nach Nudge-Betrag in Ihrem Workspace-Menü, und Sie können ihn anpassen. Sie können auch eine ausgerichtete mehrere Formen auswählen , indem Sie das Ausrichtungswerkzeug im Eigenschaftenfenster verwenden. Wenn Sie eine Gruppe ähnlicher Objekte auswählen, Figma Ihnen an, diese aufzuräumen. Sie können sogar den Abstand zwischen den Elementen mit dem Menü oder von Hand einstellen. 16. 0114 Farbstriche und Füllungen ändern: Alle Shapes haben eine Füllung und eine Kontureigenschaft. Standardmäßig sind unsere Layer mit einem Hellgrau gefüllt und unsere Typografie ist schwarz. Das funktioniert einwandfrei für Drahtgitter. Du hättest die Farben anpassen können. Wählen Sie eine Form aus und klicken Sie im Eigenschaftenfenster auf der rechten Seite auf „Farbfüllung“. Sie können jetzt entweder eine Farbe mit dem Farbrad auswählen oder mit dem Auge eine Farbe auswählen. Dies ist wirklich praktisch, wenn Sie beispielsweise eine Farbe aus einem Bild auswählen möchten oder wenn Sie bereits einen Hex-Code haben, können Sie diesen einfach hinzufügen. RGB würde auch funktionieren. Neben Volltonfarbe können Sie andere Füllungen wie Verläufe anwenden und Formen auch mit Bildern füllen. Sie können eine Füllung widerrufen, indem Sie auf das Minusschaltflächensymbol daneben klicken. Sie können einen Strich hinzufügen, indem dieselbe Technik mit der Option „Strich“ anwenden. Der Hub kann auch in der Dicke eingestellt werden. Wenn wir auf die drei Punkte klicken, erhalten Sie mehr Optionen wie gepunktete Striche. Eigenschaften können auch kopiert und zwischen Objekten eingefügt werden. Klicken Sie mit der rechten Maustaste auf das Element, wählen Sie den Stil „Eigenschaften kopieren“ und fügen Sie ihn in ein anderes ein. Oder verwenden Sie Alt Command C und Alt Command V. Beachten Sie, dass dies nur den Stil und nicht die Form kopiert . 17. 0115 Stile in Figma erstellen: Mit Stilen können Sie Eigenschaften speichern und erneut anwenden. Auf diese Weise können große Dateien im Handumdrehen aktualisiert werden. Stile können für Farben, Text, Raster und Effekte wie Schatten erstellt werden. Für unser Drahtgitter verwenden wir verschiedene Grautöne, die ich zu einem Stil machen möchte, sowie eine Überschrift und einen Standardtext. Lassen Sie uns zuerst unsere Farbstile einrichten. Um die Farbstile zu erstellen, zeichne ich Formen und fülle sie mit den gewünschten Farben. Wählen Sie die erste Farbe aus, klicken Sie im rechten Eigenschaftenfenster auf das Menü Stile , klicken Sie auf das Plus-Symbol und nennen Sie Ihre Farbe. Machen wir das Gleiche mit den anderen Farben. Beachten Sie, wie ich die Namenskonvention von Pigmenten erneut mit einem Schrägstrich verwende . Dadurch wird automatisch ein Kategorie-Wireframe und dann meine verschiedenen Farben darin erstellt. Ich kann diese Farben jetzt auf Text oder Form in meinem Design anwenden . Wählen Sie einfach das Objekt aus und wenden Sie dann im Menü „Stile“ den gespeicherten Farbstil an. Sie können einen Überblick über Ihre Styles sehen , indem Sie auf den Canvas klicken. Sie können Ihre Styles jederzeit bearbeiten. Sie werden dann automatisch über Ihr Design hinweg aktualisiert. Machen wir das Gleiche für unseren Text. Ich habe einen Text ausgewählt, in meinen Texteigenschaften auf das Symbol „Styles“ geklickt und gespeichert. Ich kann es jetzt auf mein Design anwenden. Beachten Sie, wie es sich um Stile handelt, es spielt keine Rolle , wo Sie sie erstellen. Sie sind an kein Objekt auf Ihrem Canvas gebunden , aus dem Sie sie erstellt haben. Sie leben unabhängig im Style-Sektion. Ich werde einen separaten Rahmen erstellen, um einen Überblick über meine Stile zu speichern. Im Moment lasse ich es neben meinen Wireframes, während ich mich noch anpasse. Mir ist aufgefallen, dass ich einen Fehler gemacht habe. Dies ist eigentlich ein unterstrichener anklickbarer Text. Ich kann den Stil entweder im Menü Textstile bearbeiten oder indem ich auf meine Leinwand klicke und in die Stilübersicht gehe. Ich benenne es in anklickbar um. Ich möchte die Texte aber immer noch verstehen. Ich kopiere einen Text mit diesem Stil und löse dann den Stil im Menü Textstile ab. Ich entferne jetzt die Unterstreichung und speichere sie erneut als Standardtext. Während meines Arbeitsprozesses kann ich immer Stile hinzufügen oder ändern. Es gibt auch andere Stile wie Raster und Effekte wie Schatten oder Unschärfe, die Sie speichern können. 18. 0116 Arbeiten mit Komponenten und Istances: Komponenten sind UI-Elemente , die in Ihrem gesamten Design wiederverwendet werden können. In meinem Drahtgitter gibt es Elemente, die das gleiche Layout haben, aber nur unterschiedliche Inhalte enthalten. Wie die Tage meines Kalenders hier oben und in meiner Tippleiste die tippbaren Icons. Lassen Sie uns sie zu Komponenten machen. Wir beginnen mit den Tagen des Kalenders. Zeichnen Sie zuerst einen Rahmen auf die volle Breite Ihres Layoutrahmens. Denken Sie daran, dass ich mein Eigenschaftenfenster verwenden kann, um zu berechnen. Ich werde dies durch 7 teilen, um einen Tag zu bekommen, und später passt meine Woche perfekt in die Bildschirmbreite. Ich füge jetzt einen Text für den Wochentag und das folgende Datum sowie einen Kreis hinzu, der angibt, ob in der Vergangenheit bereits eine Stimmung eingegeben wurde. Richten wir sie gut aus. wir auch sicher, dass wir Farbe und Textilien zuweisen. Ich nenne dann den Rahmen. Anstatt nur das Datum zu kopieren, mache ich es in eine wiederverwendbare Komponente. Stellen Sie sicher, dass der Rahmen ausgewählt ist. im oberen Menü Klicken Sie im oberen Menü auf „Komponente erstellen“. Wenn die Komponente erfolgreich erstellt wurde, sehen Sie sowohl den violetten Umriss als auch das Diamantsymbol. In Ihrem Ebenenbedienfeld sehen Sie auch die Änderung der Farbe und des Symbols. Diese ursprüngliche Komponente, die Sie erstellt haben, heißt Domäne oder Master-Komponente. Jede Kopie davon wird als Instanz bezeichnet. Beachten Sie den Unterschied im Ebenenmenü. Die Hauptkomponente hat eine gefüllte Diamantform und die Instanz hat eine leere Diamantform. Eine Übersicht über alle Komponenten, die Sie erstellt haben, finden Sie im Menü des Assets neben Ihren Layern. Sie können entweder von hier auf Ihre Arbeitsfläche ziehen , um eine Instanz zu erstellen, oder Sie können den Master oder eine Instanz auch direkt kopieren , um eine andere Instanz zu erstellen. Es spielt keine Rolle , auf welche Weise Sie verwenden, es wird immer nur mit dem ursprünglichen Master verknüpft sein. Sie können nur einen Master haben, aber viele Instanzen. Wenn ich das Layout der Master-Komponente ändere, werden auch alle Instanzen aktualisiert. Beachten Sie, dass ich die Position eines Elements in der Instanz nicht ändern kann . Ich kann jedoch den Inhalt ändern, damit ich den Namen der Daten ändern kann. Ich mag die Ausrichtung nicht und ich möchte, dass der Text in der Mitte sitzt, also repariere ich das in einem Master und alle Instanzen werden folgen. Beachten Sie, dass ich die Farbe in keinem der Instanzen geändert die Farbe in keinem der Instanzen Wenn ich also den Master geändert habe, werden sie alle folgen. Ich kann jedoch die Farbe einer Instanz anpassen. Es würde dann immer noch allen Layoutänderungen des Masters folgen , aber die sogenannte Überschreibung für die Farbe beibehalten. Das ist in Ordnung. Wie in unserem Beispiel möchte ich, dass das aktuelle Datum ein wenig auffällt. Ich möchte die Kreise für heute und in Zukunft entfernen. Dafür gibt es fortgeschrittenere Methoden , aber im Moment färbe ich sie einfach in der Hintergrundfarbe ein, was für ein Drahtgitter gut funktioniert. Zusammenfassend lässt sich sagen, dass Ihre Komponente fest ist und Sie in Ihrer Instanz, Größe, Position, Drehungen, Abhängigkeiten, Layerhierarchie oder einer Zeichnung, die in Bezier-Positionen zeigt, nicht überschreiben Position, Drehungen, Abhängigkeiten, Layerhierarchie oder einer Zeichnung, können. Sie können in Ihren Instanzen überschreiben , Farbe und Füllungen, Füllungen können jedoch auch eine Bildfüllung, Text in Inhalt und Ausrichtung, Stile, Deckkraft, Effekte wie Schatten oder Unschärfen sein Text in Inhalt und Ausrichtung, Stile, Deckkraft, , und Sie können die Sichtbarkeit ein- und ausschalten. Wenn Sie zu den ursprünglichen Master-Einstellungen zurückkehren möchten , können Sie dies tun, indem Sie das Dropdown-Menü im Instanzmenü verwenden und „Alle Überschreibungen zurücksetzen“ wählen. Sie könnten hier auch eine Instanz von einem Master trennen. Wenn Sie Ihren Master versehentlich löschen, können Sie ihn auch mit jeder Instanz wiederherstellen , die Sie bereits erstellt haben. 19. 0118 Seiten in Figma: Um unser Design einschließlich Instanzen zu bearbeiten , müssten wir immer zur Hauptkomponente zurückkehren. Wir könnten dies tun, indem wir eine Instanz auswählen und im rechten Menü auf „Gehe zur Hauptkomponente“ klicken. Wir würden dann zurück zur Hauptkomponente springen, egal wo wir sie platziert haben. Es ist jedoch viel sauberer, wenn Sie alle Ihre Master-Komponenten aus dem Design nehmen alle Ihre Master-Komponenten aus und an einem separaten Ort aufbewahren. Dies ist auch sehr wichtig, um den Überblick über die Konsistenz in Ihrem Design zu behalten . Jetzt könnte ich meinen Master auf derselben Seite behalten oder sogar einen Rahmen zeichnen , den ich Komponenten nenne und hier einen Überblick haben. Es empfiehlt sich jedoch, Ihr Design sauber und ordentlich zu halten. Wir speichern Master-Komponenten in einem eigenen Bereich. Dafür erstellen wir eine separate Seite, die wir Components & Styles nennen. Wir werden diese Seite umbenennen, wir an Wireframes arbeiten. Wählen Sie nun die Master-Komponente aus, klicken Sie mit der rechten Maustaste und wählen Sie Zu Seiten verschieben aus. Sie können es jetzt an die Seite senden, die Sie gerade erstellt haben. Ich schicke auch meinen Rahmen mit den Styles dort drüben. Dies gibt mir einen großartigen Überblick über alle Elemente, die ich verwende. Ich möchte noch ein paar Komponenten wie die Icons für die Tab-Leiste erstellen . Ich kann das entweder im Design tun und an meine Komponentenseite senden oder direkt auf der Komponentenseite erstellen. Ich zeichne ein Rechteck 24 und runde die Ecken. Ich füge dann auch unten einen Text hinzu. Dies ist ein Label, also kann es ziemlich klein sein. Ich füge dafür einen anderen Stil hinzu. Ich füge den Stil auch zu meiner Übersicht hinzu. Stellen wir sicher, dass ich unsere Zeilen in Text schreiben und eine Gruppe erstellen kann . Ich benenne die Gruppe um, stelle sicher, dass sie ausgewählt ist, und wandle sie in eine Komponente um. Ich kopiere es jetzt, springe zu meinem Drahtgitter und füge es in die Tableiste ein. Lassen Sie uns die Instanzen ausrichten und die Labels in Home, Kalender und Blog umbenennen . Jetzt hat meine Symbolfarbe die gleiche Farbe wie der Hintergrund. Ich möchte wieder in meine Komponenten springen und das im Master ändern. Großartig. Werfen wir einen Blick auf unser Asset-Menü für eine Sekunde. Komponenten werden automatisch sortiert , nach welcher Seite und auf welchen Rahmen Sie sie setzen würden. In unserem Beispiel verwenden wir den Schrägstrich und dies hat auch eine nette Unterkategorie geschaffen. Dies wird sehr praktisch sein, wenn Sie viele Komponenten in einem größeren Design haben . 20. 0119 Ein einfacher Flow-Diagramm mit einem Plugins erstellen: Großartig, also haben wir unser Home-Wireframe fertig. Jetzt möchte ich die anderen Wireframes hinzufügen. Lassen Sie uns diese vier schaffen, bei denen eine Stimmung ausgewählt wird und für diesen Tag auftaucht. Ich kann jetzt entweder neue Frames zeichnen und alles kopieren, was ich brauche und den Rest zeichnen oder da sie sich sehr ähnlich sind, werde ich einfach meinen gesamten Frame duplizieren. Ich werde jetzt den Text ändern und übrigens könnte dieser Text auch seine eigene Komponente sein. Ich wähle dann alle Phasen aus, die nicht auf dem Bildschirm ausgewählt würden . Denken Sie daran, Befehl oder Option gedrückt zu lassen , wenn Sie innerhalb einer Gruppe zur Tiefenauswahl gegangen sind. Ich möchte jetzt die Transparenz ändern. Ich kann das entweder im Eigenschaftenfenster machen oder einfach eine beliebige Zahl drücken. Zwei würden zum Beispiel zu einer Kapazität von 20 Prozent führen . Ich werde das Gleiche für den Rest der Bildschirme tun und wie Sie sehen können, zahlt es sich bereits aus, dass wir einige Zeit damit verbringen , unseren Startbildschirm gut einzurichten. Ich werde auch einige Frames für meinen Kalender einrichten und wo mein Block später sein wird. Natürlich muss man sie unbedingt benennen. Ich möchte jetzt die Verbindung zwischen diesen Frames angeben . Einfach eine Linie zu zeichnen würde nicht wirklich funktionieren, da sich Objekte entweder auf oder außerhalb von Frames befinden. Ich benutze ein Plugin. Gehe zurück zur Startseite, indem du oben links auf den Haus-Button klickst und gehe in den Community-Bereich. Ich möchte ein Flussdiagramm einrichten, also tippe ich Flow ein und suche nach Plugins. Es gibt viele großartige, aber im Moment werde ich einen Draw-Connector verwenden. Klicken Sie auf Installieren. Lasst uns nun wieder in den Anfang unserer Datei springen, die noch geöffnet ist. Im Menü und beachte, dass es das Browser-Menü ist, wähle ich jetzt Plugins aus und aktiviere das gerade installierte. Sie sehen ein Fenster , das Ihnen sagt , was zu tun ist und wie Sie das Plugin verwenden. Wir möchten den Button mit dem neuen Bildschirm verbinden. Also wähle ich eine Schaltfläche aus , auf die geklickt wird, halte die Umschalttaste gedrückt und wähle das Ziel aus. Fertig. Die Bereiche sind jetzt am Rahmen geklebt. Wenn du den Rahmen bewegst, bewegen sie sich damit. diesem speziellen Plugin können Sie auch entscheiden , wo Sie dies verbinden möchten, um an die Frames anzudocken. Verbinden wir sie alle. Es gibt viele verschiedene Plugins für Flows und vorgefertigte Wireframes. Fühlen Sie sich frei zu erkunden und herauszufinden, was für Sie das Richtige ist. Jeder der Fehler erstellt einen Layer auf der Registerkarte „Layer“. Sie können sie auch alle gruppieren und dann ein- und ausschalten. 21. 0120 Figma Community Community: Richten wir unseren Kalenderbildschirm ein. Jetzt können wir alles von Hand einrichten, oder wir könnten ein vorgefertigtes verwenden, das jemand anderes nett genug war, um es mit uns zu teilen. Gehen wir zum Figma-Community-Bereich. Gehe zum Home-Icon und wähle Community aus. Der Figma-Community-Bereich ist ein Bereich, in dem die Schöpfer ihre Figma-Arbeit teilen können. Sie können Plugins, Designdateien, Wireframes, Wireframe-Systeme, Illustrationen, Icons und alles suchen Designdateien, Wireframes, Wireframe-Systeme, . Wir suchen im Kalender nach unseren Wireframes, und Sie werden eine Vielzahl von Dateien sehen. Dieser hier von Felipe Dolce sieht einfach perfekt aus. Klicken Sie darauf und Sie erhalten eine Vorschau. Sobald es geladen ist, können Sie die verschiedenen Seiten in der Datei sehen. Lassen Sie es uns duplizieren. Nach einer kurzen Ladezeit sehen Sie eine identische Kopie der Datei in Ihrem Figma-Konto. Ich kann jetzt auf alle Elemente zugreifen. Wählen wir Kalender aus, drücken Sie zum Kopieren Befehl C und springen wir mit unserer Arbeitsdatei zurück nach oben. Wählen Sie den rechten Rahmen aus und fügen Sie den Kalender mit Befehl V ein. Der lila Umriss sagt mir, dass dies eine Variante ist und sich die Hauptkomponente noch in der Originaldatei befindet. Ich möchte es an meine Bedürfnisse anpassen, also löse ich es ab. Ich kann jetzt alle Änderungen vornehmen, die ich will. Ich entferne die Hintergrundfüllungen, die Muster und andere Elemente, die ich nicht möchte. Ich richte die Textilien und Farben nach meinen Bedürfnissen ein und kann die Größe ändern. Ich werde das zu einer Komponente machen. Diese Komponente befindet sich später auf meiner Komponentenseite, also fülle ich meinen Frame mit Instanzen. Lassen Sie uns die Instanzen anordnen und die Namen des Monats ändern. Ja, ich müsste die Daten für jeden Monat anpassen, aber im Moment lasse ich es im Drahtgitter einfach so. Ich werde noch ein paar Stimmungen hinzufügen und den Tag mit einem Kreis markieren. Stellen wir auch sicher, dass wir in der aktuellen Woche verschiedene Stimmungen haben. Da dies im Grunde die Woche ist, die oben auf dem Startbildschirm angezeigt wird . Jetzt muss ich nur noch den Header anpassen und die verschiedenen Wochentage hinzufügen. Jetzt, da mir alles gefällt, wähle ich die Komponente aus und sende sie an meine Komponentenseite. Wenn ich zu Komponenten springe, kann ich es mit dem Rest arrangieren. 22. Hinweis: Bevor wir mit dem Autolayout beginnen: In letzter Zeit wurde das Auto-Layout aktualisiert Das Menü sieht jetzt etwas anders aus, enthält jedoch dieselben Funktionen wie Zeilenabstand, Abstand und Richtung. Die Größenänderungsoption, die zuvor unter dem Menü Autolayout gefunden wurde, wurde jetzt jedoch die zuvor unter dem Menü Autolayout gefunden wurde nach oben in das Rahmenmenü verschoben. Dies war nur eine Änderung der Position. Es hat immer noch die gleichen Optionen und funktioniert genauso. Sie können weiterhin den Tutorials zum Ändern der Größenänderung folgen. Stellen Sie einfach sicher, dass Sie die Größenänderungsoptionen von der neuen Position hier oben aus aktivieren . Ich habe am Ende auch ein Update-Video hinzugefügt. Ursache. Dies bietet einen Überblick über alle neuen Funktionen für das automatische Layout , die jedoch mehr vom erweiterten Menü betreffen. Wenn Sie noch ein Anfänger in Figma sind, dann machen Sie sich darüber jetzt keine allzu großen Sorgen. Wenn Sie bereit sind, etwas tiefer in das neue Auto-Layout und das Responsive Webdesign mit Figma einzutauchen, werfen Sie einen Blick auf die Deep-Dive-Klasse für Responsive Design mit Figma , die diese Themen eingehend. 23. 0121 Auto: Auto-Layout ist eine Eigenschaft, die Sie zu Frames und Komponenten hinzufügen können. Es hilft Ihnen, Designs zu erstellen , die sich an diesen Inhalt anpassen. Auto-Layout ist sehr leistungsfähig und kann für verschiedene Szenarien verwendet werden. Es braucht jedoch ziemlich viel Übung. Ich zeige dir heute die Grundlagen. Das einfachste und beste Beispiel für das automatische Layout ist eine Schaltfläche. Tippe etwas und mache es dann in einen Rahmen. Sie können dies tun, indem Sie die Verknüpfung Befehl Alt und G verwenden. Sie können auch einfach einen Rahmen zeichnen und einen Text darin schreiben. Es wird genau genauso funktionieren. Ich füge eine Hintergrundfarbe hinzu, damit wir sie besser sehen können. Wählen Sie dann im Eigenschaftenfenster auf der rechten Seite die Option Auto-Layout aus . Lassen Sie uns etwas Polsterung hinzufügen. Sie können dafür das Auffüllmenü für automatische Layouts verwenden. Sie können entweder einen Wert für alle Polsterungen hinzufügen oder auf das kleine Quadrat klicken und einen Wert für oben, links, rechts und unten einzeln auswählen . Jetzt lasst uns die Ecken umrunden. Wenn wir jetzt den Inhalt des Musters ändern, wird alles gut skaliert und respektiert trotzdem die Polsterung, die wir gesetzt haben. Sie können dies zu einer Komponente machen und haben die perfekten Knöpfe in Ihrem gesamten Design. Das scheint ziemlich einfach zu sein, die Magie passiert genau hier im Eigenschaftenfenster der rechten Seite im Re-Sizing-Menü. Beachten Sie, dass alles zum automatischen Layout selbst erstellt werden soll, sowie der Inhalt darauf eingestellt ist, Inhalte zu hacken. Wenn wir dies ändern und sagen wir unseren äußeren Container auf feste Breite und das Innere auf den vollen Container setzen würden , hätten wir ein ganz anderes Verhalten. Beachten Sie auch, dass das Auto-Layout horizontal oder vertikal funktionieren kann . Was wie ein paar Möglichkeiten scheint, öffnet sich tatsächlich und viele Verhaltensmöglichkeiten. Es kann ziemlich überwältigend werden. Ich empfehle Ihnen, das automatische Layout für kleinere Elemente wie Schaltflächen oder einfache Karten zu verwenden automatische Layout für kleinere Elemente . Dann arbeite dich nach und nach hinein. Einschränkungen und Auto-Layout sind wahrscheinlich die schwierigsten Themen in Figma. 24. 0122 Nested Auto – Eine Nested Card erstellen: Der letzte Teil unseres Drahtgitters, den wir erstellen müssen, ist der blockierte Bildschirm. Dies besteht im Wesentlichen aus einer Komponente, bei der es sich eine Karte mit einer Bildbeschriftung handelt, sowie aus einem Vorschautext. Ich zeichne zunächst einen Rahmen als Kartencontainer. Ich füge ein bisschen Rand nach links und rechts hinzu. Dann füge ich eine Rechteckform hinzu, die der Platzhalter für das Bild ist, sowie eine Beschriftung, eine Überschrift. Ich füge einen Platzhaltertext hinzu , der meine Vorschau sein wird. Lassen Sie uns sicher, dass es unseren Stilen zugeordnet und gut ausgerichtet ist. Ich kann das jetzt zu einer Komponente machen und wiederverwenden. Aber meine Überschrift im Vorschautext ist möglicherweise nicht immer gleich lang. Meine Box wird entweder zu lang oder zu kurz sein. Es wird Entfernungen nicht respektieren. Wenden wir das automatische Layout auf unsere Karte an. Wenn ich die ganze Karte in ein automatisches Layout mache, passt sich mein Text jetzt an, aber mein gesamtes Padding ist verloren. Wenn ich das automatische Layout-Padding anwende, würde es für den gesamten Inhalt einschließlich meines Bildes verwendet werden, was ich nicht will. Sie können jedoch das automatische Layout verschachteln. Ich wähle zuerst meinen gesamten Text aus, gruppiere ihn und stelle sicher, dass er gruppiert ist, sonst funktioniert er nicht, und mache ihn dann in ein automatisches Layout in meinem automatischen Layout. Ich kann jetzt das Auto-Layout-Padding nur für diese separate Box anpassen . Beachten Sie jedoch, dass sich mein Text nicht über die gesamte Breite erstreckt. Wenn ich etwas tippe, verbraucht es nicht die ganze Box, das will ich nicht. Was ich tun muss, ist meine Größenanpassungseinstellungen anzupassen, und ich setze sie so ein, dass sie in diesem Fall den Container füllen. Es wird jetzt den gesamten verfügbaren Speicherplatz verbrauchen und trotzdem die Polsterung respektieren, die ich eingestellt habe. Wenn Sie damit Probleme haben, stellen Sie sicher, dass Ihre Größe immer noch auf ihren Inhalt eingestellt ist. Überprüfen Sie immer , ob Ihr Text als solcher in den Texteinstellungen auf automatische Höhe eingestellt ist. Dies ist normalerweise die Ursache für einen Fehler, wenn er nicht funktioniert. Meine Karte funktioniert einwandfrei, wenn ich den Inhalt ändere, aber ich möchte dir noch ein bisschen mehr zeigen. Setzen Sie meinen Container auf feste Breite und die Höhe, um Inhalte zu umarmen. Jetzt können Sie die Größe besser ändern. Wenn Sie Probleme haben, dass dies funktioniert. Stellen Sie sicher, dass die Kinder in diesem Container noch einmal die richtige Einstellung haben. Wir sind immer noch nicht fertig mit Auto-Layout-Magie. Ich werde das zu einer Komponente machen, wir werden jetzt Instanzen erstellen die ich in meinem Frame verteilen werde. Jetzt wähle ich meine Instanzen aus, gruppiere sie und mache sie noch in ein anderes automatisches Layout. Stellen Sie sicher, dass die Größenänderung so eingestellt ist, wie Sie es möchten, und ich kann jetzt die Abstände zwischen ihnen einstellen, und ich kann den gesamten Inhalt ändern, und alles passt sich perfekt an. 25. 0123 Abschließen unseres Wireframe: Jetzt müssen wir nur noch die einzelne Artikelseite zu unserem Drahtgitter hinzufügen . Aus jedem meiner Codes, die ich zuvor erstellt habe, wähle ich einfach das Bild, die Bildunterschrift, die Überschrift und einen Vorschautext aus und kopiere es. Ich wähle jetzt den Rahmen aus, in dem der einzelne Artikel angezeigt werden soll , und wir kopieren ihn hier. Ich ordne es so an, wie ich es möchte und füge meinen Text hier ein. Ich werde auch sicherstellen, dass ich den Header entsprechend anpasse. Ich gehe tatsächlich zurück zu meiner Übersichtsseite, wo ich die Filter zum Header hinzufügen möchte. Anstatt nur den Header zu vergrößern, ist es sinnvoller, einen separaten Abschnitt zu erstellen , den ich einfach an meinen Haupt-Header andocken werde . Ich erstelle einen Frame, in dem ich meine Filter hinzufüge , und um dann den aktiven , nämlich alle Artikel, anzuzeigen , nämlich alle Artikel, füge ich einfach einen Strich für mein Drahtmodell hinzu. Jetzt ist der Vorteil, dass dies getrennt ist, dass der Header eine Komponente sein könnte, und dann füge ich einfach eine Komponente hinzu, die ich den Header erweitern möchte. Zum Beispiel könnten meine Wochentage, die ich in meinem Kalender habe, auch ein solcher Anhang sein. Ich wechsle zu Fehlern für meinen Flow wieder und stelle sicher, dass ich auch meine Artikel verlinkt habe. Beachten Sie, dass dies hier eine wirklich vereinfachte Version über ein Wireframe im Flow über ein Wireframe im Flow ist, da wir uns wirklich darauf konzentrieren, Figma in diesem Kurs zu lernen. Normalerweise würden Sie viel mehr Informationen hinzufügen, z. B. um welche Interaktion es sich handelt, wäre es ein Klick, wäre es ein Wischen, was im Fehlerfall passiert ist, welche anderen Verbindungen auftreten könnten da, was passiert, wenn ich in die Vergangenheit zurückgehe und so weiter? Es könnte so aussehen. Stellen wir auch sicher, dass unsere Komponentenseite in Styles einen eigenen Abschnitt nur für unsere Wireframes hat einen eigenen Abschnitt nur für , und stellen Sie sicher , dass Sie alles auf ihren eigenen Rahmen stellen. Wenn Sie sich dann im Assets-Panel befinden, werden Sie sehen, wie es für Sie gut sortiert wurde. 26. 0124 Organisieren unserer Datei, um das UI-Design zu starten: Wir haben unsere Wireframes fertiggestellt und beginnen mit der Arbeit am UI-Design. Dafür erstelle ich eine neue Seite, die ich UI Design aufrufe. Sie können Wireframe und Design in einer Datei haben, aber für größere Projekte können Sie auch zwei separate Dateien haben, was Ihnen überlassen ist. Wenn Sie an dem kostenlosen Tarif arbeiten, beachten Sie auch, dass Sie über ein Limit an Dateien verfügen, die Sie haben können, sowie Seiten in Dateien. Sie können den Kapiteln auch Symbole hinzufügen, wenn Sie möchten. Drücken Sie auf einem Mac einfach die Steuerbefehl und die Leertaste. Unter Windows müssen Sie die Touch-Tastatur aktivieren, mit der rechten Maustaste auf die Windows-Taskleiste klicken und auf die Schaltfläche Touch-Tastatur anzeigen klicken, dann können Sie Emojis auswählen. Ich werde meiner Übersichtsseite „Komponenten & Stile“ auch etwas Struktur hinzufügen . Auch hier könnten Sie das alles in separaten Dateien haben, das wäre tatsächlich eine gute Praxis. Sie können dies nach Ihren Wünschen einrichten. Normalerweise richte ich einen Abschnitt für die Dateibehandlung ein, daher habe ich hier Schlagzeilen, Informationen, irgendetwas über ein Verhalten und Kommentare, die ich zu der Datei machen möchte. Ich habe dann meine anderen Abschnitte für Wireframes und später mein UI-Design. Ich mag auch ein Ampelsystem , um den Zustand jedes Elements anzuzeigen. Alle zusätzlichen Informationen, die ich später haben werde, wie Links oder Teammitglieder, könnte ich später auch in das System einsetzen. So sieht meine Organisation aus, aber passen Sie dies absolut frei, dies an Ihre Bedürfnisse anzupassen. 27. 0125 Rahmengröße: Eine häufige Frage beim Einrichten von Designs in Figma ist, welche Rahmengröße sollte ich verwenden? Es gibt im Allgemeinen keine falsche Rahmengröße , um Ihr Design in Figma zu starten. In einer perfekten Welt sollten Sie Ihr Design sowieso ansprechend machen und auf verschiedenen Bildschirmgrößen getestet werden. Sie sollten jedoch die gleiche Master-Größe für alle Bildschirme verwenden die gleiche Master-Größe für , die Sie entwerfen, wie einen ersten Ausgangspunkt und Referenz, die Sie und der Rest des Teams vereinbart haben. Es gibt verschiedene Aspekte, die Sie dazu bringen können, sich für die Bildschirmgröße zu entscheiden. Erstens haben Sie gültige Daten wie Google Analytics einer früheren Website, dass dies die beliebteste Bildschirm - oder Gerätegröße bei Ihren Nutzern ist . Zweitens beginnen Sie mit der kleinsten Größe, da es einfacher ist, nach oben zu skalieren als zu skalieren. Dies ist ein sehr beliebter Ansatz und dies ist auch sehr sinnvoll, da Ihr Code oft auch auf diese Weise geschrieben wird. Es heißt „Mobile First“ -Ansatz. Drittens verwenden Sie das derzeit beliebteste Gerät oder die Bildschirmgröße, die auf dem Markt verwendet wird. Der Markt könnte hiermit ein globaler Markt oder ein Zielmarkt sein, wie in der Demografie oder im Land. Sie können online nach diesen Zahlen suchen. Es gibt eine Vielzahl von Seiten, die Ihnen diese Statistiken geben. Viertens, Sie verwenden das neueste Modell, das veröffentlicht wurde. Wenn Sie beispielsweise eine iOS-App entwerfen, verwenden Sie die Bildschirmgröße des neuesten Apple-Geräts auf dem Markt. Figma stellt sie normalerweise automatisch im Frames Menü zur Verfügung. Dies beruht auf der Annahme, dass der Markt natürlich dazu hineinwachsen wird, wie wir beispielsweise bei größeren und größeren Telefonbildschirmen in den letzten Jahren gesehen haben bei größeren und größeren Telefonbildschirmen . Sie würden natürlich immer noch testen und sicherstellen, dass Ihr Design über alle anderen Größen hinweg gut funktioniert. Fünftens mag das etwas merkwürdig sein, aber manchmal, insbesondere in einem kleinen freiberuflichen Projekt, könnte es sinnvoll sein, das Gerät zu verwenden, das Sie zur Hand haben und für die Präsentation und das Testen verwenden würden, also zum Beispiel das Telefon, Sie Ihren Prototyp zeigen würden. Offensichtlich sollte das eine Standardmarktgröße sein und relativ aktuell sein. Frames können immer angepasst werden, aber es ist schön, einfach am rechten Fuß zu beginnen, also diskutieren Sie am besten mit Ihrem Team und Ihren Entwicklern, um sicherzustellen, dass Sie alle ausgerichtet sind. 28. 0126 Raster einrichten in Figma: Fügen wir unserem Frame ein Raster hinzu. Um ein Raster hinzuzufügen, wählen Sie einen Rahmen aus und klicken Sie auf das Plus-Symbol im rechten Eigenschaftenfenster unter Layoutraster. Ihr Raster wird immer die gleichen Entfernungen haben, die Sie in Ihrem Nudging festgelegt haben. In meinem Fall sind das acht, und standardmäßig haben Sie vielleicht 10 hier. Die meiste Zeit brauchen wir kein Hintergrundraster wie dieses, aber was wir suchen, ist ein Layout-Raster. Klicken Sie auf das Rastersymbol und wählen Sie im Dropdown-Menü Spalten aus. Jetzt können wir unser Raster einstellen. Mit count können Sie die Anzahl der Spalten anpassen. Die Farbe und Deckkraft hier sind für Ihr Design nicht relevant , da wir es nur zum Layouten ein- und ausschalten. Dann musst du section eingeben. Center bedeutet, dass Sie einen festen Behälter haben, Ihr Design enthält, der aus Säulen und Rinnen mit fester Breite besteht. Wenn Sie die Größe ändern, bleibt Ihr Raster in der Mitte. Die andere Einstellung, die Sie benötigen, ist Strecken. Dies ist derjenige, den ich empfehlen würde für Ihr mobiles Setup im Allgemeinen zu verwenden. Das Raster erstreckt sich auf die Breite des Bildschirms und die Spalten werden automatisch berechnet. Es kann immer noch etwas Rinne und einen äußeren Rand hinzufügen. Links und rechts können sie vorerst sicher ignoriert werden. Raster sind ein wichtiges, komplexes Thema, wenn es um den Umgang mit ansprechendem Webdesign geht . Für unser App-Design verwenden wir jedoch nur ein Raster als Hauptcontainer und legen unsere automatische Marge fest. Sie könnten immer noch weitere Spalten wie zwei oder vier hinzufügen , um Ihren Bildschirm weiter zu teilen , wenn Ihnen dies hilfreich ist . Sie können die Note als Stil speichern, genau wie Farben und Typografie. Klicken Sie in Layoutrastern auf das Stilikon, klicken Sie auf Plus und benennen Sie Ihr Raster. Sie können diesen Stil jetzt auf jeden anderen Frame anwenden. Wenn Sie Ihren Rasterstil ändern, wird dies in jedem Frame widergespiegelt, in dem er verwendet wird. Um die Sichtbarkeit Ihres Rasters umzuschalten, drücken Sie Control G 29. 0127 Farbstile und Naming: Lassen Sie uns die Farben für unser UI-Design hinzufügen. auf meinen Drahtrahmen zurückblicke, möchte ich, dass die Tasten ein erweitertes Ampelsystem sind. Ich möchte, dass sie rot, orange, blau und grün sind. Ich füge auch etwas Dunkelgrau für meine Texte und eine sanfte Hintergrundfarbe hinzu. Gehen wir zurück in unseren Bereich Komponenten und Stil und richten Sie einige Farbstile ein. Ich richte zuerst die Farben für meine Stimmungen ein. Ich zeichne vier Kreise und fülle sie mit Rot, Orange, Blau und Grün. Sie können Farben auswählen, indem Sie entweder einen Hex-Code hinzufügen, aus der Farbübersicht aus der Farbübersicht auswählen oder sie auch aus einem Bild mit Ihrer Farbauswahl auswählen. Ich werde dann meine neue Wahl auf die gleiche Weise einrichten. Ich werde ein dunkelgraues, fast schwarzes und ein helleres haben , eine hellgraue Basis, die nur für meinen Hintergrund etwas dynamischeres und ein einfaches Weiß hinzufügt . Ich speichere sie jetzt als Styles und nenne sie. Beachten Sie, ich nenne sie nicht rot, orange, blau usw., aber ich nenne sie nach ihrer Funktion. Bei einigen Designs könnte dies eine Highlight-Farbe sein. In diesem Fall ist dies die Stimmung, auf die ich mich beziehe, so traurig, so gut und großartig. Für meine Hintergrund - und Textfarben nenne ich sie Neutrale und füge eine Farbe hinzu, 800.700.200 und 0. Jetzt fragst du dich vielleicht, warum ich das getan habe. Dies liegt daran, dass ich, wenn ich die Farbe während des Entwurfsprozesses geändert habe, nicht umbenennen muss. Die Zahlen sind da , um genug Platz zu lassen. Zwischen 200 und 700 könnte ich zum Beispiel viele Farbtöne hinzufügen , ohne meine Benennung zu vermasseln. Du könntest auch 10,20 und 30 benutzen. Versuchen Sie einfach, 1,2,3 zu vermeiden , da es Ihnen dazwischen keinen Platz gibt. Wenn ich auf den Canvas-Hintergrund klicke, sehe ich jetzt alle meine neuen Farbstile. Ich habe jedoch keine Forward-Benennungskonvention verwendet , um eine Kategorie zu erstellen. Das kann ich immer noch hier machen. Wenn ich alle gewünschten Farben auswähle, gruppiere sie, dann wird ein Abschnitt erstellt , den ich benennen kann. Ich kann sie innerhalb dieser Gruppe weiter gruppieren, und ich kann auch Farben zwischen Gruppen verschieben. 30. 0128 Einrichten eines Typescale: Für unser Design muss die Topographie etwas raffinierter sein als für Drahtgitter. Es ist wirklich wichtig, einen festgelegten Typmaßstab zu haben , um eine Hierarchie in Ihrem Design zu erstellen. Es gibt verschiedene Techniken, um dies zu erreichen und zu erreichen. Während ich hier eine iOS-App einrichten werde, verwende ich einige Voreinstellungen, die Apple mir im Design der menschlichen Schnittstelle zur Verfügung stellt. Unter iOS können wir etwas verwenden, das als dynamischer Typ bezeichnet wird. Das bedeutet, dass jedes unserer Textilien einem dynamischen Textil entspricht. Sie können sich vorstellen, dass Ihr Stil im Grunde genommen mit diesem Tag verknüpft ist . Der Vorteil ist, dass der Benutzer später die Standardtextgröße ändern kann und sich alles automatisch anpasst. müssen Sie sich in Ihrem Design keine Sorgen machen. Ich habe ein paar der Stile ausgewählt, die ich verwenden möchte, und alle Informationen in meinem Figma-Stylesheet kopiert. Ich füge jetzt Beispieltext hinzu und style ihn mit den angegebenen Parametern. Wir könnten jetzt Apples integrierte Systemschriftarten verwenden. Sie können sie von der Website des Apple-Entwicklers sehen und herunterladen der Website des Apple-Entwicklers oder Ihre eigene benutzerdefinierte Schriftart verwenden, was ich tun werde. Sobald ich alle gewünschten Stile eingerichtet habe, benenne ich sie nach dem von mir gewählten dynamischen Typnamen und wir speichern sie als Styles in meiner Figma-Datei. Sie können auch Ihre eigene Typenwaage einrichten , wenn Ihr Design mehr Flexibilität benötigt. Sie in jedem Fall mit Ihren Entwicklern, Sprechen Sie in jedem Fall mit Ihren Entwicklern, wenn festgelegte Anforderungen vorliegen oder wenn sie ein bestimmtes System verwenden. Falls Sie eine reaktionsschnelle Website entwerfen, müssen Sie eine Responsive Typ-Skala entsprechend Ihren Haltepunkten einrichten . Sie würden mit einer Basisgröße für Ihre mobile Version beginnen einer Basisgröße für Ihre mobile Version und dann bei Bedarf für jeden Haltepunkt die Topographie anpassen. reaktionsschnelle Topographie für das Web ist ein ziemlich fortgeschrittenes und komplexeres Thema und dazu gibt es einen ganz separaten neuen Lernkurs. In dieser Übung erstellen wir keine Website, sondern eine App. Lass uns mit unseren iOS-Größen gehen. Übrigens habe ich das alles offensichtlich vorher vorbereitet. In einem neuen und laufenden Projekt probiere ich normalerweise zuerst verschiedene Schriftgrößen, Wades , Farben usw. in meinem Beispieldesign aus, und sobald es mir gefällt, habe ich alle Stile eingerichtet. Oft ändere ich sie während des Prozesses immer noch ziemlich. Keine Sorge, es wird ein bisschen dauern und am Anfang wird es chaotisch sein. Das ist absolut normal. Zuerst Kreativität, dann strukturieren. 31. 0129 Bilder in Figma: Wenn Sie Bilder in Figma verwenden, reicht es normalerweise aus, wenn Sie sie in Ihrem Design verwenden. Sie müssen keinen eigenen Stil für Bilder einrichten . Ich richte jedoch gerne ein Blatt ein, das den allgemeinen Bildstil sowie die Dimensionen beschreibt den allgemeinen Bildstil sowie , die ich im Allgemeinen verwende. Es gibt mehrere Möglichkeiten, Ihrer Datei ein Bild hinzuzufügen. Sie können entweder ein Bild über das Menü importieren oder die Verknüpfung Umschalttaste oder Windows Control und K verwenden die Verknüpfung Umschalttaste oder Windows Control und . Sie können auch mehrere Bilder importieren. Wählen Sie die Bilder aus, und Sie sehen die an Ihren Cursor angehängten Bilder mit einer kleinen roten Blase die Ihnen den Umfang des Imports anzeigt, sowie eine Vorschau des ersten zu platzierenden Bildes. Du kannst sie auf den Canvas fallen lassen. Sie können klicken und zeichnen, um sie in einer bestimmten Größe hinzuzufügen , oder Sie können sie direkt in eine beliebige Form legen. Sie können Bilder auch einfach per Drag & Drop in Ihr Design ziehen oder kopieren und einfügen. Figma unterstützt statische Bilder wie JPEGs und PNGs sowie animierte GIFs. Sie werden die Animation Ihres GIF in Ihrem Entwurfsmodus nicht sehen , aber sie wird später im Präsentationsmodus angezeigt. Sobald Sie Ihre Bilder in Figma haben, können Sie sie mit einem Fotobearbeitungswerkzeug ändern. Es ist jedoch eher eine schnelle Bearbeitung wie Belichtung und Kontrast. Es ist kein Fotobearbeitungswerkzeug wie Photoshop. Sie können auch wählen, wie das Bild innerhalb der gegebenen Form verhält. Standardmäßig füllen Fotos eine beliebige Form aus. Das bedeutet, dass es sich durch die volle Breite ausdehnen wird. Wenn Sie sich für die Passform entscheiden, stellen Sie sicher , dass Sie das gesamte Bild sehen. Dies kann jedoch zu Leerzeichen führen. Mit dem Zuschneiden können Sie den sichtbaren Bereich auf Ihre Bedürfnisse zuschneiden und auch auswählen , welcher Teil des Bildes angezeigt wird. Tile wird das erstellen, was Sie es erraten haben, eine Kachel. Dies ist eher für Muster. Übrigens können Sie Bilder auch als Füll- oder Strichstil speichern , wie Ihre Farben. 32. 0130 Responsive Layouts mit Einschränkungen: Wir möchten, dass unser Design flexibel und reaktionsschnell ist, um sich an verschiedene Bildschirmgrößen anzupassen. Hier kommen Beschränkungen ins Spiel. Mal sehen, wie sie funktionieren. Ich möchte das UI-Design für meinen Startbildschirm einrichten und habe das Drahtgitter als Referenz kopiert. Wenn ich die Größe ändere, passiert nicht viel. Lassen Sie uns unser UI-Design einrichten und beginnen wir mit einer Statusleiste, da wir möchten, dass dies so realistisch wie möglich aussieht. Ich gehe zum Community-Bereich und suche nach der iOS-Statusleiste. Ich hole mir einen und kopiere ihn in meine Akte. Nun merke, wie wenn ich die Größe dieser Bar ändere, alles an seinem Platz bleibt. Wenn ich auf die Uhrzeit klicke, sehen Sie die kleinen blauen Striche, die links und oben angebracht sind, und im Eigenschaftenfenster sehen wir die Beschränkungen, die oben und links festgelegt sind. Wenn wir auf die anderen Elemente auf der anderen Seite klicken, sehen wir, dass dasselbe auf der rechten Seite eingestellt ist. Sie können diese Einstellung ändern, indem Sie entweder auf ein Diagramm klicken oder über das Dropdown-Menü. Wenn ich die Batterie nehmen würde, bewege sie in die Mitte und setze sie in die Mitte, sie würde genau in der Mitte bleiben. Wenn ich es auf Skalierung eingestellt hätte, würde es sich mit dem Rahmen dehnen. Wir möchten jedoch, dass dies auf unseren übergeordneten Frame reagiert, den Rahmen, der unseren Bildschirm darstellt. Das passiert noch nicht. Was wir tun müssen, ist, den Statusleisten-Frame selbst zu nehmen und diesen auf Skalierung zu setzen. Wenn wir es jetzt im Rahmen positionieren und die Größe des Rahmens ändern, können wir sehen, dass er gut skaliert wird. Es gibt eine andere Einstellung namens links und rechts, die sich als nützlich erweist. Der Unterschied zwischen links und rechts und Skalierung ist der folgende. Wenn ich ein Element zum Skalieren setze, wird die Größe als Prozentsatz der Frame-Dimensionen geändert. Wenn ich das gleiche Element jetzt auf links und rechts setze, behält es die Ebenengröße relativ zu beiden Seiten des Rahmens bei. Dies ist viel praktischer, wenn Sie einen festen Rand haben oder ein Element an eine Spaltenbreite Ihres Rasters binden möchten. Ich zeichne einen weiteren Rahmen für den Header, kopiere meine Links und ändere sie in meine neuen Texte und Farbstile. Lassen Sie mich dem Hintergrund auch eine leichte Tönung geben. Ich werde jetzt Beschränkungen für das Kind sowie scheinbare Elemente festlegen . Ich füge einfach einen einfachen Container als Fußzeile hinzu. Bei diesem möchte ich unten bleiben. Ich benutze jetzt einen kleinen Trick. Im Eigenschaftenbedienfeld unter Frames, ein wenig versteckt, kann ich jede andere Rahmengröße auswählen, damit ich zum kleinsten iPhone springen werde, das gerade verfügbar ist, nämlich das SE, und ich werde die Größe des gesamten Rahmens ändern. Auf diese Weise kann ich jede andere Gerätegröße realistisch überprüfen. Ich mache sie jetzt alle in Komponenten und speichere sie auf meiner Komponentenseite. Wenn ich sie kopiere, muss ich möglicherweise die Einstellung des übergeordneten Containers neu einstellen, da sie in einen neuen Frame gesetzt ist. Beachten Sie, dass Sie ein übergeordnetes Frame benötigen, damit das Fenster „Beschränkungen“ angezeigt wird. Das automatische Layout müsste auch in eine übergeordnete Gruppe eingefügt werden , um arbeiten zu können. 33. 0131 Boolean Operationen in Figma: Ich erstelle jetzt eine Stimmungsknöpfe unseres Designs. Ich mache das von Grund auf neu, da ich dem etwas anders begegnen möchte . Ich beginne mit einem Kreis und von meinen Stilen in meinem Füllmenü habe ich eine Farbe für traurig ausgewählt. Jetzt will ich etwas mehr Tiefe. Ich dupliziere den Kreis direkt oben auf dem Kreis und nenne diesen Ebenenschatten. Ich ändere die Farbe in eine dunkle und ändere die Deckkraft auf 10. Denken Sie daran, dass Sie einfach die Zahlen auf Ihrer Tastatur verwenden können. Ich dupliziere es jetzt noch einmal und verschiebe es ein wenig, also habe ich eine Überlappung. Jetzt wähle ich beide Schattenebenen und wähle im Menü „Oben“ Option Auswahl subtrahieren aus. Diese Operationen werden als boolesche Operationen bezeichnet. Sie können zwischen Vereinigung wählen, um Formen zu vereinen, Formen voneinander zu subtrahieren und sich zu schneiden, was Ihnen nur die überlappenden Teile hinterlassen Ihnen nur die überlappenden Teile und ausschließen würde, was die Rückseite von kreuzen sich. Jetzt muss ich nur noch das Gesicht zeichnen. Ich zeichne das linke Auge mit zwei Kreisen. Ich gruppiere sie und nenne es „Augen-links“. Ich werde es jetzt duplizieren und ein zweites Auge erschaffen, und ich nenne das Auge rechts. Jetzt füge ich einen Mund hinzu. Anstatt es zu zeichnen, füge ich einfach einen Kreis hinzu, fülle ihn in einer dunklen Farbe für meine Stile und drücke dann „Umschalt X“, was die Verknüpfung zum Umkehren von Farben ist. Jetzt doppelklicke ich darauf, was mich in den Bearbeitungsmodus bringt, und ich lösche einen der Ankerpunkte, um meinen traurigen Mund zu erzeugen. Ich kann jetzt die Kanten abrunden, den Strich anpassen und ich nenne ihn Mund. Unser Gesicht ist fertig. Wählen Sie nun das ganze Gesicht aus und gruppieren Sie es und nennen Sie es. Ich werde es jetzt noch drei Mal duplizieren und die Kopien umbenennen. Ich werde mich jetzt an die Farbe und die Gesichter der verschiedenen Knöpfe anpassen . Mein gelber, ich werde einfach den Mund in einen Schlag verwandeln und die Augen ein wenig bewegen. Der blaue, der den Mund verdreht, dann wieder das Gesicht neu anordnen. Mein grüner, eigentlich verbinde ich die Wege, damit ich einen lachenden Mund schaffen und mich dann anpassen kann . Sobald ich fertig bin, wähle ich alle Schaltflächen aus und mache sie zu einer Gruppe. Jetzt kopiere ich einfach meinen Text und passe ihn mit meinen neuen Farben und Stilen an. Ich werde eine weitere Gruppe mit meiner Button-Gruppe und meinem Text erstellen und ihn als Inhalt bezeichnen. Jetzt muss ich nur noch meine Einschränkungen hinzufügen und sicherstellen , dass es bei anderen Größen gut funktioniert. 34. 0132 Nested Komponenten und Varianten: Ich erstelle jetzt eine Tab-Leiste und stelle Ihnen ein großartiges Konzept vor, das Varianz genannt wird. Dieses Mal springe ich direkt in meinen Komponentenbereich. Ich habe bereits einen Rahmen für meine Fußzeile erstellt und möchte jetzt die Icons hinzufügen. Ich habe über ein Haus, einen Kalender und ein Buch aus einem Icon-Set kopiert . Um Icons zu erhalten, können Sie sie entweder selbst zeichnen, wie wir es gerade mit unseren Gesichtstasten getan haben, oder Sie können vorgefertigte Symbole verwenden. Wenn du zum Figma-Community-Bereich springst, wirst du viel finden. Versuchen Sie, nach etwas wie dem Materialdesign-Symbol zu suchen, dem es sich um fertige Bibliotheken handelt, oder kaufen Sie ein gutes Icon-Set, es ist Ihr Geld wirklich wert. Ich persönlich benutze dieses gerne. Beachten Sie, dass die Symbole Vektoren sind, was bedeutet, dass sie beliebig skaliert werden können , ohne an Qualität zu verlieren. Es ist wirklich wichtig, dass Ihre Icons im Vektorformat und nicht in Bildern vorliegen. Ich habe meine Icons Icon/Zuhause/Inaktiv und dann Icon/Kalender/Inaktiv für den Blog benannt Icon/Zuhause/Inaktiv und dann . Ich wähle jetzt diese Symbole aus, mache eine Kopie und passe die Farbe auf eine aktive Version an. Ich werde dann sicherstellen, dass das Inaktive im Namen auf aktiv geändert wird. Ich wähle jetzt alle aus und mache sie zu Komponenten. Stellen Sie sicher, dass jedes Symbol eine eigene Komponente ist. Das ist wirklich wichtig, sonst funktioniert es nicht. Wählen Sie nun alle aus und wählen Sie aus dem Eigenschaftenfenster die Kombination als Abweichung aus. Sie sehen jetzt eine kleine violette Linie um sie herum , die darauf hinweist, dass sie Teil eines Komponentensatzes sind. Wenn wir zum Assets-Panel gehen, können wir sehen, dass nur ein Symbol gespeichert wurde. Ziehen wir es als Instanz heraus und legen es in unsere Tab-Leiste. Jetzt duplizieren wir es und positionieren es so, wie wir es wollten. Auf der rechten Seite des Eigenschaftenfensters sehen Sie jetzt einige Dropdowns für Ihre Varianz namens Eigenschaft 1 und Eigenschaft 2. Mit Eigenschaft 1 kann ich den Symboltyp ändern. Eigenschaft 2, lassen Sie mich zwischen inaktiv und aktiv wählen. Beachten Sie, wie dies aufgrund der von uns verwendeten Slash-Benennungskonvention erstellt wurde . Der Vorname erstellt den Gruppennamen. Dann müssen wir zu Property 1, wo wir den Symboltyp notiert haben. Dann ist der dritte der Staat, in unserem Fall, aktiv und inaktiv. Mithilfe der Benennungskonvention für Schrägstriche können Sie beliebig viele Eigenschaften erstellen. Wenn ich die Variantengruppe auswähle, kann ich mir einen Überblick über Namen und Verteilung verschaffen und die Namen auch hier ändern. können Sie einer bestehenden Gruppe auch Varianten und Eigenschaften hinzufügen Von hier aus können Sie einer bestehenden Gruppe auch Varianten und Eigenschaften hinzufügen. Sie könnten all diese Dinge auch im Ebenenbedienfeld ändern . Aber schauen Sie sich an, die Benennung Ihres Layers hat sich automatisch angepasst und wurde geändert. Ändere das nicht zurück, weil dies wirklich wichtig ist , damit es funktioniert. Es ist jedoch viel mühsamer, Ihre Varianz hier anzupassen als in Ihrem Varianz-Panel. Jetzt füge ich in diesem Fall nur noch meine Einschränkungen links, rechts und mittig hinzu, und ich werde wieder in mein Design springen. Das Tolle ist jetzt , dass ich einen Komponentenkonus mit verschachtelten Komponenten darin habe, die Varianz aufweisen. Ich kann dieselbe Variante auf alle meine verschiedenen Bildschirme kopieren . Ich kann jedoch einfach zu aktiven Schaltflächen für jeden Bildschirm wechseln , wie ich es brauchte. Dies wird auch ein großer Vorteil sein , wenn Sie später mit der Animation Ihrer Designs beginnen. 35. 0133 Mehr Varianten, die Calendar erstellbar erstellen: Lassen Sie uns den Kalender in unserem Design lebendiger machen und unsere neuen Stimmungsstile als vollständige Hintergrundfarbe verwenden. Ich gebe dir eine kleine Vorschau, worauf ich her bin. Ich werde zuerst die Wochentage einrichten, also zeichne ich ein Textfeld voller Breite und füge etwas Text hinzu. Ich werde es stylen und durch 7 teilen , um einen Wochentag zu bekommen. Ich mache das zu einer Komponente und speichere es vorerst neben meinem Frame , während ich daran arbeite. Jetzt kopiere ich die Instanzen und richte die ganze Woche ein. Kopieren wir es und benennen es um. Jetzt zeichne ich einen Rahmen für die Daten, und ich teile diesen durch 7 und gebe ihm eine Höhe von 45. Lasst uns unser Datum hinzufügen. Ich werde das noch nicht zu einer Komponente machen , weil ich zuerst meine Varianz erstellen möchte. Ich richte folgendes ein. Zuerst richte ich eine Standardversion ein. Dann füge ich eins mit dem Kreis hinzu. Dies ist, wenn nur dieser ein Tag ausgewählt wird. Ich werde den Kreis mit der Farbe meiner Stimmung und jetzt erstelle ich drei weitere Varianten. Dies ist der Fall, wenn mehrere Daten ausgewählt werden. Der erste, der Anfang, behält den Kreis und wird ein kleines Rechteck für den Hintergrund haben. Das zweite wird nur dieses Rechteck halten, und das letzte wird wieder einen Kreis und ein Rechteck haben, aber jetzt als schließendes Ende in die andere Richtung zeigen. Jetzt müssen wir sie benennen, und das ist wichtig, da wir hier die richtige Namenskonvention verwenden müssen die richtige Namenskonvention um unsere Varianzgruppe zu erstellen. Wir werden sie nennen, Datum, das ist für alle dasselbe, da dies der Gruppenname ist. Dann werden wir einen Schrägstrich haben, Stimmung setzen, hier werden wir großartig, traurig oder so weiter sagen , was auch immer die Farben sind. Dann werden wir einen Schrägstrich haben und die Position setzen, also wird das entweder kein einziger Tag, Anfang, Mitte oder Ende sein . Nennen wir alle von ihnen. Sobald ich mit der Benennung fertig bin, kopiere ich nur das Set mit den Farben und mache für jede Stimmung eins. Ich wähle sie alle aus und wähle aus Komponenten jetzt Komponentensatz erstellen. Dies entspricht genau dem Erstellen Abweichungen aus dem rechten Eigenschaftenfenster. Jetzt habe ich den Namen der Stimmung nicht geändert, was mein Eigentum 1 ist. Was ich tun werde, ist, dass ich die Varianz für jede Stimmung auswähle und zum rechten Eigenschaftenfenster wechseln für meine Varianz zum rechten Eigenschaftenfenster wechseln werde, und jedes Jahr werde ich ältere Benennungen und Stimmungen anpassen. Probieren wir es aus. Jetzt werde ich von meinem Asset-Panel aus meine Datumskomponente herausnehmen und meine Woche einrichten. Wenn ich jetzt eine dieser Varianten auswähle, kann ich sie mit Hilfe meines Komponenten-Panels gut gestalten . Für meinen aktuellen Tag möchte ich nur einen Kreis mit einem Umriss hinzufügen. Was werde ich tun, ist wieder in meine Standardvariante zu springen , und ich füge einen Kreis hinzu, aber ich werde ihn unsichtbar machen. Jetzt kann ich es in meiner Variante überschreiben und einfach eine Gliederung hinzufügen. 36. 0134 weitere Einschränkungen Erstellen eines responsiven Kalender: Im Moment ist unser Bildschirm großartig, aber wenn ich die Größe ändere, der Kalender oben links hängen , da dies die Standardeinstellung ist. Lassen Sie uns einige Einschränkungen hinzufügen und reagieren. Unsere Wochentage sind einfach. Wir wählen einfach die gesamte Gruppe und stellen sie so fest, dass sie horizontal skaliert wird. Aber wenn wir das Gleiche mit unseren Terminen machen, wird das nicht richtig aussehen. Jetzt möchten wir, dass unsere Zahlen und Kreise in Höhe und Breite auf den Mittelpunkt gesetzt werden. Sie sind festgelegt, und nur der farbige Hintergrund ist das, was wir skalieren möchten. Ich wähle alle meine Varianten aus und setze sie in beide Richtungen zentrieren. Dann wähle ich nur die Hintergrundfarbe aus. Halten Sie „Umschalttaste“ gedrückt, damit Sie mehrere Auswahlen anschließen können, und ich setze sie auf Skalierung ein. Gehen wir nun zurück zu unserem Frame und der Gruppe, die die Varianten hält, und stellen sicher, dass sie skaliert werden. Jetzt ist es genau das , was wir suchen. Lassen Sie uns jetzt unseren Kalenderrahmen erstellen. Ich kopiere mein Drahtgitter als Referenz. Ich dupliziere den Home-Frame und ändere einen Hintergrund für meine Wochentage, da sie an der Kopfzeile hängen bleiben. Ich werde meine Mood Buttons los und stelle sicher, dass ich das Tab-Leisten-Symbol anpasse. Ich werde meine Kalenderwoche verwenden, um einen Monat zu erstellen, indem ich ihn einfach dupliziere. Durch die Verwendung von Varianten kann ich mir einen Überblick über die vergangenen Stimmungen erstellen und in kürzester Zeit alles nach meinen Wünschen ändern . Du verstehst die Idee. Ich werde ein bisschen vorwärts gehen. Ich habe den Namen des Monats hinzugefügt und alles gruppiert. Jetzt habe ich einen vollständig ansprechenden anpassbaren Kalender. Ich habe hier ein bisschen mehr gemacht und meinen Kalender auf einen eigenen Rahmen gelegt , und diesen Rahmen habe ich so eingestellt, dass er skaliert und unten fixiert wurde. Auf diese Weise wird der aktuelle und letzte Monat August immer sichtbar sein, wenn ich die Größe ändere. Wenn ich auf den kleineren Bildschirm springe, sieht man, dass die Kreise einfach perfekt hintereinander passen. Dies liegt daran, dass ich die feste Größe auf 45 eingestellt habe, die ich im Voraus aus der kleinsten Bildschirmgröße berechnet habe . diese Weise habe ich mich entschieden , meinen Kalender einzurichten. Sie könnten sich für ein anderes Verhalten entscheiden. Zum Beispiel könnte es in der Mitte fixiert sitzen. Oder Sie könnten sogar ein ähnliches Ergebnis mit dem automatischen Layout erstellen . Jetzt senden wir unsere Varianten nur noch an unsere Komponenten- und Style-Seite, und wir sind fertig. 37. 0135 Skalierung in Figma Aufbau der Mood: Wir möchten zeigen, was passiert, wenn ich jeden der Stimmungsknöpfe drücke , also brauchen wir für jede Aktion eine Seite. Also werde ich meinen Startbildschirm viermal duplizieren und möchte das etwas mehr Spaß machen als in meinen Wireframes. Ich möchte, dass nur einer der Tasten wirklich groß ist und skaliert wird. Ich kann die Gruppierung von Inhalten mit Shift, Command und G. aufheben . Also werde ich die Schaltflächen los , die ich nicht mehr brauche. Jetzt nehmen wir den Stimmungsknopf, der übrig ist und wir wollen ihn wirklich groß machen. Wenn ich es einfach vergrößern würde, würde das die Striche und den Inhalt nicht skalieren. Also verwende ich das Skalierwerkzeug, das ich einfach aus dem Menü auswählen kann , oder drücke einfach K. Ich kann den Knopf jetzt auf meine gewünschte Größe vergrößern und neu positionieren. Um das Menü vor der Gesichtstaste sichtbar zu halten, können Sie es entweder im Ebenenbedienfeld oben verschieben oder einfach kopieren, löschen und wieder in den Rahmen einfügen. Stellen Sie einfach sicher , dass es im Rahmen ist. Um den Skalierungsmodus zu verlassen, drücken Sie einfach Escape. Großartig. Lassen Sie uns dasselbe mit unseren anderen Tasten machen und skalieren Sie sie und Sie werden sehen, dass unser Design wirklich ohne großen Aufwand lebendig wird. Jetzt bearbeite ich einfach einen Text jeden meiner Bilder entsprechend der Stimmung und dann denke ich, dass ich nur einige letzte Anpassungen in der Positionierung vornehmen werde. Lass es mich sehen. Ja, ich denke, so gefällt es mir und das sind meine Stimmungsknöpfe gemacht. 38. 0136 Clipping: Jetzt fehlt nur mein Block Zeitschriftenübersicht und meine Detailseite. Da ich mein Auto-Layout für mein Wireframe bereits eingerichtet habe, kopiere ich sie einfach und gehe dann zurück zu meiner Designseite. Hier erstelle ich einen neuen Frame und passe einen Header an. Im Moment füge ich nur Block als Überschrift hinzu und werde heute los. Stellen wir auch sicher, dass das Kalendersymbol in unserer Tab-Leiste aktiv ist. Jetzt füge ich die Karte ein, die ich zuvor von meinem Drahtgitter kopiert habe, in meinen neuen Designrahmen. Da es sich um eine Drahtmodellkomponente handelt, stellen Sie sicher, dass Sie sie trennen. Ich nehme jetzt meine Änderungen vor. Ich werde die Beschriftung, die Überschrift und den Textkörper in meine voreingestellten Stile in Topographie und Farbe ändern und den Textkörper . Ich werde auch den Schlaganfall um meine Karte loswerden. gesamte Polsterung scheint mir in Ordnung zu sein. Jetzt nehme ich diese Karte und mache sie zu einer neuen Designkomponente. Ich behalte hier eine Instanz und schicke die Master-Komponente an meine Styles- und Komponentenseite. Großartig. Jetzt kann ich die Instanz duplizieren, und ich mache dies wieder in ein automatisches Layout, das an Auto-Layout-Karten darin verschachtelt. Jetzt kann ich die Karten einfach kopieren und einfügen, aber ich werde sie nicht sehen, da sie anfangen, sich außerhalb des Rahmens zu befinden. Ich deaktiviere das Clip-Inhaltsfeld im Frame-Menü auf der rechten Seite. Ich kann sie jetzt weiter bearbeiten. Ich kann jetzt die Überschriften meiner Karten anpassen. Da ich das Auto-Layout eingestellt habe, wird sich alles gut sortieren. Jetzt fehlt das einzige, was fehlt, unsere Bilder. Ich importiere mehrere Bilder, indem ich die Umschalttaste und K. jetzt drücke, um sie ins Feld zu legen. Sie können auch Shape auswählen und über das Filmmenü Bilder nacheinander hochladen. Ich schalte den Clip-Inhalt aus und stelle sicher , dass sich die Tab-Leiste oben auf meinen Karten befindet. Eine kleine Randnotiz, denken Sie daran, dass wir einige Bilder in unsere Stile gelegt haben , mit denen wir arbeiten können. Wenn Sie diese verwenden möchten, müssen Sie sie zuerst exportieren und dann können Sie sie wieder eingeben, wie ich es gerade getan habe. Zum Exportieren wählen Sie einfach alle Bilder aus, drücken Sie im rechten Eigenschaftenfenster Exportieren und exportieren Sie sie als JPEGs oder wenn Sie Folien haben, PNGs. Um sicherzustellen, dass sie gut aussehen, auf hochauflösenden Bildschirmen 2- oder sogar 3X wählen. Dies bedeutet, dass sie in der doppelten oder dreifachen Größe exportiert werden , die Sie gerade hier sehen. Dies ist möglich , weil das Original ich hochgeladen habe, ebenfalls größer ist und Figma das speichert. Jetzt mache ich das Gleiche mit meiner detaillierten Artikelseite. Ich richte einen Frame ein, kopiere den Inhalt von meinem Drahtgitter und füge ihn einfach hier ein und passe das Styling sowie das Bild an. Stellen wir sicher, dass wir wie gewohnt unsere voreingestellten Stile verwenden, und dann lade ich für die Bilder nur eines meiner Bilder von vorher hoch und füge das Menü hinzu, und ich bin fertig. 39. 0137 Präsentationsmodus mit scrollbaren und festen Elementen: In der Präsentationsansicht können wir eine Vorschau unserer Designs anzeigen. Hier siehst du auch animierte Gifs, eine Aktion. Wählen Sie ein Bild aus und drücken Sie die Play-Taste in der oberen rechten Ecke. Beachten Sie, dass dadurch ein separater Tab geöffnet wird. Sie können zwischen Ihrem Design und dem Vorschaumodus hin- und herspringen . Sie können auch einen Geräterahmen hinzufügen. Öffnen Sie einfach einen Prototyp-Tab und wählen Sie aus, ob Sie die Bildschirmgröße, an der Sie gerade arbeiten, aussuchen möchten. Stellen Sie sicher, dass die Gerätegröße und die von Ihnen eingestellte Rahmengröße identisch sind. Das ist wirklich wichtig. Mit den Pfeiltasten auf Ihrer Tastatur können Sie Frames überspringen . Das sieht jetzt gut aus für all meine Rahmen, die genau in eine bestimmte Bildschirmgröße passen . Einige von ihnen haben jedoch scrollbare Inhalte, wie meine Artikelübersicht auf der Detailseite. Und dieser Inhalt ist jetzt versteckt. Lassen Sie uns noch einmal zu unseren Designs zurückkehren und einen Rahmen mit dem Inhalt auswählen , der scrollbar sein muss. Auf der rechten Seite das Menü des Eigenschaftenfensters. Wir wählen jetzt zwischen Overflow-Scrolling und der Option Vertikales Scrollen. Wenn wir zu unserem Prototyp zurückkehren, können wir sehen, dass das einfach großartig funktioniert. Aber jetzt kriecht alles. In Ihrer Design-Datei. Wählen Sie die Elemente aus, bei denen Sie gefälscht bleiben möchten. Und in meinem Fall sind dies die oberen als auch die untere Tab-Leiste. Und dann springe rüber zum Prototyp. Und wählen Sie unter Position die Option Fest, An Ort und Stelle bleiben. Sie können sehen, dass jetzt alles repariert ist , außer meinem scrollbaren Inhalt. Über dasselbe Menü. Du könntest auch festlegen, dass Elemente erst klebrig werden, wenn sie beim Scrollen den oberen Rand erreichen. Also wenn wir das machen würden, dann kannst du das jetzt sehen, wenn wir die untere Leiste scrollen, was scrollen und dann oben fixiert bleiben. Also nichts, was wir in diesem Fall wollen, aber sehr praktisch für andere Setups. 40. 0138 Figma – Vorschau auf deinem Gerät: Sie können auch eine Vorschau Ihrer mobilen Prototypen auf Ihrem physischen Telefon anzeigen, was ich dringend empfehle. Gehe zum Apple oder Google Play Store, suche nach Figma Mirror und installiere dann die kostenlose App auf deinem Gerät. Öffnen Sie jetzt einfach die App und melden Sie sich mit einem Benutzernamen und einem Passwort an. In der App siehst du eine Übersicht über all deine Designs. Dies könnte auch leer sein, wenn Sie gerade erst angefangen haben. Klicken Sie auf „Spiegeln“ und Sie werden aufgefordert, Rahmen oder Komponenten auszuwählen. Sie in Ihrer eigentlichen Figma-Datei einfach auf einen beliebigen Frame. Der ausgewählte Frame wird dann auf Ihrem Gerät angezeigt. Dies funktioniert in Echtzeit, sodass Sie durch verschiedene Frames springen können, aber auch wenn Sie Änderungen an Ihrem Design vornehmen würden, würde sich dies direkt auf Ihrem Bildschirm widerspiegeln. Mirror verwendet immer 100 Prozent der Breite, weshalb es so wichtig ist , dass Sie überprüfen, ob die Rahmengröße dem tatsächlichen Gerät entspricht . Andernfalls wird Ihr Design skaliert und nicht zuverlässig sein. 41. 0139 Dateien teilen mit Designer:innen und Entwickler: Figma ist besonders erstaunlich, wenn es darum geht, Dateien zu teilen und mit mehreren Teammitgliedern zu arbeiten. Sie können entweder Personen zu Ihrem gesamten Projekt einladen oder eine einzelne Datei mit anderen teilen. Beim Teilen können Sie wählen, ob Sie per E-Mail oder über einen Link einladen möchten. Sie können entweder Anzeige- oder Bearbeitungsrechte erteilen. Bearbeitungsrechte geben der Person, die Sie einladen, grundsätzlich den gleichen Zugriff und die gleiche Ansicht der Datei wie Sie haben. Wenn Sie einen Designer oder Texter einladen möchten , an einem Design zu arbeiten, müssen Sie Bearbeiten wählen. Anzeigerechte sind eingeschränkter. Dies ist jedoch keine schlechte Sache. Es ist tatsächlich ideal für die Übergabe der Entwicklung oder das Teilen von Designs mit Nicht-Designern, um überwältigende und versehentliche Änderungen zu vermeiden. Sie können so viele Anzeigeberechtigungen für Ihre Dateien erteilen , wie Sie möchten, ohne zusätzliche Kosten. Lassen Sie uns einen View-Link erstellen und lassen Sie uns nur mit Anzeigerechten eingeben. Wir sehen nur Tools zum Kommentieren und wir können uns bewegen , aber nicht in der Datei arbeiten. Benutzer, die mit dem Ansichtsmodus eingeladen werden, können weiterhin alle Seiten und Ebenen sehen. Sie können die Präsentationsansicht ändern. Wenn Sie einen Prototyp einrichten, können diese auch darauf zugreifen. Im Ansichtsmodus können Sie auch Raster und Lineale sehen , die Sie möglicherweise festgelegt haben und Sie können auch die Alt-Taste drücken, um beliebige Entfernung zu einem bestimmten Objekt anzuzeigen. Anstelle des Eigenschaftenfensters wird Ihnen das Inspektionsfeld angezeigt , das auch die Exportfunktion enthält. Dies ist für Entwickler unerlässlich. Auch eine Zusammenfassung Ihrer Stile wird weiterhin angezeigt wenn Sie auf den grauen Hintergrund des Canvas klicken. Wenn Sie gleichzeitig an einer Datei arbeiten, sehen Sie den Cursor des anderen Benutzers und in der oberen rechten Ecke Ihres Bildschirms können Sie jeden sehen, können Sie jeden sehen gerade auf diese Datei zugreift. Wenn Sie auf das Symbol klicken, können Sie deren Bewegung und Bildschirmansicht verfolgen. 42. 0140 Figma Inspect: Werfen wir einen genaueren Blick auf das Inspect-Panel. Das Inspekt-Panel zeigt uns alle Details eines Elements und ist für die Kommunikation mit der Entwicklung unerlässlich . Entwickler können wählen , ob sie in der CSS-Entscheidung ausgeben möchten , ob sie eine Website entwickeln oder für Apps in iOS oder Android, Sie müssen sich darüber keine Sorgen machen. Sie können dies selbst wählen. Wenn Sie auf ein Element klicken, alle Informationen im Inspektionsbedienfeld angezeigt. Beachten Sie auch, wie alle Stile als Kommentare sowie Ihre Gruppen - und Ebenennamen notiert werden. Im Ansichtsmodus werden alle Entfernungen automatisch angezeigt, ohne dass Sie überhaupt Alt drücken müssen. Und du kannst auch deine Raster aktivieren. Die Registerkarte Inspect ist übrigens auch immer in Ihrem Bearbeitungsmodus verfügbar, sodass Sie sich das jederzeit ansehen können. 43. 0141 Exporting: Jeder, der Zugriff auf Ihre Datei mit Anzeige - oder Bearbeitungsberechtigung hat, kann auch Assets exportieren. Dies ist sehr wichtig, um Bilder in guter Qualität über verschiedene Bildschirmauflösungen beim Programmieren zu gewährleisten Bilder in guter Qualität über . Klicken Sie auf ein Bild und gehen Sie zu Ihrem Export-Bedienfeld. Im Ansichtsmodus wird dies eine eigene Registerkarte sein. Im Bearbeitungsmodus befindet sich dies am Ende des Eigenschaftenfensters. Klicken Sie auf das Pluszeichen und Sie erhalten Ihren ersten Export bei 1x, was der aktuellen Größe entspricht, in der wir entwerfen. Standardmäßig erhalten Sie ein PNG, aber Sie können es in ein JPEG oder eine SVG ändern. JPEG wäre immer Ihre Priorität. Dies ist für ein Standardbild. Wenn Ihr Bild Transparenz hat, wählen Sie ein PNG. Wenn Sie ein vektorähnliches Symbol, ein Logo oder eine Zeichnung exportieren , verwenden Sie SVG. Es gibt auch die Option für PDF, aber das ist mehr, wenn Sie exportieren möchten, sagen wir einen Bildschirm für eine Präsentation oder ähnliches, es ist nichts, was Sie beim Programmieren benötigen. Klicken Sie nun erneut auf das Pluszeichen , um einen zweiten Export hinzuzufügen. Beachten Sie, wie es auf 2x eingestellt wird , und fügen Sie dann ein Suffix von 2x hinzu. Dies bedeutet, dass es doppelt so groß ist wie Ihr aktuelles Design, und dies ist wirklich wichtig, um ein gestochen scharfes Bild auf Retina-Displays zu gewährleisten . Möglicherweise benötigen Sie eine andere höhere oder andere Auflösung. Erkundige dich bei deinen Entwicklern. Wenn Sie alle eingerichtet haben, klicken Sie auf „Exportieren“. Vorher ein kleiner Tipp. Wenn Sie Ihre Bilder mit einem Schrägstrich wie hier Bilder benennen , Schrägstrich Sonnenuntergang vorwärts, dann wäre der erste ein Ordner, der erstellt wird, und der allerletzte ist der Name des Bildes in diesem -ordner. Sie können auch Unterordner wie diesen erstellen. Das ist wirklich großartig und erspart Ihnen viel Ziehen und Ablegen. ob Sie alle Bilder exportieren oder ob dies von Ihrem Entwicklungsteam durchgeführt wird , können Sie direkt in Ihrem Team besprechen. 44. 0142 Figma Team: Wenn wir in einem Team arbeiten, möchten wir, dass alle Teammitglieder Zugriff auf dieselben Stile und Komponenten haben dieselben Stile und , um unser Design konsistent zu halten. Wir können unsere Stile und Komponenten in der sogenannten Team-Bibliothek veröffentlichen . Veröffentlichen von Stilen ist derzeit für kostenlose Pläne verfügbar, aber um Komponenten zu veröffentlichen, benötigen Sie einen Seitenplan. Hier habe ich einige Stile und Komponenten, veröffentlichen wir sie in der Bibliothek. Navigieren Sie zur Registerkarte Assets und unter der rechten Seite sehen Sie ein Buchsymbol, das das Fenster Team-Bibliothek öffnet. Wenn Sie bereits andere Shared Libraries in Ihrem Konto haben , sehen Sie diese hier und Sie können sie mit einem Tockle aktivieren. Oben sehen Sie die aktuelle Datei, in der Sie sich befinden, und Sie sehen die Schaltfläche Veröffentlichen. Wenn die Schaltfläche „Veröffentlichen“ nicht angezeigt wird, stellen Sie sicher, dass Sie zuerst einige Komponentenstile erstellen. Drücken Sie auf Veröffentlichen, und es öffnet sich ein neues Fenster, dem Sie aufgefordert werden, eine Beschreibung hinzuzufügen. Dies ist sehr praktisch, wenn Sie später Änderungen vornehmen, dann sollten Sie sich notieren, was und warum Sie veröffentlichen. Figma, speichert eine Version für Sie nach der veröffentlichten Datei , die als Versionskontrolle bezeichnet wird und bedeutet, dass Sie im Falle eines Fehlers zurückspringen können. Es wird empfohlen, öfter in kleineren Blöcken zu veröffentlichen und immer eine wirklich solide Beschreibung hinzuzufügen. Im Folgenden sehen Sie eine Zusammenfassung der Komponenten und Stile, die neu sind oder sich geändert haben und veröffentlicht werden. Sie können alle oder nur einige auswählen. Wenn Sie bereit sind, klicken Sie auf Veröffentlichen. Gut gemacht. Du hast gerade deine erste Team-Bibliothek erstellt. Öffnen wir eine neue leere Datei und nennen sie Website. Bisher gibt es hier keine Stile und keine Komponenten. Gehe nun zurück zum Tab „Assets“ und öffne die Bibliothek erneut. Sie sehen eine Liste aller Projekte und Dateien, die Bibliotheken veröffentlicht haben. Aktivieren Sie die gerade erstellte Datei und Sie sehen alle verfügbaren Stile und Komponenten. Sie könnten auch mehrere Bibliotheken aktivieren. Manche Leute behalten zum Beispiel ihre Typografie gerne in einer Bibliothek, ihre Farben in einer Bibliothek. Aber das liegt wirklich an Ihnen und Ihrem Team, wie Sie das organisieren möchten. Sobald Sie einen neuen Stil oder eine neue Komponente erstellen, werden Sie aufgefordert, die Bibliothek zu aktualisieren. Sobald Sie dies getan haben, wird der Rest des Teams auch aufgefordert, seine Bibliothek zu aktualisieren und die neuen Änderungen zu übernehmen. Sobald sie auf Aktualisieren geklickt haben, werden die Änderungen der Execs angezeigt und können sich entscheiden, auf die neueste Version zu aktualisieren oder nicht. 45. 0143 Einrichten eines Thumbnails: Beim Teilen von Dateien ist es großartig, sich den ersten Blick darauf zu orientieren was die Dateien enthalten. Thumbnails eignen sich hervorragend dafür. Stellen Sie sich sie wie ein Buchcover vor. Standardmäßig wird Figma die erste Seite Ihres Designs zu einer Miniaturansicht machen , aber Sie können auch Ihre eigene festlegen. Dimensionen der Miniaturansichten betragen 1.920 mal 960. Ich habe einen Rahmen mit diesen Dimensionen eingerichtet und einige Informationen zu meiner App hinzugefügt. Ich habe auch ein nettes Mock-up gemacht. Hiermit habe ich einfach ein iPhone aus dem Community-Bereich bekommen . Stellen Sie sicher, dass Sie eine auswählen, die in Ebenen enthalten ist, und dann finden Sie normalerweise eine der Ebenen die ein Bild enthalten, das Sie durch Ihr eigenes ersetzen können. Sie können es nicht durch einen tatsächlichen Frame ersetzen. Es muss ein Bild sein. Ich habe meine Frames einfach als JPEGs exportiert und sie dann erneut als Bild in meinen iPhone-Bildschirm hochgeladen . Wie Sie sehen können, habe ich auch einen sogenannten Splash-Screen erstellt , indem einfach meine Stimmungsphasen zusammengestellt und ein Logo hinzugefügt habe, um die App lebendiger zu machen. Sie können so ziemlich alles, was Sie mögen, in Ihre Miniaturansicht aufnehmen . Es ist auch ein großartiger Ort, um weitere Informationen wie Links zu Schriftarten oder externen Bibliotheken hinzuzufügen weitere Informationen wie Links . Das Einstellen dieser App als Miniaturansicht ist wirklich einfach. Klicken Sie einfach mit der rechten Maustaste auf den Rahmen und wählen Sie „Miniaturansicht festlegen“. Wenn wir jetzt zurück zu Home springen, können wir sehen, dass unsere Miniaturansicht als Titel festgelegt ist, und dies wird auch für alle anderen sichtbar sein , die an Ihrer Datei arbeiten. 46. UPDATE: Auto-Layout: Das neue Figma-Auto-Layout wurde aktualisiert und während eines Konflikts im Mai 2022 angekündigt. Manche Dinge bleiben gleich, manche Fötus und brandneu und aufregend, und manche Dinge haben sich gerade bewegt und kommen mit süßen kleinen Details , die Sie nicht verpassen sollten. Geben Sie mir fünf Minuten Ihrer Zeit und ich bringe Sie über alles rund um das neue Auto-Layout auf den neuesten Stand. So sind Sie dem Spiel immer einen Schritt voraus und können sofort wieder an die Arbeit gehen. Beginnen wir ganz am Anfang, indem wir Auto-Layout anwenden, die alte Taste Shift a drücken oder das Menü verwenden. Nichts hat sich geändert. Beachten Sie jedoch, dass es viel sinnvoller ist, dass die Ebenen jetzt in der auf dem Canvas-Bereich angezeigten Reihenfolge gestapelt werden. Danke für diese Figma, diese alte umgekehrte Reihenfolge hat mich wirklich geärgert. Das Aussehen des Auto-Layout-Menüs hat sich jedoch geändert. Lass uns nachforschen. Die Richtung funktioniert genauso wie zuvor, und auch der Abstand dazwischen. Sie können auch die horizontale und vertikale Polsterung einstellen wie wir es früher getan haben. Wenn Sie ein individuelles Padding wünschen, klicken Sie einfach, um die Optionen für alle Websites zu öffnen. Ziemlich normal. Tipp, halte die Befehlstaste gedrückt und klicke auf ein beliebiges Füllfeld Sie können jetzt die üblichen Notationen wie in CSS verwenden oder einfach eine Zahl für alle eingeben. Das Ausrichtungswerkzeug hat einfach die Position vom Untermenü zum Hauptmenü geändert . Ansonsten bleibt es genauso. Und es enthält einige nette neue Abkürzungen, die ich Ihnen in Kürze zeigen werde. Das neue Steuerelement auf Canvas. Neben dem Auto-Layout-Menü haben Sie jetzt auch ein eigenes Canvas-Steuerelement. Und das ist ziemlich beeindruckend. Wenn Sie also mit der Maus über einen Auto-Layout-Rahmen fahren, werden die kleinen rosa Ziehpunkte angezeigt und Sie können sie einfach ziehen, um sie anzupassen. Dies funktioniert für den Abstand dazwischen und auch für die Polsterung. Das kommt mit ein paar wirklich netten Abkürzungen. Lassen Sie mich Ihnen einige Tipps und Tricks zeigen. Wenn Sie beim Ziehen die Umschalttaste gedrückt halten, erhöhen oder verringern Sie sie um einen bestimmten Nudging-Wert. Sehr nett. Sie können auch auf einen Handle doppelklicken , um den spezifischen Wert zu verknüpfen. Halten Sie beim Anpassen des Polsters alle gedrückt und Sie erhalten die gleichen Werte für horizontal oder vertikal. Wenn Sie beim Ziehen die Umschalttaste und die Alt-Taste gedrückt halten , wird die Größe des gesamten Füllstands gleichmäßig angepasst. Neuer negativer Abstand. Okay, auf diesen bin ich wirklich gespannt. Sie können jetzt negative Abstände zwischen untergeordneten Auto-Layouts haben , was bedeutet, dass Sie Elemente stapeln können. Wenn Sie schließlich auf die drei kleinen Punkte klicken, beliebiges Auto-Layout-Menü, gelangen Sie zu den erweiterten Layout-Menüoptionen. Und es gibt ein paar neue und einige verbesserte alte Sachen. Der Abstandsmodus ist der gleiche alte, aber nette neue Shortcuts. Genau wie bei einem Auto-Layout zuvor ist standardmäßig alles auf gepackt eingestellt. Packed bedeutet, dass der Abstand zwischen Ihren untergeordneten Elementen auf eine feste Zahl festgelegt ist. Wenn Sie dies in Abstand zwischen ändern, wird der gesamte verfügbare Speicherplatz verbraucht und gleiche Lücken zwischen den direkt untergeordneten Elementen entstehen. Jetzt liebe ich diese Funktion und benutze sie oft, aber es ist ein bisschen nervig, diese Untermenüs immer durchzugehen . neuen Auto-Layout gibt es großartige neue Verknüpfungen, mit denen Sie zwischen gepackt und zwischen Speicherplatz wechseln können. Wählen Sie einfach das Ausrichtungsfeld aus und drücken Sie X, um zwischen dem Abstand zwischen den Auswirkungen umzuschalten. Oder klicken Sie auf den Steuerpunkt auf Canvas und geben Sie einfach auto ein, um es auf ein Leerzeichen zwischen oder einen festen Wert für gepackt festzulegen . Eine weitere brandneue Funktion, die Sie im erweiterten Layoutmenü finden , ist die Einbeziehung des Ausschlussstrichs. Dies wird eine große Hilfe sein, Striche zu einem Teil Ihrer Komponenten zu machen . Sie finden auch im Advanced Auto Layout eine wechselnde Stapelreihenfolge. Hier können Sie also die Reihenfolge ändern, wenn Elemente über negative Abstände gestapelt sind. Beachten Sie, dass dadurch die Reihenfolge im Ebenenmenü nicht geändert wird. Neben dem Stapeln können Sie auch immer gute alte Tastaturpfeile verwenden , wenn Sie die tatsächliche Position eines untergeordneten Auto-Layouts ändern möchten . Und ein letzter, brandneuer und großartiger Helfer, ist die Ausrichtung der Textgrundlinie. Damit dies funktioniert, benötigen Sie mindestens ein Textelement. Sie können dann wählen, ob die Ausrichtung mittig oder über die Grundlinie des Textes erfolgen soll. Eine weitere großartige Verknüpfung: Wählen Sie das Ausrichtungsfeld und drücken Sie B, um die Ausrichtung der Textgrundlinie umzuschalten Brandneue und erstaunliche absolute Positionierung. Dieser ist ein totaler Lebensretter. Ziehen Sie zuerst ein Element in Ihren Auto-Layout-Rahmen, und dann erhalten Sie im Rahmenmenü die Option , es auf absolut einzustellen. Sie können es jetzt an eine beliebige Stelle innerhalb Ihres Auto-Layout-Rahmens ziehen und positionieren . Und es befindet sich wirklich in Ihrem Auto-Layout-Rahmen. Dies bedeutet auch, dass Sie Einschränkungen für die Größenänderung festlegen können . Menügröße ändern. Dies ist das gleiche alte, aber es wurde verschoben und es enthält großartige neue Verknüpfungen. Ich war ein wenig schockiert, als ich zum ersten Mal ein neues Auto-Layout öffnete , da das Resize-Menü weg war. Es ist nicht so, es ist einfach hier hochgezogen, zwei Frames. Es sieht ein bisschen anders aus, aber es funktioniert genauso wie zuvor. Wir haben keine visuelle Darstellung mehr. Aber Figma hat einige großartige Abkürzungen hinzugefügt. Klicken Sie auf die obere oder untere Zeile eines Auto-Layout-Rahmens , um ihn vertikal zu umarmen. Klicken Sie auf die linke oder rechte Seite eines Auto-Layout-Rahmens , um ihn horizontal zu verschieben. Und das Gleiche funktioniert, wenn Sie beim Klicken die alte Taste gedrückt halten , um den Füllbehälter zu wechseln. Das ist es also. Alles, was Sie über ein neues Auto-Layout wissen müssen, um loszulegen. 47. Vielen Dank: Gut gemacht, um diesen Kurs zu beenden. Zögern Sie nicht, uns unter moonlearning.io zu kontaktieren, wir sind immer daran interessiert, Ihr Feedback zu hören. Sie würden uns auch einen großen Gefallen tun, wenn Sie sich einfach eine Minute nehmen und hier eine Bewertung abgeben könnten . Wenn Ihnen dieser Kurs gefällt, dann achten Sie auch darauf, dass Sie unsere zusätzlichen Kurse ansehen. Bei moonlearning.io decken wir alle Themen ab, von den Grundlagen von UX/UI Design bis hin zu Figma bis hin zu einigen Code-Grundlagen. Besuchen Sie unsere Website unter moonlearning.io, wo Sie sich auch für unseren Newsletter anmelden können.