Como desenvolver um sistema de design no Adobe XD

Esta é a última de nossa série de 3 partes sobre a arquitetura do Design System. No primeiro, explicamos tudo sobre Design Systems, os benefícios que eles oferecem e como construir um em 6 etapas simples e como Indigo.Design realmente ajuda ao longo do caminho. Na segunda postagem do blog, descrevemos como construir um Design System em Sketch e quais aspectos-chave incluir nele. Agora, o terceiro se concentra em como você pode desenvolver um sistema de design no Adobe XD para garantir a consistência entre os projetos de design, criar resultados mais rapidamente e manter ativos e componentes atualizados que podem ser facilmente reutilizados.

O que é o Adobe XD?

O Adobe XD é uma das ferramentas de design gráfico vetorial mais populares usadas para criar protótipos, design de interação e excelente UX. Com ele, você também pode projetar wireframes e aplicativos, colaborar entre equipes, configurar animações, coletar feedback e criar designs 3D e reutilizáveis.

Quais são as vantagens do Adobe XD?

• Protótipos interativos e wireframes
• Reusable design elements
• Funcionalidade de layout avançada
• O software é gratuito
• Capacidade de compartilhar transferências e coletar feedback

Quais são as desvantagens do Adobe XD?

• Não é possível transferir seu protótipo ou wireframe para um design oficial
• Não gera código
• Few plugins 
• Muitas restrições e limitações na versão gratuita

O que é o Adobe XD Design System?

Para garantir a consistência do design de UX e UI para projetos atuais e futuros ao usar arquivos Adobe XD, é melhor ter um Design System. Um Adobe XD Design System servirá como uma única fonte de verdade, coletando todos os padrões de design e práticas recomendadas de design para uma transição mais rápida da concepção para o design.

Como criar seu sistema de design no Adobe XD?

Vamos por um momento pensar no Mcdonald's como uma das marcas de maior valor do mundo do ponto de vista do designer. Embora o logotipo tenha mudado há alguns anos para transmitir um estilo de vida mais saudável, a marca preserva suas conhecidas e facilmente reconhecíveis cores vermelha e amarela que a definem. Um design de produto digital, no entanto, precisa de mais do que uma tonalidade de uma única cor. E quando se trata de construir um Design System no Adobe XD, mais cedo ou mais tarde você perceberá que precisa de paletas com tons da mesma tonalidade base para duas, três ou até mais cores.

Color palettes

Para obter uma arquitetura rígida para suas cores no Adobe XD, comece desenhando um retângulo, preencha-o com vermelho vibrante ou qualquer outra cor para usar como base e crie um componente a partir dele. Em seguida, crie quantas instâncias forem necessárias. Em Indigo.Design, cada cor tem dez variações – a base e 9 derivadas dela. Agora espalhe algumas dessas instâncias para a esquerda do mestre para as variações mais escuras e para a direita para os tons mais claros. Para cada símbolo à esquerda, empilhe dois retângulos acima da camada de cor base com o mesmo tamanho. A camada mais próxima será usada para saturar e a outra para escurecer com um preenchimento preto semitransparente. Você pode ajustar as propriedades desses dois retângulos para obter tons cada vez mais escuros de sua cor base.

Para as instâncias à direita, siga um padrão semelhante, adicionando retângulos acima de cada uma. A única diferença é que você deve certificar-se de dessaturar e clarear com um preenchimento branco semitransparente, o que lhe dará os tons mais claros. Quando estiver tudo pronto, você pode agrupar cada variante e nomeá-la de acordo, por exemplo, do primário 900 a 600 para o mais escuro e de 400 a 50 para os mais claros, mantendo 500 reservado para o matiz da cor base como no Indigo.Design. Você pode fazer o mesmo para uma tonalidade amarela e verde, criando também as tonalidades secundárias e terciárias para a marca McDonalds.

O segundo passo importante quando se trata de cores nos leva ao painel de ativos para adicioná-las como "Cores" reutilizáveis. Como o Adobe XD requer o uso de um valor hexadecimal simples para o ativo de cor, basta desenhar um retângulo e escolher com a ferramenta conta-gotas a matriz de cores uma a uma, adicionando-as aos ativos de cor com o ícone de adição encontrado à direita do título "Cores" na parte superior do painel. Isso pode ser uma coisa tediosa de se fazer, mas valerá a pena a longo prazo.

