Schaltfläche erstellen – Figma Learn - Hilfe-Center

Projektübersicht

Produkt: Figma Design
Thema: Text, Auto-Layout, Farbe
Länge: 10 Minuten

In diesem Projekt werden wir eine einfache Schaltfläche entwerfen, die ihre Größe automatisch an die Länge ihrer Beschriftung anpasst. Schaltflächen sind häufig verwendete Elemente bei der Gestaltung von Benutzeroberflächen. In diesem Projekt sammelst du praktische Erfahrungen mit dem Textwerkzeug und dem Auto-Layout.

Das sind die Schritte zum Erstellen einer Schaltfläche:

Textebene hinzufügen
Textebene in Auto-Layout-Rahmen umwandeln
Schaltfläche gestalten
Die Schaltfläche in eine Komponente umwandeln

Wenn du der Anleitung Schritt für Schritt folgst, sollte deine Illustration am Ende etwa so aussehen:

Ein Bildbeispiel des endgültigen Tastenentwurfs.

Textebene hinzufügen

Wir beginnen mit dem Hinzufügen einer Textebene.

Aktiviere das Text-Werkzeug, indem du in der Symbolleiste auf das Text-Werkzeug klickst oder das Tastenkürzel T benutzt.
Klicke auf die Arbeitsfläche und gib die Schaltfläche ein, um die Textebene zu erstellen.

In der linken Seitenleiste wirst du feststellen, dass der Ebenen-Tab in der linken Seitenleiste eine neue Textebene mit dem Namen „Schaltfläche“ hat. Doppelklicke auf die Ebene und benenne sie in Beschriftung um.

Warum Ebenen benennen?

Die Benennung von Ebenen in Figma Design ist eine optionale, aber nützliche Praxis. Die Benennung deiner Ebenen hilft dir, deine Designs zu organisieren, Ebenen schneller zu finden und zu ändern, und stellt sicher, dass deine Mitarbeitenden bei der Anzeige deiner Datei das Gesuchte finden können.

Wenn du eine Textebene hinzufügst, entspricht der Ebenenname automatisch dem Namen, den du auf der Arbeitsfläche eingegeben hast, bis du ihn umbenennst. Für andere Objekttypen sind die Standardnamen weniger aussagekräftig. Beispielsweise wird jeder Rahmen, den du einer Design-Datei hinzufügst, „Rahmen 1“, „Rahmen 2“ usw. genannt. Gib diesen Ebenen beschreibende Namen, um deinen Workflow und die Dateiorganisation zu verbessern.

Um einen Ebenennamen zu ändern, doppelklicke in der linken Seitenleiste auf die Ebene und gib einen neuen Namen ein.

Wenn wir schon dabei sind, sollten wir die Schriftgröße auf unserer Textebene erhöhen. Wenn die Textebene ausgewählt ist, verwendest du die Einstellung im Abschnitt Text in der rechten Seitenleiste, um die Schriftgröße in 16zu ändern. Wir bleiben bei der Standardschriftart Inter, aber du kannst auch eine andere Schriftart wählen.

Wie wählst du eine Schriftgröße aus?

Bei der Gestaltung digitaler Erlebnisse ist es sinnvoll, eine Grundlage für dein Typensystem zu schaffen.

Du kannst dies tun, indem du eine Typografiehierarchie erstellst, die die Größe deiner Schriftarten bestimmt, von der kleinsten zur größten. Lege zunächst die Größe der Schriftart des Textes fest, da du diese in deinen Designs am häufigsten verwenden wirst. Es empfiehlt sich, die Schriftart des Textes zwischen 16 und 18 Pixel einzustellen, je nachdem, welche Schriftart du auswählst.

16px wird häufig empfohlen, da sich damit einfacher einheitliche typografische Skalen erstellen lassen. Die Zahl 16 lässt sich leicht in Abschnitte unterteilen, um harmonische Abstände, Ränder, Überschriftengrößen usw. zu erstellen.

Bedenke, dass beim Erstellen deiner Hierarchie die Berücksichtigung des Kontextes deines Gesamtdesigns wichtig ist. Wenn du z. B. Schaltflächen für einen Touchscreen in einem Auto erstellst, muss die Schriftgröße eventuell vergrößert werden, um Schaltflächen mit größeren klickbaren Oberflächen anzupassen.

Darüber hinaus werden nicht alle Schriftarten visuell auf die gleiche Größe skaliert. Wenn die Nutzer*innen Schwierigkeiten haben, deinen Text zu lesen, solltest du die Größe des Textes erhöhen oder die Schriftart ändern.

Textebene in einen 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.

Du kannst das Auto-Layout auf einen vorhandenen Rahmen anwenden oder damit eine Ebene in einen Rahmen umwandeln. Wir verwenden die zweite Option. Wähle die Ebene der Beschriftung aus und verwende die Tastenkombination Umschalttaste A

Überprüfe im Abschnitt Auto-Layout in der rechten Seitenleiste, ob die Einstellungen Horizontale Größenanpassung und Vertikale Größenanpassung beide auf Hug eingestellt sind. Doppelklicke auf den neuen Rahmen in der linken Seitenleiste und benenne ihn in Schaltfläche um.

