How to Create a Smart, Reusable Button in Figma (with Variants & Properties)
Adi Purdila, Web Designer & Developer
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
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
Acerca de esta clase
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!
Proyecto de clase práctica
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).
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
Clases relacionadas