Eu aconselho você a agrupar ativos de cores com uma base comum e nomear esses grupos de painéis de ativos de acordo para um sistema de design Adobe XD consistente e bem organizado. Isso se torna uma necessidade se o seu sistema de design for dimensionado como o nosso para incluir quase 50 cores.

As cores cinza são muito distintas de outras cores e existem duas opiniões opostas espalhadas entre as comunidades de designers. Alguns argumentam que as cores cinza devem ser tratadas como qualquer outra matriz de cores com um tom de base no meio e derivados com tons mais escuros e claros. Outros colocam a base em uma extremidade da paleta e alcançam o resto dos tons brincando com a opacidade. Ambas as abordagens funcionam se você pensar em um único tema. No entanto, oferecer suporte a variações de tema claro e escuro com seu sistema de design no Adobe XD significa que devemos considerar a segunda abordagem em vez da primeira.

Na prática, devemos criar dez retângulos para nossas 900 a 50 variantes, preenchê-los todos com preto e começar a diminuir a opacidade em intervalos regulares. Nossa variante 900 terá um valor de 87%, nossa 800 usará 74% e assim por diante até 50, que será de apenas 2%. Com uma cor especial adicional para a superfície, ou seja, plano de fundo do aplicativo, bem como plano de fundo para alguns componentes, como cartões e listas, estamos prontos para adicionar essas cores adicionais como ativos. Só que desta vez podemos fazer isso diretamente dos retângulos que desenhamos, pois eles representam valores hexadecimais simples.

Com isso em vigor e a opção de adicionar mais algumas cores para casos de uso especiais de validação e visualizações de dados, estamos prontos. O que adoramos no Adobe XD é como ele possibilita aplicar uma cor como preenchimento ou como borda, selecionando a camada de destino e clicando com o botão direito do mouse na cor no painel de ativos. Isso significa que não precisamos criar variantes de ativos de preenchimento e borda para as 30+ cores que temos neste momento e nos poupar algum tempo e repetição. Para encerrar em relação às cores, gostaria de compartilhar um pequeno segredo de cor - crie um ativo de cor transparente com 0% de opacidade para poder fazer com que os elementos gráficos desapareçam visualmente de seus componentes, mas mantenha seu lugar e espaço se quiser que o layout persista.

Tipografia

O próximo pilar de uma marca é a tipografia. Pense no "M" do McDonalds, seja qual for a cor, você ainda reconheceria a marca. As tipografias também são um dos principais pilares dos sistemas de design escaláveis. No Adobe XD, eles acabam no painel de ativos seguindo uma abordagem semelhante à das cores. No entanto, arquitetar a tipografia do Adobe XD Design System significa que você deve escolher as propriedades da fonte para criar quantas escalas de texto forem necessárias e os usuários do sistema de design terão à disposição para projetar qualquer coisa relacionada ao produto, desde artigos de blog até interfaces de usuário complexas.

Existem duas propriedades principais de fonte nas quais você deve se concentrar. Obviamente, o tamanho da fonte é o que dá às bolhas de texto sua estrutura, mas às vezes quanto maior o tamanho da fonte, mais fino você deseja que ela apareça. Outras vezes, um texto deve ser mais grosso para parecer mais proeminente e se destacar do resto da frase. Com combinações dessas propriedades, você pode criar um conjunto de títulos, subtítulos e corpo de texto, para citar apenas alguns. Você ficará tentado a adicionar alguns estilos de caracteres específicos do componente também, mas faça isso com cautela. Por exemplo, faz sentido ter uma tipografia de botão com transformação de texto tornando-a toda em maiúsculas como no Material, ou para a inicial de um avatar seus próprios tamanhos e tratamentos específicos, mas a introdução de muitos deles pode diminuir a consistência geral do seu sistema de design.

