Button mit hover Effekt in Figma erstellen
Da wir unsere Websites im Team umsetzen, bedarf es einer ordentlichen Übergabe des Webdesigns an die Umsetzung. Damit alles reibungslos funktioniert, müssen im besten Fall alle Animationen und Interaktionen klar ersichtlich sein. Wie wir die Animationen von Button in Figma erstellen und umsetzen, zeige ich dir heute.
Button erstellen
Zu Beginn legst du ein Textfeld an. Dieses kannst du dann mit der Tastenkombination SHIFT + A in ein Autolayout umwandeln. Der Vorteil eines Autolayouts in Figma ist, dass sich der Block automatisch an die Inhalte anpasst. Zum Beispiel passt sich bei einem Button automatisch die Breite an den geschriebenen Text an. Desto breiter also das Label ist, desto breiter wird auch die Box. Nun kannst du noch die Farbe des Buttons und die der Schrift anpassen. Auch die Ecken kannst du je nach Belieben abrunden und ein Schatten zum optischen Hervorheben ist auch kein Problem. Das jetzt erstellte Element kann schon jetzt für ein rudimentäres Layout verwendet werden oder du nutzt es für deine Wireframes.
Button animieren
Um den Button zu animieren, musst du die Prototypen–Funktion von Figma nutzen. Hierfür legst du dir zuerst ein Frame an. In dieses Frame ziehst du den erstellten Button und lässt rundherum mindestens 10px Platz. Nun duplizierst du den Frame und schiebst das Button–Element im zweiten Frame 10px nach oben. Das Ganze wandelst du jetzt in ein Komponenten–Set um und wechselst ins Prototypen–Menü. Verbinde jetzt die zwei Frames, wähle „while hover“ aus, dann stellst du die Übergangsanimation noch von „instant“ auf „smart animate“. Tada! Dein Button schwebt jetzt leicht nach oben, wenn du in der Prototypen–Vorschau mit der Mouse über ihn hoverst.
Wie die Prototypen–Vorschau funktioniert, erkläre ich dir übrigens in diesem Video!
