How to Create a Smart, Reusable Button in Figma (with Variants & Properties)
Adi Purdila, Web Designer & Developer
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
1.
Welcome to Class
0:47
-
2.
Let's Design a Smart Button
14:46
-
-
- --
- Nível iniciante
- Nível intermediário
- Nível avançado
- Todos os níveis
Gerado pela comunidade
O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.
21
Estudantes
3
Projetos
Sobre este curso
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!
Projeto prático de curso
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).
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare
Aprenda em qualquer lugar
Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.
Cursos relacionados
