Informações verificadas por Justyn Newman

O Adobe XD (Adobe Experience Design) é um aplicativo de design UI/UX intuitivo e de qualidade superior criado pela Adobe para possibilitar que mentes criativas como a sua desenvolvam, criem protótipos e compartilhem designs de interação e experiência do usuário para websites, aplicativos e redes sociais.

Isso significa que você pode ir rapidamente da concepção ao protótipo e compartilhamento quando estiver criando websites, aplicativos móveis, interfaces de jogos, modelos de e-mail e interfaces de voz. O Adobe XD vem completamente equipado com recursos que permitem transformar todas as suas ideias em realidade com facilidade. E o melhor de tudo – você pode usá-lo de graça!

Siga as instruções de download abaixo para aproveitar o plano inicial do Adobe XD de graça por 7 dias.

Baixar Adobe XD de graça!

Como Baixar e Instalar o Adobe XD no Seu PC de Graça

  1. Clique aqui para abrir a página de download do Adobe XD oficial numa nova aba.
  2. Role a página até o final e clique no botão Teste Gratuito
    Avaliação gratuita do Adobe XD
  3. A Adobe oferece duas opções:
    • Baixar o Adobe XD, que inclui protótipos compartilhados e especificações de design ilimitadas, Adobe Portfolio, Adobe Fonts e 100 GB de armazenamento.
    • Baixar toda a coleção de aplicativos Creative Cloud, que inclui mais de 20 programas, como Photoshop, InDesign, Premiere Pro e muito mais. Escolha seu pacote preferido e clique no botão Iniciar avaliação gratuita. Neste exemplo, estamos baixando somente o Illustrator, mas as instruções são as mesmas em ambos os casos
      Teste gratuito do XD
  4. Insira um endereço de e-mail válido e a página de método de pagamento será aberta. Embora este seja um teste gratuito, você ainda precisará inserir suas informações de pagamento para ativar o teste. Você não será cobrado até o final do período de teste gratuito
    Avaliação gratuita do Adobe XD
  5. Se você já possui uma conta da Adobe, pode fazer o login agora. Caso contrário, crie uma senha segura e pressione o botão Continuar.
  6. A Adobe irá confirmar que o seu método de pagamento é válido e, em seguida, o aplicativo Creative Cloud será baixado para o seu computador.
  7. Quando o download do arquivo estiver concluído, abra-o e digite sua senha.
  8. O Creative Cloud será instalado no seu computador.
  9. Assim que o Creative Cloud estiver completo, a instalação do Adobe XD será iniciada automaticamente. Se você escolher baixar toda a coleção de aplicativos do Creative Cloud, eles serão instalados um de cada vez.

Baixar Adobe XD de graça!

Visão Geral do Adobe XD

Há tempos, muitos usuários da suíte Adobe torciam pela chegada de um aplicativo com ferramentas intuitivas para a criação de conteúdo digital mais adequado para websites, aplicativos Web e móveis modernos. O Adobe XD traz essa experiência até você. Ele faz parte de uma das recentes ondas de aplicativos da Adobe Inc, combinando anos de experiência, ferramentas e recursos de softwares anteriores da Adobe para proporcionar a melhor experiência em design UI e UX possível.

Como parte do Creative Cloud, é fácil compartilhar seu trabalho e importar arquivos de outros softwares Adobe, como Photoshop, Premiere Pro e Illustrator.

O Adobe XD é o software perfeito se você procura ferramentas gráficas que permitem criar interfaces de usuário para sites, aplicativos, jogos e muito mais. Além de desenvolver conceitos e designs, o aplicativo permite criar protótipos e compartilhar suas ideias com outras pessoas em qualquer lugar.

Embora o XD seja normalmente um software premium, você pode se inscrever em um plano gratuito de iniciante. Este plano tem suas limitações, como o número de documentos que você pode compartilhar ou quantos protótipos e saídas pode produzir.

A melhor opção é começar com o teste gratuito de 7 dias que oferece acesso completo, sem limitações. Depois, você pode decidir se deseja continuar com o Plano de Inicialização ou assinar a versão completa no final da semana.

