Ich zeige dir innerhalb von einer Stunde alles, was du zum Einstieg über Figma wissen musst, um anschließend eigenständig deine Projekte damit umsetzen zu können. Dabei erstellen wir Schritt für Schritt dieses App-Design, welches du parallel zum Kurs selbst in Figma umsetzen kannst.
Vorlagen herunterladenDamit kannst du direkt dein neues Wissen intensivieren und herausfinden, ob du alles verstanden hast. Du findest meine Projekt- und Hilfsdateien auch hier als Download, falls du damit arbeiten willst. Der Kurs ist auch in Kapitel unterteilt, sodass du einfach zu einem bestimmten Punkt springen kannst, als Einsteiger empfehle ich dir aber, alles komplett anzuschauen, um Figma richtig zu verstehen. Pausiere auch immer gerne oder wiederhole Abschnitte, falls es dir zu schnell geht und probiere die gezeigten Sachen selbst bei dir in Figma aus. Falls du Fragen oder Feedback hast, schreib sie gerne in die Kommentare und jetzt schnapp dir was zu trinken und lass uns los designen.
Installation & Account erstellen
Wir können Figma direkt über diesen Link* verwenden, in dem wir uns kostenlos registrieren. Dafür müssen wir nur unsere E-Mail-Adresse angeben und ein Passwort festlegen. Im nächsten Schritt bestätigen wir unsere E-Mail-Adresse und geben unseren Namen ein. Jetzt werden uns noch ein paar Fragen gestellt, welche wir aber auch überspringen können. Was wir nicht überspringen können, ist die Wahl eines Abos. Hier können wir das kostenlose Starter-Abo auswählen oder auf ein kostenpflichtiges Abo hochstufen. Das Professional-Abo kann sinnvoll sein, um Zugriff auf alle Funktionen zu erhalten, besonders den neuen Dev Mode und Funktionen innerhalb des Editors. Für größere Teams und Unternehmen bietet Figma auch noch weitere Abos an. Ich habe dir hier auch eine Aboübersicht* verlinkt, wenn du dir die Unterschiede genau anschauen möchtest. Für den Start rate ich dir aber einfach das kostenlose Abo zu nutzen, was schon sehr umfangreich ist. Falls du dann merkst, dass dir bestimmte Funktionen fehlen, kannst du später immer noch einfach upgraden. Im nächsten Schritt können wir dann direkt mit einem Projekt loslegen, aber den Schritt überspringen wir erst mal.
Nun befinden wir uns in unserem Figma-Account, wo wir alle unsere Projekte verwalten und bearbeiten können. Wir können uns immer über die Webseite anmelden und Figma über unseren Internetbrowser verwenden. Zusätzlich können wir Figma auch als Desktop-App für unseren Windows- oder Mac-Computer herunterladen. Egal, ob wir es über die Webseite oder App am Computer verwenden, benötigen wir immer eine aktive Internetverbindung, um Figma nutzen zu können. Das liegt daran, dass es komplett cloudbasiert funktioniert. Das hat den Vorteil, dass unsere Projekte auch immer automatisch gespeichert werden und in unserem Account auf allen Geräten verfügbar sind. Auch das in Echtzeit zusammenarbeiten in Dateien ist mit Figma deswegen super möglich. Willst du Figma über die Webseite nutzen, rate ich dir den Schriftarten-Installer zu installieren. Dieser ermöglicht, dass wir alle unsere lokal installierten Schriftarten von unserem Computer, auch in der Web-Version nutzen können. In der Desktop-App ist das auch ohne separaten Schriftarten-Installer direkt möglich.
Für unser Smartphone oder iPad gibt es auch eine Figma-App. Diese ist praktisch, um App-Designs direkt auf einem Gerät zu testen. Damit können wir auch Designs kommentieren, aber nicht bearbeiten.
Bevor wir jetzt mit Figma rein starten ist es vielleicht gut für dich zu wissen, dass man mit Figma keine funktionstüchtigen Webseiten erstellen kann, die man dann veröffentlichen kann. Figma ist ein Designtool speziell für UI und UX-Design. Damit erstellt und designen wir Prototypen von Webseiten, welche dann im nächsten Schritt von einem Programmierer als Vorlage für eine Umsetzung genutzt werden kann. Figma gibt hier mit dem Dev Mode auch viele hilfreiche Informationen weiter, was die Entwicklung der App oder Webseite vereinfachen kann. Aber nach wie vor, wir erstellen mit Figma nur ein Design. Das hat den Vorteil, dass wir das zügig und einfach machen können, ohne programmieren und Funktionen bauen zu müssen. Willst du aber direkt eine Webseite visuell bauen und veröffentlichen können, sind Tools wie Webflow, WordPress in Kombination mit Elementor oder Homepage-Baukästen wie Wix, Jimdo & Co. praktisch. Tutorials zu diesen Tools findest du auch auf meinem Kanal.
Designdatei erstellen (Verwaltung & Teams)
Haben wir uns bei Figma angemeldet, befinden wir uns immer als Erstes in unserer Dateiverwaltung. Dort sehen wir immer unsere erstellten Designprojekte und können diese öffnen. Standardmäßig befinden wir uns hier in der zuletzt verwendeten Ansicht. Diese kann aber sehr unübersichtlich werden, wenn wir auch mit geteilten Designs arbeiten. Alle unsere selbst erstellten Designs finden wir grundsätzlich unter “Entwürfe” im linken Menü. Einzelne Dateien können wir über den Stern auch favorisieren, um sie in einem eigenen Bereich im linken Menü zu sehen. Das kann praktisch sein, um schneller auf unsere aktuellen Projekte zugreifen zu können. Unsere Übersicht können wir auch als Kacheln oder Liste anzeigen, sowie die Sortierung festlegen, welche standardmäßig nach der letzten Bearbeitung eingestellt ist. Über einen Rechtsklick auf ein Projekt können wir dieses auch immer wieder löschen sowie umbenennen oder duplizieren. Wir haben auch die Möglichkeit, es zu verschieben, wenn wir die Datei bspw. in ein anderes Team packen möchten. Verschieben funktioniert auch einfach per Drag-and-Drop.
Doch was sind Teams? Grundsätzlich haben wir unser eigenes privates Team mit unseren Entwürfen. Das reicht dir vermutlich für den Anfang, wenn du alleine an deinen Designs arbeitest. Darunter können wir aber auch weitere Teams erstellen oder wir sehen Teams, zu welchen wir hinzugefügt wurden. Erstellen wir ein neues Team, müssen wir ihm einen Namen geben, können direkt weitere Personen hinzufügen und müssen dann ein Abo für das Team auswählen. Über einen Rechtsklick auf ein Team können wir dieses auch immer wieder löschen sowie umbenennen. Innerhalb der Teams müssen wir dann Projekte erstellen, in welchen wir dann unsere Designdateien speichern. Die Projekte sind eigentlich nichts anderes als Ordner, die uns beim Sortieren unserer Designdateien helfen. Mit einem kostenlosen Plan können wir nur ein Projekt innerhalb eines Teams erstellen. Über “Invite” können wir auch immer weitere Personen zum Team später hinzufügen und bestehende Mitglieder können wir daneben auch verwalten, um sie wieder aus dem Team entfernen zu können oder ihre Rechte zu verändern.
Unter den Teams im linken Menü können wir dann auch noch die Community öffnen. Die ist super praktisch, um sich inspirieren zu lassen und Vorlagen zu finden. Dort können wir bspw. nach kostenlosen Designdateien suchen, die wir dann in unseren Account importieren und selbst bearbeiten können. Das finde ich am Anfang super praktisch, um zu lernen, wie andere ihre Designs erstellen. Zudem ist es super, wenn man nicht von 0 anfangen möchte und einfach diese bestehenden Designs als Grundlage nimmt, um daraus sein eigenes Design zu erstellen.
Doch wie erstellen wir jetzt ein neues Projekt in Figma von Grund auf? Das geht direkt am oberen rechten Rand, wo wir die Wahl zwischen einer Designdatei oder FigJam Board haben. Wir erstellen hier immer eine Designdatei, da wir nur damit UI Designs erstellen können. FigJam ist eine Whiteboard-Funktion, welche praktisch ist, um Brainstormings und Mindmaps zu erstellen. Darauf gehen wir in diesem Grundkurs nicht ein. Falls du dazu ein eigenes Tutorial haben möchtest, schreib es gerne in die Kommentare.
Sobald wir auf das Plus geklickt haben, befinden wir uns direkt im Editor und die neue Designdatei ist erstellt. In der oberen Mitte können wir auch auf den Namen klicken, um diese zu benennen. Da wir in diesem Tutorial eine einfache Social-Media-App erstellen, benenne ich die Datei direkt so. Das ist wichtig, um sie später in unserem Account einfach wieder finden zu können. Den Editor können wir auf der Webseite immer wieder über das Figma Logo am oberen linken Rand verlassen. Hier musst du keine Sorge haben, dass etwas nicht gespeichert wurde, wenn wir die Datei verlassen. Denn alle unsere Figma Projekte werden automatisch cloudbasiert gesichert in unserem Account. In der Desktop-App kommen wir einfach über das Haus-Symbol zurück in unsere Projekteverwaltung. Hast du eine .fig Datei von jemand erhalten und möchtest diese mit Figma bearbeiten, kannst du sie einfach über Import am oberen rechten Rand öffnen und zu deinem Account hinzufügen.
Im linken Menü können wir dann auch alle unsere Designdateien durchsuchen und über die Glocke, erhalten wir auch Benachrichtigungen, wenn bspw. andere Personen in Dateien kommentieren. Jetzt können wir auch noch auf unseren Namen klicken, um zwischen einem hellen oder dunklen Anwendungsdesign zu wechseln und die Einstellungen aufzurufen. Hier können wir unsere Profilinformationen ändern und bspw. ein Profilbild hochladen, was dann andere Teammitglieder sehen. In den Einstellungen können wir auch die Sprache ändern, wo Deutsch aktuell bisher nicht verfügbar ist. Auch ob wir Zugriff auf unsere lokalen Fonts haben, wenn wir die Web-Version nutzen, können wir hier überprüfen. Unter Community können wir auch ein Profil für die Community erstellen, was praktisch ist, wenn du deine Designs in der Community teilen möchtest. Im letzten Bereich “Benachrichtigungen” können wir auch festlegen, worüber wir per E-Mail informiert werden möchten. Unseren Account können wir unter “Account” auch komplett löschen. Damit gehen aber auch alle unsere Designdateien verloren, die noch im Account gespeichert sind.
Willkommen im Editor (Oberfläche)
Haben wir eine neue Designdatei erstellt oder eine bestehende Datei geöffnet, befinden wir uns im Editor. Dieser kann am Anfang sehr verwirrend sein, besonders wenn du mit einem Template startest, wo schon einiges drin ist. Aber keine Sorge, eigentlich ist hier alles ziemlich logisch aufgebaut und ich gebe dir jetzt einen groben Überblick, wo was ist. Im Mittelpunkt sehen wir grundsätzlich alle unsere Designs aus der Datei in sogenannte “Frames” oder frei platziert. Frames sind die Zeichenflächen, die wir erstellen, welche die verschiedenen Bildschirme von unserem Design simulieren. Hier können wir diese einfach auswählen und bearbeiten. Am rechten Rand können wir genauere Einstellungen vornehmen, welche sich dynamisch anpassen, je nachdem, was wir ausgewählt haben. Auf der linken Seite haben wir unsere Ebenen, wo wir alle unsere erstellen Frames sehen oder wenn wir ein angeklickt haben, alle Elemente, welche im Frame erstellt sind.
Neben den Ebenen können wir hier aber auch zwischen den Seiten wechseln. Denn wir haben die Möglichkeit innerhalb einer Designdatei auch mehrere Seiten zu haben, in welchen wir dann wieder unterschiedliche Frames erstellen. Das ist für komplexere Designs oder Komponenten, die wir uns später noch anschauen, praktisch und gut zu wissen, wenn du mit einer Vorlage arbeitest. Diese haben meistens mehrere Seiten, wo wir dann alle Elemente finden. Die Seiten, Frames und Elemente, können wir hier auch einfach durchsuchen, weswegen es auch immer sinnvoll ist, alles hier zu benennen. Neben den Ebenen und Seiten haben wir hier auch Assets, welche wir uns später noch genauer anschauen werden.
Am oberen Rand haben wir dann noch alle Werkzeuge, welche zum Erstellen von neuen Elementen in unserem Design wichtig sind. Für die Navigation in unsere Designdatei ist das normale Move-Werkzeug, welches standardmäßig ausgewählt ist, am wichtigsten, welches wir auch immer mit dem Tastenkürzel V auswählen können. Damit können wir Elemente in unserer Designdatei auswählen und bearbeiten. Um uns in unserer Designdatei zu bewegen, können wir das Handwerkzeug hier nutzen, auch auswählbar mit der Taste H oder gedrückter Leertaste. Damit wählen wir keine Elemente mehr in unserem Projekt aus, sondern können uns per gedrückt Halten bewegen. Ein super praktisches Tastenkürzel ist hier auch immer Shift + 2, um direkt das ausgewählte Element, zentriert zu sehen oder wenn wir nichts ausgewählt haben, alles auf der aktuellen Seite zu sehen. Mit gedrückter Strg oder Cmd-Taste + Mausrad, können wir auch einfach ein- und rauszoomen. Wie sehr wir in die Datei gezoomt haben, sehen wir auch am oberen rechten Rand und können bestimmte Größen manuell einstellen. Mit Shift-Taste + Mausrad können wir uns auch nach links oder bewegen, sowie nur mit Mausrad nach oben und unten. Diese Tastenkürzel sind am Anfang vielleicht ungewohnt, aber man gewöhnt sich schnell dran und sie erleichtern einem das Navigieren enorm. Mehr solcher Tastenkürzel habe ich dir auch auf meinem neuen Instagram-Post vorgestellt, welche du dir gerne als Merkhilfe speichern kannst.
Am oberen rechten Rand, sehen wir auch alle Personen, welche gerade in der Datei sind und können die Datei teilen. Auch in den DevMode können wir hier wechseln und eine interaktive Vorschau öffnen. Später zu den Sachen noch mehr im Detail. Über das Figma-Logo am linken Rand können wir auch noch komplexe allgemeine Einstellungen zu der Datei öffnen. Wir können etwa hier unter “Preferences” auch die Tastenkürzel öffnen, wo wir alle sehen und an der blauen Markierung erkennen, welche wir bereits verwendet haben.
Neben den Einstellungen haben wir hier auch die Quick-Action, womit wir eine Suche öffnen, mit welcher wir Menüs, Funktionen und wirklich alles in unserer Datei durchsuchen können. Das ist praktisch, wenn du weißt, was du machen willst, aber nicht mehr weißt, wo das ist.
Frames & Farben
Doch fangen wir jetzt an, unser Design zu erstellen. Grundsätzlich machen wir das in sogenannten „Frames“, welche wir hier als Arbeitsflächen im Editor sehen. Das sind Zeichenflächen in den Formaten unserer Bildschirme, für welche wir unser Design erstellen möchten. Möchten wir bspw. ein App-Design erstellen, wählen wir über das Frames-Werkzeug eine Smartphone-Vorlage. Ich nehme hier auch das Smartphone als Vorlage, welches ich selbst habe. Das hat den Vorteil, dass wir später das Design einfach über die Figma App auf unserem Smartphone live testen können. Willst du ein Design für eine App und eine Desktop-Anwendung bspw. erstellen, rate ich dir, mit einem von beiden anzufangen. Das was für dich wichtiger oder einfacher ist. Später kann man sich dann einfach das erstellte Design kopieren und für ein anderes Format anpassen. Da wir eine Social-Media App erstellen möchten, wähle ich hier als Erstes eine Smartphone-Abmessung aus. Hier nehme ich die iPhone 15 Pro Vorlage, damit ich es später auf meinem eigenen Smartphone testen kann. Falls du ein anderes Handy nutzt, kannst du hier auch einfach deine Abmessungen für unser App-Design auswählen.
Haben wir einen Frame erstellt, sehen wir über ihm auch einen Namen, welchen wir per Doppelklick auch umbenennen können. Das ist super wichtig, um später nicht den Überblick zu verlieren. Ich nenne den Frame jetzt “Home - App”, da wir hier nachher die Startseite unserer Social-Media-App designen. Möchten wir bspw. dann noch eine zweite Seite, wie unsere Profilseite designen, müssen wir einen weiteren Frame erstellen. Hier können wir mit Strg + C und Strg + V einfach den aktuellen Frame kopieren, um genau die Abmessungen und Inhalte zu duplizieren. Klicken wir auf den Namen des Frames, können wir auch über die blauen Punkte, die Abmessungen verändern, wo wir ihn bspw. nach unten verlängern können, damit wir später in der App auch scrollen können. Am rechten Rand, können wir über die Frame-Einstellungen auch die Abmessungen genau in Pixeln angeben, falls wir bestimmte Werte nutzen möchten.
Hier können wir jetzt auch eine Hintergrundfarbe für unseren Bildschirm festlegen. Dafür können wir einfach auf das Farbsymbol klicken, um aus dem Farbfeld eine Farbe frei zu wählen. Wir können aber auch einen Farbcode eingeben, falls wir diese bspw. vorgegeben haben. Wenn wir eine bereits verwendete Farbe erneut nutzen möchten, ist die Pipette hier auch sehr praktisch, da wir damit einfach eine Farbe aus dem Projekt aufnehmen und auf unsere aktuelle Farbe anwenden können. Unterhalb sehen wir auch immer direkt eine Auswahl von Farben aus unserem Dokument und können über das Plus auch Farben in unseren Dokument-Assets speichern, um hier immer direkt auf diese zugreifen zu können. Das ist super praktisch, wenn du nur bestimmte Farben verwenden willst und diese einfach am Anfang einmal hier hinzufügst. Hier hast du auch den Vorteil, wenn du die Farben als Assets speicherst und verwendest, diese zu einem späteren Zeitpunkt überall, wo du sie verwendet hast, einfach austauschen zu können. Das schauen wir uns später aber noch genauer an. Neben einer Füllfarbe, können wir hier auch einen Verlauf erstellen, zwischen mehreren Farben, die wir hier einzeln festlegen können. Den Verlauf sehen wir dann visuell und können ihn auch verschieben. Klicken wir auf die Verlaufslinie im Farbfeld, können wir auch weitere Farben hinzufügen. Neben einem geraden Verlauf, können wir auch einen Radialen, also kreisförmigen Verlauf erstellen. Was generell bei der Farbe auch einstellen können, ist die Transparenz. Das ist bei der Frame-Farbe nicht so relevant, aber sobald wir Farben für Formen einstellen kann das relevant werden. Damit können wir Elemente teilweise durchsichtig machen. Wir können auch über das Plus mehrere Farben erstellen und die über die Transparenz miteinander mischen. Davon rate ich aber ab, weil das super schnell chaotisch und unübersichtlich werden kann. Da ist es für den Anfang besser, einfach die Zielfarbe direkt als eine Farbe auszuwählen.
Für unsere Social-Media App erstelle ich jetzt 3 Frames, einen für die Startseite, eine für die Profilseite und für den Entdecken-Bereich. Diese benenne ich alle entsprechend und platziere sie so nebeneinander, wie sie später auch im Menü erreichbar sind. Das macht das Ganze weniger verwirrend. Jetzt stelle ich noch den Hintergrund ein, welcher ein Off-White wird. Dann klicke ich einmal ins Leere, um auch den Hintergrund von der Figma-Seite dunkler machen zu können, damit ich meine Frames besser erkennen kann. Pausiere das Tutorial am besten hier und mach das einmal selbst in deiner Figma-File. Meine Datei kannst du dir auch oben beim Artikel herunterladen.
Formen erstellen & bearbeiten
Um jetzt ein Design auf dem Frame zu erstellen, benutzen wir primär verschiedene Formen, aus welchen wir alle unsere Elemente bauen. Dafür finden wir in der Werkzeugleiste, die wesentlichen Grundformen. Haben wir bspw. das Rechteck ausgewählt, können wir mit gedrückter Maustaste, ein neues Rechteck auf unserem Frame aufziehen. Drücken wir dabei die Shift-Taste, können wir auch direkt ein exaktes Quadrat erstellen. Nachdem wir die Form erstellt haben, wechseln wir automatisch wieder zu unserem Auswahl-Werkzeug, mit welchem wir die Form anklicken können und diese nachträglich über die Ränder bearbeiten.
Hier können wir die Form auch über die Kanten drehen, wo wir das mit gedrückter Shift-Taste auch in exakten 15-Grad-Schritten machen können. In der Form sehen wir an den Ecken auch Punkte, womit wir die Ecken abrunden können. Diese Abrundungen, sowie generell Maße von der Form, können wir auch immer anhand von exakten Werten am rechten Rand verändern. Dort können wir alle Ecken auch unabhängig voneinander abrunden. Das geht auch mit gedrückter ALT-Taste, wenn wir es über die visuellen Punkte machen. In den Formeinstellungen, können wir auch die Farbe für die Form einstellen, was wir uns bereits angeschaut hatten. Dort können wir zusätzlich auch noch eine Kontur hinzufügen, wo wir neben der Farbe, auch die Dicke, Position und Seiten einstellen können. Über die drei Punkte können wir sie auch stricheln. So kann man bspw. eine Box für einen Gutschein erstellen, welche eine ausschneidbare Optik mit gestrichelten Linien hat.
Unter Effekte können wir dann auch noch einen Schatten zur Form hinzufügen, welcher nach außen oder innen geht. Über das Symbol können wir dann auch die Entfernung, Weichheit und Farbe des Schattens einstellen. Neben dem Schatten können wir auch die Form weichzeichnen, sowie den Hintergrund weichzeichnen. Letzteres funktioniert nur, wenn wir die Transparenz der Farbe untergestellt haben, um durch die Form die dahinterliegenden Elemente sehen zu können. Auch hier können wir natürlich die Stärke einstellen. Dieser Hintergrund blur, ist bspw. praktisch, wenn wir Bankkarten darstellen oder bspw. etwas hervorheben möchten und alles dahinter weichzeichnen.
Die Grundformen sind praktisch, für die meisten App Elemente. Aber wir können auch noch wesentlich komplexere Formen erstellen. Dafür können wir bspw. mehrere Grundformen kombinieren. Das geht, indem wir beide Formen erstellen und dann gleichzeitig auswählen. Dafür einfach erst eine Form auswählen und die Zweite mit gedrückter Shift-Taste anklicken. Jetzt können wir in der oberen Mitte, alle ausgewählten Formen zu einer Form zusammenfügen. Überlappen sich die Formen, können wir auch die Schnittmenge entfernen oder alles, was nicht die Schnittmenge ist. Was hier sehr cool ist, dass wir die einzelnen Formen auch immer nachträglich noch bearbeiten können, in dem wir erneut doppelt auf diese klicken. Komplett aufheben können wir die Kombinationen auch über einen Rechtsklick, wo wir die Gruppe entfernen.
Reicht uns das bisher nicht von der Komplexität, können wir auch, mit dem Pfadwerkzeug, individuelle Formen erstellen, anhand von Punkten, die wir zu einer Form zusammenfügen. Sind wir in der Pfadbearbeitung, können wir die einzelnen Punkte auch nachträglich verschieben und festlegen, ob die Punkte mit geraden Linien und Kanten verbunden sind, oder ob diese abgerundet sein sollen. Wählen wir letzteres, erscheinen an den Punkten auch zwei weitere Punkte, welche wir als Linie kleiner und größer schieben können sowie drehen. Damit können wir die Kurve der Linie zwischen dem Punkt einstellen. Durch erneutes Klicken mit dem Werkzeug auf die Kurve, können wir sie auch wieder entfernen.
Jetzt bist du an der Reihe, wir erstellen für unsere Social-Media App die wesentlichen Formen für alle drei Bildschirme. Überall packen wir am unteren Rand einen Rahmen hin, wo später das Menü hinkommt. Hier habe ich mir auch kleine Icons von Pixabay kostenlos als SVG heruntergeladen und importiert. Die Icons kannst du aber auch probieren mit dem Pfad und den Formenwerkzeugen, selbst zu bauen. Auf der Startseite machen wir oben eine Story-Funktion hin und darunter erstellen wir einen Bildpost. Hier füge ich auch icons für das Liken, Kommentieren und Teilen hinzu. Auf der Entdecken-Seite ist ein Suchfeld mit Icon sehr prominent und darunter die Suchergebnisse, wo wir unterschiedliche Formate haben für Medieninhalte, aber auch Texte oder Profile. Auf unserer Profilseite haben wir neben dem Profilbild auch ein Hintergrundbild, sowie Platz für die Profilinformationen, Schaltflächen uns unsere Profilinhalte. In diesem Schritt geht es nur darum, die Grundstruktur der Frames zu bestimmen und dass wir wissen, was alles zu sehen sein soll. Hier musst du auch noch nicht mit Farben arbeiten. Probiere, das jetzt nachzubauen und bring gerne deine eigenen Ideen mit ein!
Texte & Bilder
Neben Formen können wir natürlich auch Texte erstellen und Medien wie Bilder und Videos zu unserem Design hinzufügen. Für Texte finden wir ein eigenes Werkzeug in der oberen Leiste. Damit können wir einfach auf unseren Frame klicken und dann einen Text beginnen zu schreiben. Das ist praktisch, wenn du einzelne Wörter, Überschriften oder einfach einzeilige Texte erstellen möchtest. Wollen wir bspw. einen Beschreibungstext, der mehrere Zeilen hat erstellen, ist es praktischer, mit dem Textwerkzeug einen Rahmen aufzuziehen, in welchen wir dann den Fließtext schreiben können. Ob wir mit einem Textrahmen oder ohne arbeiten, können wir auch immer nachträglich über die Optionen bearbeiten. Hier können wir auch die Schriftart und Stil einstellen, sowie Schriftgröße. Letztere wird nicht vergrößert, wenn wir den Text über seine Ränder verändern, da wir damit nur den Textrahmen bearbeiten. Auch Standardsachen wie die Textausrichtung, wo er sich in der Box befindet, Zeichen und Zeilenabstand, können wir hier einstellen. Über die drei Punkte finden wir auch noch detailliertere Einstellungen zum Text. Die Einstellungen können wir auch nur auf einzelne, ausgewählte Teile vom Text anwenden. Das ist praktisch für Markierungen, aber grundsätzlich würde ich es probieren zu vermeiden, da dies auch schnell unübersichtlich werden kann. Auch die Farbe vom Text können wir wie gewohnt einstellen und ihm eine Kontur geben. Willst du einen Hintergrund für den Text, erstellen wir am besten einfach ein normales Rechteck, welches wir hinter den Text legen. Wir haben auch die Möglichkeit einen Text zu verlinken, in dem wir auf das Link-Symbol am oberen Rand klicken. Hier können wir eine URL eingeben, welche geöffnet wird, sobald wir in Figma oder der Vorschau, auf den Text klicken. Das kann für externe Informationen, sehr praktisch sein.
Neben den Texten können wir auch Bilder zu unserem Design hinzufügen. Das ist bspw. praktisch, wenn wir einen Social-Media-Post simulieren möchten, der uns hier auf der Startseite angezeigt wird. Bilder platzieren wir grundsätzlich immer in einer Form, welche als Rahmen für das Bild genommen wird. Wir können die Bilder einfach über die Füllfarbe hinzufügen oder über die Werkzeugleiste am oberen linken Rand. Hier können wir auch direkt mehrere Bilder auswählen, welche wir nacheinander platzieren können. Falls du Beispielbilder für deine Projekte benötigst, kann ich dir Pexels.com und Unsplash.com empfehlen, wo man lizenzfreie Bilder einfach kostenlos herunterladen kann. Dafür gibt es auch direkt Plugins in Figma, welche wir uns später noch kurz anschauen werden. Falls du Bilder nutzen möchtest, wo du auch die Lizenz dran hast, kann ich dir Envato Elementes empfehlen, wo man für einen monatlichen Preis unbegrenzten Zugriff auf Millionen von Stockfotos erhältst, sowie zu vielen weiteren Assets, wie bspw. Figma Vorlagen. Falls du mehr dazu wissen willst, findest du auch ein eigenes Tutorial in der Beschreibung.
Das Bild können wir jetzt über die Fülleinstellungen am rechten Rand auch einstellen, wo wir festlegen, wie das Bild in der Form angezeigt werden soll. Standardmäßig füllt das Bild immer die Form aus. Heißt, wenn wir die Form nachträglich anpassen, wird das Bild wieder so zugeschnitten, dass so viel wie möglich in die neue Form passt. Wir können aber auch sagen, dass immer das komplette Bild in der Form zusehen sein soll. Möchten wir frei nur bestimmte Ausschnitte vom Bild in der Form anzeigen, können wir auch “Crop” auswählen, wo wir das Bild in der Form bewegen können und über die Ränder auch die Größe ändern. Am rechten Rand können wir das Bild auch immer drehen. Formeinstellungen wie die Transparenz und Effekte funktionieren dann auch mit dem Bild.
Mit einem Figma Professional-Abo können wir auch neben Bilder Video einfügen.
Fügen wir jetzt in unserem Social-Media-Design noch alle wichtigen Texte ein. Dazu zählt auf der Startseite der Name ganz oben. Sowie bei den Storys eine Überschrift, der Benutzername und Beschreibung bei dem Beitrag. Bei dem Entdecken-Frame fügen wir noch einen Beispieltext in die Suche ein und Hashtag-Vorschläge in den Ergebnissen. Auf der Profilseite kommt erneut der Name hin, sowie die Profilbeschreibung. Dabei darauf achten, dass wir die gleiche Schriftart nutzen, welche für Überschriften größer und dicker ist und bei Beschreibungen kleiner und dünner. Jetzt fügen wir auch noch Beispielbilder für unseren Beitrag, Profil und Co. ein. Einfach über die Füllung und dort die Bilder auswählen und anpassen.
Layouten
Wir wissen jetzt, wie wir Elemente auf unseren Frames erstellen und bearbeiten können. Doch beim UX-Design ist die Anordnung und das Layouten der Elemente auch ein wichtiger Teil. Dafür haben wir in Figma auch einige praktische Funktionen. Wenn wir bspw. ein Element ausgewählt haben, können wir über die Eigenschaften am rechten Rand dieses direkt am Frame ausrichten. Bspw. soll das Menü am unteren Rand sein, dafür wähle ich es aus und klicke einfach auf das Symbol für den unteren Rand. Haben wir mehrere Elemente gleichzeitig ausgewählt, richten wir sie hier nicht mehr am Frame aus, sondern aneinander. So können wir bspw. mehrere Elemente auf die gleiche Höhe bringen. Wir haben auch die Möglichkeit einen genauen Abstand zwischen den Elementen festzulegen, sodass dieser überall gleich ist und können diesen dann über den Strich auch verändern. Anhand des Punktes sehen wir, was der Mittelpunkt der einzelnen Elemente ist, zu welchen der Abstand gemessen wird. Hier können wir die Elemente über ihren Punkt auch einfach miteinander austauschen. Das ist praktisch für mehrere Menü-Icons. Wir können den Abstand auch anhand eines genauen Wertes festlegen, falls du das lieber möchtest.
Generell, wenn wir unsere ausgewählten Objekte verschieben, werden uns automatisch Hilfslinien angezeigt, die uns helfen, Elementen gleichmäßig aneinander oder im Frame zu platzieren. Mit gedrückter Alt-Taste können wir auch einfach den Abstand zwischen einzelnen Elemente anhand von genauen Werten sehen. Das ist bspw. praktisch, wenn wir sichergehen wollen, dass die Abstände gleich sind.
Für das richtige Anordnen von mehreren Elementen, kann aber auch das Auto-Layout sehr praktisch sein, was wir ebenfalls in den Eigenschaften finden. Möchten wir bspw. eine Schaltfläche richtig anordnen, wählen wir einfach alle Elemente aus und klicken auf Auto-Layout. Jetzt werden diese automatisch von Figma angeordnet, wie Figma denkt, dass wir sie haben möchten. Diese Anordnung können wir jetzt aber auch individuell anpassen, wo wir die Position, Abstand und Rand einfach einstellen können. Hier wählen wir auch die Laufrichtung der Elemente aus. Also wenn wir bspw. einen Button erstellen, ist die Laufrichtung meisten von rechts nach links. Das tolle hier ist jetzt, wenn wir den Text erneut ändern, passt sich der Rest automatisch an, da wir hier das Auto-Layout aktiviert haben. So sind spätere Änderungen noch einfach möglich. Haben wir einmal das Auto-Layout aktiviert, können wir die Elemente aber nicht mehr frei bewegen. Das ist gut zu wissen, falls du dich wunderst, dass du das bspw. bei manchen Vorlagen nicht kannst. Dann einfach das Auto-Layout deaktivieren und schon kannst du die Elemente wieder frei bewegen.
Was auch für das Anordnen unserer Elemente auf dem Frame sehr praktisch ist, sind die Grids, welche wir für einen Frame einstellen können. Dafür müssen wir einfach auf den Namen des Frames klicken und können dann in den rechten Eigenschaften ein Grid erstellen. Hier können wir uns Kästchen erstellen lassen, aber ich stelle diese meistens auf Spalten oder Reihen um. So kann man den Frame einfach aufteilen und daran seine Elemente ausrichten. Hier können wir auch den Abstand zwischen den Spalten, woran sie ausgerichtet sein sollen und wie viele es sein sollen, einstellen. Wir haben auch die Möglichkeit mehrere Grids zu erstellen, was praktisch ist, falls du Spalten und Reihen nutzen möchtest. Über das Auge können wir die Grids auch immer wieder deaktivieren und in unserem finalen Design, werden diese nicht sichtbar sein. Die dienen nur für uns zur Unterstützung beim Layouten. Auch die Farbe der Grids können wir natürlich individuell anpassen.
Wir finden in den Element-Eigenschaften auch einen Bereich namens “Constraints”. Der ist relevant, wenn wir unser Design auf verschiedenen Bildschirmgrößen erstellen möchten. Den hier legen wir fest, an welchen Kanten unseres Frames, sich das Element ausrichtet, wenn wir die Framegröße verändern. Hier können wir neben den Rändern auch die Mitte auswählen, sodass das Element immer zentriert ist. Wenn du das nutzen möchtest, ist es auch sinnvoll, Elemente, welche zusammengehören, immer zu gruppieren und die Einstellung dann für die Gruppe festzulegen, damit die Elemente in sich noch richtig zusammenbleiben. Wollen wir, dass das Logo immer oben in der Mitte bleibt, können wir einfach oben und Mitte als Einschränkung einstellen. Bewegst du den Rand des Frames, siehst du direkt, wie das Element sich dann anpasst. Über Strg + Z kannst du die Rahmenveränderung auch immer einfach wieder zurücksetzen.
Für unsere Social-Media-App erstelle ich jetzt für die Frames ein Grid mit 4 Spalten. Die äußeren Ränder nutze ich als Orientierung für die Kanten der Beiträge. In der Suche sind die Vorschläge dann immer zwei Spalten breit, sowie die Beiträge im Profil. Hier richtige ich auch alle Elemente symmetrisch aus, sodass es alles einheitlich aussieht. Dabei mache ich auch die Abstände der Storys noch gleich und auch die Größe der Elemente passe ich entsprechend an.
Ebenen & Seiten
Wir haben jetzt schon mehrere Frames von unserem Design erstellt. Um den Überblick über unsere einzelnen Frames und Elemente in den Frames nicht zu verlieren, haben wir den Ebenen-Bereich am linken Rand. Dort sehen wir untereinander alle unsere erstellten Frames mit Namen und erkennen diese auch an ihrem Symbol davor.
Diese können wir aufklappen oder im Projekt einfach doppelt anklicken, um alle Elemente zu sehen, welche sich auf dem Frame befinden. Diese haben grundsätzlich Standardnamen, die automatisch vergeben werden, wenn wir eine neue Form auf dem Frame erstellen. Durch doppeltes Klicken darauf, können wir sie aber auch benennen, was das ganze übersichtlicher macht und wir dann auch über die Suche am oberen Rand, jedes Element über seinen Namen wiederfinden können. Dort können wir auch beim Suchen nach Elementtyp filtern. Durch Anklicken wählen wir das Element auf dem Frame auch aus, wodurch wir erkennen, welches Element das genau ist. Klicken wir doppelt auf das Symbol von dem Element, können wir es uns auch direkt im Hauptfenster rangezoomt anzeigen lassen.
Haben wir mehrere Elemente ausgewählt und gruppieren diese über einen Rechtsklick. Was bspw. auch passiert, wenn wir Formen miteinander kombinieren, sehen wir die Gruppe hier als Element und können diese auch aufklappen, um die einzelnen Elemente in der Gruppe anzuzeigen. Jedes einzelne Element, können wir dann über das Schloss auch sperren, womit wir es auf dem Frame nicht mehr auswählen können, bis wir das Schloss wieder entfernen. Über das Auge können wir das Element auch komplett ausblenden und damit auch nicht mehr auswählen auf dem Frame. Die einzelnen Elemente können wir hier auch per Drag-and-Drop verschieben, was praktisch ist, um sie in den Vorder- oder Hintergrund zu schieben. Den die Elemente, welche hier ganz oben sind, sind auf dem Frame im Vordergrund und die, welche ganz unten sind, im Hintergrund. Das ist relevant, sobald sich Elemente überlappen und bspw. voneinander überdeckt werden.
Neben den Frames und den Ebenen haben wir hier am linken Rand auch noch die Seiten. Das ist für sehr komplexe Projekte äußerst praktisch und wenn du bspw. mit Vorlagen arbeitest. Denn diese haben meistens mehrere Seiten, worauf sie ihre Frames verteilen. Einzelne Seiten sind quasi eine Hauptansicht, in welcher wir die Frames erstellen können in einem Projekt. So können wir bspw. eine Seite für die mobile Version und eine Seite für die Desktop-Version erstellen. Am Anfang reicht aber meistens mit auf einer Seite zu arbeiten, um nicht den Überblick zu verlieren und alles an einem Ort zu haben. Später können wir die Frames auch einfach per Kopieren und Einfügen, auch auf eine andere Seite verschieben. Mit einem kostenlosen Account können wir auch nur maximal drei Seiten in einem Projekt erstellen.
Für unsere Social-Media-App benenne ich jetzt im Ebenenfenster auch unsere ganzen Elemente und gruppiere sie logisch, sodass bspw. das Menü eine Gruppe ist oder alles, was der Beitrag ist. Auch die Reihenfolge der Elemente probiere ich von oben nach unten logisch anzuordnen.
Design-Systeme (Komponente & Instanzen)
Wie du bereits gemerkt hast, erstellen oder kopieren die gleichen Elemente immer wieder, welche halt auf jeder Designseite zusehen sind. Wie das Menü oder das Logo am oberen Rand. Hier ergibt es Sinn, die Component Funktion von Figma zu nutzen. Damit erstellen wir quasi eine Vorlage für ein Element, welches wir dann immer wieder verwenden können auf unterschiedlichen Frames und auch abwandeln können. Um jetzt eine Komponente zu erstellen, nehme ich einfach eine Variante, welche ich bereits erstellt habe und ziehe diese aus dem Frame raus. Da diese später unsere Vorlage für die Elemente auf den Frames ist, müssen wir sie nicht direkt auf dem Frame platzieren. Da sie ja nicht im Design sichtbar sein muss. Haben wir sie ausgewählt, können wir über das obere mittige Menü, diese zu einer Komponente umwandeln. Das Element erhält dann einen lilanen Rahmen und ein neues Symbol. Daran erkennen wir, dass es jetzt eine Komponente ist. Möchten wir jetzt eine Instanz des Komponente auf unserem Frame verwenden, können wir einfach die Komponente kopieren. Wir finden sie jetzt aber auch im linken Menü unter Assets. Dort sehen wir alle unsere bereits erstellten Komponenten im Projekt und können uns eine Instanz davon kopieren. Wir erkennen immer am Symbol, dass es sich nur um die Instanz und nicht um die Hauptkomponente handelt. Bearbeiten wir eine Instanz, wird die Änderung nur an der Instant geändert. Ändern wir etwas an der Komponente, wird das bei allen Instanzen der Komponente geändert. Hier ist es bei den Komponenten auch praktisch, mit dem Auto-Layout zu arbeiten, damit sich die Instanz auch direkt anpassen, falls wir ihre Größe verändern. In den Eigenschaften von einer Instanz, können wir auch direkt zum Hauptkomponente springen, falls wir allgemein direkt etwas anpassen möchten. Daneben können wir über die drei Punkte auch alle oder einzelne individuellen Anpassungen der Instanz wieder zurücksetzen. Dort können wir auch die Instanz komplett von seiner Komponente lösen, falls du wieder unabhängige Elemente haben willst.
Wir nehmen jetzt unseren Beitrag von unserem Social-Media-Design und ziehen es neben den Homescreen. Hier entfernen wir das Bild erneut, sowie ändern die Texte auf Standardtexte, sodass wir es einfach als Komponente nutzen können. Diesen wandeln wir dann zu einer Komponente um und kopieren uns eine Instanz. Diese fügen wir dann t mehrfach untereinander auf der Startseite ein. Dafür erweitern wir den Frame der Startseite auch nach unten. Jetzt können wir die Instanzen mit individuellen Bildern und Texten befüllen.
Neben den Komponenten und ihren Instanzen können wir auch Variationen für unsere Komponente erstellen. Das wird jetzt schon etwas komplexer und musst du für den Anfang nicht unbedingt selbst machen. Es ist aber gut zu wissen, wenn du mit Vorlagen arbeitest, da diese oft Variationen haben. Möchten wir eine Komponente bspw. einmal in einem hellen oder dunklen Design erstellen, können wir einfach die Hauptkomponente kopieren und die Farben ändern. Die erstellte Instanz können wir dann zu einer eigenen Komponente umwandeln und wenn wir beide Komponenten dann auswählen, können wir sie als Variationen voneinander erstellen. Erstellen wir dann eine Instant, können wir am rechten Rand zwischen den Variationen wechseln.
Dieses Komponenten-System mit Variationen und Instanzen ist ein sehr praktisches Tool, sobald deine Designs komplexer werden oder später noch Dinge geändert werden. Es ist auch perfekt, um ein konsistentes Design über deine Frames hinweg zu haben, da du immer wieder die gleichen Elemente verwendest und diese nur maximal individuell abwandelst.
Wir erstellen jetzt für die Storys auf der Startseite eine Komponente, einmal als angesehene Story und einmal als neue Story. Dafür ziehen wir wieder eine Story raus und fügen einen farbigen Rand hinzu, was die Story als ungesehen erkenntlich machen soll. Diese kopieren wir erneut und machen den Rahmen Farblos, was das gesehen darstellen soll. Jetzt wandeln wir beide einzeln in eine Komponente um und markieren sie beide, um sie als Varianten voneinander anzugehen. Diese können wir jetzt auch noch benennen und uns dann aus den Assets die Story wieder ins Design platzieren. Dort können wir dann wieder Bilder individuell hinzufügen und in den Einstellungen festlegen, dass manche Storys ungesehen sind und andere nicht.
Um den Überblick nicht zu verlieren, wo deine Komponente sind und deine normalen Frames, rate ich dir am besten, am linken Rand eine eigene Seite für die Komponenten zu erstellen, wo wir dann über einen Rechtsklick die Hauptkomponente verschieben. So können wir diese einfach hier auf einer eigenen Seite haben, separiert, von unserer Projektdatei. Die Instanzen von den Komponenten können wir dann einfach über die Assets auf unserer Projektseite erstellen. Unsere Komponenten können wir dann auf ihrer eigenen Seite auch einfach in eigenen Sektionen sortieren, sodass wir keine Frames benutzen müssen und trotzdem etwas Ordnung reinbringen können. Die Sektionen werden dann auch in unseren Assets bei den Komponenten angezeigt, das ist bei vielen Komponenten praktisch.
Variablen & Styles
Neben den Komponenten haben wir auch noch die Styles und Variablen in Figma. Mit den Variablen hier sind nicht die Variablen von Komponenten gemeint. Komponenten sind dafür gut, Elemente oft auch mehrere zusammen, wiederzuverwenden. Styles und Variablen sind für einzelne Eigenschaften von Elementen gut, also für übergreifende Farben, Textstile und so.
Doch was ist der Unterschied zwischen Variablen und Styles? Variablen sind immer nur ein Wert, also eine Farbe, eine Zahl, ein Text. In Styles hingegen können wir mehrere Sachen in einem Style speichern. Zudem können wir nur Farben mit beiden Speichern, hier ist es egal, welches du dafür verwendest. Bei Styles haben wir aber auch die Möglichkeit Textstile, Effekte und Grids zu speichern. Bei Variablen können wir dafür Zahlenwerte, richtige Texte oder Wörter, sowie Booleans speichern. Klingt jetzt vielleicht etwas verwirrend, aber wir schauen uns beides jetzt an und dann sollte es verständlicher sein, wann du welches verwendest.
Auf die Variablen und Styles können wir zugreifen, indem wir in einen leeren Bereich im Projekt klicken, sodass wir nichts ausgewählt haben. Jetzt finden wir im rechten Menü lokale Variablen und Styles. Diese werden als Lokal angezeigt, da sie sich nur auf unser aktuelles Projekt beziehen. Wir können theoretisch auch auf externe Variablen und Styles zugreifen, die in einem anderen Projekt liegen, was aber erst sinnvoll wird, wenn wir an sehr großen Projekte mit mehreren unterschiedlichen Designdateien arbeiten.
Bei den Variablen, können wir dann ein eigenes Fenster öffnen, wo wir eine neue Variable erstellen können. Aktuell können wir Variablen für Farben, Texte, Nummern und Boolean, also Ja/Nein Funktionen erstellen. Den Variablen können wir dann eigene Namen geben und ihren Wert anpassen. Über die Optionen am rechten Rand, können wir auch festlegen, dass die Variable nur an bestimmten Orten in unserem Dokument angezeigt und ausgewählt werden kann. Hier können wir auch noch eine detailliertere Beschreibung hinzufügen, was bei einer Teamarbeit Verständnisfragen vermeiden kann.
Hier können wir jetzt bspw. unsere Farben, welche wir über das Projekt hinweg nutzen, hinzufügen. Benenne diese am besten nicht nach der Farbe, sondern nach ihrer Funktion. Bspw. primäre Farbe, Akzentfarbe und Co. Ich verwende in einem Projekt meistens nicht mehr als 3–5 unterschiedliche Farben und um eine gute Farbpalette zu finden, kann ich dir coolors.co empfehlen. Dort findet man nach unterschiedlichen Farbtheorien direkt eine zusammenpassende Farbpalette oder kann sich einfach und kostenlos von der Community inspirieren lassen. Die Farb-Hexcodes können wir dann einfach kopieren und in Figma hier einfügen.
Haben wir ganz viele Variablen erstellt, können wir diese auch mit einem Rechtsklick gruppieren, welche wir dann im linken Menü anzeigen können. Mit gedrückter Shifttaste können wir auch mehrere Variablen gleichzeitig markieren, um sie zusammen zu gruppieren. Die Gruppen können wir natürlich mit einem Doppelklick auch benennen. So können wir bspw. alle unsere Brandfarben in eine Gruppe packen. Neben Gruppen können wir hier auch mehrere Kollektionen von Variablen erstellen. Das ist eine Hierarchie über den Gruppen. Für kleine Projekte reicht aber eine Kollektion meistens komplett aus.
Bei den Styles können wir direkt im rechten Menü über das Plus einen neuen erstellen und sehen auch alle bereits erstellten hier im Überblick. Hier haben wir wesentlich mehr Optionen bei einem Style, was wir speichern können. Wir benennen ihn aber auch und können eine Beschreibung hinzufügen. Hier haben wir auch die Möglichkeit Effekte und Grids als Style zu speichern.
Doch wie verwenden wir jetzt unsere erstellten Variablen und Styles? Wollen wir bspw. eine unserer Farben verwenden, klicken wir einfach unser Element an und gehen zur Füllung. Hier klicken wir dann auf die 4 Punkte und suchen nach unserer Farbe. Variablen werden hier 4-eckig angezeigt und Styles als Kreis. Beachte, wenn du mit Komponenten arbeitest, die Farben in der Hauptkomponente anzuwenden, damit es auch bei allen seinen Instanzen als Variable genutzt wird. Der große Vorteil beim Verwenden von den Variablen und Styles ist, dass wir nachträglich einfach damit eine Farbe, Nummer, oder Text einfach überall durch eine Anpassung ändern können. Das ist für spätere Feedbackrunden sehr praktisch. Es hilft zudem sehr dabei, konsistent in seinem Design zu bleiben und nur mit seinen festgelegten Farben zu arbeiten, was das Design meistens professioneller macht. Überall, wo wir diese 4 Punkte sehen, können wir unsere Variablen und/oder Styles anwenden. Du fragst dich vielleicht noch, wo wir unsere Variablen wie Zahlen angeben können? Bspw. bei den Element Abmessungen über den Punkt, was super in Kombination mit dem Auto-Layout funktionieren kann. So können wir bspw. für mehrere Elemente die gleiche Breite oder Höhe über eine Variable einstellen, welche wir dann nachträglich über die Variable überall anpassen können. Das wird dann aber schon wesentlich komplexer. Für den Anfang rate ich dir dazu am besten die Variablen und Styles für Farben und Textstile zu verwenden. Damit bekommst du schon ein gutes Gefühl, wie das funktioniert. In dem Zusammenhang ist es auch praktisch, eine Sektion oder Frame im Dokument zu erstellen, wo wir die einzelnen Farben, Textstile und Co mit Namen auflisten. So sehen wir direkt, welche Stile und Variablen wir haben und wie diese aussehen. Das ist auch super praktisch zum Kopieren und Einfügen.
Mach das jetzt einmal für unsere Social-Media App. Überlege dir drei Farben, welche du in der App verwenden möchtest. Einmal eine primäre Farbe, Akzentfarbe und Hintergrundfarbe. Diese legst du dann als Variablen an und fügst sie als Designvorlage in einer eigenen Sektion ein. Hier fügst du dann auch Textstile mit Styles ein, welche für Überschriften, Unterüberschriften und Beschreibungstexte verwendet werden. Anschließend kannst du sie auch auf unserem bisherigen Design anwenden, in dem du die vorhandenen Farben und Textstile mit den Variablen und Styles austauschst. Ich nutze weiterhin das Off-White als Hintergrund, als Akzentfarbe ein Blauton und ein dunkles Grau für Texte, Überschriften und Icons. Hier siehst du auch meine Farbcodes und kannst diese auch verwenden, falls du das möchtest. Ich mache auch immer im Menü das Icon farbig in der Akzentfarbe, auf welcher Seite wir uns befinden. Beim Ersetzen der Farben nutze ich auch gerne die Farbübersicht, welche wir sehen, wenn wir einen Frame komplett auswählen. Hier sehen wir nämlich alle im Frame bereits verwendeten Farben und können diese hier direkt überall auf dem Frame ersetzen. Dort aber immer erneut prüfen, ob alles richtig funktioniert hat und nichts vergessen wurde. Zudem darauf achten, die Farben in den Hauptkomponenten zu ändern und nicht nur in einzelnen Instanzen.
Prototyping & Vorschau
Sobald wir fertig sind mit dem Designen unserer einzelnen Frames, können wir diese miteinander verbinden, um eine interaktive Vorschau zu erhalten. Das nennt sich auch „Prototyp“ und können wir im gleichnamigen Bereich am rechten Rand machen. Haben wir kein Element ausgewählt, können wir für die Vorschau einstellen, auf welchem Gerät wir die Vorschau simulieren möchten. Wähle hier am besten das Gerät aus, welches du auch bei der Frames-Erstellung genommen hast. Wir sehen hier auch eine Vorschau, wo wir ebenfalls den Hintergrund einstellen können. Über den Play-Button am oberen rechten Rand, können wir dann auch die Vorschau in einem separaten Fenster öffnen, wo wir auch live Veränderungen sehen, falls wir diese im Dokument machen. Hast du die Figma-App auf deinem Smartphone installiert und dich dort mit deinem Account angemeldet. Kannst du dir den Prototyp auch direkt auf deinem Smartphone anschauen, was praktisch ist, wenn du ein App-Design erstellst.
Klicken wir jetzt einen Frame-Namen an, können wir allgemeine Einstellungen zur Vorschau für den Frame machen. Hier ist das Scroll-Verhalten sehr praktisch. Erweitern wir den Frame weiter nach unten, können wir festlegen, dass wir später in der Vorschau einfach runterscrollen können. So wie wir es in einer App auf dem Smartphone auch machen können. Wollen wir aber jetzt bspw. dass sich unsere Menüleiste am unteren Rand nicht mitbewegt, sondern immer am unteren Rand bleibt, wählen wir diese aus. Wähle hier die komplette Gruppe der Menüleiste aus, damit auch das komplette Menü fixiert bleibt. Jetzt stellen wir hier einfach beim Scroll-Verhalten fixiert ein. Als dritte Option haben wir hier noch Sticky, womit das Element am oberen oder unteren Rand fixiert bleibt, sobald es diesen erreicht. Das kann für bestimmte Scrolling-Effekte praktisch sein.
Jetzt können wir aber auch einzelne Elemente auf unserem Frame anklickbar machen, um bspw. auf einen anderen Frame wechseln zu können. Dafür wählen wir das Element aus und über das Plus an seinen Kanten, können wir eine Linie aufziehen, zu einem anderen Frame, der durch Klicken auf das Element angezeigt werden soll. Hier öffnet sich dann ein kleines Menü, wo wir noch mal den Übergang einstellen können. Dort können wir die Bewegung verändern, sodass sie glatter ist oder den Zielframe noch mal abändern. Klicken wir das Objekt später erneut an, sehen wir auch am Pfeil, wo genau der Klick hingeht. Hier können wir dann auch erneut das Menü öffnen. Standardmäßig erstellen wir hier über das Plus immer eine Klickreaktion. Das können wir aber am oberen Rand auch ändern. So können wir auch Interaktionen durch Bewegen der Maus über das Element, Zeit versetzt oder Tastendruck triggern. Mit einem Professional-Abo können wir auch mehrere unterschiedliche Trigger zu einem Element hinzufügen.
Was hier auch noch gut zu wissen ist, dass wir neben dem einfach wechseln zu einer Seite, auch andere Aktionen mit den Triggern auslösen können. Bspw. können wir einfach einen externen Link durch Klicken auf ein Element öffnen oder zu einer bestimmten Position auf dem Frame runterscrollen lassen. Hier können wir auch eine Verlinkung zu einem Overlay erstellen. Das ist praktisch, wenn du bspw. aufklappbare Menüs erstellst. Das aufgeklappte Menü erstellen wir einfach auf einem Frame, wo wir den Hintergrund entfernen. Dann können wir hier einfach eine Verlinkung vom Burger-Menü zu unserem erstellen Overlay als Overlay einstellen und dann wird unser aufgeklapptes Menü über dem letzten Frame angezeigt. Zu dem Overlay können wir auch noch einstellen, wie das genau positioniert sein soll und ob es geschlossen werden soll, wenn man anschließend ins Leere auf dem Frame klickt. Auch ob es langsam eingeblendet werden soll, können wir hier einstellen. So müssen wir nicht zusätzlich eine Kopie des anderen Frames mit Inhalt erstellen und aufgeklappten Menü, sondern nur das aufgeklappte Menü und können es so auch mehrfach wiederverwenden.
Was auch gut zu wissen ist, wenn wir mit Komponenten arbeiten und dort mehrere Varianten von einer Komponente erstellt haben, dass wir zu diesen auch Interaktionen hinzufügen können. So können wir bspw. einen Button erstellen, einmal in Hell und einmal in Dunkel. Jetzt verbinden wir diese beiden miteinander und können sagen, wenn wir über den Button mit der Maus fahren, ändert er seine Farbe zu der anderen Variante. Diese Einstellungen werden dann für die Instanzen übernommen und so müssen wir diese Interaktionen nur einmal bei der Hauptkomponente festlegen.
Für unsere Social-Media-App füge ich jetzt auch einfache Interaktionen hinzu, sodass wir auf die Menüpunkte auf jedem Frame klicken können, damit wir zu den anderen Seiten kommen. Bei den Storys füge ich auch eine Interaktion hinzu, damit diese die Variante der Komponente wechseln, sobald wir sie angeklickt haben. Zudem mache ich das Profilbild des Beitrags anklickbar, sodass wir auf der Profilseite landen.
Befinden wir uns in der Vorschau, können wir am oberen rechten Rand auch einstellen, was wir in dieser Ansicht alles sehen möchten. Klicken wir etwas im Design an, was nicht interaktiv ist, wird uns kurz blau markiert, welche Elemente interaktiv sind. Am linken Rand können wir auch zwischen verschiedenen Flows wechseln. Diese können wir bei jedem Frame erstellen und so bspw. unterschiedliche Startpunkte festlegen, zwischen welchen man hier wechseln kann. Das ist etwa praktisch, wenn wir das Design schon für unterschiedliche Geräte erstellt habe und hier zwischen diesen wechseln möchten. Oder nur einzelne Teile des Designs bereits fertig haben, welche nicht alle zusammenhängen. In der Vorschau können wir auch Kommentare hinzufügen, was praktisch ist, sobald wir den Prototyp mit anderen teilen.
Zusammenarbeiten, Teilen & Exportieren
Da alle unsere Projekte in Figma cloudbasiert sind, ist es sehr einfach diese mit anderen zu teilen oder zusammenzuarbeiten. Dafür einfach auf die Teilen-Schaltfläche am oberen rechten Rand klicken. Dort können wir weitere Personen per E-Mail oder Link einladen. Hier legen wir fest, ob diese nur das Dokument anschauen dürfen, es auch bearbeiten können oder nur die Prototypen sehen. Alle bereits eingeladenen Personen sehen wir hier auch in einer Liste und können ihren Zugriff verändern. Hat jemand die Möglichkeit das Dokument zu bearbeiten, sehen wir auch seine Maus live im Dokument und was er verändert. Wenn eine Person gerade im Dokument drinne ist, sehen wir sie auch am oberen rechten Rand. Soll jemand direkt auf den DevMode von unserem Design zugreifen, können wir hier auch einen Link dafür teilen. Wir können unser Dokument auch in der Figma Community teilen, sodass jeder es dort finden und kopieren kann. Unser Projekt findest du auch dort, welches du über den Link öffnen und dann in deinen Figma Account duplizieren kannst.
Neben einzelnen Dateien können wir auch andere Personen zu ganzen Teams oder Projekten hinzufügen, was ebenfalls über die jeweilige Teilen-Schaltfläche am oberen rechten Rand geht.
Doch wenn wir fertig mit unserem Design sind, wie geht es weiter? Wir können unser Design über das Figma-Menü auch als PDF exportieren, wo alle Frames auf eine eigene Seite im PDF gepackt werden. Wir können einzelne Frames aber auch als PNG, SVG oder auch PDF exportieren. Dafür einfach den Frame auswählen und auf das Plus beim Export klicken. Hier können wir auch die Auflösung skalieren, wo 1x die originale Auflösung ist. Dort können wir es auch direkt exportieren, oder die Einstellungen zu mehreren Frames machen, wo wir dann über das Figma-Menü, alle gleichzeitig exportieren können. Den Exportdateien können wir auch bestimmte Namen hinzufügen.
DevMode
Möchten wir unsere Design-File an einen Programmierer weitergeben, damit er diese als richtige App oder Webseite umsetzen kann, gibt es in Figma auch den extra DevMode, welcher sehr praktisch ist. Dieser ist leider nicht im kostenlosen Abo enthalten. Wir können den Modus immer am oberen rechten Rand aktivieren und über das Teilen, auch direkt einen Link zum DevMode der Datei mit einer anderen Person teilen.
Haben wir den DevMode aktiviert, verändern sich die Menüs am linken und rechten Rand und wir können die Elemente und Frames nicht mehr bearbeiten in der Datei. Klicken wir ein Element an, sehen wir am rechten Rand direkt alle relevanten Informationen für uns. Einmal ob es sich um eine Komponente handelt. Falls ja und es mehrere Varianten gibt, können wir diese auch in einer eigenen Vorschau anschauen und mit den Varianten herumspielen. Das ist gut, um zu verstehen, was die Komponente alles kann. Darunter sehen wir auch alle Code relevanten Informationen, wo wir zwischen den Code-Sprachen wechseln können. Auch die verwendeten Farben sehen wir hier und falls Bilder, Videos oder SVGs im Element sind, können wir diese hier auch direkt in ihrer originalen oder angepassten Qualität herunterladen. Das ist sehr praktisch, da du dann nicht die Dateien vom Design noch separat erhalten musst.
Fahren wir mit der Maus über die Designs, werden uns auch direkt die Abstände angezeigt. Wir können mit dem Maßband-Werkzeug, auch eigene Abstände abmessen, falls wir das noch benötigen. Hier können wir auch Kommentare und Anmerkungen zu Elementen hinterlassen, falls etwas nicht klar sein sollte. Am linken Rand sehen wir dann auch alle Seiten und Ebenen. Hier ist auch spannend der Bereich “Fertig für Entwicklung”. Denn der Designer kann bei der Bearbeitung einzelne Sektionen, Frames oder Elemente, als Fertig für die Entwicklung markieren. Damit kann er während er an der Datei noch arbeitet, dem Entwickler sagen, was schon fertig ist. Wir können diese dann hier direkt anklicken und springen zu dem Element. Falls nachträglich vom Design daran noch etwas verändert wurde, sehen wir das hier als Hinweis und können über die Eigenschaften auch die Änderungen mit der Version davor vergleich. Hier sehen wir genau, welche Elemente geändert wurden und können, die Versionen auch aufeinanderlegen, um sie miteinander zu vergleichen. Am linken Rand sehen wir auch, wer die Änderungen wann gemacht hat.
Figma hat auch eine direkte Integration mit VS Code, wo wir die Elemente auch direkt importieren kann und es gibt Plugins, welche die Designs schon teilweise direkt in Code umschreiben können. Wie gut das funktioniert, hängt oft an der Art und Weise, wie der Designer das Design aufgebaut hat.
Weitere Tipps
Wir haben uns jetzt die wirklichen Grundlagen von Figma angeschaut, jetzt zum Abschluss will ich dir noch paar weitere hilfreiche Tipps geben, die in bestimmten Fällen sehr praktisch sein können.
Einmal haben wir die Möglichkeit auch Plugins in Figma zu installieren und zu verwenden. Diese finden wir unter einem eigenen Punkt in der Werkzeugleiste. Hier finden wir Plugins zum Integrieren von Karten, zum Texte übersetzen, 3D Elemente einbauen und vieles mehr. Ich kann hier das Pexels oder Unsplash Plugin empfehlen, womit man kostenlose Stock-Bilder direkt in seine Projekte einbauen kann. Über die Communityseite können wir auch alle Plugins durchsuchen, wo wir auch direkt die beliebtesten Plugins sehen und auch nach nur kostenlosen Plugins filtern können. Denn manche Plugins bieten auch In-App-Käufe an.
In unserer Design-File können wir in einem Frame auch einen weiteren Frame erstellen. Das klingt jetzt so, als ob wir hier einen weiteren Frame als Gruppe missbrauchen, das ist aber nicht der Fall, denn es gibt einen sehr praktischen Unterschied. Den im Vergleich zu einer Gruppe, können wir mit einem Frame auf dem Frame, die Elemente im Frame abschneiden, sodass man auch nur das sieht, was innerhalb des Frames ist. So können wir eine Schnittmaske erstellen, die weiterhin frei bearbeitbar ist. Mit einer Gruppe wäre das nicht möglich.
Neben Frame im Frame können wir auch Komponente in Komponenten erstellen. Das ist bspw. praktisch, wenn wir in mehreren Komponenten einen Button benutzen, der aber immer gleich aussehen soll. Dann erstellen wir den Button als Komponente und fügen diesen dann als Variante in der anderen Komponente ein. Bearbeiten wir dann den Hauptbutton, wird sein Stil auch in der anderen Komponente angewendet. So können wir noch smarter mit Komponenten arbeiten und unser Design einfach überall identisch durchziehen und anpassen.
Am Ende kann ich dir nur noch mit auf den Weg geben, leg einfach mal los in Figma. Auch wenn dein erstes Design nicht mega aussieht, je mehr du übst, desto einfacher wird alles und du intensivierst das Programm. Damit Designs am Anfang gut aussehen, ist es auch praktisch, sich Farbtheorien oder UX-UI Prinzipien anzuschauen. Und fühl dich frei, immer wieder zu diesem Grundkurs zurückzukehren, falls du vergessen hast, wie etwas genau funktioniert. Du kannst dir mein Social-Media-Design auch über den Link in der Beschreibung, in dein Figma kopieren und auch dieses weiter ausbauen. Bspw. die Icons am Beitrag anklickbar machen mit Varianten von Komponenten. Oder du fügst weitere Funktionen hinzu, wie einen Registrierungsablauf, ein Nachrichten-System oder bspw. Frames, die zeigen, wie man Storys öffnet oder einzelne Beiträge auf der Profilseite anklickt. Deiner Kreativität sind hier keine Grenzen gesetzt. Wie du das Design weiter ausbaust, würde mich sehr interessieren, deswegen teile es doch gerne in den Kommentaren, falls du das machst!
Über diesen Link* kannst du direkt Figma kostenlos nutzen und für mehr praktische Tutorials zu anderen Design & Kreativprogrammen bspw. den ganzen Adobe-Anwendungen kannst du meinen YouTube-Kanal gerne kostenlos abonnieren. Über das Bewerten und Teilen des Grundkurses freue ich mich immer sehr. Bis zum nächsten Mal.
