Template de Taxonomia - Introdução

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!

Arquitetura do Design System

0
0
0
0

Template de Taxonomia - Introdução

Template de Taxonomia - Introdução

Nessa aula, abordamos o tema de variáveis primitivas e como estruturá-las de forma eficiente fora do Figma, utilizando um template em uma planilha. Destaquei a importância de seguir uma estrutura consistente, semelhante à do Figma, para facilitar a criação e manutenção dos Design Tokens.

Pontos importantes da aula incluem:

  • Estrutura de Pastas do Figma: A estrutura de pastas do Figma serve como base para a organização das variáveis, seguindo categorias como cores, espaçamento, tamanho, etc.

  • Criação de Variáveis: Mostrei como criar variáveis sem a necessidade de digitar cada uma manualmente, utilizando a estrutura de categorias, elementos, variantes, color mode, escala, entre outras no nosso template.

  • Uso de Planilhas: Enfatizei a vantagem de usar planilhas (como Excel ou Google Sheets) para gerenciar os tokens, pois permite a colaboração com a equipe, inclusive com membros que não têm acesso ao Figma, e facilita o compartilhamento de informações.

  • Automatização, Fórmulas e Expressões: Expliquei como as planilhas permitem automatizar processos, como inverter valores para temas claros e escuros. Além da velocidade de simplesmente copiar e colar dezenas de estruturas em segundos.

  • Tipos de Variáveis no Figma: O Figma reconhece atualmente quatro tipos de variáveis: cores, números, booleanos e strings. Na aula, focamos nas cores.

  • Construção de Tokens: Demonstrei como construir um novo token de cor, explicando cada parte do processo, desde a seleção da categoria até a inserção do valor da cor.

  • Documentação e Acessibilidade: Ressaltei a importância de documentar as variáveis de forma acessível para toda a equipe, e como a planilha facilita esse processo.

  • Próximos Passos: Adiantei que nas próximas aulas, mostrarei como criar tokens semânticos e como importar os tokens criados na planilha para o Figma.

Ao final da aula, os alunos devem ter uma compreensão clara de como estruturar e gerenciar variáveis primitivas fora do Figma, utilizando um template de planilha para facilitar a criação e documentação de Design Tokens de forma colaborativa e eficiente.


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

Introdução ao Módulo

02:28

Variáveis vs. Estilos

25:30

O que é um design system White Label?

04:44

Exemplos de design systems White Label

08:15

[Unstyled] Design System white label no Figma

13:41

Conhecendo o Projeto [Hive]

35:17

Funcionalidades & Atalhos do Figma [Resources]

10:18

Auditoria do Design

34:15

Criando a Escala de Cores [Variáveis]

34:47

Criando os Tokens Primitivos de Cores [Supa Palette]

33:00

Criando o Dark Mode [Variáveis Semânticas]

26:22

Regra 60-30-10 & Como Harmonizar as cores no seu design?

05:52

Como escolher uma tipografia

07:44

Como escalar uma tipografia?

19:10

Testando o Ritmo Vertical

13:22

Testando o Peso da Fonte

10:49

Variáveis Tipográficas & Estilos

09:53

Criando os Estilos Tipográficos [Styles]

15:03

Estilos Tipográficos no Dev Mode

04:43

Definindo o Layout Grid para Desktop & Mobile [Variáveis]

15:16

Definindo o Espaçamento

05:22

Criando a escala do espaçamento

08:18

Nomenclatura do espaçamento

03:56

Criando as Variáveis de Espaçamento

13:37

Anatomia do Token de Design [W3C]

07:38

Design Tokens vs. Variáveis no Figma

Extra

10:03

Template de Taxonomia - Introdução

Extra

09:53

Template de Taxonomia - Criando os Tokens Primitivos

Extra

12:06

Template de Taxonomia - Criando os Tokens Semânticos

Extra

26:54

Template de Taxonomia - Como importar no Figma?

Extra

09:35

Estrutura da Biblioteca de Variáveis e Componentes

