So erstellen Sie eine Schaltfläche in Figma - Komponentengruppe für Lebensmitteldosen

Von Lee StantonLee Stanton Autor Lee Stanton ist ein vielseitiger Autor mit einem Schwerpunkt auf der Softwarelandschaft, der sowohl mobile und Desktop-Anwendungen als auch Online-Technologien abdeckt. Weiterlesen• Herausgegeben von Evan GowerEvan Gower Herausgeber Mit über einem Jahrzehnt Erfahrung im digitalen Publizieren. Evan leitet unser Team mit einem scharfen Blick für neue Technologietrends. Weiterlesen17. August 2023

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.

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:

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.

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.

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

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:

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.

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.

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.

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.

In diesem Schritt wird das Textwerkzeug verwendet.

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

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.

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

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:

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.

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:

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.

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.

Deine Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar *

Name *

Email *

Webseite

Speichern Sie meinen Namen, meine E-Mail-Adresse und meine Website in diesem Browser für den nächsten Kommentar.

Haftungsausschluss: Einige Seiten dieser Website können einen Affiliate-Link enthalten. Dies hat keinerlei Auswirkungen auf unsere Redaktion.

Lee Stanton22. August 2023

Lee Stanton21. August 2023

Lee Stanton 18. August 2023

Lee Stanton 1. April 2023

Steve Larner 7. März 2023

Lee Stanton23. August 2022

Lee Stanton 16. August 2022

Cassandra McBride3. Dezember 2022

Lee Stanton20. Februar 2023

Cassandra McBride27. Juli 2022

Lee Stanton 1. April 2023