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] Tab Menu 1.0

[Componente] Tab Menu 1.0

Nesta aula, vamos criar o nosso primeiro menu, um componente essencial que será a espinha dorsal de todas as nossas navegações e interfaces. Em um estilo dinâmico e interativo, você descobrirá como desenvolver tanto menus tabulados horizontais quanto verticais, além de variáveis que podem ser personalizadas conforme suas necessidades. Combinando estética e funcionalidade, essa aula promete revelar segredos para criar interfaces ainda mais envolventes.

Ao longo do processo, vamos explorar as diferenças entre os dois tipos de menus e aprender como incorporar recursos como estados de hover e seleções visuais. Você será guiado através do Figma, onde apresentaremos as estruturas iniciais e as variações de cada componente. Esta é uma oportunidade única de não apenas aprender a criar o seu menu, mas também de entender como ele se encaixa em uma estratégia de design mais ampla, perfeita para quem deseja construir produtos digitais modernos e funcionais.

Ao final, você terá não apenas um menu estilizado em mãos, mas uma compreensão sólida de como criar componentes responsivos que podem ser facilmente adaptados a diferentes contextos e necessidades. Não perca a chance de aprimorar suas habilidades de design e mergulhar no fascinante mundo da criação de interfaces digitais!

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

26:28

Legendas

Português [PT-BR]

Tags

menu, design, Figma, UI, componente

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