Extra

08:08
Criando os Componentes & Documentação
0 de 34 aulas concluidas
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

Introdução ao Módulo

02:28

Variáveis vs. Estilos

25:30

O que é um design system White Label?

04:44

Exemplos de design systems White Label

08:15

[Unstyled] Design System white label no Figma

13:41

Conhecendo o Projeto [Hive]

35:17

Funcionalidades & Atalhos do Figma [Resources]

10:18

Auditoria do Design

34:15

Criando a Escala de Cores [Variáveis]

34:47

Criando os Tokens Primitivos de Cores [Supa Palette]

33:00

Criando o Dark Mode [Variáveis Semânticas]

26:22

Regra 60-30-10 & Como Harmonizar as cores no seu design?

05:52

Como escolher uma tipografia

07:44

Como escalar uma tipografia?

19:10

Testando o Ritmo Vertical

13:22

Testando o Peso da Fonte

10:49

Variáveis Tipográficas & Estilos

09:53

Criando os Estilos Tipográficos [Styles]

15:03

Estilos Tipográficos no Dev Mode

04:43

Definindo o Layout Grid para Desktop & Mobile [Variáveis]

15:16

Definindo o Espaçamento

05:22

Criando a escala do espaçamento

08:18

Nomenclatura do espaçamento

03:56

Criando as Variáveis de Espaçamento

13:37

Anatomia do Token de Design [W3C]

07:38

Design Tokens vs. Variáveis no Figma

Extra

10:03

Template de Taxonomia - Introdução

Extra

09:53

Template de Taxonomia - Criando os Tokens Primitivos

Extra

12:06

Template de Taxonomia - Criando os Tokens Semânticos

Extra

26:54

Template de Taxonomia - Como importar no Figma?

Extra

09:35

Estrutura da Biblioteca de Variáveis e Componentes

Extra

08:08
Criando os Componentes & Documentação
0 de 34 aulas concluidas
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas

Data de lançamento

22/04/2025

Duração

09:53

Legendas

Português [PT-BR]

Tags

variáveis, planilhas, design, tokens, automação

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

Introdução ao Módulo

02:28

Variáveis vs. Estilos

25:30

O que é um design system White Label?

04:44

Exemplos de design systems White Label

08:15

[Unstyled] Design System white label no Figma

13:41

Conhecendo o Projeto [Hive]

35:17

Funcionalidades & Atalhos do Figma [Resources]

10:18

Auditoria do Design

34:15

Criando a Escala de Cores [Variáveis]

34:47

Criando os Tokens Primitivos de Cores [Supa Palette]

33:00

Criando o Dark Mode [Variáveis Semânticas]

26:22

Regra 60-30-10 & Como Harmonizar as cores no seu design?

05:52

Como escolher uma tipografia

07:44

Como escalar uma tipografia?

19:10

Testando o Ritmo Vertical

13:22

Testando o Peso da Fonte

10:49

Variáveis Tipográficas & Estilos

09:53

Criando os Estilos Tipográficos [Styles]

15:03

Estilos Tipográficos no Dev Mode

04:43

Definindo o Layout Grid para Desktop & Mobile [Variáveis]

15:16

Definindo o Espaçamento

05:22

Criando a escala do espaçamento

08:18

Nomenclatura do espaçamento

03:56

Criando as Variáveis de Espaçamento

13:37

Anatomia do Token de Design [W3C]

07:38

Design Tokens vs. Variáveis no Figma

Extra

10:03

Template de Taxonomia - Introdução

Extra

09:53

Template de Taxonomia - Criando os Tokens Primitivos

Extra

12:06

Template de Taxonomia - Criando os Tokens Semânticos

Extra

26:54

Template de Taxonomia - Como importar no Figma?

Extra

09:35

Estrutura da Biblioteca de Variáveis e Componentes

Extra

08:08
Criando os Componentes & Documentação
0 de 34 aulas concluidas
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas

Title Example

Message Example