Prototipagem produtiva do XD – um tutorial de componentes do Adobe XD

Publicados: 2022-03-11

O sistema de componentes do Adobe XD capacita designers com recursos poderosos para prototipar produtos digitais. No entanto, não é sem peculiaridades e precisa de cuidados especiais. Utilizar atalhos inteligentes e seguir as melhores práticas permitirá que os designers agilizem seus fluxos de trabalho de prototipagem do XD.

Desde seu lançamento público oficial no final de 2017, o Adobe XD fez grandes avanços para se tornar uma ferramenta de wireframing e prototipagem altamente competitiva para designers de UX. Em particular, seu novo sistema de componentes expande o tipo de interações com as quais os designers podem experimentar. Ainda assim, os componentes não são isentos de peculiaridades e desvantagens. Ao trabalhar com componentes do XD, é útil adotar um conjunto de práticas de fluxo de trabalho para evitar trabalho pesado e aproveitar todo o potencial do sistema.

O que são componentes do Adobe XD?

Os componentes do XD são agrupamentos reutilizáveis de elementos, como texto, formas ou linhas. Um componente tem um “Componente Principal” que serve como pai e “instâncias” ou filhos que são colocados na prancheta. Ao alterar o Componente Principal, as alterações se propagam para todas as suas instâncias.

Substituindo o sistema de “símbolos” anterior do XD, que atendia a um propósito semelhante, os componentes oferecem um diferencial importante . Eles podem ter vários estados que respondem a diferentes entradas definidas no Prototype Mode do XD. Por exemplo, um botão pode ter um estado padrão, mas mudar sua aparência quando estiver em um estado de foco ou clicado. Ele pode reproduzir um som quando clicado ou até mesmo alterar sua aparência de acordo com as entradas do reconhecimento de fala.

O sistema de componentes economiza tempo, mas requer cuidados especiais. Uma abordagem cuidadosa e um fluxo de trabalho cuidadosamente preparado são necessários para alavancar o poder do sistema.

Ao criar protótipos, um designer pode economizar tempo ao trabalhar com estados de componentes do Adobe XD. — A adição de Componentes expande os recursos de prototipagem do Adobe XD.

A familiaridade com o Adobe XD é recomendada

Os designers com um grau razoável de familiaridade com o Adobe XD se beneficiarão mais com as dicas e sugestões a seguir. Para começar, baixe o Adobe XD Design Kit na página inicial do Material Design do Google. O kit fornecerá um conjunto de componentes Adobe XD para experimentar e desconstruir.

Dica nº 1 – Considere todos os estados antes de criar um componente

Ao criar um componente com estados pela primeira vez, os designers devem entender como as possíveis alterações em um componente podem afetar outras instâncias. Para ilustrar, vamos considerar um menu suspenso com vários estados:

O estado padrão : o menu está recolhido
Um estado de foco : a cor do contorno pode mudar quando o cursor estiver sobre ele
Um estado expandido e clicado : as opções do menu suspenso são mostradas

Tutorial de componentes do Adobe XD, trabalhando com estados de componentes. — Criação, nomeação e seleção de estados de componentes na Barra Lateral.

Ao editar o estado padrão de uma instância filha de uma lista suspensa, essas alterações não serão propagadas para os estados de foco ou clicado . As alterações devem ser feitas no estado padrão no Componente principal para atualizar os estados de foco ou clicado de todas as instâncias.

Embora possa ser tentador entrar e começar a iterar em Main Components , às vezes ocorrem problemas inesperados devido às diferenças em como os componentes pai e filho se comportam.

Uma boa prática é considerar e antecipar tudo o que é necessário no estado padrão do Componente Principal antes de adicionar outros estados ou instanciar o componente — chegando até a colocar os diferentes estados lado a lado.

Os designers também devem ter em mente que podem adicionar e alterar elementos em estados não padrão do Componente Principal ou instâncias filhas sem afetar o estado padrão, mas o inverso não é verdadeiro.

Uma recomendação para a Adobe : Dê aos estados do componente um recurso de bloqueio para que os designers possam manter os estados não padrão intactos e evitar que as alterações no estado padrão do componente principal se propaguem.

Os componentes do Adobe XD podem ser inspecionados detalhadamente no painel Ativos. — Os componentes podem ser inspecionados detalhadamente no painel Ativos.

Dica nº 2 – Nomear Componentes na Criação

Criar um componente (clique com o botão direito do mouse em um elemento e selecione “Make Component” no menu ou pressione Cmd-K no Mac/Ctrl-K no PC) adiciona o componente ao painel Assets na barra lateral esquerda. O XD dará ao componente um nome padrão de “Componente XX” (onde “XX” é um número). Não é muito descritivo, então seria melhor dar a ele um nome exclusivo e pesquisável.

