Voltar para Curso
Design Tokens Advanced v1
0% Completo
0/0 Etapas
-
Introdução aos Design Tokens
Boas vindas! -
Os impactos da Revolução Industrial
-
O que são Design Tokens?
-
Genética dos Design TokensGenética dos Design Tokens
-
Estrutura dos Design Tokens
-
Escalas Semânticas
-
Tipos de Design Tokens15 Tópicos
-
Grupos de Design Tokens
-
Design Tokens, Themes e Modes
-
Design Tokens e Build Systems1 Tópico
-
Tokens internos ou Tailwind?
-
Impactos dos Design Tokens
-
KickoffIntrodução ao projeto (kickoff)
-
Qual discovery devo realizar?
-
Mapeamento do ecossistema
-
Mapeamento de Dores e Desejos
-
Auditoria de componentes e estilos1 Tópico
-
Auditorias automatizadas com IA
-
Definição de OKRs
-
Estratégias iniciais
-
Nomeando design tokensIntrodução à nomenclatura
-
A importância da nomenclatura
-
7 princípios básicos
-
Convenção de nomenclatura6 Tópicos
-
Taxonomia de Design Tokens
-
Terminologia
-
Dinâmica para Definir Taxonomias
-
Exercício Prático
-
Projeto JellyFishIntrodução ao projeto JellyFish
-
Tokens Studio x FigmaTokens Studio (plugin)14 Tópicos
-
Gestão de sets de tokens
-
Tipos nativos do Tokens Studio
-
Gestão por meio da estrutura semântica
-
Estrutura JSON no Token Studio
-
Modificadores
-
Referências, matemática e funções
-
Gestão de Temas no Tokens Studio
-
Relação de temas e Figma Variables
-
Detach em variables
-
Importação e exportação de arquivos físicos
-
Importação e exportação de arquivos de um provedor
-
Ferramenta Inspect
-
Docs automatizadas (vivas)
-
Diferenças da versão PRO e FREE
-
Gestão de sets de tokens
-
Coerências entre design tokens, variables e styles
-
Figma Variables3 Tópicos
-
Tokens Studio x Figma Variables
-
Importação de Variables para Tokens Studio
-
Exportação de variables e styles para o Figma
-
Importação de Styles para o Tokens Studio
-
Metadados de relacionamentos
-
Arquitetura de ArquivosFolha de Ouro JellyFish
-
Sistemas com capacidade de expandir
-
Estrutura de arquivos no Figma
-
Estrutura do sitema JellyFish
-
G_BASE (Global Base)
-
Introdução ao grupo "BRANDS"2 Tópicos
-
Componentes
-
Plataformas (DESIGN_ONLY)
-
Implementação de TokensPrimitives: Dimensions
-
Primitives: Font Sizes
-
Outros Tokens Primitivos
-
Foundations: Sizes
-
Foundations: Spacings
-
Outros Tokens de Fundação
-
A abordagem whitelabel
-
Criando Backgrounds
-
Criando Foregrounds
-
A sessão "Patterns"
-
Typeset1 Tópico
-
Composições Tipográficas
-
Compondo Sombras
-
Criando outras marcas e temas
-
Handoff para times de design e desenvolvimentoDesafios da distribuição para times de design
-
Bibliotecas 1:11 Tópico
-
Bibliotecas Compartilhadas
-
Criação de componente
-
Vinculando Tokens às variables criadas
-
Governança para Releases de Bibliotecas
-
Documentações Automatizadas
-
Conversão com Style DictionaryStyle Dictionary
-
Configurator
-
Configurações Iniciais
-
Variáveis Globais
-
Variáveis de Temas
-
Typeset
-
Alias
-
Componentes
-
Complementos
-
Comandos básicos
-
DesignSystemOps aplicado ao sistema de Design TokensDesafios do DesignSystemOPs
-
Releases
-
Descontinuação de Tokens
Participantes 125
Imagine que o DNA é o código fundamental que define todas as características de um organismo. Da mesma forma, os design tokens podem ser vistos como o “DNA” de um sistema de design. Eles contêm a informação básica que define aspectos visuais de interfaces.
- Unidade Básica: Assim como o DNA é composto por nucleotídeos, os design tokens são compostos por valores individuais de propriedades de estilo, como cores, fontes, espaçamentos e sombras. Cada token representa um pequeno pedaço da identidade visual do produto.
- Consistência e Reutilização: No DNA, as sequências de nucleotídeos determinam características consistentes em um organismo. Da mesma forma, os design tokens garantem que os mesmos estilos sejam aplicados de forma consistente em todas as partes de um produto, independentemente da plataforma ou dispositivo.
- Evolução e Adaptação: O DNA pode sofrer mutações que permitem a adaptação e evolução de um organismo. Com design tokens, mudanças em um único token podem se propagar por todo o sistema de design, permitindo ajustes rápidos e eficientes que mantêm a coerência do design enquanto evoluem com as necessidades do projeto.
- Escalabilidade: Assim como o DNA pode ser replicado para criar novas células, os design tokens podem ser utilizados para construir novas partes de um produto, garantindo que cada nova adição siga as mesmas regras e estilos definidos, facilitando a escalabilidade do design.
- Centralização da Informação: O DNA contém toda a informação genética em um único lugar. Da mesma forma, design tokens centralizam todas as decisões de design, permitindo uma gestão mais fácil e a aplicação de alterações globais de maneira eficiente.
Em resumo, tratar os design tokens como o DNA do seu sistema de design ajuda a manter a consistência, facilitar a manutenção, permitir adaptações rápidas e garantir que todos os elementos do produto digital funcionem harmoniosamente juntos.
Respostas