So erstellen Sie eine Schaltfläche in Figma

2023/08/17

Die Designschaltflächen auf Figma können auf unterschiedliche Weise erstellt werden, indem Komponenten- und Auto-Layout-Eigenschaften auf der Plattform genutzt werden. Daher können Schaltflächen mithilfe von Beschriftungen, Größen und Symbolen angepasst werden. Wenn Sie nicht sicher sind, wie Sie Schaltflächen in Figma erstellen, sind Sie hier richtig.

In diesem Artikel wird erläutert, wie Sie Schaltflächen erstellen und wie Sie Figma optimal nutzen.

Erstellen einer Schaltfläche

Schaltflächen sind häufige Elemente, die beim Entwerfen einer funktionalen Benutzeroberfläche verwendet werden. Sie können eine Schaltfläche im Figma-Design erstellen. Wenn Sie neu bei Figma sind, müssen Sie zunächst die Grundlagen verstehen.

Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen von Schaltflächen:

Erstellen Sie ein neues Figma-Design.
Fügen Sie einen Rahmen hinzu, indem Sie die F-Taste auf Ihrer Tastatur drücken und dann „Desktop“ oder „Telefon“ auswählen.
Fügen Sie mit der R-Taste der Tastatur ein Rechteck mit den Abmessungen 50 Pixel Höhe und 200 Pixel Breite hinzu.
Fügen Sie Text hinzu, indem Sie „T“ auf Ihrer Tastatur drücken. Zentrieren Sie Ihren Text so, dass er horizontal und vertikal in der Mitte Ihres Textfelds liegt.
Platzieren Sie dieses Textfeld in der Mitte Ihres Rechtecks.
Gruppieren Sie Komponenten nach Ihren Wünschen.

Sie können Farben hinzufügen, indem Sie sie mit dem Farbwähler erstellen, oder Sie können über das Internet auf hexadezimale Farben zugreifen.

Kontrast

Die Textfarbe innerhalb der Schaltfläche hängt davon ab, ob sie einen besseren Kontrast zu einem schwarzen oder weißen Hintergrund bildet. Sie können beide Optionen nutzen, um herauszufinden, welche am besten funktioniert. Wenn Ihnen eine der Optionen nicht gefällt, können Sie den Stil und die Farbe der Schaltfläche anpassen.

Einfache Schaltflächen erstellen

Es gibt drei grundlegende Schaltflächen, die auf Figma erstellt werden können.

Primärtaste

Primärschaltflächen sind einfarbig mit schwarzem oder weißem Text. Diese Schaltfläche zeichnet die Benutzer an, während sie eine App verwenden. So können Sie eines erstellen:

Wählen Sie eine Farbe für Ihren Button.
Wählen Sie das Rechteck aus und wenden Sie dann die ausgewählte Farbe an.
Färben Sie den Text je nach besserem Kontrast in Weiß oder Schwarz.

Sekundärtaste

Dies ist normalerweise ein weißer Knopf, der jedoch in der von Ihnen gewählten Farbe umrandet ist. Auch der Buttontext kann die gleiche Farbe haben. Dies ist die zweitwichtigste Schaltfläche, die Sie erstellen können. Es sollte auch die Aufmerksamkeit des Benutzers auf sich ziehen.

