Mini-Tutorial – Arbeiten mit Figma-Button-Komponenten

Veröffentlicht: 2022-03-11

In Figma werden UI-Elemente als Komponenten bezeichnet. Richtig gebaut, sind sie unglaublich vielseitig und einfach zu aktualisieren, aber was können Komponenten leisten und wie funktionieren sie? Wir werden ihre Leistungsfähigkeit demonstrieren, indem wir mit einem der häufigsten UI-Elemente überhaupt arbeiten – der Schaltfläche.

Warum Knöpfe?

Schaltflächen sind voll von Variablen wie Höhe, Breite, Etikettenlänge, interner Polsterung, Zustand und Thema. Durch den Aufbau eines einfachen Tastensystems lernen wir den immensen Wert der Verwendung von Figma mit einer komponentenbasierten Denkweise und der Figma-Komponentenbibliothek kennen.

*Anmerkung des Herausgebers: Dieses schriftliche Tutorial wurde von einem Video-Tutorial abgeleitet, das von David Luhr von Build UX erstellt wurde.

Aufgabe 1: Erstellen Sie eine grundlegende Figma-Schaltflächenkomponente

  1. Wir beginnen damit, einen neuen Rahmen zu erstellen und ihn im Ebenenbedienfeld in Schaltflächen umzubenennen.
  2. Geben Sie Ihren Beschriftungstext für die Schaltfläche ein. Für dieses Tutorial verwenden wir "Sign Up".
  3. Unsere Schrift ist:
    • Roboto-Medium
    • Schriftgröße 18
    • Zeilenhöhe 24
    • Textausrichtungsmitte
    • Mitte ausrichten
    • Größenänderung = Feste Größe
  4. Nachdem Sie Ihre Schaltflächenbeschriftung geschrieben haben, doppelklicken Sie auf die untere rechte Ecke des Textfelds, damit es automatisch an die kleinsten Beschränkungen des Texts angepasst wird.
  5. Benennen Sie die Textebene Button Label um .
    6. Figma-Button-Komponente. Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 1: Schritte 1-5
  6. Erstellen Sie ein Rechteck, platzieren Sie es unter Button Label im Ebenenbedienfeld und benennen Sie es Button Container um. Lassen Sie zu, dass die Farbe des Schaltflächencontainers das Standardgrau bleibt.
  7. Legen Sie eine feste Höhe für den Knopfbehälter fest. Wir verwenden 60 Pixel.
  8. Jetzt fügen wir dem Button-Container eine interne Polsterung hinzu.
    • Die Breite der Schaltflächenbeschriftung beträgt 63 Pixel.
    • Wir brauchen 24 Pixel rechts und links auffüllen. Zusammen ergibt dies 48 Pixel.
    • Wir geben also die Breite des Etiketts (63 Pixel) + Gesamtpolsterung (48 Pixel) ein.
  9. Wählen Sie sowohl das Etikett als auch den Behälter aus und zentrieren Sie sie mit den Ausrichtungswerkzeugen.
Figma-Tutorial Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 1: Schritte 6-9

Wir haben einen rudimentären Knopf entworfen. Allerdings ist die Innenpolsterung unseres Buttons noch nicht in der Lage, wechselnde Etikettenlängen aufzunehmen. In einem späteren Schritt werden wir uns mit dem internen Layout befassen, das es ermöglicht, dass die Breite unseres Button-Containers in Bezug auf die Etikettenlänge flexibel ist.

Freiberuflicher UI-Designer in Vollzeit in den USA gesucht

Aufgabe 2: Machen Sie die Schaltfläche interaktiv

Um die Schaltfläche interaktiv zu machen, fügen wir einen Fokusring hinzu.

  1. Duplizieren Sie den Button Container und benennen Sie ihn in Button Focus Ring um.
  2. Stellen Sie sicher, dass sich der Fokusring unter dem Schaltflächencontainer im Ebenenbedienfeld befindet.
  3. Entfernen Sie die Füllung des Fokusrings und fügen Sie einen schwarzen, inneren Strich mit einer Dicke von 4 Pixeln hinzu.
  4. Wir wollen auch einen 4-Pixel-Abstand zwischen dem Schaltflächencontainer und dem Fokusring auf allen vier Seiten, also addieren wir +16 zu Breite und Höhe.
  5. Wählen Sie das Etikett, den Tastenbehälter und den Fokusring aus und zentrieren Sie es.

    6. So sieht unsere Schaltfläche in ihrer einfachsten Form im fokussierten Zustand aus.

    Figma-Komponentenbibliothek Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 2: Schritte 1-5
  6. Wählen Sie alle drei Elemente (Etikett, Schaltflächencontainer, Fokusring) aus, klicken Sie mit der rechten Maustaste und wählen Sie „Komponente erstellen“.
    7. Figma-Komponenten Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 2: Schritt 6
  7. Benennen Sie die Komponente Button/Primitive/Default um .
    • Schaltfläche = Komponententyp
    • Primitiv = Variation
    • Standard = Staat