Recursos do Adobe XD

Uma das grandes vantagens de usar o XD é que, se você precisar de uma ferramenta específica, pode sempre carregá-la de qualquer outro aplicativo da Creative Cloud. Também há a opção de importar arquivos de imagem, como jpg, svg, png e gif. No entanto, ele não tem a capacidade de carregar arquivos de vídeo ou gifs animados.

Componentes

Componentes são elementos reutilizáveis que você pode criar e usar em todo seu projeto. Além de economizar tempo e trabalho, eles ajudam a garantir a consistência do seu design. Você poderia, por exemplo, criar um componente para um botão com seu texto, estilo e cor, para que possa facilmente adicionar esse mesmo botão a diferentes partes do projeto.

Para criar um componente, selecione o objeto ou grupo de objetos desejado e clique no botão “Criar componente” da barra de ferramentas. E pronto: você já pode nomear e salvá-lo. Para usar um componente no seu design, simplesmente arraste-o do painel de componentes para sua prancheta.

Layout de Conteúdo Inteligente

O layout inteligente Content Aware permite trabalhar sem se preocupar em alinhar perfeitamente todos os diferentes componentes. O Adobe XD moverá automaticamente os componentes para criar espaços uniformes quando você adicionar, remover ou redimensionar objetos. Para ativar o layout Content Aware, use a ferramenta de seleção para selecionar duas ou mais camadas e clique em “Criar Componente”. Em seguida, habilite o Content Aware Layout e o tamanho do preenchimento será ajustado com base nas camadas circundantes sem distorcer imagens ou caixas de texto.

Redimensionamento responsivo e restrições

Com o recurso de redimensionamento responsivo e restrições, seus projetos mantêm seu bom visual em diferentes dispositivos e tamanhos de tela. Isso significa que você não precisa se preocupar em criar protótipos separados para cada tipo de dispositivo, e que seu design sempre será exibido da melhor forma possível.

Para usar o redimensionamento responsivo e restrições, você primeiro precisa criar um componente principal. Ele poderá ser usado para criar diferentes instâncias do mesmo componente. Para criá-lo, selecione o objeto ou grupo de objetos desejado, e depois clique no botão “Criar componente principal” da barra de ferramentas.

Depois de criar seu componente principal, selecione-o e clique no botão “Redimensionamento responsivo” da barra de ferramentas para adicionar o recurso a esse componente. Você pode então escolher o tipo de redimensionamento que deseja aplicar e também especificar as margens e o preenchimento para o componente principal.

Transições temporizadas

As transições temporizadas permitem criar animações que ocorrem em momentos específicos. Isso pode ser útil para criar protótipos que mostram como os usuários irão interagir com um design ao longo do tempo. Para criar uma transição temporizada, selecione o objeto ou grupo de objetos que deseja animar, e depois clique no botão Transição da barra de ferramentas. Feito isso, você já pode escolher o tipo de transição que deseja aplicar e também especificar sua duração, assim como quando ela deve começar.

As transições temporizadas podem ser utilizadas para uma série de propósitos, como criar animações de integração, tutoriais interativos e demonstrações de produtos.

Links de âncora

Links de âncora permitem a você fazer uma ligação entre diferentes partes do seu protótipo. Isso pode ser útil para criar fluxos do usuário complexos ou para permitir que os usuários naveguem entre telas distintas. Você pode, por exemplo, usar os links de âncora para criar o protótipo de um website com diferentes páginas ou de um aplicativo móvel com várias telas.

Para criar um link de âncora, selecione o objeto ou grupo de objetos ao qual deseja adicionar o link, e depois clique no botão Link de Âncora da barra de ferramentas. Depois de criá-lo, você pode ligá-lo a outro objeto ou grupo de objetos do seu protótipo. Para fazer isso, simplesmente arraste o link de âncora do painel de links até o objeto ou grupo de objetos ao qual deseja ligá-lo.

Transformações 3D