Por que fazê-lo? À medida que a lista de componentes for sendo preenchida, ficará complicado se todos os componentes começarem com o mesmo nome padrão e um número sem sentido. Embora a opção “exibição em bloco” ajude, ela não possui rótulos de texto, tornando a identificação visual lenta e desafiadora. A “visualização de lista” com miniaturas pequenas também dificulta a identificação de diferenças entre componentes com nomes indecifráveis. Componentes podem e serão perdidos. Torná-los pesquisáveis nomeando-os economizará tempo mais tarde.

Uma recomendação para a Adobe : Ao criar um componente, selecione-o automaticamente e foque o usuário no painel Ativos->Componentes para renomeá-lo ou abrir um pop-up de nomeação. Também seria útil tornar possível alternar esse recurso em Preferências.

Os componentes do Adobe XD podem ser renomeados e organizados no painel Ativos. — Os componentes do XD podem ser organizados e renomeados no painel Ativos.

Dica nº 3 – Mantenha os principais componentes organizados

Ao criar um componente, é fácil colocar o componente principal em uma prancheta por acidente. Embora o XD forneça ferramentas para encontrar Componentes Principais (seja pesquisando no painel Ativos ou clicando com o botão direito do mouse e selecionando “Editar Componente Principal” em uma instância filha), é muito fácil fazer alterações não intencionais no Componente Principal acreditando que é uma instância. Isso pode levar a muitas alterações indesejadas em várias pranchetas.

Mesmo que haja apenas um punhado de instâncias de componentes em uma prancheta, as coisas podem sair do controle rapidamente quando uma prancheta é clonada. Uma alteração inadvertida no componente principal pode aumentar o tempo de limpeza que poderia ter sido evitado.

É melhor adquirir o hábito de afastar os componentes principais das pranchetas de design imediatamente após a criação . Uma maneira ideal de fazer isso seria colocar os componentes principais na área de trabalho no arquivo XD ou em pranchetas dedicadas e claramente identificadas. Fazer isso tornará as coisas mais eficientes mais tarde.

Uma recomendação para a Adobe : considere um aviso ao fazer alterações no componente principal para que os designers sejam avisados de que as alterações podem se propagar para instâncias filhas.

Como usar o XD: Nomear camadas com cuidado é vital, pois o uso de transições de animação automática depende muito dele. — Nomear camadas com cuidado é vital, pois o uso de transições de animação automática depende muito disso.

Dica #4 – Mantenha-se Organizado com o Painel de Camadas

É fácil experimentar ideias na prancheta e entrar no fluxo de agrupar/desagrupar componentes e alterar as propriedades dos estados dos componentes. Pode haver uma forte tentação de minimizar a barra lateral esquerda para ter mais espaço de trabalho. No entanto, há uma boa chance de que estados e transições de componentes não se comportem como esperado na enxurrada de iteração. Isso pode ocorrer porque a organização e o agrupamento de subelementos (como formas, vetores ou texto) se desviaram do que precisavam ser para que as transições funcionem corretamente.

A visualização Layer fornece 100% de transparência na hierarquia e nomenclatura dos elementos, e sua organização hermética é vital. O uso da poderosa transição Auto-Animate entre estados do XD exige que os elementos tenham o mesmo nome e posição na hierarquia de camadas de um componente. Caso contrário, a transição será padronizada para um fade em vez de uma Auto-Animation atraente.

Às vezes, pode ser desejável suprimir uma propriedade da interpolação durante as transições de animação automática. Para conseguir isso, os designers podem renomear um elemento em um estado de componente ou prancheta diferente para quebrar o link baseado em nome.

Em ambos os casos, a visualização Camadas pode ser usada para solucionar problemas quando surgirem problemas inesperados . Deve ser o primeiro passo ao depurar problemas de prototipagem, seja uma transição entre estados de componentes ou entre pranchetas.

Dica #5 – Use Alpha Fading para Interpolar Cores

O Auto-Animate é uma excelente adição ao XD, mas vem com limitações e idiossincrasias. Uma dessas peculiaridades se torna aparente ao alterar a cor de um elemento entre dois estados de componentes ou pranchetas usando a Animação automática. Em vez de uma interpolação suave entre as duas cores, ela muda abruptamente quando testada.

A solução alternativa atual é um pouco complicada e tem ramificações sobre como os estados do Componente Principal devem ser organizados. Envolve adicionar dois objetos com cores diferentes em vez de uma e, em seguida, fazer o crossfading dos alfas nos dois objetos em ambos os estados para obter uma transição suave. A transição de fade padrão pode funcionar, mas se interpolar formas e tamanhos com Auto-Animate, um fade pode não ser suficiente.

O crossfading entre cores usando Auto-Animation pode ser obtido fazendo o crossfading dos alfas nos dois objetos em ambos os estados. — Como fazer crossfade de cores corretamente usando Auto-Animation no XD.

Dica nº 6 – Alavancar Componentes em uma Grade de Repetição

