So erstellen Sie eine Schaltfläche in Figma

Die Designschaltflächen in Figma können auf verschiedene Weise erstellt werden, indem Komponenten- und Auto-Layout-Eigenschaften auf der Plattform verwendet werden. So 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 erklärt, wie Sie Schaltflächen erstellen und Figma optimal nutzen.

Erstellen einer Schaltfläche

Schaltflächen sind häufig verwendete Elemente beim Entwurf einer funktionalen Benutzeroberfläche. Sie können eine Schaltfläche in einem Figma-Design erstellen. Wenn Sie Figma noch nicht kennen, müssen Sie sich zunächst mit den Grundlagen vertraut machen.

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

1. Erstellen Sie ein neues Figma-Design.
2. Fügen Sie einen Rahmen hinzu, indem Sie die F-Taste auf Ihrer Tastatur drücken und dann „Desktop“ oder „Telefon“ auswählen.
3. Fügen Sie mit der R-Taste auf der Tastatur ein Rechteck mit der Höhe 50 Pixel und der Breite 200 Pixel hinzu.
4. 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 steht.
5. Platzieren Sie dieses Textfeld in der Mitte Ihres Rechtecks.
6. Gruppieren Sie Komponenten nach Wunsch.

Sie können Farben hinzufügen, indem Sie einige mit der Farbauswahl erstellen, oder Sie können auf hexadezimale Farben aus dem Internet zugreifen.

Kontrast

Die Textfarbe innerhalb der Schaltfläche hängt davon ab, ob sie besser mit einem schwarzen oder weißen Hintergrund kontrastiert. Sie können beide Optionen ausprobieren, um zu sehen, welche am besten funktioniert. Wenn Ihnen keine der Optionen gefällt, können Sie den Stil und die Farbe der Schaltfläche anpassen.

Erstellen einfacher Schaltflächen

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

Primäre Schaltfläche

Primäre Schaltflächen sind einfarbig und haben schwarzen oder weißen Text. Diese Schaltfläche zieht die Benutzer an, wenn sie eine App verwenden. So können Sie eine erstellen:

1. Wählen Sie eine Farbe für Ihren Button.
2. Wählen Sie das Rechteck aus und wenden Sie dann die ausgewählte Farbe an.
3. Färben Sie Text in Weiß oder Schwarz, je nachdem, was den Kontrast verbessert.

Sekundärtaste

Dies ist normalerweise ein weißer Button, der jedoch mit der von Ihnen gewählten Farbe umrandet ist. Der Buttontext kann ebenfalls dieselbe Farbe haben. Dies ist der zweitwichtigste Button, den Sie erstellen können. Er sollte ebenfalls die Aufmerksamkeit des Benutzers auf sich ziehen.

1. Ändern Sie die Farbe Ihres Rechtecks ​​in Weiß (FFFFFF).
2. Fügen Sie im Rechteck einen Strich hinzu. Sie können hier die gewünschte Farbe auswählen.
3. Ändern Sie Ihre Textfarbe, sodass sie die gleiche Farbe wie der Text hat.

Tertiärtaste

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

1. Machen Sie Ihr Rechteck weiß und ohne Strich.
2. Ä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 erreichen.

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 dem Text-Tool sammeln. Mit der Schritt-für-Schritt-Anleitung sollte das Erstellen einer Schaltfläche relativ einfach sein. Um eine Schaltfläche zu erstellen, müssen Sie Ihre Textebene erstellen, Ihre Textebene in einen Auto-Layout-Rahmen konvertieren und Ihre Schaltfläche gestalten.

Erstellen einer Textebene

In diesem Schritt wird das Textwerkzeug verwendet.

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

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

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

Konvertieren Sie Ihre Textebene in Auto-Layout-Rahmen

An dieser Stelle muss der Button 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 verwendet 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 umzuwandeln oder auf vorhandene Rahmen. 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 innerhalb des neuen Rahmens platziert. Der Rahmen hat keine Füllfarbe. Dies wird im Schritt „Button-Styling“ angewendet.
• Wenn Sie Ihren Rahmen auswählen, werden in der rechten Seitenleiste die automatischen Layouteinstellungen angezeigt. Die automatischen Layouts können weiter optimiert werden.
• Sie bemerken, dass der Rahmen bei Textänderungen schrumpft und wächst. Mit solchen dynamischen Elementen sparen Sie Zeit, die Sie für die Gestaltung des Inhalts auf verschiedenen Geräten oder für die Übersetzung in andere Sprachen benötigen.

Den Button gestalten

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

1. Wählen Sie eine Rahmenebene und wählen Sie dann „Fülleinstellungen“ in der rechten Seitenleiste. Dadurch wird die Farbe gefüllt
   automatisch. Der Farbwähler ändert die Farbe.
2. Wählen Sie die Textebene aus und passen Sie die Füllung auf FFFFFF an.
3. Wählen Sie den Rahmen erneut aus und passen Sie dann den Eckradius über die Einstellung in der rechten Seitenleiste an.

Als nächstes müssen Sie die Rahmenpolsterung korrigieren. Nachdem der Brieftext in ein automatisches Rahmenlayout umgewandelt wurde, wird automatisch eine Polsterung 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 Polsterung links und rechts oder die Polsterung oben und unten können gleichzeitig mit den folgenden Tastenkombinationen geändert werden:

• Halten Sie oder gedrückt und klicken Sie dann auf den Polsterungsbereich, um den Polsterungswert für die gegenüberliegenden Seiten einzugeben
• Halten Sie oder gedrückt, während Sie die Griffe ziehen, um die Polsterung für gegenüberliegende Seiten zu ändern

An diesem Punkt sieht die Schaltfläche gut aus, aber Sie können die Beschriftung noch aktualisieren. Sie müssen auf den Text doppelklicken, um ihn bearbeiten zu können. Geben Sie die Wörter „Anmelden“ ein. Die Größe der Schaltfläche wird während der Eingabe angepasst. So gestalten Sie eine Schaltfläche mit dem automatischen Layout- und Textwerkzeug. 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 Funktion „Anklickbare Schaltflächen“ 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:

1. Wählen Sie im Menü (rechts) die Option „Prototyp“.
2. Klicken Sie auf das Pluszeichen (+) unter der Registerkarte „Prototyp“. So können Sie eine Interaktion hinzufügen.
3. Wählen Sie im Fenster mit den Interaktionsdetails „Beim Klick“ aus.
4. Wählen Sie die Option „Link öffnen“.
5. Fügen Sie den Seitenlink hinzu, auf den die Schaltfläche nach dem Anklicken verweist.
6. Tippen Sie auf das „X“-Symbol, um das Fenster mit den Interaktionsdetails zu schließen.
7. Navigieren Sie zur Optionsschaltfläche „Wiedergabe“ in der oberen rechten Ecke.
8. Tippen Sie auf die Schaltfläche „Play“, um eine Designvorschau zu erhalten.

Wenn Sie den Cursor über Ihre Schaltfläche bewegen, ändert er 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.

Besseres Design mit Figma-Buttons

Figma-Schaltflächen haben Variablen wie Design, 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 mithilfe von Komponenten innerhalb der Figma-Bibliothek Mehrwert schaffen.

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