Devemos considerar cuidadosamente o impacto de adicionar uma escala de tipo, pois não queremos que nossos estilos de caracteres explodam, ou para tornar mais fácil para os usuários de nosso sistema de design explorá-lo e quebrar as diretrizes de design que temos em vigor. Uma coisa que a equipe por trás do Indigo.Design para Adobe XD adora é como o programa nos permite combinar cores com estilos de personagens. Isso significa que não precisamos criar variantes baseadas em cores para as tipografias que definimos, poupando-nos mais tempo e repetição.

Outro benefício do Adobe XD vem do fato de que o alinhamento do texto não faz parte do estilo do caractere e é possível selecioná-lo de acordo com o caso de uso de cada parte do texto. A imagem abaixo mostra a simplicidade dos estilos de caractere definidos no Indigo.Design para Adobe XD, que vem sem sacrificar a facilidade de uso e a flexibilidade.

A segunda metade das dicas para arquitetar sistemas de design escaláveis e rígidos no Adobe XD está relacionada a componentes, tanto em termos de elementos de interface do usuário quanto de peças atômicas que você pode usar e reutilizar no contexto do XD.

Os componentes são o mecanismo para usar algo como um elemento autônomo que é consistente com seus irmãos, pois todos eles estão conectados à sua definição única – o mestre do componente. Começando com algo pequeno e básico como um ícone para começar a montar seu conjunto de ícones, ou uma coleção de sombras ou ilustrações e indo até a repetição de itens para criar uma lista como exemplo de uma estrutura mais complexa.

Pode-se argumentar que ícones, sombras e ilustrações não precisam vir como componentes. No entanto, quando criamos um componente de botão de ícone no Adobe XD, queremos defini-lo amplamente. Como o usamos em um determinado contexto, geralmente precisamos alterar o ícone padrão por outro. O mesmo vale para a ilustração do estado vazio e uma carta cuja sombra aumenta após a seleção para fazê-la parecer mais próxima de você.

Depois de ter suas cores e estilos de caractere, comece a criar componentes para alimentar seus ícones no Adobe XD Design System. Se você estiver usando um conjunto de terceiros, como ícones de materiais, font awesome ou sua própria coleção personalizada, basta escolher um tamanho padrão e criar componentes com os glifos de ícones. Indigo.Design para Adobe XD usa um quadrado de 24px para a base de seus ícones.

Aqui é o momento de ressaltar que uma das coisas mais importantes sobre os ícones é como você nomeia seus componentes representativos. Deixe-me dar um exemplo de Idngo.Design observando como o componente do ícone de configurações é chamado de "_Overrides/Material Icons/action/settings". Ele começa com "_Overrides", que designa que o elemento só deve ser usado para substituir uma instância de ícone colocada em um componente. Então temos "Ícones de materiais", que é o nome do conjunto de ícones. As duas últimas partes do nome definem o nome da categoria opcional e o próprio nome do ícone.

As categorias são úteis para criar alguma organização em famílias maiores de ícones, como Material do Google e Material estendido por Infragistics. Como o Adobe XD tem um mecanismo poderoso para pesquisa de ativos, você também pode pensar em palavras-chave relacionadas ao ícone e colocá-las entre colchetes no final do nome para tornar a pesquisa mais flexível para os usuários do seu sistema de design no Adobe XD.

Agora estamos prontos para nos aprofundar e falar sobre a arquitetura de componentes da interface do usuário. Veremos alguns, mas vamos começar com o botão como um exemplo simples e comum.

A primeira coisa que distingue um botão do outro é o seu contexto de uso. Uma ou duas vezes, você mostrará um CTA proeminente em uma tela. Então, você terá algumas ações importantes, às vezes também precisará apresentar ações secundárias e, ocasionalmente, pode precisar de uma ação contextual flutuante. Por exemplo, um botão que adiciona itens de lista a uma lista.

O que isso significa para a arquitetura de um sistema de design no Adobe XD é que ele precisa antecipar diferentes tipos de componentes. Para o botão, eles serão contidos, contornados, planos e flutuantes. Se quisermos ter um caso de uso super simples com apenas um ícone, podemos adicionar uma quinta variante. O que define um botão, além do fato de acionar uma ação, é que cada um desses tipos tem uma estrutura interna semelhante – plano de fundo, borda, sombra, ícone e rótulo. E para essas peças vamos alavancar o que já lançamos as bases:

