Confronto da Ferramenta de Design – Adobe XD vs. Sketch (2019)

O Sketch, uma ferramenta de design bem estabelecida, teve um crescimento fenomenal desde seu lançamento em 2010. Em 2016, a Adobe apresentou o XD como um concorrente formidável. Após quase três anos de desenvolvimento, o Adobe XD oferece um desafio suficiente para os designers considerarem uma mudança?

O processo de design UX é complexo e requer o uso de ferramentas, metodologias e frameworks específicos. Pesquisa de usuário, análise, wireframing, maquetes, iteração, teste de usabilidade e prototipagem de interface do usuário são apenas alguns dos artefatos e processos com os quais os designers trabalham enquanto se comunicam com desenvolvedores, partes interessadas e outros membros da equipe.

Duas ferramentas de design amplamente reconhecidas nas quais os designers de UX confiam são o Adobe XD e o Sketch.

O Sketch se tornou o padrão de fato para a grande maioria dos designers digitais devido à sua interface simples, grande número de plugins, funcionalidade completa do kit de ferramentas e atualizações frequentes.

Embora o Sketch tenha se tornado a ferramenta de escolha dos designers de UX, a Adobe, há muito conhecida por seu software de design premiado e laços profundos com a comunidade de design, não tinha uma opção semelhante. Eles tinham Photoshop, Illustrator e Fireworks, mas os designers não tinham apetite para usar três ferramentas para realizar tarefas que o Sketch poderia fornecer em um aplicativo.

Em 2016, a Adobe introduziu o XD (Experience Design). Um sério candidato ao Sketch, eles ainda tinham muito o que fazer. Na época, o Sketch tinha seis anos, tinha uma ampla base de usuários e todo um ecossistema de plugins, tornando-se uma poderosa ferramenta de design. A rivalidade aumentou nos dois anos seguintes e o Adobe XD cresceu de um concorrente ágil para uma ferramenta de design altamente conceituada que conquistou muitos designers profissionais.

O Toptal Design Blog publicou um artigo sobre Sketch vs Adobe XD em 2017 quando ainda estava em beta. Agora, dois anos depois, o Adobe XD passou por várias revisões com um objetivo claro: oferecer tudo o que um designer de UX precisa de forma nativa e com ótimo desempenho.

Está na hora dos designers de UX mudarem do Sketch para o Adobe XD?

Adobe XD vs Sketch

Vamos explorar como o Adobe XD se compara ao Sketch. Vamos comparar as seguintes características:

• Interface de usuário
• Repetir Grade
• Símbolos e Painéis de Ativos
• Ferramentas de design responsivo
• Complementos e Plugins
• Prototipagem com Animação Automática
• Compartilhamento e comentários
• Trabalhando com Desenvolvedores
• Controle de versão e colaboração em tempo real

Interface de usuário

Designers que estão familiarizados com ferramentas como o Photoshop não devem ter problemas para aprender Adobe XD ou Sketch, pois todos compartilham uma interface de usuário semelhante.

Uma diferença notável na interface do usuário é a ausência de uma barra de ferramentas no Adobe XD. A barra de ferramentas, localizada na parte superior da interface do usuário, é um recurso útil no Sketch com atalhos personalizáveis ​​para funções e ferramentas comumente usadas, como agrupar objetos. A Adobe oferece um recurso semelhante e reduzido chamado caixa de ferramentas , localizado no lado direito do software.

Sketch vs XD : Sketch tem vantagem por sua útil barra de ferramentas.

Repetir Grade

Um recurso notável no Adobe XD é a grade de repetição. Esta é uma ferramenta útil que permite a criação fácil de listas ajustáveis ​​e telas baseadas em grade. Embora o Sketch não tenha esse recurso, ele pode ser mais ou menos replicado com plugins.

Sketch vs XD : Adobe XD tem a vantagem com a grade de repetição que é nativa do software.

Símbolos e Painéis de Ativos

Os símbolos foram um recurso inicial que teve uma contribuição significativa para o sucesso do Sketch. Os símbolos estão para o Sketch como CSS (Cascading Style Sheets) está para o design do site. Eles permitem que os designers reutilizem e editem facilmente ativos em massa, o que economiza muito tempo, ajuda a criar um sistema de design pronto e fornece consistência em todas as telas.

A Adobe começou com símbolos básicos e depois introduziu o painel de ativos que combinava símbolos, fontes e cores em um único local. A edição de qualquer um desses elementos mostra as atualizações resultantes em tempo real. O Sketch tem esses recursos, mas o Adobe XD forneceu uma experiência de usuário mais coesa e aprimorada.

Sketch vs XD : o Adobe XD tem uma ligeira vantagem devido aos elementos de interface do usuário combinados no painel de ativos.

Ferramentas de design responsivo

O Adobe XD oferece um conjunto robusto de ferramentas de design responsivo. Um recurso de destaque, o modo automático responsivo, adivinha como a tela deve responder a diferentes tamanhos de dispositivos.

Este é um recurso incrivelmente útil que pode ser ativado e desativado usando um simples botão deslizante. Se o modo automático ficar aquém do comportamento esperado, um designer pode alterar as propriedades responsivas manualmente.

O Sketch não tem esse recurso embutido, mas tem muitos plugins como o Anima Toolkit que fazem o trabalho bem.

Sketch vs XD: Adobe XD tem a vantagem aqui. Eles oferecem uma maneira integrada de ver efeitos responsivos nos elementos da interface do usuário.

Complementos e plug-ins

O ecossistema de plugins no Sketch é sem dúvida um de seus maiores recursos. Existem centenas de plugins que estendem a funcionalidade do Sketch e permitem que os designers usem recursos aprimorados enquanto permanecem no ecossistema Sketch.

