[Componente] System Icons 1.0

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] System Icons 1.0

[Componente] System Icons 1.0

Na aula de hoje, vamos aprender a criar e organizar ícones para nosso Design System utilizando a biblioteca da Streamline. Com um foco na coerência e facilidade de uso, vamos explorar como documentar esses ícones no Figma de maneira eficaz, tornando a busca e a implementação muito mais fluida para o time de design. O objetivo é garantir que, quando um designer procura um ícone na biblioteca, ele consiga encontrá-lo rapidamente, facilitando a usabilidade durante o processo criativo.

Durante a aula, vamos abordar aspectos como a configuração das variáveis para que os ícones herdem propriedades como cores e tamanhos, além de ensinar como indexar corretamente os ícones através de palavras-chave que ajudem na pesquisa. Para isso, disponibilizarei um set pré-configurado de ícones, mas também irei mostrar o passo a passo do processo, permitindo que você aplique esse conhecimento para criar sua própria coleção ou importar novos ícones conforme necessário.

Ao final, teremos uma biblioteca bem estruturada e organizada, com a qual poderemos trabalhar nos próximos componentes e elementos do nosso design system. Se você pretende aplicar os conceitos em seu projeto, esta aula é imperdível! Não perca a chance de aprimorar sua prática e deixar seu design ainda mais conectado e visualmente coerente.

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

17/05/2025

Duração

31:25

Legendas

Português [PT-BR]

Tags

design, ícones, Figma, bibliotecas, 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

Title Example

Message Example