Tokens de design Sistema de projeto

Nomeie e gerencie valores compartilhados.

7 verificações · 3 grupos de conteúdo

Conteúdo do checklist

Progresso da revisão

Estrutura e significado

Compare as informações e a apresentação no contexto de uso.

Separando valor e propósitoDistinguir valores primitivos de variáveis baseadas em funções e variáveis específicas de componentes.Mude a interface clara para escura e verifique os estados dos componentes. Use nomes para fins como texto secundário ou bordas; Evite deixar que cada tela escolha uma cor semelhante.Exemplo Datas de atualização, sugestões de caixa de entrada e comentários usam o token “text-mute”; A troca de tokens atualizará todos os três de acordo com as mesmas regras.A nomenclatura tem regrasUse um nome que reflita seu uso, status e escopo para que outras pessoas possam adivinhar como ele será usado.Nomes de funções, como cor de fundo de aviso, são mais duráveis do que nomes de valores, como amarelo-200; mantenha a mesma ordem de nomes para todo o sistema.Registre como usar cada variávelDê exemplos adequados e indique casos em que essa variável não deve ser usada.Cada variável necessita de um exemplo de uso correto e um aviso para uso incorreto; afirmar claramente que as variáveis individuais do ingrediente não são seleções de todo o produto.

Interação e usabilidade

Experimente a operação, altere o status e continue trabalhando.

Confira as interfacesUse uma função consistente ao mudar de claro ou escuro e verifique o contraste de cada estado.O nome de uma função deve manter o significado em claro/escuro; não exige que o componente saiba qual código de cores pertence a cada interface.Mantenha o design e o código sincronizadosCompare nomes e valores entre documentos de design e componentes em uso.Escolha uma fonte de dados primária e verifique automaticamente o viés; O mesmo nome, mas valor diferente, ainda é um erro de sincronização.Acompanhamento de alterações compartilhadoRegistre o motivo, o escopo de influência e o método de conversão ao alterar ou remover uma variável.Registre a variável de substituição e o intervalo de conversão ao remover a variável antiga; Verifique as dependências antes de liberar novos valores.

Complete a experiência

Verifique se há detalhes que são fáceis de perder ao colocar o design em uso.

Atribuir propriedade e um processo para adicionar tokensIndique quem analisa os novos tokens, quando os tokens existentes devem ser reutilizados e como os significados sobrepostos são resolvidos.Uma solicitação para adicionar uma variável deve incluir os casos de uso e os motivos para não usar uma função existente; Evite que cada grupo crie sua própria paleta de cores.

O progresso é salvo automaticamente neste navegador.

ORIENTAÇÕES

Como revisar

Verifique se o valor é chamado por função

Mude a interface clara para escura e verifique os estados dos componentes. Use nomes para fins como texto secundário ou bordas; Evite deixar que cada tela escolha uma cor semelhante.

EXEMPLOS

Exemplos de uso

Cor de fonte secundária comum

Datas de atualização, sugestões de caixa de entrada e comentários usam o token “text-mute”; A troca de tokens atualizará todos os três de acordo com as mesmas regras.