1. Introdução
Última atualização:21/09/2021
Os apps podem adotar uma variedade de cores de esquemas básicos, cores dinâmicas geradas pelo usuário ou cores da marca.
Prepare-se para conhecer os novos recursos de cores dinâmicas apresentados com o Material You. Neste laboratório, você vai criar paletas de cores dinâmicas para aprender como o sistema de cores funciona, os conceitos que criam paletas de cores acessíveis e métodos para ajudar a visualizar seu app com cores dinâmicas usando as ferramentas de design mais recentes.
O que você vai aprender
- Novidades nas cores do Material Design
- Como aplicar cores geradas pelo usuário ao seu app
- Ferramentas para ajudar
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
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á nele. É possível baixar e importar o arquivo ou fazer uma cópia dele na comunidade do Figma.
Primeiro, faça login no Figma ou crie uma conta.
Cópia da comunidade do Figma
Navegue até o arquivo Visualizing dynamic color in your app with Material Design ou pesquise essa frase na Comunidade do Figma. Clique em Copiar no canto superior direito para copiar o arquivo para seu computador.
Layout do arquivo
Dê uma olhada no arquivo. Você vai notar que ele é independente, começando com uma introdução. Cada seção é dividida em uma linha de telas conectadas, com alguns conceitos principais em cada seção, seguidos por exercícios. As seções e os exercícios se complementam e, portanto, devem ser concluídos na sequência.
Este codelab vai orientar você sobre esses conceitos e exercícios com mais detalhes. Sugiro ler junto com 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 pranchetas em ordem. Acesse o link clicando 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 na página da comunidade ou procure por "Material Theme Builder" na comunidade do Figma.
3. Conceitos de cores
O que é a cor dinâmica?
O Material You reinventa a cor como uma experiência mais individualizada. Com a extração dinâmica de cor, a variedade de experiências de cores possíveis é muito maior.
A cor dinâmica é uma parte fundamental do Material You, em que um algoritmo deriva cores personalizadas do plano de fundo de um usuário para serem aplicadas aos apps e à interface do sistema dele.
Luminância
A cor dinâmica foi criada para funcionar em contextos imprevisíveis. Para gerenciar proporções de contraste em vários contextos de visualização, os níveis de luminância são o principal atributo que permite uma boa combinação de cores, mesmo que a equipe do produto não teste cada combinação específica.
Elementos com luminância semelhante não têm o contraste adequado para legibilidade, enquanto elementos com valores de luminância diferentes são mais distinguíveis.
Paletas tonais
Uma paleta tonal é a tradução de uma tonalidade (uma cor dinâmica extraída) em um espectro de tons relacionados. A tradução de uma cor em 13 tons permite que um grupo de intervalos tonais, chamado de paleta tonal, seja aplicado em diferentes contextos, desde elementos individuais dentro de um componente até temas de apps inteiros.
Cor traduzida em um intervalo tonal.
4. Extrair cores
Da ideia ao esquema
Vamos ver como a cor dinâmica funciona com o Material Theme Builder.
- Abra o Material Theme Builder. Com a opção dinâmica selecionada, solte uma imagem ou escolha uma no navegador de arquivos. A cor principal será atualizada com base na imagem.
- Os valores de cor são extraídos de um plano de fundo e recebem um "tipo" que determina como a cor vai se relacionar com outras cores em um esquema. Essas "cores principais" (à direita) foram atualizadas para refletir esses valores.
- Em seguida, elas são convertidas em paletas tonais com base na luminância, gerando cinco intervalos de cores com tons claros e escuros. As paletas tonais são rotuladas como tal na saída de cores.
- Dos cinco intervalos tonais, tons específicos (com base na luminância) são inseridos nas funções predefinidas que compõem um esquema. As cores são mapeadas para um esquema usando tokens de design.
Funções de cores terciárias criadas com base em um intervalo tonal terciário e mapeadas para componentes.
5. Temas e tokens
Os tokens de design permitem flexibilidade e consistência em um produto, permitindo que os designers, por exemplo, atribuam a função de cor de um elemento em uma interface, em vez de um valor definido. Os tokens atuam como uma ponte entre a função atribuída a um elemento e o valor de cor escolhido para essa função. Projetar para a função de uma cor em vez da cor específica é mais fundamental com a introdução da cor dinâmica.
Os temas contêm tokens do Material Design para cor e tipo, garantindo que designs e código tenham uma fonte única de verdade para representar a linha de base, além de paletas geradas pelo usuário e valores personalizados.
No Figma, o plug-in gera esses tokens como estilos. Isso significa que, ao usar os estilos gerados, você estará usando os tokens do MD.
As cores em uma paleta tonal são mapeadas para um esquema claro ou escuro usando tokens de design.
O sistema de mapeamento atribui um tom a cada elemento em um componente.
Tokens de configuração
Para aplicar a cor dinâmica aos seus designs, precisamos definir o mockup para os tokens no tema material atual.
- 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.
Clique em "Trocar" para atualizar o tema conectado usado no design selecionado.
- Agora, solte uma imagem ou selecione uma no navegador de arquivos. Os valores do modelo vão assumir a cor dinâmica extraída da imagem.
- Clique no botão de reprodução aleatória para randomizar a cor de base e extrapolar em vez de extrair da imagem. Essa é outra maneira de ver rapidamente como a cor dinâmica pode afetar seus modelos de design.
Clicar no botão de ordem aleatória para randomizar a cor principal.
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.
6. Aplicado à interface
Os layouts fornecidos foram criados com o Kit do Material Design, que usa tokens do Material Design, mas há alguns elementos personalizados que não são mapeados.
- Selecione os cards de artigos. No preenchimento, defina o estilo (ícone de quatro pontos) como material-theme/surface. Você também pode pesquisar por superfície.
- Em um processo semelhante, selecione o tipo nos cards e defina como na plataforma e as caixas de seleção como primárias.
Estilos do Figma usados nos cards do design.
Em seguida, vamos criar outros simulacros para iterar o restante dos esquemas.
Criar temas e iterar
Agora, conectamos totalmente um modelo para visualizar a cor dinâmica, mas também podemos criar vários temas e trocá-los em modelos separados para visualizar uma variedade de cores dinâmicas de uma só vez.
- No modal do plug-in, clique no menu suspenso e selecione Adicionar novo tema.
- Crie um nome exclusivo para o tema e clique em Criar tema. Isso também vai gerar novos diagramas de cores para cada tema criado.
Adicionar um novo tema pelo menu suspenso.
- Adicione uma imagem ou embaralhe a cor principal.
- No modal do plug-in, selecione um modelo (componente de interface do app) e clique em swap. Isso vai atualizar os valores de estilo para o tema atual mostrado no menu suspenso.
- Duplique (CMD + D) o mockup.
Clique em "Trocar" para atualizar o tema conectado usado no design selecionado.
- Repita as etapas de 1 a 5.
Agora você tem vários designs com diferentes iterações de cores dinâmicas.
7. Parabéns
Parabéns por aprender e aplicar cores dinâmicas! O Material Theme Builder está aqui para facilitar o uso de cores no Material Design, visualizando cores dinâmicas, criando temas personalizados e exportando para código.
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.