Eleve seus designs de UX para o próximo nível com a função de transformação em 3D. Ela permite que você gire os objetos, adicione profundidade e mude a perspectiva do seu design. As ferramentas intuitivas de 3D são bastante fáceis de usar e oferecem a oportunidade de exibir seu design com uma realidade não disponível em outros softwares da Adobe. A transformação em 3D é extremamente útil para designs de RA/RV.

Sobreposições

As sobreposições permitem a você adicionar mais informações ao seu protótipo sem ter que criar uma nova tela. Isso pode ser útil para “responder” aos usuários ou ajudá-los a compreender como usar seu design, seja criando dicas de ferramentas, mensagens de erro ou diálogos modais, por exemplo.

Para criar sobreposições, clique no botão de Sobreposição da barra de ferramentas. Em seguida, você pode adicionar o conteúdo que deseja que apareça sobreposto, e inclusive especificar sua posição na sobreposição e quando ele deve aparecer.

Mascaramento e efeitos

O recurso de mascaramento e efeitos permite criar designs mais complexos e visualmente atraentes. Você pode ocultar partes de um objeto com o mascaramento, e adicionar sombras, brilhos e outras otimizações visuais com os efeitos.

Para conseguir o efeito de mascaramento, selecione o objeto que deseja ocultar e, em seguida, a ferramenta de Formas. Desenhe uma forma sobre a parte desse objeto a ser ocultada. Para aplicar um efeito a um objeto, selecione o objeto desejado e clique no botão Efeitos da barra de ferramentas. Escolha o efeito que quer aplicar, e depois ajuste as configurações do seu jeito.

Estas ferramentas são usadas para uma grande variedade de efeitos, inclusive para botões com forma sob medida, efeitos hover e transições animadas.

Criar e compartilhar protótipos

Uma das melhores coisas sobre o Adobe XD é a capacidade de criar um protótipo do seu design. Isso não só lhe dá a oportunidade de testar e garantir que tudo funcione e tenha uma ótima aparência, mas também permite compartilhá-lo facilmente com clientes, colegas ou professores.

A prototipagem é uma característica fundamental para criar designs interativos, como formulários ou botões, e testar como diferentes pranchetas se conectam e reagem umas às outras.

Adobe XD possui diversas ferramentas que foram projetadas especificamente para o XD, como o Auto Animate. Você pode usar esta ferramenta para projetar animações, transições, designs que se ajustam com base no tamanho da tela ou no dispositivo em que está sendo visualizado, redimensionando diferentes objetos ou selecionando um objeto para permanecer fixo quando a rolagem ocorrer.

Criar rastreamento para diferentes tipos de engajamento do usuário

Além do design, compreender como um usuário interage com o seu projeto é um dos aspectos mais importantes do projeto. O Adobe XD tem as ferramentas que podem ajudar a ver exatamente como os usuários estão respondendo graças a vários gatilhos e entradas. Dependendo do projeto final, você pode usar desde gatilhos básicos, como Toque ou Arraste, até opções mais avançadas como voz, uso de um controlador de jogo Bluetooth, até diferentes teclas de atalho.

Criar protótipos de voz

Os recursos de voz no Adobe XD ajudam você a criar protótipos que podem ser controlados com a sua voz. Este é um jeito novo e eficaz de testar e validar interfaces do usuário baseadas em voz sem precisar programar nenhum código. Além de economizar tempo e trabalho, ele pode ajudar você a receber o feedback antecipado e mais frequente dos usuários.

Para usar protótipos de voz, primeiro você precisa criar um protótipo no XD para depois adicionar a ele comandos de voz. Para isso, clique no botão Protótipo de Voz da barra de ferramentas e, em seguida, selecione o objeto ou grupo de objetos ao qual deseja adicionar o comando. E pronto: agora é só gravar seu comando de voz.

Com esse comando gravado, você pode testá-lo clicando no botão Visualizar. Também é possível conferir seu protótipo num dispositivo móvel, utilizando o aplicativo do XD no aparelho.

Exportar do Adobe XD para HTML

O recurso Exportar para HTML permite exportar seus projetos do XD diretamente em HTML. Isso pode economizar seu tempo e trabalho, pois você não terá que converter manualmente nenhum design ou protótipo.

Para exportar seu projeto em HTML, simplesmente selecione a prancheta a ser exportada e vá para Arquivo > Exportar. Na caixa de diálogo Exportar, selecione a opção HTML do menu suspenso Formato e clique em Exportar. O XD irá gerar um arquivo HTML e CSS do conteúdo da sua prancheta. E pronto: você já pode abrir o arquivo em HTML no seu navegador para conferir o design.

Essa possibilidade de exportar em HTML é particularmente útil para criar páginas web e aplicativos, mas também serve para compartilhar seus projetos com desenvolvedores, uma vez que eles utilizam os arquivos HTML e CSS para criar sites e apps.

Para exportar seu design, siga estes passos:

  1. Crie o design da sua página online no XD.
  2. Quando o design já estiver pronto, selecione a prancheta que deseja exportar e vá para Arquivo > Exportar.
  3. Na caixa de diálogo Exportar, selecione a opção HTML do menu suspenso Formato e clique em Exportar. O XD irá gerar um arquivo HTML e CSS do conteúdo da sua prancheta.
  4. Faça o upload dos arquivos HTML e CSS no seu servidor da web.
  5. Abra sua página online num navegador da internet para visualizar seu design.

O recurso Exportar para HTML é uma ótima ferramenta que pode economizar seu tempo e esforços criando aplicativos e páginas online. Ele também é uma ótima maneira de compartilhar seu trabalho com outros desenvolvedores.

Amplie o poder do XD com plugins

O Adobe XD tem uma gama de recursos bastante poderosa, mas até mesmo a Adobe não conseguiu incluir tudo em um único pacote. É por isso que ele é compatível com plugins de terceiros. Você pode estender as capacidades a partir de um ponto de vista técnico ou adicionar diferentes combinações de cores que não estão disponíveis nos esquemas de cores integrados. Existem centenas de plugins gratuitos e baseados em assinatura que podem ser facilmente carregados no XD sem ter nenhum conhecimento técnico ou expertise.

Facilidade de uso

Para ter a melhor experiência, é necessário ter alguma experiência em desenvolvimento ou design. No entanto, para designers e desenvolvedores, o programa é bastante fácil de usar, especialmente se já possuem experiência prévia com outros produtos da Adobe.

Se você deseja aprender a usar o XD adequadamente, você pode acessar a extensa seção “Aprender” através do aplicativo ou do site da Adobe.
Aprenda Adobe XD

Guias passo a passo para aprender XD

Esses guias passo a passo vão te orientar pelo processo de desenvolvimento e design. Você vai aprender como configurar seu ambiente de trabalho, o que cada ferramenta faz, como criar objetos em 3D, projetar protótipos ativados por voz, protótipos regulares, como colaborar com outros usuários e muito mais.

Ao começar a usar o XD, você verá que é um programa bastante fácil de dominar, já que tem um foco singular. Com atualizações feitas na última versão do XD, como Auto Animate e Content Aware Layout aprimorado, muitos dos ajustes menores no artboard ocorrem automaticamente, o que torna ainda mais fácil de usar.

Interface de Usuário

Ao iniciar um novo projeto no XD, você pode escolher se deseja que o tamanho do seu espaço de trabalho seja semelhante ao de um iPhone, desktop, história do Instagram ou tamanho personalizado.
Tamanho do documento para novos projetos do XD

Escolha o tamanho do seu documento

Depois de escolher o tamanho preferido do seu projeto, uma estação de trabalho será aberta com ferramentas à esquerda e elementos de estilo à direita.
Interface do Adobe XD

Com os elementos à direita, você pode ajustar:

  • Estilo: Adicionar CSS e outras opções de estilo para criar o design perfeito
  • Design: Selecionar diferentes layouts, grades e modos suportados pelas APIs da interface do usuário.

Com essas configurações, você pode ajustar tudo sobre como os objetos aparecem em sua estação de trabalho. Você pode arredondar cantos, mudar cores, definir diferentes tipos de fonte, visualizar como a página ficaria com um design responsivo e muito mais.

A barra de ferramentas à esquerda é onde você encontrará todas as principais ferramentas, como adicionar formas, linhas, textos e zoom. Cada ferramenta possui um atalho de teclado e, uma vez que você se familiarize com elas, verá o quanto mais rápido pode trabalhar.

Compatibilidade

A versão completa do Adobe XD está disponível apenas para PC e Mac, desde que atendam aos requisitos mínimos do sistema detalhados abaixo.

Existem aplicativos do XD para Android e iOS, mas eles só permitem visualizar o design e testar o protótipo. Você sempre terá acesso à última versão do projeto por meio da sua biblioteca Creative Cloud. No entanto, não há ferramentas de edição, e todas as alterações devem ser feitas no computador desktop.

Existem duas maneiras de visualizar seus projetos XD:

  1. Visualização em tempo real com conexão USB: Conecte seus dispositivos móveis ao computador executando o Adobe XD. Você terá uma visão em tempo real dos protótipos e designs, e todas as alterações podem ser visualizadas no dispositivo móvel em tempo real.
  2. Carregando documentos na nuvem: Acesse instantaneamente todos os documentos XD salvos como um documento na nuvem em sua conta da Creative Cloud.

Requisitos do sistema

Além de ter as especificações necessárias no seu computador, o XD só funciona com as últimas versões dos seguintes navegadores.

  • Chrome: Windows 7+ e macOS 10.13+
  • Firefox: Windows 7+ e macOS 10.13+
  • Edge: Windows 10+
  • Safari: macOS 10.13+

O XD não suporta a visualização de especificações de design compartilhadas em navegadores móveis.

Windows

Sistema operativo Windows 10 (64 bits) e superior
Monitor Resolução de 1280×800 pixels e um display de pelo menos 13 polegadas
Memória RAM 4 GB
Entrada de caneta e toque Funciona com as funcionalidades nativas de caneta e toque do Windows
Armazenamento É melhor usar documentos na nuvem da Creative Cloud e não arquivos sincronizados de outros servidores de armazenamento na nuvem.

Mac

Sistema operativo 10.15 (Catalina) ou posterior
Monitor Resolução de 1400×900 e pelo menos 13 polegadas de tamanho. É recomendado ter uma tela Retina, mas não é obrigatório.
Memória RAM Mínimo de 4 GB
Armazenamento É melhor usar documentos na nuvem da Creative Cloud e não arquivos sincronizados da Creative Cloud ou outros servidores de armazenamento.

O acesso à internet é necessário tanto para Windows quanto para Mac durante a instalação e registro e para acessar certas bibliotecas e recursos. Você só pode visualizar protótipos com capacidades de voz quando conectado à internet.

iOS: Compatível com todos os iPads e iPhones de 64 bits que executam o iOS 14.0 ou posterior.

Android: A Adobe testou o XD em dispositivos Samsung Galaxy S10 e S20, e Google Pixel 2 e 4. Com base nesses testes, ele deve ser compatível com qualquer dispositivo Android 9.0 e posterior com Open GL ES 2.0.

Outras Ferramentas de Edição da Adobe

  • Adobe Photoshop: O Photoshop é o melhor software de edição para fotos e imagens digitais. Ele inclui um fantástico conjunto de ferramentas que facilitam modificar as feições de uma pessoa, remover itens indesejados de uma imagem, opções criativas de tipografia, e muito mais.
  • Adobe Illustrator: O Adobe Illustrator funciona em computadores Windows e Mac. Ele é um programa líder para design e edição de desenhos vetoriais utilizado por muitos designers para criar imagens para web e dispositivos móveis, logotipos, ícones, clip-art e muito mais.
  • InDesign: uma ferramenta de editoração de nível profissional para a criação de conteúdo para jornais, livros, revistas e outros materiais impressos. Ele ostenta uma variedade de funcionalidades, que vão desde a estilização do texto e ajustes da imagem até tipografia avançada. Sua perfeita compatibilidade com outras ferramentas da Adobe Creative Cloud, como o Photoshop e Illustrator, agiliza ainda mais o processo de design.
  • Premiere Pro: a plataforma de edição de vídeos da Adobe de primeira linha foi desenvolvida para produzir filmes, produções televisivas e segmentos de vídeo variados. Ele vem com vários recursos para refinar a gravação, otimizando cores e introduzindo efeitos especiais. Mais ainda, sua integração com os pacotes da Creative Cloud da Adobe, como o After Effects e Audition, simplifica a criação de vídeos complexos e de nível profissional.

Como Desinstalar o Adobe XD

Caso o seu período de avaliação gratuita tenha chegado ao fim e não queira continuar usando o Adobe XD ou passar para o plano inicial, você pode removê-lo do seu computador seguindo estes passos simples:

  1. Digite Adicionar ou Remover Programas na barra de busca do Windows do seu computador e pressione Enter.
    Screenshot of uninstalling Adobe XD on Windows
  2. Encontre o Adobe XD na lista de programas instalados e clique no botão Desinstalar.
    Screenshot of uninstalling Adobe XD
  3. O assistente de desinstalação é aberto. Confirme que você deseja desinstalar o software e ele será removido do seu computador.

Alternativamente, você pode ir para a sua conta da Creative Cloud para desktop, clicar nos três pontinhos horizontais localizados bem à direita de Adobe XD, e depois em Desinstalar.
Screenshot of Creative Cloud Desktop

Como desinstalar o Adobe XD a partir do aplicativo de desktop da Creative Cloud

Isso removerá o software do seu PC.

Perguntas Frequentes

O Adobe XD é grátis?

Apesar de não haver uma versão totalmente grátis do Adobe XD, se você seguir as instruções passo a passo acima, mostrarei como conseguir 7 dias para usar sua versão de avaliação gratuita. Esse tempo de ser suficiente para trabalhar em alguns projetos ou testar o programa para ver se ele é uma boa pedida para o que precisa, antes de se comprometer com um dos planos pagos.

Como posso exportar arquivos do Adobe XD em HTML?

O Adobe XD vem com um recurso fácil de usar que permite aos desenvolvedores converter seus projetos diretamente para HTML. Para começar, selecione a prancheta que deseja exportar; em seguida, navegue para Arquivo > Exportar. Escolha ‘HTML’ como o formato desejado na caixa de diálogo Exportar. Depois de exportá-lo, o XD irá gerar tanto um arquivo HTML como um CSS do seu design. Confira meu guia passo a passo para exportar XD em HTML aqui.

Como posso cortar imagens no Adobe XD?

Cortar imagens é um dos recursos fáceis de usar do Adobe XD. Basta selecionar a imagem desejada e clicar no botão Cortar da barra de ferramentas. Depois, arraste as alças nos cantos da caixa delimitadora para selecionar a área que deseja manter. Você também pode deixar a tecla SHIFT pressionada para não modificar a proporção da imagem enquanto a redimensiona. Quando terminar, pressione Enter para aplicar as mudanças.

Posso exportar arquivos do XD para o WordPress?

Para converter um design do Adobe XD para o WordPress, você pode exportá-lo em HTML e CSS ou usar um plugin.

Para exportar para HTML e CSS, abra seu design no XD e selecione a prancheta que deseja exportar. Depois, vá para Arquivo > Exportar e selecione HTML do menu suspenso Formato. Clique em Exportar para gerar os arquivos HTML e CSS. Você pode então carregá-los no seu website do WordPress.

Para usar um plugin, instale e ative o plugin desejado, como o XD to WordPress ou Xporter. Em seguida, abra a página de configurações do plugin e selecione o arquivo XD que você quer converter. Clique então em Converter para gerar uma nova página do WordPress ou publique com seu design.

Baixe o Adobe XD agora!