Dies ist unser primitiver Knopf. Es wird nicht in unserem endgültigen Design erscheinen, aber es wird als Grundlage dienen, auf der alle unsere Button-Variationen aufbauen. Der Vorteil? Wenn wir unsere Buttons in Zukunft neu gestalten müssen, müssen wir sie nur an einer Stelle bearbeiten.

Figma-App Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 2: Schritt 7

Aufgabe 3: Erstellen Sie ein Schaltflächen-Layout-Raster

  1. Wählen Sie Button/Primitive/Default , gehen Sie zum Designbereich und klicken Sie auf das Symbol „+“ neben „Layout Grid“.
    2. Figma-Archetyp Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 3: Schritt 1
  2. Klicken Sie dann auf das Rastersymbol, wählen Sie „Spalten“ und geben Sie die folgenden Werte ein:
    • Spaltenanzahl = 1
    • Breite = Automatisch
    • Dachrinne = 0
    • Typ = Strecken
  3. "Rand" stellt die Polsterung innerhalb des Schaltflächencontainers bereit.
    • Denken Sie daran, dass wir 24 Pixel links und rechts auffüllen müssen.
    • Wir müssen auch den 4 Pixel dicken Rand und die 4 Pixel Lücke unseres Fokusrings berücksichtigen.
    • Das bedeutet, dass wir einen Rand von 32 Pixeln benötigen.
    4. Figma-Komponentenzustände Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 3: Schritte 2-3
  4. Mit dem hinzugefügten Rand sehen Sie einen roten Indikatorbereich, der die Innenpolsterung des Knopfbehälters anzeigt und genau zur Etikettenbreite passt.
    5. Figma-Design Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 3: Schritt 4

    Jetzt müssen wir jedem Element unserer Schaltfläche Layoutbeschränkungen hinzufügen.

  5. Wählen Sie alle drei Ebenen innerhalb der Komponente aus, gehen Sie zu "Einschränkungen" und heften Sie sie an "Links & Rechts" und "Mitte".
  6. An dieser Stelle können Sie die Komponente auswählen und auf die gewünschte Breite ziehen. Sie werden sehen, dass das Layout genau so funktioniert, wie es entworfen wurde.
  7. Wenn Sie die Schaltflächenbreite kürzer als die Beschriftung machen, werden Sie feststellen, dass die Beschriftung in eine andere Zeile umbricht.
Figma-Designtool Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 3: Schritte 5-7

Aufgabe 4: Schaltflächenbreite an Textlänge anpassen

Sehen wir uns an, wie unser Button mit einem längeren Button-Label funktioniert.

  1. Gehen Sie zum Bedienfeld „Assets“, ziehen Sie eine neue Instanz der Schaltfläche hinein und geben Sie „Termin planen“ oder etwas Längeres ein. Was geschieht? Das Label läuft in die nächste Zeile über – nicht genau das, was wir wollen.
    2. Figma-Schnittstellendesign Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 4: Schritt 1
  2. Gehen Sie zurück zu Ihrem Ebenenbedienfeld, wählen Sie die neue Komponente aus, die Sie gerade hineingezogen haben, und verwenden Sie die Pfeiltasten, um die Breite auf die genaue Abmessung einzustellen, die zum Etikett passt.
  3. Wenn Sie dies tun, werden Sie sehen, dass alle Layout-Variablen wie beabsichtigt bleiben – Innenpolsterung, Beschriftungsplatzierung, 4-Pixel-Strich und 4-Pixel-Abstand des Fokusrings. (Löschen Sie diese doppelte Schaltfläche, bevor Sie zu Aufgabe 5 übergehen.)

Durch die Verwendung eines Layoutrasters können Sie eine Schaltfläche erstellen, die in all Ihren Designs verwendet werden kann, und alles, was Sie tun müssen, ist, die Breite an die gewünschte Etikettenlänge anzupassen.

Figma-Prototyp Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 4: Schritte 2-3

Aufgabe 5: Erstellen Sie Schwebe- und Fokuszustände

