Criando os Tokens Primitivos de Cores [Supa Palette]

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

Criando os Tokens Primitivos de Cores [Supa Palette]

Criando os Tokens Primitivos de Cores [Supa Palette]

Para resgatar a sua licença do Supa Palette:

  1. Vá até a nossa comunidade no Discord até a sala#geralou#duvidas​, e escreva o comando !supa-paletteno campo de mensagem e envie!

  2. Agora, vá até a sua caixa de mensagens privadas do Discord e procure pela mensagem doFigueiredocom o código da sua licença!

  3. Abra o pluginSupa Paletteno Figma, escolha a opção\*Lifetimee cole o seu código lá!


​Nessa aula, aprendemos sobre a criação e estruturação de uma paleta de cores no Figma, utilizando o plugin Supa Palette. Abordamos os seguintes pontos importantes:

  • Iniciamos trazendo nossa paleta de cores para o projeto, incluindo cores primárias, neutras e semânticas.

  • Discutimos a importância de uma estrutura inicial flexível para experimentação e ajustes durante a fase de construção do design.

  • Utilizamos o Supa Palette para estruturar nossa paleta de cores, testar contrastes e preparar para o uso em Light Mode e Dark Mode.

  • Benefício para Alunos do cfPRO: Os alunos do curso, terão acesso a uma licença premium do plugin, que oferece as funcionalidades mais avançadas que irão acelerar o seu workflow.

  • Aprendemos a criar tokens de cores e a importância de manter uma lógica inicial para facilitar a inclusão de novas cores ou mudanças futuras.

  • Vimos como exportar e sincronizar as cores com os estilos locais do Figma, garantindo que qualquer alteração nas cores seja refletida em todos os componentes que as utilizam.

  • Discutimos a importância de uma boa organização e nomenclatura das cores, para facilitar a identificação e aplicação no design.

  • Utilizamos o plugin Style to Variables para converter os estilos em variáveis, permitindo uma conexão direta com apenas um clique.

  • Aprendemos sobre a criação de uma coleção de tokens primitivos, que inclui cores, espaçamentos, tipografia e outros elementos fundamentais do design system.

  • Enfatizamos a importância da documentação e organização do design system para facilitar o uso e manutenção ao longo do tempo.


Links da aula

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

20/04/2025

Duração

33:00

Legendas

Português [PT-BR]

Tags

licença, Supa Palette, Figma, design, comunidade

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