So erstellen Sie einen Hover-Effekt in Figma

Mit Figma können Benutzer viele Funktionen entwerfen und anpassen. Eine der Funktionen, mit denen Sie die Benutzererfahrung verbessern können, ist ein Hover-Effekt. Der Hover-Effekt auf Schaltflächen bedeutet, dass Sie ein anderes Design sehen, wenn Sie den Cursor darauf bewegen. Dieser Effekt selbst kann variieren, von einem Standardeffekt, der die Farben ändert, bis hin zu komplizierteren Methoden wie dem Ändern des Randes oder der Hervorhebungen.

Lesen Sie weiter, um zu erfahren, wie Sie Ihren Komponenten in Figma einen Hover-Effekt hinzufügen.

Hover-Effekt auf Schaltflächen erstellen

Sie können einen Hover-Effekt einrichten, wenn Ihre Komponente eine bestimmte Interaktion und einen bestimmten Übergang haben soll, wenn Sie mit der Maus darüber fahren. Das einfachste Ergebnis, das Sie erzielen können, besteht darin, die Farbe der Schaltfläche zu ändern, um sie zum Klicken hervorzuheben. So können Sie einen Hover-Effekt auf einer Schaltflächenkomponente erstellen:

1. Machen Sie den Knopf.

   

2. Duplizieren Sie es und verschieben Sie es aus dem Rahmen.

   

3. Ändern Sie die Farbe der duplizierten Schaltfläche.

   

4. Erstellen Sie Komponenten, indem Sie mit der rechten Maustaste klicken und „Komponente erstellen“ aus dem Menü auswählen oder indem Sie „Strg + Alt + K“ auf Ihrer Tastatur drücken.

   

5. Klicken Sie in der Seitenleiste auf die Registerkarte „Prototyp“.

   

6. Verbinden Sie die beiden Tastenkomponenten.

   

7. Wählen Sie im Dropdown-Menü „Interaktionsdetails“ die Option „Beim Schweben“ aus.

   

8. Klicken Sie im selben Menü auf die Option „Overlay öffnen“ und stellen Sie das Overlay auf „Manuell“ ein.

   

Wenn der Benutzer mit der Maus über die ursprüngliche Schaltfläche fährt, wird diese durch die Schaltfläche mit einer anderen Farbe ersetzt. Auf ähnliche Weise können Sie auch den Text ändern, der auf der Schaltfläche angezeigt wird.

Sie müssen dies für jede Taste wiederholen.

Hover-Effekt auf Schaltflächenrändern erstellen

Eine andere Möglichkeit, den Hover-Effekt auf Schaltflächenkomponenten zu nutzen, besteht darin, einen Rahmen zu erstellen, der sich ändert, wenn Sie mit dem Cursor über die Schaltfläche fahren. So können Sie es machen:

1. Erstellen Sie eine Schaltfläche mit beliebigem Text darin.

   

2. Duplizieren Sie es.

   

3. Fügen Sie den Strich zum Duplikat hinzu, entfernen Sie die Füllung und ändern Sie die Farbe.

   

4. Klicken Sie in der Seitenleiste auf die Registerkarte „Prototyp“.

   

5. Verbinden Sie die beiden Tastenkomponenten.

   

6. Wählen Sie im Dropdown-Menü „Interaktionsdetails“ die Option „Beim Schweben“ aus.

   

Wenn Sie nun eine Vorschau des Schaltflächeneffekts anzeigen und mit der Maus darüber fahren, werden die farbigen Ränder darauf angezeigt.

Verwendung des Anima-Plugins in Figma

Eine weitere Möglichkeit, in Figma einen Hover-Effekt hinzuzufügen, ist die Verwendung des Design-to-Code-Tools Anima. Dieses Plugin verfügt über einzigartige Funktionen, die Sie beim Erstellen von Websites, App-Symbolen oder anderen Webkomponenten in Figma implementieren können. Sie müssen nur auswählen, welche Komponente Sie animieren möchten, und die Einstellungen entsprechend anpassen. So geht’s:

1. Wählen Sie die Komponente aus.
2. Öffnen Sie das Anima-Plugin.

   

3. Tippen Sie auf die Option „Hover-Effekt“.

   

4. Wählen Sie den Effekt (Vergrößern, Verkleinern, Schattenleuchten und mehr).

   

5. Passen Sie Animationseffekte wie „Dauer“ oder „Kurve“ an.

   

6. Tippen Sie auf die Schaltfläche „Vorschau“, um die Effekte anzuzeigen.

   

7. Klicken Sie auf „Speichern“.

   

Eine weitere Funktion des Anime-Plugins besteht darin, dass Sie den CSS-Übergang anpassen können. Damit können Sie die Animationsgeschwindigkeit steuern und die Einstellungen an Ihre Vorlieben anpassen oder sie natürlicher gestalten.

Nutzen Sie die Hover-Effekt-Funktion von Figma

Ob professioneller Designer oder Anfänger, in Figma stehen Ihnen zahlreiche Funktionen zur Verfügung, mit denen Sie einzigartige Designs und Animationen für Ihre Komponenten, Symbole und Objekte erstellen können. Mit dem Hover-Effekt können Sie Text ändern oder Hervorhebungen, verschiedene Farben, verschiedene Ränder und mehr hinzufügen. Um Ihre erste Website interaktiv zu gestalten und ihr eine persönliche Note zu verleihen, ist es von größter Bedeutung, zu wissen, wie Sie diese Effekte erzielen.

Welchen Hover-Effekt implementieren Sie auf Ihren Komponenten in Figma? Lassen Sie es uns im Kommentarbereich unten wissen.