How to Create a Smart, Reusable Button in Figma (with Variants & Properties)
Adi Purdila, Web Designer & Developer
Schau dir diesen Kurs und Tausende anderer Kurse an
Schau dir diesen Kurs und Tausende anderer Kurse an
Einheiten dieses Kurses
-
-
1.
Welcome to Class
0:47
-
2.
Let's Design a Smart Button
14:46
-
-
- --
- Anfänger-Niveau
- Fortgeschrittenes Niveau
- Fortgeschrittenes Niveau
- Jedes Niveau
Von der Community generiert
Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.
21
Teilnehmer:innen
3
Projekte
Über diesen Kurs
Ready to level up your Figma skills in just 15 minutes? In this short class, you’ll learn how to design a smart, reusable button component — complete with primary and secondary styles, customizable icons, and editable text properties.
We’ll cover:
- Setting up Auto Layout for flexible buttons.
- Creating variants for primary and secondary button styles.
- Adding properties to toggle the icon visibility, swap the icon, and change the button text.
By the end of this class, you’ll have a fully functional button component you can drop into any project — saving you time and making your designs more professional.
This class is beginner-friendly, but even if you’re familiar with Figma, you’ll pick up new tips for building smarter components.
Let’s dive in and build your first pro-level Figma button!
Praxisnahes Kursprojekt
The class project is to create your own smart button component in Figma!
Here’s what to include:
- One primary and one secondary variant
- A property to toggle the icon visibility (show/hide)
- A property to switch between a few different icons
- A property to edit the button text
Feel free to get creative with spacing, sizing, colors, fonts, and icons — this is your button!
Need a starting point?
You can access the Figma file I used to follow along or remix it for your own design.
When you’re done, share a screenshot or a short video showing your button in action (toggling icons, changing text, switching styles).
Kursbewertung
Warum lohnt sich eine Mitgliedschaft bei Skillshare?
Nimm an prämierten Skillshare Original-Kursen teil
Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen
Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare
Lerne von überall aus
Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.
Ähnliche Kurse
