Voltar para Curso
Design Tokens Advanced
0% Completo
0/0 Etapas
-
Boas vindas!
-
Introdução aos Design Tokens
Uma breve história sobre evolução -
O que são Design Tokens?
-
Características dos Design Tokens
-
Tipos de Dados de Design Tokens
-
Complexidade no uso de Design Tokens
-
Planejamento e DiscoveryIntrodução ao discovery
-
Mapeamento do ecossistema
-
Mapeamento de Dores e Desejos
-
Auditoria de componentes e estilos
-
Definição de OKRs
-
Estratégias iniciais
-
Descomplicando a nomenclaturaO poder da convenção de nomes
-
Nível Semântico: Base
-
Nível Semântico: Modifiers
-
Nível Semântico: Group e Object
-
Nível Semântico: Namespace
-
Princípios e Gerador de Nomes
-
Dinâmica para Definir Taxonomias
-
A escolha da convenção de nomes
-
Exercício Prático
-
Introdução ao Tokens StudioIntrodução ao projeto JellyFish
-
Iniciando no Tokens Studio
-
Gestão de sets de tokens
-
Propriedades nativas do Tokens Studio (tipos de tokens)
-
Gestão por meio da estrutura semântica
-
Estrutura de JSON no Tokens Studio
-
Modificadores
-
Referências, matemática e funções
-
Gestão de temas no Tokens Studio2 Tópicos
-
Importação e exportação de arquivos físicos
-
Importação e exportação de arquivos de um provedor
-
Utilizando a ferramenta Inspect
-
Documentações automatizadas (documentação viva)
-
Ferramentas auxiliares
-
Diferenças da versão PRO e FREE
-
Tokens Studio x FigmaCoerências entre design tokens, variables e styles
-
Conceitos básicos do Figma Variables3 Tópicos
-
As divergências de Tokens Studio e 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 DictionaryIntrodução ao Style 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 106
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