• O plano de fundo e a borda usarão os ativos de cores.
• A sombra e o ícone serão componentes primitivos.
• O rótulo usará um estilo de caractere típico para um botão.

No entanto, isso não é tudo que um botão é e também devemos considerar estados de interação, como passar o mouse, focar ou aparecer em um estado desativado até que uma determinada condição seja atendida. Felizmente, o Adobe XD oferece suporte para estados de componentes e eles funcionam perfeitamente. Não apenas os designers que usam o Adobe XD Design System poderão escolher o estado desativado para um botão no momento do design, mas para um ativado, o foco virá como um estado interativo. Isso significa que, quando um usuário apresenta um design e passa o mouse sobre um botão, ele se ajusta para mostrar seu estado de foco.

Como os botões sempre mostram seu conteúdo centralizado e podem ter algumas regras de espaçamento além disso, você deve usar o recurso de layout automático para defini-lo. Coloque o ícone e o rótulo em um grupo e faça uma pilha horizontal com uma margem respeitando a grade de layout que você escolheu. Por exemplo, 4px ou 8px se você estiver usando uma grade de layout de 4px. Você também pode definir o preenchimento se sempre quiser que seu conteúdo seja preenchido nas bordas do botão. Uma coisa a lembrar com o layout automático é que, se você tiver texto nele, sua largura deve ser definida para se ajustar automaticamente de acordo com o conteúdo do texto.

Vamos explorar o campo de entrada agora. Ele vem com uma complexidade maior, dado o fato de que existem três tipos de entradas no tema padrão do Indigo.Design– linha, caixa e borda. Uma entrada pode vir com uma dica ou sem uma que também foi exibida no painel de ativos. Isso dá aos usuários do seu sistema de design uma escolha total de 12 opções inseríveis. Em um campo de entrada, você pode ter componentes aninhados para representar coisas como o prefixo e o sufixo que podem ser usados para orientar o usuário sobre quais informações devem ser preenchidas.

Componentes

Finalmente, vamos examinar mais dois componentes – grupo de botões e cartão. O grupo de botões tem um componente horizontal e um vertical que oferece arranjos correspondentes para um conjunto de sete botões. Ele aplica a pilha horizontal ou vertical em instâncias de componentes de botão, cada um dos quais tem uma pilha horizontal interna para seu conteúdo. Em palavras simples, construímos pilhas de pilhas e componentes de componentes.

Na imagem abaixo, você notará que temos stacks definidos:

• para o grupo interno de botões que está mascarado
• no componente mestre abrangente

Isso garante que, se os usuários do Indigo.Design removerem um botão, o plano de fundo, a borda e a sombra do grupo de botões serão ajustados de acordo.

O cartão pode parecer significativamente diferente, e é quando olhamos para as partes de conteúdo que ele contém. Em sua essência, a arquitetura é muito semelhante ao grupo de botões verticais.

As seções especiais de um cartão são realizadas como componentes separados com diferentes variantes. Eles podem ser facilmente substituídos quando você arrasta itens do painel de ativos para cima daquele que deseja substituir. Isso permite que você altere a peça de mídia padrão de uma imagem para um mapa estilizado ou brinque com o layout automático do cabeçalho para inserir e remover elementos com tudo se adaptando a essas alterações. Em suma, o cartão é apenas uma pilha vertical de áreas específicas, respondendo a toda uma variedade de atualizações possíveis.

Para resumir tudo até este ponto, o Adobe XD torna possível não apenas estabelecer uma base sólida de cores e estilos de caracteres, mas também misturá-los, estabelecendo seus componentes básicos com pilhas e preenchimentos para criar um layout verdadeiramente fluido. Em seguida, você pode continuar usando esses princípios fundamentais para arquitetar organizações de layout mais complexas em quantos níveis precisar.

Você pode montar componentes complexos ou padrões de design que permitem que os usuários do seu sistema de design no Adobe XD criem telas com muito mais rapidez. Se você precisar alterar as cores da marca ou passar de uma interface de usuário clara para uma escura, basta acessar os painéis de ativos, atualizar suas cores e estilos de personagens e pronto! Os aplicativos criados com seu sistema de design no Adobe XD terão o tema adequado.