Tutorials

Schritt-für-Schritt UI-Tutorial: Modernen Login-Screen in Figma gestalten

Melden

Ein sauberer, benutzerfreundlicher Login-Screen ist eines der wichtigsten Elemente im UI/UX-Design. In diesem Tutorial lernst du, wie du von Grund auf eine moderne und responsive Login-Seite in Figma erstellst.

Wir setzen dabei auf Best Practices wie Auto Layout, ein klares visuelles Raster und moderne Komponenten.

Vorbereitung: Die Grundlagen festlegen

Bevor wir Formen zeichnen, definieren wir eine simple Basis für Typografie und Farben.

  • Schriftart: Verwende eine gut lesbare Sans-Serif-Schrift (z. B. Inter, Poppins oder Roboto).
  • Farbpalette:
    • Hintergrund: Ein sehr helles Grau oder Off-White (#F8F9FA oder #FFFFFF)
    • Primärfarbe (Action): Ein kräftiges Blau oder Violett (#4F46E5)
    • Text (Dunkel): Fast Schwarz für gute Lesbarkeit (#1F2937)
    • Text (Muted/Sekundär): Grau für Platzhalter und Labels (#9CA3AF)
    • Rahmen/Borders: Sanftes Grau (#E5E7EB)

Schritt 1: Den Frame anlegen

  1. Drücke die Taste F, um das Frame-Werkzeug zu aktivieren.
  2. Wähle im rechten Menü eine mobile Vorlage (z. B. ein Standard-Smartphone-Format wie iPhone oder ein Format um die 390 × 844 px).
  3. Benenne den Frame im Ebenen-Panel (links) in Login Screen um.
  4. Setze die Hintergrundfarbe auf Weiß (#FFFFFF) oder ein weiches Hellgrau.

Schritt 2: Header-Bereich (Logo & Begrüßung)

  1. Logo / Icon:
    • Platziere oben mittig oder linksbündig ein einfaches Logo (z. B. ein Icon oder einen Platzhalter-Kreis mit 48×48 px).
  2. Überschriften:
    • Drücke T für das Text-Werkzeug.
    • Erstelle die Hauptüberschrift: „Willkommen zurück!“ (Schriftgröße: 24–28 px, Bold, Farbe: #1F2937).
    • Erstelle darunter einen kurzen Subtext: „Bitte melde dich mit deinen Daten an.“ (Schriftgröße: 14 px, Regular, Farbe: #6B7280).
  3. Auto Layout anwenden:
    • Markiere beide Texte und drücke Shift + A.
    • Setze den Abstand zwischen den Texten auf 8 px.

Schritt 3: Eingabefelder (Inputs) gestalten

Ein gutes Eingabefeld besteht aus einem Label, dem Eingabekasten und einem Platzhaltertext.

1. E-Mail-Feld:

  • Erstelle ein Text-Label: „E-Mail-Adresse“ (14 px, Semi-Bold, #1F2937).
  • Erstelle das Eingabefeld:
    1. Schreibe einen Platzhalter-Text: „name@beispiel.de“ (14 px, Regular, #9CA3AF).
    2. Drücke Shift + A, um den Text in einen Auto-Layout-Frame zu verwandeln.
    3. Passe das Padding an: Links/Rechts: 16 px, Oben/Unten: 14 px.
    4. Gib dem Frame eine Füllung (Fill: Weiß), einen Rahmen (Stroke: 1 px, Farbe #E5E7EB) und abgerundete Ecken (Corner Radius: 8 bis 12 px).
    5. Setze die Breite des Rahmens auf Fixed und passe sie an (z. B. 326 px oder später auf Fill Container).
  • Markiere Label und Eingabefeld, drücke erneut Shift + A (Abstand: 6 px).

2. Passwort-Feld:

  • Dupliziere das E-Mail-Feld (Cmd + D bzw. Strg + D).
  • Ändere das Label in „Passwort“.
  • Ändere den Platzhalter in „••••••••“.
  • (Optional): Füge rechts im Eingabefeld ein kleines „Auge“-Icon für die Option „Passwort anzeigen“ ein. (Dafür einfach das Icon in den Eingabe-Frame ziehen und das Layout auf Horizontal stellen).

Schritt 4: „Passwort vergessen?“ & Login-Button

  1. Passwort vergessen Link:

    • Erstelle einen Text: „Passwort vergessen?“ (12–14 px, Semi-Bold, Primärfarbe #4F46E5).
    • Richte ihn rechtsbündig unter dem Passwort-Feld aus.

  2. Login-Button:

    • Schreibe den Text: „Anmelden“ (16 px, Bold, Weiß #FFFFFF).
    • Drücke Shift + A für Auto Layout.
    • Padding: Oben/Unten: 16 px, Links/Rechts: 24 px.
    • Setze die Hintergrundfarbe (Fill) auf deine Primärfarbe (#4F46E5).
    • Eck-Radius: 8–12 px (passend zu den Eingabefeldern).
    • Stelle die Breite so ein, dass sie die volle Breite des Formulars einnimmt (Fill Container).

Schritt 5: Social Login (Trennlinie & Alternativen)

Oft möchten Nutzer sich über Drittanbieter anmelden.

  1. Trennlinie ("Oder"):
    • Zeichne eine 1 px hohe Linie, erstelle einen zentrierten Text „oder weiter mit“ (12 px, Grau) und daneben eine weitere Linie.
    • Gruppiere dies in einem horizontalen Auto Layout.
  2. Social-Buttons (Google / Apple):
    • Erstelle zwei Buttons nebeneinander (Horizontal Auto Layout).
    • Design: Weißer Hintergrund, sanfter 1-px-Rahmen, Logo des Anbieters in der Mitte.
    • Ausrichtung: Zentriert, passend zur Formularbreite.

Schritt 6: Registrierungs-Hinweis (Footer)

Ganz unten sollte Platz für Nutzer sein, die noch keinen Account haben.

  1. Erstelle einen Textblock:
    • „Noch kein Konto? “ (Regular, Grau) + „Registrieren“ (Bold, Primärfarbe).
  2. Zentriere diesen Text horizontal am unteren Rand des Frames (mit ca. 24–32 px Abstand zum unteren Bildschirmrand).

Schritt 7: Alles mit Auto Layout organisieren (Responsive Aufbau)

Damit das Layout auf verschiedenen Bildschirmgrößen sauber bleibt:

  1. Wähle das Header-Paket, die Eingabefelder, den Button und den Social-Login-Bereich aus.
  2. Drücke Shift + A, um ein großes vertikales Haupt-Auto-Layout zu erstellen.
  3. Setze den Abstand zwischen den Elementen auf 20 bis 24 px.
  4. Wähle dieses Haupt-Layout aus, gehe im rechten Menü auf die Breiten-Einstellung und setze die inneren Elemente (wie Inputs und Button) auf „Fill container“.
  5. Richte das gesamte Layout mittig im Phone-Frame aus und definiere Seitenabstände (Padding Links/Rechts: z. B. 24 px).

Bonus: UI-Tipps für den Feinschliff

  • Micro-Interactions (States): Erstelle Komponenten für deine Input-Felder und Buttons mit Varianten für Default, Focus (aktiver blauer Rand) und Error (roter Rand bei falscher Eingabe).
  • Barrierefreiheit (Accessibility): Achte darauf, dass der Kontrast zwischen Textfarben und Hintergrund den WCAG-Standards entspricht (Kontrastverhältnis mindestens 4.5:1 für Fließtext).
  • Keyboard-Avoidance: Denke im UX-Kontext immer daran, wie der Screen aussieht, wenn sich die Bildschirmtastatur des Smartphones öffnet.
0