Milchglaseffekt-Kreditkarte-agindi-blog

Heute zeigen wir dir, wie du in Figma einen Milchglaseffekt selbst kreieren kannst.
Dabei handelt es sich um einen aktuell wieder aufkommenden Designtrend, der gerade im User Interface Design sehr spannend einsetzbar ist. Mithilfe von Milchglaseffekten kann man sehr wirksam und einfach zu erstellende Eyecatcher realisieren. Die Einsatzmöglichkeiten der mithilfe eines Milchglaseffekts gestalteten Elemente sind, egal ob im Print- oder Digitalbereich, beinahe grenzenlos. Probier es einfach am besten mal selbst aus. 🙌

Der Hintergrund spielt hierbei eine sehr wichtige Rolle. Er sollte mehrfarbig sein oder mehrere Elemente enthalten, die diesen Effekt verdeutlichen. Die jeweiligen Zahlen und Farben können je nach Hintergrund und Farbe variieren. Dafür empfehlen wir euch etwas mit den Möglichkeiten zu spielen. 👍

Die gezeigte Vorgehensweise unseres Figma-Tutorials ist ebenso in Sketch, Adobe XD und anderen Design-Tools in abgewandelter Form anwendbar.

1. Form erstellen

Milchglasseffekt-Schritt-1
Erstelle eine Form mit einem transparenten Farbverlauf und Background blur von 30-40.

2. Transparenz und Rauschbild erzeugen

Milchglasseffekt-Schritt-2
Nun füllst du die Form zusätzlich mit einem Rauschbild (wie im Beispiel) und setzt dessen Transparenz auf 3%.

3. Effekt verdeutlichen

Milchglasseffekt-Schritt-3
Verwende (wenn möglich farbige) Grafiken, Texte oder Formen im Hintergrund, damit der Effekt deutlicher wird.

4. Kontur erstellen

Milchglasseffekt-Schritt-4
Setze noch einen Stroke mit der Stärke von 3px und fülle diesen mit einem Verlauf der Farben aus dem Hintergrund und der Farbe Weiß.

5. Schlagschatten hinzufügen

Milchglasseffekt-Schritt-5

Zum Schluss fügst du noch einen Drop shadow in der Farbe Schwarz mit 20% Transparenz und einem Blur von 100.

Wie wir Dich als UX Agentur bei deinem Design unterstützen können? 

Lassen Sie uns reden

Nur mit einem ersten Gespräch lernen wir uns kennen und verstehen.
Wir freuen uns auf Ihren Anruf oder Ihre E-Mail.

Lassen Sie
uns reden

Nur mit einem ersten Gespräch lernen wir uns kennen und verstehen. Wir freuen uns auf Ihren Anruf oder Ihre E-Mail.