1. April 2026
Figma: Magic Button
Magic Hover Button in Figma: UI/UX-Micro-Interaction mit starker Markenwirkung
Top!
Top!
Hello
Magic Hover Button in Figma: UI/UX-Micro-Interaction mit starker Markenwirkung
Dieser Magic Button kombiniert visuelle Klarheit mit emotionalem Design: eine moderne UI/UX-Micro-Interaction, die Aufmerksamkeit erzeugt und Klickimpulse verstärkt. In diesem Figma-Tutorial baust du Schritt für Schritt einen Hover-Effekt mit dynamischem Glow, der sich perfekt für Landingpages, Hero-Sections und Call-to-Action-Buttons eignet.
Video: Figma Magic Hover Button für moderne UI/UX-Interfaces
Starte mit einem klaren CTA-Text wie „Be magic“ und setze die Schriftgröße auf rund 20 pt. Wandle den Text in einen Frame um und definiere eine feste Größe von 220 x 60 px. Zentriere den Inhalt, wähle eine kontrastreiche Schriftfarbe und gib dem Frame runde Ecken plus einen dezenten Glassmorphism-Look. Damit schaffst du eine hochwertige visuelle Basis für deinen interaktiven Button.
Abbildung 1: CTA-Button-Basis mit Rounded Corners und Glass-Effekt
Für den Glow legst du einen kleinen Frame mit 20 x 20 px an und entfernst den Fill komplett. Darin platzierst du eine größere Ellipse mit etwa 60 x 60 px. Damit die Leuchtkante über den Container hinaus sichtbar wird, deaktivierst du bewusst „Clip content“. Genau dieser Schritt sorgt für die charakteristische Tiefe des Effekts.
Abbildung 2: Glow-Struktur aufbauen und Fill entfernen
Setze anschließend einen Layer Blur von etwa 40 und prüfe, dass die Fill-Opacity auf 100 % liegt. Mit einem etwas dunkleren Ton wird der Glow besser kontrollierbar, bevor du später den finalen Farbcharakter für deine Brand einstellst.
Abbildung 3: Layer Blur für den Leuchteffekt definieren
Jetzt wandelst du den Aufbau in eine wiederverwendbare Figma-Komponente um. So bleibt dein Design-System konsistent und skalierbar.
Abbildung 4: Wiederverwendbare Komponente für dein UI-System
Erstelle über die Properties mindestens zwei Varianten: Default und Hover. Damit modellierst du klare Zustände für eine saubere User Journey.
Abbildung 5: Varianten für Default- und Hover-State anlegen
Im Default-State ist der Glow unsichtbar (Opacity 0 %), im Hover-State wird er sichtbar. Verbinde beide Zustände im Prototype-Tab, um eine flüssige Transition zu simulieren, die sich realistisch wie ein Live-Interface anfühlt.
Abbildung 6: UI-States verbinden und Hover-Interaktion testen
Für mehr Energie im Button platzierst du die Komponente mehrfach im selben Frame. So entsteht ein lebendiger, organischer Lichtverlauf statt eines statischen Effekts.
Abbildung 7: Mehrere Glow-Komponenten für dynamische Bewegung
Erstelle danach eine Maske aus allen Ebenen inklusive Rechteck, damit der Effekt sauber innerhalb der Button-Fläche bleibt.
Lege darüber ein weiteres Rechteck mit mehrfarbigem, angularen Gradient. Dieser Layer verleiht dem Button seinen markanten High-End-Look für moderne Product UIs.
Abbildung 8: Branding-Farbverlauf für den finalen Magic-Look
Zum Abschluss gruppierst und benennst du alle Ebenen sauber. Das spart Zeit bei Iterationen, Team-Handoffs und Developer-Übergabe.
Der entscheidende Mehrwert liegt nicht nur im Look, sondern im System dahinter: ein performanter, konsistenter Hover-Button, der UX verbessert, Marke stärkt und deine Conversion-Flächen visuell aufwertet.