Warum Auto-Layout verwenden?

Auto-Layout ist eine der leistungsstärksten Funktionen in Figma Design. Mit Auto-Layout kannst du responsive Designs erstellen, die auf verschiedenen Gerätetypen gut aussehen und sich an Änderungen wie beispielsweise die Inhaltsgröße anpassen. Auto-Layout-Rahmen verfügen über Größenänderungseigenschaften, die dem Rahmen mitteilen, wie er sich verhalten soll, wenn Ebenen innerhalb des Rahmens in der Größe verändert und angepasst werden.

Es gibt zwei Größenänderungseigenschaften, die du für einen Auto-Layout-Rahmen auswählen kannst:

Fixierte Breite oder Fixierte Höhe: Die Größe des Rahmens wird nicht geändert, auch wenn die Größe und der Zeilenumbruch der eingebetteten Ebenen geändert werden.
Inhalt umschließen: Die Größe des Rahmens wird an die eingebetteten Ebenen angepasst

Da wir die Umschließen-Eigenschaft zur Größenänderung von Inhalten verwenden, wird die Größe unserer Schaltfläche je nach Länge der Beschriftung angepasst. Teste es selbst, indem du auf den Text doppelklickst und Registrieren oder Weiter eingibst.

Schaltfläche gestalten

Für Farbe sorgen

Wähle die Ebene Schaltfläche aus und klicke auf das Pluszeichen im Abschnitt Füllung in der rechten Seitenleiste, um eine Füllfarbe hinzuzufügen.
Verwende die Farbauswahl, um die Farbe zu ändern. Wir verwenden den Farbcode #33B249.
Wähle die in der Rahmenebene eingebettete Ebene Beschriftung aus und passe die Füllung auf #FFFFFF an.

Ecken abrunden

Wähle die Ebene Schaltfläche aus.
Stelle in der rechten Seitenleiste den Eckenradius auf 6 ein.

Warum sollten Ecken von Schaltflächen abgerundet werden?

Abgerundete Ecken mögen wie eine Kleinigkeit erscheinen, aber sie können einen großen Einfluss auf das Aussehen und die Wirkung deiner endgültigen Designs haben. Abgerundete Ecken machen die Ästhetik deines Designs weicher und lassen es freundlicher und zugänglicher erscheinen als Objekte mit scharfen Kanten.

Abgesehen von der Ästhetik ist es üblich, dass interaktive Elemente in modernen digitalen Benutzeroberflächen abgerundete Ecken haben. Das bedeutet, dass deine Nutzer*innen eher verstehen, dass sie auf deine Schaltfläche klicken können, wenn das Design zu anderen von ihnen verwendeten Benutzeroberflächen passt.

Innenabstand ändern

Ä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 Innenabstand eingefügt. Im Moment ist der Innenabstand auf allen Seiten gleich. Wir möchten, dass der Innenabstand oben und unten kleiner als rechts und links ist

Wähle die Ebene Schaltfläche aus.
Bewege den Mauszeiger über den ausgewählten Rahmen. Mithilfe der angezeigten Ziehpunkte kannst du den Innenabstand ändern. Du kannst entweder auf den Ziehpunkt klicken und ihn ziehen, um den Abstand zu ändern, oder du klickst einmal auf den Ziehpunkt und gibst eine Zahl in das angezeigte Feld ein.
Ändere den Abstand wie folgt:
- Oberer und unterer Innenabstand:8
- Linker und rechter Innenabstand: 16

Tipp: Mit den folgenden Tastaturbefehlen kannst du den oberen und unteren Abstand oder den rechten und linken Abstand gleichzeitig ändern:

Halte ⌥ Wahltaste (macOS) oder Alt (Windows) gedrückt und klicke dann auf den Innenabstandsbereich, um einen Innenabstandswert für die gegenüberliegenden Seiten einzugeben.
Halte ⌥ Wahltaste (macOS) oder Alt (Windows) gedrückt, während du die Ziehpunkte verwendest, um den Abstand für gegenüberliegende Seiten zu ändern

Die Schaltfläche in eine Komponente umwandeln

Unser Schaltflächen-Design ist fertig! Bevor wir unser Projekt abschließen, wandeln wir es in eine Komponente um, damit wir es in zukünftigen Designs wiederverwenden können.

Wähle die Ebene Schaltfläche aus.
Klicke in der rechten Seitenleiste auf Komponente erstellen.

Jetzt kannst du Instanzen deiner Schaltfläche aus dem Assets-Tab in der linken Seitenleiste hinzufügen, sodass du nie wieder eine Schaltfläche von Grund auf neu gestalten musst. Erfahre mehr über die Verwendung von Komponenten →

Nächste Schritte

Herzlichen Glückwunsch! Du hast eine responsive Schaltfläche in Figma Design mit Auto-Layout entworfen. Suchst nach einer neuen Herausforderung? Sieh dir unser Projekt für das Design einer interaktiven Schaltfläche an, um mehr praktische Erfahrung zu sammeln.