Os complementos são o equivalente do Adobe XD aos plug-ins. A Adobe iniciou seu ecossistema de complementos em 2018, portanto, não é tão robusto quanto o Sketch. Isso não é uma preocupação para a Adobe, pois seu objetivo é tentar reduzir a necessidade de complementos e se concentrar em criar recursos integrados ao software.

Sketch vs XD: Sketch tem a vantagem com sua extensa biblioteca de plugins.

Prototipagem com Animação Automática

A Adobe atualizou recentemente o XD com um recurso incrivelmente útil para designers de UX: animação automática . Ele funciona fazendo transições inteligentes e suaves entre elementos de telas diferentes. Os resultados são impressionantes, tornando a prototipagem uma experiência agradável para envolver clientes em potencial. O Sketch não oferece essa funcionalidade, mesmo com um plugin.

Outro ótimo recurso de prototipagem introduzido pela Adobe é o suporte para microinterações, por exemplo, puxar um painel da borda da tela ou fazer um teclado aparecer. O Adobe XD também oferece suporte à criação de protótipos de interfaces de usuário baseadas em voz (como Alexa ou Google Home).

Sketch vs XD: o Adobe XD tem a vantagem aqui com recursos de animação automática que economizam tempo e suporte para microinterações que o Sketch não possui.

Compartilhando e comentando

Os designers frequentemente se envolvem com outros membros da equipe, desenvolvedores e partes interessadas – a capacidade de compartilhar designs e receber feedback é uma parte crucial do processo de design. Dessa forma, o Adobe XD inclui funcionalidades integradas para que modelos e protótipos sejam compartilhados online para que qualquer pessoa possa adicionar comentários gerais ou apontar para locais específicos em um layout e deixar comentários.

Esses recursos, combinados com o modo de prototipagem dinâmica do Adobe XD, também podem ser testados em telefones celulares com o aplicativo nativo do Adobe XD ou até mesmo gravados para demonstrações não interativas.

O Sketch pode fazer uso de compartilhamento e comentários usando ferramentas de colaboração como o Zeplin ou integrações com ferramentas de terceiros, como o Invision.

Sketch vs XD: a Adobe tem uma ligeira vantagem aqui com compartilhamento e comentários online integrados.

Especificações do projeto

Ao longo de um projeto de design, os designers de UX geralmente precisam compartilhar especificações de design com os desenvolvedores. A Adobe incluiu essa funcionalidade no XD, enquanto os usuários do Sketch precisarão usar integrações como Zeplin ou InVision.

Sketch vs XD: a Adobe tem uma vantagem sobre o Sketch porque as especificações de design são incorporadas e não requerem integração de terceiros.

Controle de versão e colaboração em tempo real

Dois recursos importantes em que designers e desenvolvedores confiam são o controle de versão e a colaboração em tempo real. Grandes equipes de design que trabalham juntas no mesmo projeto precisam ser capazes de ver quando as alterações foram feitas e acessar um histórico dessas alterações.

A Adobe abordou a colaboração com a introdução de documentos na nuvem . Isso dá a todos na equipe, incluindo desenvolvedores, um local central para trabalhar. De acordo com a Adobe, o próximo passo para o recurso de documentos na nuvem será o controle de versão.

O Sketch oferece controle de versão e colaboração em tempo real com plugins, mas esses recursos não são incorporados ao produto.

Sketch vs XD: Sketch vence este. Eles têm controle de versão, embora com plugins; isso não é oferecido atualmente no XD.

Resumo do recurso: Adobe XD vs. Sketch

Existem semelhanças e diferenças entre a versão atual do Adobe XD e do Sketch. Aqui está uma comparação de cada produto:

É hora de mudar as ferramentas de design de UX?

Comparando recursos, Sketch e XD estão próximos. O Sketch não possui alguns recursos, como animação automática, design responsivo automático e a grade de repetição, todos nativos do XD.

A única coisa importante que ainda falta ao Adobe XD é o controle de versão, que o Sketch possui graças aos plugins. Espere que isso chegue ao XD em breve, pois a Adobe continua desenvolvendo o conjunto de recursos de documentos na nuvem.

É mais fácil fazer a transição do Sketch (e Photoshop ou Illustrator) para o XD do que o contrário, pois o XD pode abrir arquivos do Sketch com excelente fidelidade. Você pode ter alguns problemas se depender de plug-ins somente do Sketch, como Abstract ou InVision Craft.

Em alguns cenários, a escolha é óbvia: para usuários do Windows, o Sketch não está disponível e, para assinantes da Adobe Creative Cloud, o XD é incluído gratuitamente com protótipos compartilhados ilimitados. Isso não aconteceu por acaso.

Mas Sketch está revidando. A empresa fechou recentemente US$ 20 milhões em financiamento e promete recursos importantes como colaboração em equipe, transferência nativa e uma versão web do aplicativo em 2019.

Se o controle de versão não for um problema crítico, nunca foi um momento melhor para considerar o uso do Adobe XD. O compromisso da Adobe com a comunidade de design de experiência do usuário é evidente com recursos como modo de resposta automática, grade de repetição e prototipagem integrada. Apesar de seu início tardio, a Adobe provou que pode oferecer um desafio formidável ao Sketch.

Leia mais no Blog Toptal Design:

• Adobe XD vs. Sketch - Qual ferramenta UX é ideal para você?
• Atomic Design and Sketch - um guia para melhorar o fluxo de trabalho
• Design com precisão - uma revisão do Adobe XD
• Coisas que você pode não saber sobre tipografia no Sketch
• Familiarizando-se com o desenvolvimento de plug-ins do Sketch