How to Create a Smart, Reusable Button in Figma (with Variants & Properties)
Adi Purdila, Web Designer & Developer
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
1.
Welcome to Class
0:47
-
2.
Let's Design a Smart Button
14:46
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
24
apprenants
3
projets
À propos de ce cours
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!
Projet de cours pratique
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).
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
Cours apparentés
