Adobe XD vs Sketch – Confronto 2020

Dois competidores de peso continuam lutando para conquistar o primeiro lugar para a ferramenta de design mais favorecida: Adobe XD vs Sketch. Qual ferramenta irá governar todos eles? A resposta não é simples. Como ambos fizeram progressos extraordinários nos últimos anos, uma comparação abrangente de ferramentas de design sobre recursos, desempenho e facilidade de uso está atrasada.

Sketch já estava anos à frente da estreia do XD: seis, para ser exato. Ele tinha uma base de fãs ampla e dedicada, estava repleto de recursos e tinha um extenso ecossistema de plugins. Mas o Sketch tinha um calcanhar de Aquiles – só funcionava em Macs.

Em 2016, a Adobe aumentou a pressão e entrou na briga. Eles não apenas combinaram o Sketch com recursos semelhantes no XD, mas também o disponibilizaram no Windows. Como aproximadamente 78% dos computadores desktop do mundo rodam no Windows, essa foi uma jogada ousada e competitiva.

O Adobe XD também preencheu uma lacuna substancial na linha Creative Suite. O Fireworks recebeu o aperto de mão dourado e os recursos oferecidos pelo XD não estavam disponíveis em outros aplicativos como Illustrator ou Photoshop. O XD não é apenas a mesma ferramenta de design leve e baseada em vetor que o Sketch, mas também se integra melhor ao restante do ecossistema do Adobe Creative Suite.

No entanto, entre os designers, as opiniões ainda variam sobre qual ferramenta é melhor. A batalha se transformou recentemente em uma guerra total, pois os recursos são rapidamente adicionados a ambas as ferramentas, muitas vezes tentando se atualizar e frequentemente imitando um ao outro.

Vamos mergulhar e comparar os seguintes recursos no Adobe XD vs Sketch:

• Interface de usuário
• Trabalhando com Símbolos/Componentes Mestres
• Painéis de ativos e componentes
• Escalando Camadas e Componentes
• Duplicando e distribuindo elementos
• Ferramentas de design responsivo
• Plug-ins
• Prototipagem
• Colaboração em equipe
• Transferência do desenvolvedor
• Controle de versão e bibliotecas compartilhadas
• Modo escuro

Interface de usuário

Embora o Sketch e o Adobe XD compartilhem uma interface semelhante, a interface do usuário do Sketch tem vantagem sobre o XD . Parece mais uma ferramenta de design robusta e profissional, enquanto o XD parece uma combinação simplificada de Illustrator e Photoshop.

Um inconveniente significativo no Adobe XD é que ele exibe o painel de ativos aberto por padrão. Isso não é o que a maioria dos designers espera. Ao iniciar um documento de design, a maioria dos designers espera ver o painel de camadas imediatamente, não ativos ou plug- ins .

➠ +1 ao Sketch por sua interface intuitiva.

Trabalhando com Símbolos/Componentes Mestres

Os “símbolos” reutilizáveis ​​da biblioteca de design estão disponíveis no Sketch e no Adobe XD (eles são chamados de “componentes mestres” no XD). Quando um símbolo ou componente mestre é atualizado, todas as outras instâncias desse componente no projeto refletem a atualização.

Ao contrário do Adobe XD, no entanto, o recurso Smart Layout do Sketch é mais poderoso ao trabalhar com esses componentes principais. Ele permite mais flexibilidade e fluxos de trabalho mais rápidos.

No Sketch, podemos atribuir um layout específico a um componente → arraste o componente para a tela → use overrides para personalizar o conteúdo, e o componente será redimensionado com base em seu novo conteúdo.

➠ +1 para Sketch porque faz símbolos melhor.

Painéis de ativos e componentes

O Sketch e o Adobe XD compartilham painéis de ativos/componentes semelhantes com algumas diferenças.

Para ativos, o XD tem um menu suspenso que oferece aos designers a opção de ver apenas categorias específicas, além de "Todos". Os designers também podem alternar entre uma "Exibição em grade" e uma "Exibição em lista". Essas opções tornam o painel de ativos no XD significativamente mais fácil de usar. Além disso, uma lista suspensa para visualizar categorias específicas oferece mais flexibilidade para adicionar mais categorias no futuro.

O esboço é menos flexível. Ele exibe os ativos do projeto sob um controle segmentado de três botões (para símbolos, estilos de texto e estilos de cores). Com o Sketch, os componentes são pesquisáveis, mas não entre categorias. O XD pesquisa melhor pesquisando em todos os componentes em todos os ativos.

➠ +1 ao Adobe XD porque gerencia melhor os ativos.

Usando componentes mestres de outras bibliotecas

Com o Sketch, os designers podem adicionar símbolos mestres a pranchetas de várias bibliotecas vinculadas - locais ou compartilhadas online - de maneira rápida e fácil. No Adobe XD, “ativos vinculados” podem ser colocados em designs da “nuvem XD” – componentes, cores e estilos de caracteres – mas devido a esse fluxo de trabalho complicado, o Adobe XD é muito menos flexível.

➠ +1 no Sketch para melhor UX ao trabalhar com componentes mestres.

Editando estilos de cores

Uma vez adicionado à biblioteca de ativos, o Adobe XD permite que os designers editem estilos de cores e observem a mudança de cor em tempo real nas pranchetas. No Sketch, há uma solução alternativa para editar cores globalmente, mas não é tão intuitivo quanto o Adobe XD.

➠ +1 para Adobe XD para melhor edição de estilos de cores.

Configurando um sistema de design

O Sketch tem uma ótima maneira de organizar componentes ao construir sistemas de design (ícones, botões, estilos de cores, estilos de texto, etc.). Usando uma barra '/' ao criar e nomear esses ativos, eles são agrupados no painel de componentes e organizados hierarquicamente no menu de inserção. É um excelente método de organizar componentes de maneira lógica e faz sentido para designers que trabalham com centenas de elementos de design.

O Adobe XD não oferece essa flexibilidade.

➠ +1 no Sketch para facilitar o gerenciamento de ativos de design.

Escalando Camadas e Componentes

O dimensionamento de objetos que contêm vários componentes não é bem tratado pelo Adobe XD. Em geral, o Sketch lida com isso muito melhor. Ele preserva bem o espaçamento proporcional entre os elementos ao dimensionar um símbolo, por exemplo.

Além disso, o Sketch tem um recurso útil de Escalar Camadas ( Command+K ), onde um grupo de elementos pode ser dimensionado usando porcentagens ou números enquanto especifica de qual origem dimensionar. O esboço redimensiona as camadas selecionadas, enquanto os atributos de estilo, como espessura da borda, tamanho da sombra e raio, serão dimensionados adequadamente.

Outro recurso útil no Sketch é a capacidade de redimensionar elementos no inspetor por números ou porcentagens. Isso é um pouco diferente do comando Escalar Camadas acima. Ao anexar as seguintes letras a porcentagens ou números — c/m, t, b, r — o Sketch dimensionará o elemento selecionado a partir dessa origem. Por exemplo, “ 50%c ” dimensionará o elemento selecionado 50% do centro.

• c/m: escala do centro
• t: escala a partir do topo
• b: escala de baixo
• r: escala da direita

Nota : A opção “escala da esquerda” não é mostrada porque é o comportamento padrão no Sketch.

Veja como o dimensionamento de camadas funciona no Sketch→

➠ +1 para Sketch para maior versatilidade e precisão ao dimensionar elementos.

Duplicando e Distribuindo Elementos

A Grade de repetição no Adobe XD é um recurso útil que transforma um grupo de elementos em uma grade que repete esses objetos. A maioria dos designers provavelmente tentou algumas vezes ao explorar o XD, mas quantas vezes os designers o usarão? E, infelizmente, Repeat Grid não se ajusta às camadas, uma falha significativa.

Com Sketch, por outro lado, podemos manter pressionada a tecla Option e arrastar uma camada para duplicá-la (mantenha pressionada a tecla Shift também para restringi-la). Depois disso, Command+D repete o elemento quantas vezes desejar com o mesmo espaçamento exato entre duplicatas.

Além disso, o Sketch acelera os fluxos de trabalho de design com o Smart Distribute . Ele oferece aos designers mais controle sobre como criar grades, ajustar o espaçamento e reordenar as camadas. Além das muitas pequenas coisas úteis que o Smart Distribute faz, ele possui um botão mágico “Arrumado” no inspetor.

Depois de colocar vários objetos aleatoriamente em uma prancheta, podemos clicar no botão Tidy e ele os distribuirá magicamente uniformemente em uma grade. Podemos fazer ajustes adicionais no espaçamento arrastando as alças que aparecem (ao passar o mouse sobre o grupo) ou inserindo valores manuais para precisão absoluta.

Vários plug-ins do Sketch foram criados para ajudar os designers com grades, guias e distribuição, além do Smart Distribute . Aqui estão três:

Distribuir camadas • SketchDistributor • Guias distribuídos uniformemente

➠ +1 ao Sketch para duplicar e distribuir melhor os elementos.

Ferramentas de design responsivo

Tanto o Adobe XD quanto o Sketch têm recursos de resposta automática semelhantes. Ambos permitem o controle manual da largura e altura fixas de um elemento enquanto fixa o elemento em uma origem específica da caixa delimitadora. O Adobe XD também possui uma ferramenta inteligente de “redimensionamento responsivo” que determina automaticamente o redimensionamento de elementos e grupos, mas não é perfeita.

O Sketch possui uma ferramenta responsiva inteligente chamada Smart Layout . Os designers podem criar componentes responsivos e, sempre que seu conteúdo for ajustado, os componentes acomodam a mudança, permitindo mais flexibilidade e fluxos de trabalho mais rápidos.

Com o Smart Layout , os designers podem criar facilmente botões que são redimensionados automaticamente, mantendo margens e preenchimento consistentes, não importa o tamanho dos rótulos de texto. O Smart Layout também funciona com grupos.

O Adobe XD implementou recentemente um recurso de “redimensionamento responsivo”, mas ainda fica atrás do Sketch.

➠ +1 no Sketch para recursos de design responsivos rápidos e fáceis.

Plug-ins

Entre uma superabundância de ferramentas de design digital, o Sketch possui um dos ecossistemas de plugins mais robustos. Ter milhares de plugins é um dos recursos mais atraentes do Sketch, e os desenvolvedores continuamente criam plugins úteis que estendem a funcionalidade do Sketch.

A coleção de plugins do Adobe XD empalidece em comparação. Mesmo que o mesmo desenvolvedor crie uma versão XD de um plug-in do Sketch, o XD é muito recente para que o plug-in seja amplamente adotado. Além disso, muitos novos plugins do XD não agregam valor suficiente para que os designers os adotem.

➠ +1 no Sketch por seu extenso ecossistema de plugins.

Prototipagem

Com o Auto-animate , o Adobe XD elevou a aposta para a prototipagem. Usando o recurso de animação automática “inteligente”, os designers podem criar transições de ótima aparência em protótipos para visualizar o movimento do conteúdo nas telas. O XD também pode adicionar sons a protótipos com uma nova “ação” que reproduz efeitos sonoros e outros arquivos de áudio em resposta a gatilhos.

Sketch tem alguns wipes básicos entre telas para prototipagem, mas não oferece a mesma fluidez com microinterações. Não é certo quando o Sketch pode adicioná-los. O foco, ao que parece, está mais na incorporação de outros recursos valiosos, como Assistentes no Sketch.

Os criadores do Sketch provavelmente sentem que existem muitas outras ferramentas para criar protótipos com microinterações altamente detalhadas, como o ProtoPie. É poderoso e pode importar facilmente designs do Sketch, Figma e Adobe XD.

Tanto o Sketch quanto o Adobe XD estão lado a lado quando se trata de fornecer aplicativos para visualizar protótipos em dispositivos móveis: Sketch Mirror e Adobe XD . Os aplicativos puxam o protótipo projetado em um desktop para a tela do celular por meio de um cabo USB ou wifi.

➠ +1 no Adobe XD para transições com animação automática para visualizar protótipos.

Colaboração em equipe

Ambas as ferramentas oferecem colaboração em equipe. O Sketch tem o Sketch for Teams , onde os designers que usam um espaço de trabalho em nuvem compartilhado podem compartilhar ideias, ficar em sincronia com as Bibliotecas de Nuvem Compartilhadas , verificar o progresso de outros projetos de equipe e deixar comentários sobre os designs, tudo em um só lugar.

Além disso, as partes interessadas e colaboradores convidados que não têm acesso ao aplicativo Sketch podem visualizar, inspecionar e comentar os designs no navegador. A transferência do desenvolvedor também é integrada ao Sketch usando o Sketch for Teams .

Até o momento, a versão premium do Adobe XD permite que as equipes coeditem arquivos do XD com outros designers (online e offline) por meio da Creative Cloud, compartilhem arquivos para revisão e entreguem especificações facilmente para os desenvolvedores. Todos esses recursos estão atualmente em beta .

➠ +1 no Sketch para colaboração direta em equipe.

Transferência do desenvolvedor

Entregar designs aos desenvolvedores é uma etapa crucial, e tanto o Adobe XD quanto o Sketch lidam com isso igualmente bem. Ao compartilhar projetos por meio de plataformas online, os designers podem gerar especificações e colaborar com os desenvolvedores para ajudá-los a transformar designs em sites e aplicativos.

➠ +1 para Adobe XD e +1 para Sketch para transferência do desenvolvedor.

Controle de versão e bibliotecas compartilhadas