O Repeat Grid é outro excelente recurso de economia de tempo no XD que facilita a organização e a manutenção de matrizes de elementos semelhantes. Assim como os componentes, Repeat Grids tem um relacionamento hierárquico onde o primeiro elemento no canto superior esquerdo da grade é o “pai” que define as propriedades para os elementos “filhos”. (Há exceções para isso: bitmaps podem ser exclusivos para um elemento filho, assim como strings de texto, mas não propriedades de texto.)

No entanto, ao usar componentes em Repeat Grids, as coisas mudam.

Ao trabalhar com Repetir Grades normalmente, as alterações feitas no pai se propagam para seus filhos imediatamente. No entanto, as alterações do componente principal só se propagam para os filhos em uma grade de repetição se não houver substituições de propriedades locais . Em outras palavras, alterar a propriedade de um componente na grade o “bloqueia” das alterações propagadas do Componente Principal.

Combinando uma grade de repetição com componentes do Adobe XD. — Uma propriedade de cor local é bloqueada em um componente de instância filho em uma grade de repetição, mas não o tamanho.

Para propagar as alterações de um pai que também é um componente em uma grade de repetição, redimensione a grade apenas para o pai. Isso remove seus filhos. Em seguida, arraste as alças de volta para as dimensões desejadas para atualizar os filhos.

Atualizando os filhos de um componente XD em uma grade de repetição. — Uma propriedade de cor local é bloqueada em um componente de instância filho em uma grade de repetição, mas não o tamanho.

Uma vez que os designers podem trabalhar com as peculiaridades dos componentes e Repeat Grids, combiná-los pode ser poderoso.

Dica nº 7 – Assuma que as transições de estado do componente baseado em tempo não existem (por enquanto)

Ao aplicar transições entre pranchetas usando atrasos baseados em tempo (não baseados em entrada), é natural supor que o mesmo esteja disponível entre os estados dos componentes. Infelizmente, esse não é o caso. Todas as alterações de estado baseadas em componentes devem ser baseadas na entrada do usuário ou nas interações no modo de protótipo, não no tempo.

Uma recomendação para a Adobe: adicione uma opção de transição baseada em tempo aos componentes para que seus estados possam ser animados independentemente da entrada do usuário.

As transições baseadas em tempo existem apenas entre pranchetas, não entre estados de componentes do Adobe XD. — As transições baseadas em tempo existem apenas entre pranchetas, não entre estados de componentes.

Dica nº 8 – Seja cuidadoso ao clonar hierarquias de componentes principais

Esta última dica é mais um caso extremo que os designers do XD podem não encontrar com frequência, mas devem estar cientes .

Vamos supor um cenário em que o Componente Principal precise de uma variação que ainda retenha a qualidade “um-para-muitos” dos filhos que herdam as propriedades, mas não afete nenhum componente filho existente. Para criar uma nova hierarquia de componentes pai, um componente instanciado deve ser desagrupado e reconstruído do zero. Desagrupar componentes também perderá todos os estados e propriedades de transição configurados no modo Protótipo. Aqui está uma solução alternativa:

Clone uma instância do componente para cada estado no componente.
Defina o estado de cada instância para um estado diferente.
Percorra e desagrupe cada instância do componente.
Comece a fazer os ajustes e alterações desejados em cada instância do componente.
Recrie o novo componente principal.
Entre no modo protótipo e recrie as interações e os tipos de transição que foram configurados antes.

Uma recomendação para a Adobe: Ao clicar com o botão direito do mouse no Componente principal no painel Ativos, forneça uma opção de menu “duplicado”.

Uma opção duplicada seria útil ao clicar com o botão direito do mouse em um componente do Adobe XD na barra lateral de Ativos. — Ao clicar com o botão direito do mouse em um componente, uma opção "Duplicar" seria útil.

Prototipagem com componentes do Adobe XD: dicas para o sucesso

O Adobe XD fez melhorias significativas na funcionalidade e utilidade nos últimos anos. Tornou-se uma alternativa digna e competitiva ao Sketch e outras ferramentas de prototipagem estabelecidas. Com base em como a ferramenta evoluiu desde sua estreia, é provável que muitas outras melhorias estejam a caminho.

Em particular, o sistema de componentes do Adobe XD tem um excelente potencial para melhorar e expandir os tipos de interações que os designers podem criar.

Aqui estão algumas dicas importantes a serem lembradas:

Entenda como as alterações se propagam entre os componentes principais e as instâncias filhas.
Esteja ciente de como os componentes interagem com outros recursos do Adobe XD, como Auto-Animate e Repeat Grid.
Esforce-se para adotar práticas de fluxo de trabalho consistentes para economizar tempo, como nomear componentes e manter uma área separada da área de trabalho do componente principal no arquivo XD.

Estar atento às idiossincrasias de trabalhar com componentes do Adobe XD, mantendo um fluxo de trabalho disciplinado, maximizará a produtividade do projeto. Isso evitará limpeza e manutenção desnecessárias e dará aos designers do XD uma vantagem de eficiência ao prototipar produtos digitais.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •