Como personalizar a cor do Material Design

1. Introdução

Última atualização:18/04/22

Os apps podem adotar uma variedade de cores de esquemas básicos, cores dinâmicas geradas pelo usuário ou cores da marca.

O laboratório de cores do Material You anterior mostrou como visualizar cores dinâmicas em modelos de design, mas você também pode usar a aplicação de temas do Material para personalizar seu app com as cores da sua marca. Usar o novo sistema de cores com as cores da sua marca vai criar um esquema de cores acessível que pode ter recursos mais dinâmicos.

O que você vai aprender

Como criar um tema personalizado com o Material Theme Builder.
Aplicar um tema personalizado a simulações de design.
Possibilidades de combinar cores dinâmicas e personalizadas.

Pré-requisitos

Neste laboratório, vamos nos aprofundar em conceitos fundamentais de design.

Conhecimento de conceitos básicos de design: paletas de cores
Conhecimento sobre os esquemas de cores e papéis atuais do Android
Conhecimento do Figma
Opcional: codelab Visualização de cores dinâmicas no app

O que é necessário

2. Começar

Configuração

Para começar, acesse o arquivo do Figma no Designlab. Tudo o que você precisa para o laboratório está no arquivo do Figma. É possível fazer o download e importar o arquivo ou fazer uma cópia do arquivo da comunidade do Figma.

Primeiro, faça login no Figma ou crie uma conta.

Cópia da comunidade do Figma

Navegue até o arquivo Customizing Material ou pesquise "Visualizing dynamic color in your app with Material Design" na Comunidade do Figma. Clique em Copiar no canto superior direito para copiar o arquivo para seu computador.

Layout do arquivo

Ao analisar o arquivo, vemos que ele é autônomo e começa com uma introdução. Cada seção é dividida em uma linha de imagens conectadas, com alguns conceitos principais em cada seção, bem como exercícios. As seções e os exercícios ampliam os conhecimentos adquiridos nos anteriores e precisam ser concluídos em sequência.

Este codelab oferece detalhes sobre esses conceitos e exercícios. Leia o codelab para saber mais sobre os novos recursos do Material You.

Começando com a imagem de introdução, há botões que vinculam as imagens em ordem. Para acessar o link, clique no botão.

Instalar o plug-in do Figma

Este codelab usa muito um novo plug-in do Figma para gerar tokens e esquemas de cores dinâmicos. Instale o plug-in do Figma diretamente da página da comunidade ou procure por "Material Theme Builder" na comunidade do Figma.

3. Esquema de cores do Material Design

Primeiro, uma visão geral de como a cor é usada no Material e como o novo sistema de cores funciona.

A cor é usada para expressar estilo e transmitir significado, seja ele pessoal para o usuário, de branding ou semântico. O sistema de cores lida com a variabilidade dos esquemas de cores que mudam dinamicamente e que surgem à medida que as entradas do usuário mudam. A lógica das relações tonais e das mudanças de matiz e croma oferece uma base para a aplicação flexível de cores.

O espaço de cores oferece uma maneira de gerar esquemas de cores claras e escuras acessíveis extraídos de uma cor de origem. Para isso, ele gera cinco cores principais e paletas tonais, em que determinadas etapas tonais são selecionadas.

Essa técnica de mudança de cor não apenas oferece um esquema de cores acessível, mas também métodos para criar esquemas de marca acessíveis e coesos com esquemas de cores gerados pelo usuário.

Os esquemas de cores são gerados com base em cinco cores principais em paletas tonais para criar esquemas acessíveis.

Tema de marca

O M3 oferece suporte a aplicações sistemáticas de parâmetros personalizados para ajudar a definir e manter os estilos que comunicam sua marca.

Um esquema personalizado é um esquema de cores que não é derivado do plano de fundo do dispositivo do usuário, mas sim do criador do app. O sistema de cores do M3 e os esquemas personalizados são a base para ativar a cor dinâmica nos apps.

O esquema personalizado vai preencher a lacuna entre o M2 e o M3 para facilitar a migração, configurando os tokens necessários (slots de cores) e criando uma experiência mais alinhada à marca.

Adicionar cores da marca ao Material Theme Builder

4. Esquema de cores: cores de destaque

A base de um esquema de cores é o conjunto de cinco cores principais, cada uma relacionada a uma paleta tonal separada com 13 tons. Tons específicos de cada paleta tonal são atribuídos a funções de cores em uma interface. Vamos começar abrindo o plug-in do Material Theme Builder e configurando nossa primeira cor de destaque: Primária.

Ao inserir apenas "primária", ela será usada como fonte para gerar um esquema de cores completo.

No modal do plug-in, clique em "Personalizado". Isso muda o tema para um personalizado. Neste laboratório, vamos usar o tema do material que já foi gerado, mas também é possível criar um novo tema. Saiba mais em Como visualizar cores dinâmicas.
Em seguida, defina uma cor principal primária. A cor primária pode ser a cor principal da sua marca ou a cor de destaque mais usada. As demais cores principais serão preenchidas com base na cor primária. Isso significa que não é necessário adicionar cores caso você não precise delas.

5. Criar o restante do tema

A cor primária é usada para gerar o tema, mas você pode ter cores de destaque para complementar a cor principal da marca.

No modal do plug-in, adicione uma cor secundária clicando no bloco de cor secundária. As funções secundárias são usadas para componentes menos proeminentes na interface, ampliando a oportunidade de expressão de cores. A cor secundária será atualizada no esquema de cores e na interface do app.
Faça o mesmo para "Terciária". As funções terciárias são usadas para dar destaque a contrastes que podem ser usados para equilibrar cores primárias e secundárias ou chamar a atenção para um elemento. A função de cor terciária fica a critério dos criadores e tem como objetivo oferecer uma expressão de cores mais ampla nos produtos.
Agora neutras, as funções neutras são usadas para superfícies e planos de fundo, além de texto e ícones com ênfase alta.

Forneça cores secundárias, terciárias e neutras para personalizar totalmente seu esquema de cores.

As cores da sua marca agora serão incluídas no esquema de cores principal, que foi ajustado para corresponder ao espaço de cores M3, totalmente acessível e capaz de exportar e implementar no código como um tema.

6. Aplicando seu tema

Funções e tokens

Cada cor de destaque (primária, secundária e terciária) é fornecida em um grupo de quatro cores compatíveis de tons diferentes para pareamento, definição de ênfase e expressão visual. O grupo é composto pela cor de destaque, a cor "on", o contêiner e o "on contêiner".

As funções neutras são usadas para superfícies e planos de fundo, além de texto e ícones com alta ênfase.

Os tokens de design representam as decisões de design pequenas e repetidas que constituem o estilo visual de um sistema de design. Os tokens substituem valores estáticos, como códigos hexadecimais para cores, por nomes autoexplicativos. Os tokens de design conectam de maneira significativa escolhas de estilo que, de outra forma, não teriam uma relação clara.

O plug-in do Figma cria tokens e insere suas próprias cores de origem na forma de estilos do Figma para se conectar a simulações, guias de estilo da marca e até sistemas de design.

Os tokens de design criam uma linguagem comum entre as funções de cor e a implementação.

Hierarquia de cores

Ao aplicar funções de cores aos modelos, considere a ordem de importância, ou hierarquia, dos elementos. Esse conceito ajudará a atribuir as cores da marca às respectivas funções e também a mapeá-las dentro da UI. Normalmente, cores mais saturadas ou concentradas chamam a atenção do usuário primeiro. Por isso, a função de cor primária é mapeada para componentes mais focados em call-to-action. Embora o Material Theme Builder use o sistema de cores do M3 para gerar cores adequadas, fornecer cores secundárias ou terciárias com maior saturação vai criar cores que ofuscam a primária. Considere a ordem em que você quer que os usuários interajam com a UI e o conteúdo para ajudar a atribuir funções de cores. Nem todos os componentes devem usar a cor primária.

Cores sólidas e saturadas chamam mais atenção.

7. Trocar para o tema

Para aplicar o tema personalizado que você criou aos seus designs, precisamos definir o modelo para os tokens no tema material atual.

Os componentes do Material Design vêm com funções pré-mapeadas e funcionam automaticamente com o Material Theme Builder.

Troque para o tema no modal do Material Theme Builder.

