Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Criando os Componentes & Documentação

0
0
0
0

[Componente] Button 1.0

[Componente] Button 1.0

Dê vida ao seu design com a criação do componente botão! Neste guia, mergulharemos no processo passo a passo para desenvolver um set de botões versáteis, que incluem variados estilos e tamanhos para atender a todas as suas necessidades de design. Prepare-se para explorar as differenças entre os tipos "primary", "neutral" e "error", enquanto organizamos as variantes de estilo, como "fillet", "light" e "outline". Desperte sua criatividade ao habilitar diferentes estados, como "hover", "focus" e "disabled", tornando os botões não apenas estéticos, mas também altamente funcionais.

Ao longo do tutorial, você verá como otimizar seu design system, evitando uma infinidade de variantes que poderiam complicar seu trabalho. Cada propriedade será desvendada para garantir que o seu botão não só tenha a melhor aparência, mas também uma interatividade perfeita. E não para por aí! Você também aprenderá a criar versões "small" e "medium", permitindo uma personalização ainda maior, ajustando as dimensões e o layout com facilidade.

No final, você terá um componente de botão totalmente funcional, com um design centrado e responsivo, pronto para ser integrado ao seu projeto. Seja você um designer iniciante ou experiente, essa experiência será fundamental para elevar seu entendimento sobre prototipagem e design de interfaces. Então, prepare-se para criar e transformar sua visão em realidade, enquanto avançamos juntos na construção do seu design system!

Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 13 aulas concluidas
Arquitetura do Design System
0 de 31 aulas concluidas
Criando os Componentes & Documentação
0 de 34 aulas concluidas

[Download] Ilustração das Capas

Extra

05:23

[Download] Template de Estrutura de Design Systems

19:42

Estrutura Inicial & Organização do Projeto

07:31

[Download] Acesso aos Ícones da Streamline

06:15

[Documentando] Página de Boas Vindas

27:03

[Documentando] A Identidade da Marca

11:47

[Documentando] As Cores Primitivas & Semânticas

22:24

[Documentando] Os Estilos Tipográficos

09:02

[Documentando] O Espaçamento & Corner Radius

15:41

[Documentando] A Escala

10:50

[Documentando] O Layout Grid & Plataformas

21:23

[Documentando] Os Estilos Tipográficos & Variáveis Semânticas

15:27

[Componente] System Icons 1.0

31:25

[Componente] Alert & Notification 1.0

38:51

[Componente] Avatar, Personas & Status [Parte 1]

21:42

[Componente] Avatar, Personas & Status [Parte 2]

10:32

[Componente] Avatar Group 1.0

14:39

[Componente] Avatar Update 1.0.1

04:03

[Componente] Badge 1.0

22:26

[Componente] Button Anatomy

26:44

[Componente] Button 1.0

13:55

[Componente] Content 1.0

15:37

[Componente] Checkbox 1.0

11:51

[Componente] Radio Button 1.0

11:56

[Componente] Text Input 1.0

18:46

[Componente] Dropdown 1.0

24:46

[Componente] Divider 1.0

20:57

[Component] Progress bar 1.0

18:34

[Componente] Rating 1.0

17:30

[Componente] Tooltip 1.0

23:25

[Componente] Tab Menu 1.0

26:28

[Componente] Slot Component 1.0

25:43

[Componente] Container 1.0

23:38

[Componente] Modal 1.0

24:24
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas
Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 13 aulas concluidas
Arquitetura do Design System
0 de 31 aulas concluidas
Criando os Componentes & Documentação
0 de 34 aulas concluidas

[Download] Ilustração das Capas

Extra

05:23

[Download] Template de Estrutura de Design Systems

19:42

Estrutura Inicial & Organização do Projeto

07:31

[Download] Acesso aos Ícones da Streamline

06:15

[Documentando] Página de Boas Vindas

27:03

[Documentando] A Identidade da Marca

11:47

[Documentando] As Cores Primitivas & Semânticas

22:24

[Documentando] Os Estilos Tipográficos

09:02

[Documentando] O Espaçamento & Corner Radius

15:41

[Documentando] A Escala

10:50

[Documentando] O Layout Grid & Plataformas

21:23

[Documentando] Os Estilos Tipográficos & Variáveis Semânticas

15:27

[Componente] System Icons 1.0

31:25

[Componente] Alert & Notification 1.0

38:51

[Componente] Avatar, Personas & Status [Parte 1]

21:42

[Componente] Avatar, Personas & Status [Parte 2]

10:32

[Componente] Avatar Group 1.0

14:39

[Componente] Avatar Update 1.0.1

04:03

[Componente] Badge 1.0

22:26

[Componente] Button Anatomy

26:44

[Componente] Button 1.0

13:55

[Componente] Content 1.0

15:37

[Componente] Checkbox 1.0

11:51

[Componente] Radio Button 1.0

11:56

[Componente] Text Input 1.0

18:46

[Componente] Dropdown 1.0

24:46

[Componente] Divider 1.0

20:57

[Component] Progress bar 1.0

18:34

[Componente] Rating 1.0

17:30

[Componente] Tooltip 1.0

23:25

[Componente] Tab Menu 1.0

26:28

[Componente] Slot Component 1.0

25:43

[Componente] Container 1.0

23:38

[Componente] Modal 1.0

24:24
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas

Data de lançamento

18/05/2025

Duração

13:55

Legendas

Português [PT-BR]

Tags

botão, design, variantes, componente, estilo

Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 13 aulas concluidas
Arquitetura do Design System
0 de 31 aulas concluidas
Criando os Componentes & Documentação
0 de 34 aulas concluidas

[Download] Ilustração das Capas

Extra

05:23

[Download] Template de Estrutura de Design Systems

19:42

Estrutura Inicial & Organização do Projeto

07:31

[Download] Acesso aos Ícones da Streamline

06:15

[Documentando] Página de Boas Vindas

27:03

[Documentando] A Identidade da Marca

11:47

[Documentando] As Cores Primitivas & Semânticas

22:24

[Documentando] Os Estilos Tipográficos

09:02

[Documentando] O Espaçamento & Corner Radius

15:41

[Documentando] A Escala

10:50

[Documentando] O Layout Grid & Plataformas

21:23

[Documentando] Os Estilos Tipográficos & Variáveis Semânticas

15:27

[Componente] System Icons 1.0

31:25

[Componente] Alert & Notification 1.0

38:51

[Componente] Avatar, Personas & Status [Parte 1]

21:42

[Componente] Avatar, Personas & Status [Parte 2]

10:32

[Componente] Avatar Group 1.0

14:39

[Componente] Avatar Update 1.0.1

04:03

[Componente] Badge 1.0

22:26

[Componente] Button Anatomy

26:44

[Componente] Button 1.0

13:55

[Componente] Content 1.0

15:37

[Componente] Checkbox 1.0

11:51

[Componente] Radio Button 1.0

11:56

[Componente] Text Input 1.0

18:46

[Componente] Dropdown 1.0

24:46

[Componente] Divider 1.0

20:57

[Component] Progress bar 1.0

18:34

[Componente] Rating 1.0

17:30

[Componente] Tooltip 1.0

23:25

[Componente] Tab Menu 1.0

26:28

[Componente] Slot Component 1.0

25:43

[Componente] Container 1.0

23:38

[Componente] Modal 1.0

24:24
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas

Title Example

Message Example