Ändern Sie die Farbe Ihres Rechtecks in Weiß (#FFFFFF).
Fügen Sie im Rechteck einen Strich hinzu. Hier können Sie die gewünschte Farbe auswählen.
Ändern Sie Ihre Textfarbe so, dass sie dieselbe Farbe wie der Text hat.

Tertiärer Knopf

Tertiärtasten sind nicht so wichtig wie die ersten beiden. Sie können als Link-, Abmelde- oder Zurück-Buttons fungieren. Sie bestehen häufig aus reinem Text und können in einigen Fällen unterstrichen werden.

Machen Sie Ihr Rechteck weiß, ohne Strich.
Ändern Sie die Textfarbe nach Ihren Wünschen.

Sie können eine tertiäre Schaltfläche erstellen, die einer primären oder sekundären Schaltfläche ähnelt. Sie können auch die Strichstärke ändern, um eine bessere Sichtbarkeit zu erzielen.

Erstellen Sie eine Schaltfläche mit Text, automatischem Layout und Farbe

Mit den Tools auf der Plattform können Sie praktische Erfahrungen mit dem Auto-Layout- und Text-Tool sammeln. Mit der Schritt-für-Schritt-Anleitung dürfte die Erstellung einer Schaltfläche relativ einfach zu bewerkstelligen sein. Um eine Schaltfläche zu erstellen, müssen Sie Ihre Textebene erstellen, Ihre Textebene in einen automatischen Layoutrahmen konvertieren und Ihre Schaltfläche formatieren.

Erstellen einer Textebene

In diesem Schritt wird das Textwerkzeug verwendet.

Tippen Sie auf das Textwerkzeug in der Symbolleiste oder drücken Sie den Buchstaben „T“.
Wenn das Textwerkzeug aktiv ist, tippen Sie auf Ihre Leinwand und geben Sie das Wort „Schaltfläche“ ein. Beachten Sie, dass der Name der Textebene mit dem übereinstimmt, was auf der Leinwand eingegeben wurde, sofern er nicht manuell im Ebenenbedienfeld geändert wird.
Wenn der Ebenenname geändert werden muss, doppelklicken Sie auf die linke Seitenleiste und geben Sie dann den von Ihnen gewählten neuen Namen ein.

Jetzt können Sie auch mit der Schriftgröße experimentieren, indem Sie sie vergrößern oder verkleinern.

Wählen Sie Ihre Textebene aus.
Navigieren Sie zur rechten Seitenleiste und ändern Sie die Schriftgröße im Abschnitt „Text“. Sie können auch die Schriftart ändern oder bei der Standardoption bleiben.

Konvertieren Sie Ihre Textebene in Auto-Layout-Rahmen

An diesem Punkt muss der Knopf noch weiter optimiert werden, damit er glamourös aussieht. Mit dem automatischen Layout können Sie die Dinge noch etwas aufpeppen. Das automatische Layout ist eine leistungsstarke Funktion von Figma und kann für responsive Designs angewendet werden. Diese Designs passen sich automatisch an Änderungen wie Inhaltsgröße, Objektplatzierung und Gerätetyp an.

Das automatische Layout kann angewendet werden, um Ebenen in Rahmen oder in vorhandene Rahmen umzuwandeln. Um das Layout auf einen vorhandenen Rahmen anzuwenden, wählen Sie Ihre Textebene aus und drücken Sie dann die Tastenkombination „Umschalt“ „A“. Sobald das Layout angewendet wurde, werden Sie einige Änderungen bemerken.

Die Textebene befindet sich innerhalb eines Rahmens. Das automatische Layout wird nur auf Komponenten und Rahmen angewendet, sodass Figma die Textebene automatisch im neuen Rahmen platziert. Der Rahmen hat keine Füllfarbe. Dies wird im Button-Styling-Schritt angewendet.
Wenn Sie Ihren Rahmen auswählen, werden in der rechten Seitenleiste die Einstellungen für das automatische Layout angezeigt. Die automatischen Layouts können weiter optimiert werden.
Sie bemerken, dass der Rahmen bei Textänderungen kleiner und größer wird. Mit solchen dynamischen Elementen sparen Sie Zeit für die Gestaltung der Inhalte, die auf verschiedenen Geräten angezeigt oder in andere Sprachen übersetzt werden.

Den Button gestalten

Sie können mit dem Hinzufügen von Farbe beginnen.

Wählen Sie eine Rahmenebene aus und wählen Sie dann „Fülleinstellungen“ in der rechten Seitenleiste. Dadurch wird die Farbe
automatisch ausgefüllt. Der Farbwähler ändert die Farbe.
Wählen Sie die Textebene aus und passen Sie die Füllung auf #FFFFFF an.
Wählen Sie den Rahmen erneut aus und verwenden Sie dann die Einstellung in der rechten Seitenleiste, um den Eckenradius anzupassen.

Als nächstes muss die Rahmenpolsterung befestigt werden. Nachdem der Buchstabentext in ein automatisches Rahmenlayout konvertiert wurde, wird automatisch ein Abstand zwischen dem Text und der Rahmengrenze hinzugefügt. Die Polsterung erscheint an dieser Stelle auf allen Seiten gleich. Sie können die Polsterung unten und oben so ändern, dass sie kleiner ist als die Polsterung rechts und links.

Sie können die Polsterung nach Belieben aktualisieren. Die linke und rechte Polsterung oder die obere und untere Polsterung können mit den folgenden Tastenkombinationen gleichzeitig geändert werden:

Halten Sie <⌥ Option> oder <Alt> gedrückt und klicken Sie dann auf den Füllbereich, um den Füllwert für die gegenüberliegenden Seiten einzugeben
Halten Sie <⌥ Option> oder <Alt> gedrückt, während Sie die Griffe ziehen, um den Abstand für gegenüberliegende Seiten zu ändern

Zu diesem Zeitpunkt sieht die Schaltfläche gut aus, Sie können die Beschriftung jedoch trotzdem aktualisieren. Sie müssen auf den Text doppelklicken, um die Bearbeitung zu ermöglichen. Geben Sie die Wörter „Anmelden“ ein. Die Größe der Schaltfläche ändert sich während der Eingabe. So entwerfen Sie eine Schaltfläche mit dem Auto-Layout- und Text-Tool. Sie können jetzt etwas Neues ausprobieren, z. B. die Schaltfläche in eine Komponente umwandeln oder eine Variante hinzufügen.

Erstellen einer anklickbaren Schaltfläche

Figma wird von Unternehmen wie Uber, Facebook, Google und Netflix verwendet. Die anklickbare Schaltflächenfunktion erleichtert Designern in solchen Unternehmen die Erstellung interaktiver und anklickbarer Schaltflächen. Die Schaltflächen erleichtern die Navigation auf solchen Plattformen erheblich.

So entwickeln Sie solche Schaltflächen in Figma:

Wählen Sie im Menü (rechts) die Option „Prototyp“.
Klicken Sie auf das „Plus“-Symbol (+) unterhalb der Registerkarte „Prototyp“. Dadurch können Sie eine Interaktion hinzufügen.
Wählen Sie „Bei Klick“ im Fenster mit den Interaktionsdetails.
Wählen Sie die Option „Link öffnen“.
Fügen Sie den Seitenlink hinzu, zu dem die Schaltfläche führt, sobald Sie darauf klicken.
Tippen Sie auf das „X“-Symbol, um das Fenster „Interaktionsdetails“ zu verlassen.
Navigieren Sie zum Optionsfeld „Play“ in der oberen rechten Ecke.
Tippen Sie auf die Schaltfläche „Play“, um eine Designvorschau zu erhalten.

Wenn Sie den Mauszeiger über Ihre Schaltfläche bewegen, verwandelt sie sich in ein handähnliches Symbol. Dies zeigt an, dass die Schaltfläche jetzt anklickbar ist.

Hinweis: Verwenden Sie beim Erstellen der anklickbaren Figma-Schaltfläche immer „Beim Klicken“ und nicht „Beim Ziehen“. „Beim Klicken“ ermöglicht das Hinzufügen eines anklickbaren Links zur Schaltfläche. „Beim Ziehen“-Schaltflächen können nicht angeklickt werden.

Besser gestalten mit Figma-Buttons

Figma-Schaltflächen verfügen über Variablen wie Thema, Status, interne Polsterung, Tabellenlänge, -breite und -höhe. Indem Sie lernen, wie Sie Schaltflächen auf der Plattform erstellen, können Sie Figma optimal nutzen und der Figma-Bibliothek wertschöpfende Komponenten hinzufügen.

Haben Sie versucht, Schaltflächen auf Figma zu erstellen? Wenn ja, wie war Ihre Erfahrung? Lassen Sie es uns im Kommentarbereich unten wissen.