Conteúdo do Curso
UI/UX com Figma
UI/UX com Figma
1. Ferramentas Básicas do Figma
Prática: Criando Diferentes Botões
Vamos discutir alguns pontos importantes de toda a seção:
- Botões de dropdown, checkbox, rádio e avaliação demonstram como pequenas mudanças de design podem adaptar botões para várias necessidades de UI e UX;
- Tipos de botões reutilizáveis economizam tempo em projetos futuros e mantêm a consistência do design;
- Variantes de componentes simplificam o gerenciamento de múltiplos estados de botões (por exemplo, padrão, hover, ativo). Propriedades como ícones, texto e estados podem ser personalizados sem duplicar componentes, reduzindo a desordem. E recursos como "propriedade de troca de instância" e "propriedades Booleanas" facilitam a ativação/desativação de elementos ou a troca de ícones, reduzindo a necessidade de ajustes manuais;
- Auto Layout garante espaçamento e alinhamento consistentes ao organizar botões ou outros elementos de design. Simplifica o processo de tornar os botões responsivos a redimensionamentos ou mudanças;
- Manter componentes e variantes bem nomeados e organizados evita confusão, especialmente em projetos grandes. E agrupar elementos em quadros ou componentes garante uma navegação e reutilização mais fáceis.
Crie um botão "Toggle" com um protótipo funcional semelhante à imagem abaixo. Observe as setas de conexão e as configurações de interação.
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 8