Lassen Sie uns mit unserem Schaltflächenstandard Primitive unserer Schwebe- und Fokuszustände erstellen.

  1. Schalten Sie den Fokusring in Ihrer Tastenvorgabe aus.
  2. Halten Sie die Alt-Taste gedrückt und ziehen Sie eine neue Instanz der Schaltflächenvorgabe heraus.
  3. Machen Sie den Button-Container hellgrau (#E7E7E7).
  4. Klicken Sie mit der rechten Maustaste auf „Komponente erstellen“ und benennen Sie Button/Primitive/Hover um.
    5. Webdesign-Tools Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 5: Schritte 1-4
  5. Ziehen Sie eine weitere Instanz des Standardstatus heraus, aktivieren Sie den Fokusring und passen Sie die Farbe des Schaltflächencontainers an die Farbe des Hover-Statuscontainers an (#E7E7E7).
  6. Klicken Sie mit der rechten Maustaste auf „Komponente erstellen“ und benennen Sie Button/Primitive/Focus um.

Wir haben jetzt einen Überblick über das Layout der Schaltfläche und wie sie in verschiedenen Zuständen funktioniert. Von hier aus können wir je nach Bedarf spezifische Themen oder Stile hinzufügen.

Figma-UI-Design Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 5: Schritte 5-6

Aufgabe 6: Implementieren Sie Schaltflächendesigns

Jetzt erstellen wir stilistische Variationen.

  1. Halten Sie die Alt-Taste gedrückt und ziehen Sie eine andere Instanz von Button/Primitive/Default hinein .
  2. Ändern Sie die Farbe des Containers so, dass sie der gewünschten Designfarbe entspricht (#204ECF).
  3. Machen Sie die Schaltflächenbeschriftung weiß (#FFFFFF), schalten Sie den Fokusring ein, ändern Sie den Strich auf die gewünschte Themenfarbe (#204ECF) und schalten Sie ihn aus.
  4. Klicken Sie mit der rechten Maustaste auf „Komponente erstellen“ und benennen Sie Button/BrightBlue/Default um .
    5. Figma UX Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 6: Schritte 1-4
  5. Ziehen Sie zwei Instanzen dieser neuen Standardschaltfläche heraus: eine für den Schwebezustand und eine für den Fokuszustand.
  6. Ändern Sie die Farbe des Schaltflächencontainers so, dass sie der gewünschten Designfarbe entspricht (#678FFF), klicken Sie mit der rechten Maustaste, „Komponente erstellen“ und benennen Sie Button/BrightBlue/Hover um .
  7. Wenden Sie dieselbe Farbe auf den Container der Fokusschaltfläche an, aktivieren Sie den Fokusring, klicken Sie mit der rechten Maustaste auf „Komponente erstellen“ und benennen Sie Button/BrightBlue/Focus um .

Sie können denselben Prozess für eine beliebige Anzahl von Themen verwenden, die Sie in Ihrem Design benötigen.

Figma-Webdesign Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 6: Schritte 5-7

Aufgabe 7: Erblicken Sie die Schönheit der Figma-Komponenten

Wenn Sie alle Ihre Themen erstellt haben, nehmen Sie sich einen Moment Zeit, um zu beobachten, wie leistungsfähig die Arbeit mit Komponenten sein kann.

  1. Wählen Sie Ihren Button/Primitive/Default aus, fügen Sie einen Eckenradius hinzu und Sie werden sehen, dass alle Instanzen Ihres Buttons automatisch aktualisiert werden.
    2. Mockup-Tool Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 7: Schritt 1
  2. Gehen Sie dann zu Ihrem Komponentenpanel. Alle Instanzen Ihrer Schaltfläche können in einen beliebigen Teil Ihres Designs gezogen werden.
    3. Online-Designtool Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
    Aufgabe 7: Schritte 2
  3. Da wir diese Namenskonvention verwendet haben, können wir jetzt auch jede Schaltfläche durch eine alternative Instanz/ein alternatives Thema ersetzen. Um dies in Aktion zu sehen, ziehen Sie eine Instanz der Schaltfläche hinein, gehen Sie dann im Designbereich zu „Instanz“, wählen Sie eine beliebige Instanz aus, die Sie benötigen, und sie ändert sich sofort.
UX-Design-Tools Klicken Sie hier, um das Bild in voller Größe anzuzeigen.
Aufgabe 7: Schritt 3

Die Arbeit im Rahmen von Komponenten ermöglicht es uns, unsere Schaltflächen in allen Bereichen unseres Designs schnell und effizient zu verwalten. Das Beste daran ist, dass es nicht nur mit Schaltflächen funktioniert, sondern mit UI-Komponenten aller Art.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • Die Kraft von Figma als Designtool
  • Figma vs. Sketch vs. Axure – Eine aufgabenbasierte Überprüfung
  • Optimieren Sie kollaboratives Design mit Figma
  • Button-Design im Laufe der Jahre – Die Dribbble-Timeline
  • Framer-Tutorial: 7 einfache Mikrointeraktionen zur Verbesserung Ihrer Prototypen