Schaltfläche erstellen
- Produkt: Figma Design
- Thema: Text, Auto-Layout, Farbe
- Länge: 10 Minuten
In diesem Projekt erstellen wir eine Schaltfläche für Figma Design. Schaltflächen gehören zu den gängigsten Elementen einer Benutzeroberfläche. Nachfolgend erfährst du, wie du das Textwerkzeug und die Auto-Layout-Funktion verwendest.
Wenn du der Anleitung Schritt für Schritt folgst, sollte deine Schaltfläche am Ende etwa so aussehen:
Das sind die Schritte zum Erstellen einer Schaltfläche:
Textebene erstellen
Mit dem Textwerkzeug kannst du Text hinzufügen. Klicke dafür einfach in der Symbolleiste auf das Textwerkzeug oder drücke die Taste T.
Klicke bei aktiviertem Textwerkzeug auf die Arbeitsfläche und gib “Button” (Schaltfläche) ein, um die Textebene zu erstellen. In der linken Seitenleiste wird jetzt eine Textebene namens “Button” angezeigt. Der Name der Textebene ist mit dem in der Arbeitsfläche eingegebenen Text identisch, es sei denn, du änderst den Namen auf dem Layers-Tab (Ebenen). Um den Namen einer Textebene zu ändern, doppelklicke in der linken Seitenleiste auf die Ebene und gib einen neuen Namen ein.
Hier kannst du auch gleich die Textgröße ändern. Wähle die Textebene aus und ändere in der rechten Seitenleiste unter Text die Textgröße in 16. In der Anleitung behalten wir die Standardschriftart bei, aber du kannst gerne eine andere Schriftart wählen.
Textebene in Auto-Layout-Rahmen umwandeln
Die Schaltfläche sieht vielleicht noch nicht sehr schön aus, aber das ändern wir gleich mit der Auto-Layout-Funktion.
Was ist Auto-Layout? Auto-Layout ist eine der effizientesten Funktionen in Figma. Du kannst damit dynamische Designs erstellen, die sich je nach Gerätetyp, Objektposition oder Inhaltsumfang automatisch anpassen.
Wir sehen uns die Auto-Layout-Funktion hier nur kurz an, wenn du jedoch mehr darüber erfahren möchtest, wirf einen Blick auf unsere Video-Playlist zu Auto-Layout.
Du kannst die Auto-Layout-Funktion auf einen vorhandenen Rahmen anwenden oder damit eine Ebene in einen Rahmen umwandeln. Wir wählen gleich die zweite Option. Wähle die Textebene aus und drücke die Tastenkombination Umschalt + A. Sobald die Auto-Layout-Funktion aktiviert ist, ändert sich manches in der Anzeige:
- Die Textebene wird jetzt in einem Rahmen angezeigt. Da die Auto-Layout-Funktion nur auf Rahmen und Komponenten angewendet werden kann, hat Figma die Textebene automatisch in einem neuen Rahmen platziert. Der Rahmen hat noch keine Füllfarbe, das ändern wir aber noch.
- Wenn du den Rahmen auswählst, werden in der rechten Seitenleiste die Auto-Layout-Einstellungen angezeigt. Wir behalten für dieses Projekt die Standardeinstellungen bei. Wenn du mehr dazu erfahren möchtest, sieh dir unseren Artikel zu den Auto-Layout-Eigenschaften an.
- Die Rahmengröße passt sich an den Text an. Dynamische Elemente wie dieses sparen dir Zeit, wenn du Inhalt erstellst, der auf unterschiedlichen Gerätetypen oder in unterschiedlichen Sprachen angezeigt wird. Das sieht jetzt vielleicht noch nicht besonders beeindruckend aus, aber wenn wir die Schaltfläche gleich weiter gestalten, wird deutlich, wie effektiv die Auto-Layout-Funktion ist.
Schaltfläche gestalten
Kommen wir jetzt zur Gestaltung der Schaltfläche.
Füge zunächst Farbe hinzu. Wähle die Rahmenebene aus und klicke in der rechten Seitenleiste unter Fill (Füllen) auf , um eine Füllfarbe festzulegen. Du kannst die Farbe mit dem Farbwähler ändern. Wir verwenden den Farbcode 33b249.
Wähle anschließend die Textebene aus und lege für die Füllung FFFFFF fest.
Du kannst die Ecken der Schaltfläche abrunden, damit sie gefälliger aussieht. Wähle hierfür erneut den Rahmen aus und ändere in der rechten Seitenleiste den Eckradius in 6.
Ändere jetzt noch den Abstand des Rahmens. Beim Umwandeln der Textebene in einen Auto-Layout-Rahmen wurde zwischen dem Rahmen und dem Text automatisch ein Abstand eingefügt. Standardmäßig ist der Abstand auf allen Seiten gleich. Wir möchten jetzt, dass der Abstand oben und unten kleiner als rechts und links ist.
Wähle den Rahmen aus. Indem du den Mauszeiger darüber bewegst, werden pinkfarbene Griffe angezeigt, mit denen du den Abstand ändern kannst. Der Abstand lässt sich auf jeder Rahmenseite individuell ändern. Ziehe hierfür am jeweiligen Griff oder klicke darauf, und gib eine Zahl in das daraufhin angezeigte Feld ein.
Ändere den Abstand wie folgt:
- Oberer und unterer Abstand: 8
- Linker und rechter Abstand: 16
Tipp: Mit den folgenden Tastaturbefehlen kannst du den oberen und unteren Abstand oder den rechten und linken Abstand gleichzeitig ändern:
- Halte <⌥ Option> oder <Alt> gedrückt und klicke dann auf den Abstandsbereich, um einen Abstandswert für die gegenüberliegenden Seiten einzugeben.
- Halte <⌥ Option> oder <Alt> gedrückt, während du die Griffe ziehst, um die Abstände der gegenüberliegenden Seiten zu ändern.
Jetzt ändern wir noch die Beschriftung. Doppelklicke auf den Text, um ihn zu bearbeiten, und gib “Sign up” (Anmelden) ein. Die Größe der Schaltfläche passt sich während der Eingabe an. Das macht es wirklich einfach.
Nächste Schritte
Herzlichen Glückwunsch! Du hast soeben in Figma eine Schaltfläche mit dem Textwerkzeug und der Auto-Layout-Funktion erstellt. Du kannst auch noch einen Schritt weitergehen, die Schaltfläche in eine Komponente umwandeln und sie als Variante speichern. Dies erspart dir, bei jeder neuen Schaltfläche von vorn zu beginnen.