Vamos definir todos os tokens (estilos do Figma) no layout à direita para usar esse tema. Para isso, selecione o frame do layout e clique em "Trocar". O prefixo de estilo será atualizado nas cores de seleção.
Nem tudo foi atualizado? Os componentes personalizados, como o card de dicas de cuidados com plantas, precisam aplicar o estilo do Figma primeiro. Selecione o contêiner de dicas de cuidados e clique no ícone de quatro pontos para atribuir um estilo. Escolha contêiner terciário. Faça o mesmo com o conteúdo do card de dicas de cuidados, mas atribua um contêiner terciário. Os pequenos rótulos na lista também são componentes personalizados, mas vamos falar sobre eles mais tarde.
Os componentes do Material Design usam mapeamentos padrão, mas você pode testar atribuições de estilo para adequar melhor à UI. Reserve um tempo para testar diferentes hierarquias de cores e expressões de marca.

(Apenas o tema está incluído no arquivo de exportação para código. Se estiver trabalhando com um engenheiro, compartilhe simulações para comunicar mapeamentos de tokens, já que isso não será incluído na exportação.

Ao abrir o plug-in sem um tema, uma tela de configuração vai aparecer para você começar. A opção "Começar" gera o tema de referência padrão "material-theme" como um grupo de estilos do Figma para conectar aos seus mockups ou usar com o kit do Material Design.

8. Como ir além do esquema principal

Agora você tem um tema de cores da marca mapeado para componentes e um modelo de design, mas pode ter outras cores que precisam ser incluídas. É aí que entra um esquema estendido para permitir a adição de cores personalizadas.

Elas podem ser semânticas, específicas da marca ou até mesmo do produto, que precisam ter funções atribuídas e alteradas pelo algoritmo de cores ou permanecer como foram inseridas.

O esquema de cores estendido também apresenta a possibilidade de combinar cores dinâmicas (geradas pelo usuário) com as cores da sua marca. Permita que o esquema principal tenha influência personalizada do usuário, enquanto as cores da marca são definidas no esquema estendido. Isso significa que os elementos da interface podem ser mais pessoais para os usuários, e as cores da marca podem ter momentos mais precisos e impactantes no app.

O esquema principal pode ser estendido para incluir cores personalizadas.

9. Extensão e personalização

Estender o esquema com cores personalizadas permite adicionar cores semânticas ou de marca adicionais.

Esquema personalizado com cores personalizadas adicionadas.

No modal do plug-in, abaixo das cores principais, clique em Adicionar uma cor.
O tema atual será atualizado com uma nova linha "Custom0". Para atualizar essa cor, clique no ícone de cor e selecione uma nova cor.
Essas cores estendidas podem ser encontradas como um estilo dentro de estilos somente leitura como Custom0. A paleta e o esquema tonal estão presentes. Vamos mapear alguns dos rótulos da lista com a nova cor. Para isso, selecione o plano de fundo do rótulo e atribua uma das funções da cor adicionada (container on-custom0).

Definir uma cor personalizada nas cores selecionadas.

O Material Theme Builder gera automaticamente as cores como Custom#. Para renomear uma cor personalizada adicionada, expanda o grupo de estilos do tema no painel de estilos (isso vai aparecer quando nada estiver selecionado). Em seguida, procure Custom0 no subgrupo de origem. Renomear a origem aqui vai renomear a cor no modal do plug-in.

Os estilos de cores personalizadas podem ser encontrados no painel de estilos.

Para excluir a cor adicionada, clique com o botão direito do mouse e exclua o estilo. Na próxima vez que o plug-in for aberto, a cor adicionada será removida. A renomeação e a exclusão podem não ser refletidas no diagrama de cores.

10. Parabéns

Excelente trabalho ao aprender a criar um tema de cores personalizado usando o Material Theme Builder, aplicá-lo a simulações de design e adicionar ao esquema de cores. O novo sistema de cores do Material 3 traz cores acessíveis, flexíveis e coesas para os designs. Mal podemos esperar para ver como você vai usá-las!

Se tiver dúvidas, fale com a gente a qualquer momento usando o @MaterialDesign no Twitter.

Confira outros tutoriais e conteúdo de design em youtube.com/MaterialDesign.