Controlar as versões do arquivo de design é essencial ao trabalhar com outros designers no mesmo projeto. Também facilita a colaboração da equipe e o feedback de design com mais eficiência. O Sketch integrou recentemente esses recursos ao Sketch for Teams . Com o Sketch Cloud , os designers podem compartilhar arquivos de design e bibliotecas que facilitam o trabalho com sistemas de design em equipes distribuídas.

O Adobe XD também possui um sistema de controle de versão de arquivos na nuvem com o Adobe Creative Cloud. Embora o site da Creative Cloud mantenha versões de arquivos do XD, não é possível reverter para versões anteriores. Para reverter para uma versão anterior, os designers precisam abrir o arquivo no Adobe XD por meio do site da Creative Cloud e copiar e colar o conteúdo no documento atual. As versões de arquivo também são excluídas automaticamente após 30 dias, a menos que sejam nomeadas ou marcadas. Em outras palavras, não é um processo contínuo.

Assim como o Sketch, o XD também facilita o uso de ativos compartilhados por equipes usando as Bibliotecas da Creative Cloud. Os designers podem trazer cores, estilos de caracteres e gráficos para o XD a partir dessas bibliotecas.

➠ +1 no Sketch para fácil controle de versão de arquivos e bibliotecas compartilhadas na nuvem.

Modo escuro

Parece ótimo e faz os designs se destacarem

Muitos designers preferem trabalhar em salas com pouca luz para ver suas criações na tela sem reflexos ou brilhos. Uma interface de usuário de modo escuro se encaixa bem nesse ambiente. Proporciona excelente contraste para quase todas as cores e torna o conteúdo visual mais marcante.

O modo escuro não só parece ótimo, como também minimiza o “fadiga ocular digital”. Convenhamos, designers ficam olhando para as telas a maior parte do dia. A fadiga ocular digital é uma condição comum que afeta milhões de pessoas. Causada por tudo, desde o uso excessivo do computador até a exposição regular à luz brilhante, pode causar dores de cabeça, dor no pescoço, visão turva e olhos ardentes / ardendo.

Cores de destaque e destaque

O Sketch tem suporte para o modo escuro desde o Sketch 52 (outubro de 2018). Ele também suporta as preferências globais de cores Accent e Highlight do macOS Mojave. As opções selecionadas destacadas no painel Camadas, Inspetor e em outros lugares do aplicativo corresponderão às preferências do sistema.

O modo escuro não está disponível no Adobe XD, nem mesmo no macOS.

➠ +1 para Sketch para o modo escuro.

O vencedor do Adobe XD vs Sketch Showdown é… Sketch

O Sketch vence a batalha pela supremacia das ferramentas de design com uma vantagem significativa sobre o Adobe XD.

Em alguns cenários, a escolha é óbvia: o Sketch não está disponível para Windows. Uma vantagem notável para os assinantes da Adobe Creative Cloud também é que o “plano inicial” do XD é gratuito, embora venha com limitações consideráveis.

A versatilidade do Sketch deve obrigar os designers no macOS a escolher o Sketch em vez do XD. Sua interface, plug-ins, recursos de colaboração, ferramentas de design responsivo, símbolos reutilizáveis, bibliotecas compartilhadas e outros recursos úteis superam os do Adobe XD.

Vale a pena notar que não é possível mover arquivos de design do XD para o Sketch . A transição do Sketch (e Photoshop ou Illustrator) para o XD é mais fácil porque o XD pode abrir arquivos do Sketch. Alguns problemas podem surgir ao usar plug-ins apenas do Sketch, como Abstract ou InVision Craft, mas isso pode ser evitado com um pouco de limpeza.

Alguns designers adoram o Adobe XD por seu recurso de animação automática. É um recurso atraente que faz os protótipos parecerem ótimos. No entanto, os designers precisam ter em mente que é apenas um atributo sofisticado. Considerando as vantagens do Sketch vs XD, as compensações não valem a pena. Muitas ferramentas sofisticadas de prototipagem estão disponíveis e funcionam perfeitamente com o Sketch.

A batalha ainda não acabou. Os próximos anos devem ver uma guerra intensa e total entre Adobe XD vs Sketch. No final, são os designers que se beneficiarão à medida que mais recursos forem adicionados a ambas as ferramentas de design. Isso tornará sua vida profissional muito mais fácil, e isso é algo pelo qual esperar.

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

• • •

Leia mais no Blog Toptal Design:

• Design com precisão – uma revisão do Adobe XD
• Explorando o design multimodal – um tutorial do Adobe XD
• Forma e Função - Um Guia para as Principais Ferramentas de Wireframe
• Domine seu ofício com essas principais ferramentas de UX
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores