Versões de agosto, setembro e outubro de 2018 do Adobe XD
xd-mnemonic

O Adobe XD é uma ferramenta que utiliza vetores para criar designs e protótipos de experiências de usuário para Web e para aplicativos para dispositivos móveis. Alterne facilmente entre wireframes, design visual, design de interações, criação de protótipos, visualização e compartilhamento, tudo isso em uma só ferramenta avançada.

O XD foi desenvolvido para todos os tipos de criadores: designers de UX/UI, designers de experiência, designers de produto, web designers, designers de aplicativos, designers visuais, empreendedores e muito mais.


Novos recursos do Adobe XD 14

Colaboração aprimorada com documentos nativos na nuvem

Cloud-Doc

O Adobe XD apresenta os documentos na nuvem, um novo tipo de documento nativo na nuvem que oferece um método rápido e conveniente para gerenciar, compartilhar e manter os documentos atualizados em vários dispositivos. 

Você pode salvar seus designs do XD como documentos na nuvem para garantir que estejam sempre atualizados e acessíveis mesmo quando estiver offline. Você pode compartilhá-los com outros usuários da Creative Cloud e convidá-los a colaborar. Assim que voltar a ficar online, o seu trabalho é automaticamente salvo na nuvem.

Os documentos na nuvem também são compatíveis com ativos compartilhados entre documentos e permitem vincular símbolos de um documento na nuvem.

Para saber mais sobre como trabalhar com documentos na nuvem, confira este vídeo.


A introdução dos documentos na nuvem também afeta a forma como você salva e acessa os documentos no XD para dispositivos móveis. Para obter mais informações, consulte Trabalhar com documentos na nuvem em dispositivos móveisDocumentos na nuvem no XD e Gerenciar documentos na nuvem.

Para saber mais sobre a experiência para dispositivos móveis ao trabalhar com documentos na nuvem, confira este vídeo.


Designs mais rápidos e precisos com a opção de virar objetos

O XD apresenta a opção de virar objetos vertical ou horizontalmente. A opção Virar é compatível com todos os elementos básicos, exceto pranchetas, repetições de grade e símbolos, e é responsável pela rotação dos objetos quando aplicada.

Para obter mais informações, consulte Virar objetos.

Virar objetos
Virar objetos

Ganho de produtividade usando a busca no painel Camadas

Você pode usar a Busca e o Filtro no painel Camadas para pesquisar por nome de camada ou filtrar as camadas usando as categorias Texto, Formas e Imagens. A experiência de pesquisa é otimizada para mostrar apenas as camadas relevantes e as pranchetas que contêm a palavra-chave, sem a estrutura de camadas (por exemplo, grupos expandidos). Isso pode ser útil quando usar a animação automática entre pranchetas.

Para obter mais informações, consulte Trabalhar com camadas.

Pesquisar no painel Camadas
Pesquisar no painel Camadas

Visualizar um símbolo vinculado na tela

Passe o ponteiro do mouse sobre o ícone de atualização de símbolo vinculado no painel Ativos para visualizar as atualizações de símbolos vinculados na tela antes de confirmá-las.

Para obter mais informações, consulte Visualizar atualizações de símbolos vinculados.

Visualizar atualizações de símbolos vinculados
Visualizar atualizações de símbolos vinculados

Alterações de interfaces relacionadas ao compartilhamento de fluxos de trabalho

14_0-release-share
Nomenclatura antiga Nomenclatura nova Fluxos de trabalho.
ND Compartilhar documento Compartilhe documentos na nuvem para revisão.
Publicar protótipo Compartilhar para revisão Publique e compartilhe protótipos para revisão.
Publicar especificações de design Compartilhar para desenvolvimento Publique e compartilhe especificações de design com os desenvolvedores para revisão.
Gerenciar links publicados Gerenciar links Gerenciar links em assets.adobe.com.
Gravar vídeo Gravar vídeo Grave um vídeo das interações entre as pranchetas quando estiver trabalhando com a animação automática. Se houver um protótipo interativo, todas as interações serão gravadas como um arquivo .mp4.

Fidelidade visual aprimorada com as camadas mantidas do Adobe Illustrator

Com o recurso copiar e colar aprimorado do Adobe Illustrator no XD, a fidelidade visual das camadas, as estruturas e os efeitos são preservados como se tivessem sido criados no Adobe Illustrator. Este fluxo de trabalho agora está igual à importação do Illustrator.

Integração com Photoshop, Illustrator e After Effects aprimorada

Use a nova opção Arquivo > Importar para adicionar conteúdo do Photoshop ou do Illustrator a um documento existente do XD ao converter conteúdo do Illustrator ou do Photoshop. Quando você converte objetos inteligentes, eles continuam completamente editáveis (em vez de serem simplificados) e preservam as camadas de ajuste do Photoshop.

Para obter mais informações, consulte Trabalhar com ativos externos.

Visualização de protótipos em dispositivos móveis

Várias melhorias foram adicionadas à exibição de protótipos em navegadores móveis, incluindo o modo de tela cheia padrão, o modo pinça para revelar setas de navegação, botão inicial, informações do protótipo e envio de problemas. Para obter mais informações, consulte Visualizar em dispositivos móveis.

Para saber mais sobre a experiência aprimorada em dispositivos móveis, confira este vídeo.


Exportação de SVG aprimorada

Ao exportar elementos .svg do XD ou de especificações de design, agora, você pode exportá-los com Atributos de apresentação que aprimoram o estilo e a compatibilidade para cenários de desenvolvimento como SVGs exportados do XD no Android Studio.

Para obter mais informações, consulte Trabalhar com ativos externos.

Suporte para Wacom e toque aprimorados

O Adobe XD agora é compatível com a rotação de dois dedos de objetos selecionados em dispositivos Windows touch-screen, trackpads do Mac, tablets Wacom, touchpad e touch ring.

Reconhecimento da interface de comentários online aprimorado

Ao abrir um protótipo ou uma especificação de design online, você pode exibir um marcador cinza com um contador de comentários acima do ícone no painel direito. A contagem representa o número total de comentários não resolvidos em uma prancheta. A contagem de comentários é atualizada automaticamente se você adicionar um novo comentário ou marcar um comentário existente como resolvido.

Reconhecimento da interface de comentários online
Reconhecimento da interface de comentários online

Novos recursos do Adobe XD 13

Criação de designs e protótipos usando comandos de voz e reprodução de fala

Comandos de voz e reprodução de fala
Comandos de voz e reprodução de fala

O Adobe XD oferece uma solução fácil de usar que permite usar comandos de voz para acionar uma interação entre pranchetas. Da mesma maneira que usa-se Clique ou Toque como Acionador, você pode usar Voz para acionar uma interação no protótipo e Reprodução de fala como uma ação desencadeada. A reprodução de fala dá acesso a um mecanismo avançado de conversão de texto em fala que ajuda você a criar o design para novas plataformas como assistentes de voz e caixas de som inteligentes. Para obter mais informações, consulte Designs e protótipos por voz.

Para saber mais sobre como usar comandos de voz e reprodução de fala, assista a este vídeo.


Criação e reprodução com animação automática e gestos de arrastar

Auto-aminamte--1(source)
Animação automática em um trabalho

A animação automática permite criar facilmente protótipos com transições animadas imersivas. Duplique uma prancheta com facilidade, modifique as propriedades do objeto, como tamanho, posição e rotação, e aplique uma ação de animação automática para criar uma transição animada entre pranchetas. Para usar a animação automática, certifique-se de que os objetos que você deseja animar tenham o mesmo nome de camada em cada prancheta. Para obter mais informações, consulte Criar protótipos usando a animação automática.

O gesto Arrastar no XD aprimorou a animação automática permitindo que você simula a experiência de arrastar dos dispositivos habilitados para toque. Para obter mais informações, consulte Gestos de arrastar no trabalho.

Para saber mais sobre a animação automática, assista a este vídeo.


Compartilhamento de ativos em documentos com símbolos vinculados

Linked-Symbol-Concept

Conforme as equipes de projeto crescem dentro das organizações, juntamente com superfícies de design cada vez maiores, os designers precisam colaborar para criar designs consistentes e dimensionáveis. Com os símbolos vinculados, os designers compartilham símbolos em vários documentos e garantem que estejam sempre atualizados.

Os símbolos vinculados permitem criar e manter uma única fonte para kits de interface, folhas de adesivos ou guias de estilo para serem usados em outros documentos do Adobe XD. Ao modificar um símbolo vinculado no documento de origem, o XD notifica os documentos com instâncias daquele símbolo vinculado com as atualizações. Depois disso, você pode visualizar as alterações e optar por aceitá-las ou rejeitá-las. Para obter mais informações, consulte Trabalhar com símbolos vinculados.

Para saber mais sobre símbolos vinculados, assista a este vídeo.


Inovação em ferramentas de design por meio de plug-ins

Plugins-updated

O Adobe XD lançou o primeiro grupo de plug-ins para ajudá-lo a automatizar tarefas, integrar com outras ferramentas, aproveitar dados dos seus designs e muito mais. Isso também inclui integrações com alguns dos melhores aplicativos de colaboração e produtividade no mercado, incluindo Slack, JIRA e Microsoft Teams.

Para obter mais informações sobre como começar a usar plug-ins, consulte Plug-ins para XD.

Transferência simplificada de ativos com o Illustrator e o After Effects

Importar do Illustrator
Importar do Illustrator

No Adobe XD 13.0, você pode transferir designs e ativos de layout do Illustrator abrindo os arquivos .ai no Adobe XD. O novo e conveniente fluxo de trabalho ajuda você a transferir ativos com facilidade com mapeamento nativo de camadas, pranchetas, ilustrações e vetores com a melhor fidelidade visual e simplificar os ambientes colaborativos em diferentes etapas do processo de UX. Para obter mais informações, consulte Abrir arquivos do Illustrator no XD.

Benefícios do recurso:

  • Uso de ativos do Illustrator em protótipos: transfira ícones, logotipos e outros ativos vetoriais no XD e use kits de interface ou bibliotecas completas criadas no Illustrator que preservam camadas, completamente editáveis e com fidelidade visual.
  • Colabore para criar designs interativos: abra arquivos do Illustrator no XD e use os recursos avançados de criação de protótipos e colaboração do XD.

Para saber mais sobre a integração com o Illustrator, assista a este vídeo.


Animação com o After Effects
Animação com o After Effects

Com o Adobe XD 13.0, você pode facilmente exportar designs do XD (pranchetas inteiras ou camadas selecionadas) no After Effects para criar animações de interfaces e microinterações personalizadas. Você pode exportar com facilidade camadas, pranchetas, ilustrações e vetores com a mesma fidelidade visual e usar o ecossistema de plug-ins avançados do After Effects para simplificar a colaboração com os desenvolvedores. Para obter mais informações, consulte Exportar ativos para o After Effects.

Benefícios do recurso:

  • Controle total de suas animações: os designers podem usar o After Effects para criar animações e microinterações personalizadas, ajustar transições ou usar ativos de vídeo nos designs.
  • Transferência de ativos perfeita: com esta integração, você aproveita a transferência rápida de arquivos e o mapeamento nativo de camadas, vetores e ilustrações resultando em uma transformação mais rápida do design em animações personalizadas.
  • Melhor aproveitamento dos plug-ins: aprimore suas animações e a colaboração com desenvolvedores usando o ecossistema de plug-ins do After Effects desenvolvido exclusivamente para o processo de design de UX.

Visualização de dispositivo Win10 em tempo real no iOS

Mobile-Preview

Do XD 13.0 em diante, os designers com sistema operacional Windows podem usar uma conexão USB para visualizar seus designs no iOS. Para obter mais informações, consulte Visualizar em dispositivos móveis.

Novos recursos do Adobe XD 12

 A versão de setembro de 2018 do XD tem os novos recursos interessantes:

Os aprimoramentos incluem:

Leia para saber mais.

Redimensionamento responsivo e restrições

Ao criar um design para um ambiente com vários dispositivos, é importante considerar a variedade de tamanhos de tela disponíveis nas resoluções para dispositivos móveis, tablets e desktop. Como nem todos os designers usam os mesmos dispositivos, precisamos considerar como o conteúdo se comporta em tamanhos de tela diferentes. 

Para solucionar esse problema, o Adobe XD desenvolveu um recurso chamado redimensionamento responsivo que permite redimensionar objetos enquanto mantém os relacionamentos espaciais em tamanhos diferentes para adaptar o design a vários tamanhos de tela. Para obter mais informações sobre o design responsivo e restrições, consulte Redimensionamento responsivo.

Para saber mais sobre redimensionamento responsivo, assista a este vídeo.


Redimensionamento responsivo
Resultado do redimensionamento responsivo
Configurar restrições em grupos de objetos
Configurar restrições em grupos de objetos

Transições temporizadas

As transições temporizadas aplicam uma combinação de Atraso e duração como um novo tipo de Acionamento por tempo para fazer a transição entre pranchetas e criar fluxos ou repetições iniciais rapidamente.

Adicionando Tempo, você pode fazer a transição entre as pranchetas de acordo com um atraso específico de tempo. Isso é útil para apresentações de protótipos e fluxos de decisão. 

Ao criar uma transição entre duas pranchetas no modo de Protótipo, você poderá selecionar Tempo em vez de Toque, definir a duração do atraso e a transição desejada. O XD salva os atributos desta mesma tela e as oferece como padrão para as próximas telas. Para mais informações sobre transições temporizadas, consulte Usar transições temporizadas.

Para saber mais sobre transições temporizadas, assista a este vídeo.


Definir transições temporizadas
Definir transições temporizadas

A. Definir Acionamento como Tempo B. Definir atraso em Segundos C. Definir ação como Transição D. Definir duração em Segundos 

Verificação ortográfica incorporada

O Adobe XD apresenta um recurso de verificação ortográfica que faz a verificação em tempo real diretamente na tela de design. Esse recurso usa o idioma do sistema operacional para sugerir as correções. Você também pode adicionar novas palavras ao dicionário.

Tradicionalmente, os usuários precisavam copiar ou colar o conteúdo em um aplicativo separado para verificar a ortografia e erros de digitação. 

A partir desta versão, você pode executar a verificação ortográfica no texto selecionar e exibir e corrigir os erros ortográficos.

Observação:

Antes de iniciar a verificação ortográfica, verifique se você habilitou o recurso de verificação ortográfica no menu Editar.

Verificação ortográfica
Verificação ortográfica

Para obter mais informações sobre a verificação ortográfica, consulte Usar a verificação ortográfica.

Aprimoramentos na exibição em tela cheia de protótipos online

O Adobe XD apresenta um comportamento de modo de tela cheia aprimorado que proporciona uma experiência de usuário aprimorada ao exibir designs no navegador.

Pranchetas online e personalizadas agora são exibidas na parte superior do navegador sem problemas de preenchimento preto. No entanto, pranchetas para dispositivos móveis continuam centralizadas na tela no modo de tela cheia.

Esses aprimoramentos fornecem uma experiência mais realista ao exibir uma prancheta para Web no navegador.

Para saber mais sobre os aprimoramentos na exibição de tela cheia de um protótipo da Web, assista a este vídeo.


Full-screen-(Before)
Comportamento anterior
Modo de tela cheia aprimorado para dimensionar protótipos online
Comportamento aprimorado

Isso imita o comportamento real de um navegador, uma vez que a cor de fundo dos navegadores geralmente é branca e não adiciona uma cor de fundo preta por padrão.

Aprimoramentos na exibição padrão e de tela cheia:

  • Se a largura da prancheta for maior do que o espaço horizontal disponível, o protótipo é dimensionado para se ajustar à largura sem precisar de rolagem horizontal.
  • Se você definiu a altura da janela (definida no Inspetor de propriedades), o protótipo é ajustado, primeiramente, à altura e é dimensionado, proporcionalmente à largura para manter a proporção. Você também pode rolar verticalmente para exibir conteúdo localizado abaixo da altura da janela.
  • Se o protótipo projetado é uma prancheta para Web ou personalizada, o link publicado no navegador em modo de tela cheia renderiza o conteúdo da parte superior da janela do navegador. Os designs para dispositivos móveis e tablets continuam sendo alinhados no centro da tela.
  • A cor de fundo no modo de tela cheia é branca em vez de preta. Isso imita um navegador real, já que os navegadores não adicionam uma cor de fundo preta por padrão.

Aprimoramentos na exibição de pranchetas para dispositivos móveis:

  • O conteúdo ajusta-se à altura e à largura para manter a proporção.
  • Se você exibir o link publicado no modo de tela cheia em um navegador, o conteúdo é renderizado no meio da janela do navegador. 

Novos recursos do Adobe XD 11

A versão de agosto de 2018 do XD tem os seguintes novos recursos interessantes:

Os aprimoramentos incluem:

Leia para saber mais detalhes.

Extrair ativos para especificações de design

Do XD 11.0 em diante, você pode incluir camadas marcadas para exportação em lote como ativos nas especificações de design e os desenvolvedores podem baixar essas camadas marcadas do link das especificações de design.

Os desenvolvedores podem optar por baixar todos os ativos vetoriais como ativos SVG, PNG, PDF e bitmap como PNG e PDF.

Exportar ativos
Exportação em lote
Exportação em lote

Para obter mais informações, consulte Extrair ativos das especificações de design.

Reordenar ativos no painel Ativos

Nesta versão do Adobe XD, você pode organizar e reordenar seus ativos ao arrastá-los no painel Ativos

Reordenar ativos
Reordenar ativos

Para obter mais informações, consulte Reordenar elementos no painel Ativos.

Convites privados na Web

O Adobe XD permite que você compartilhe convites nomeados seguros (links públicos e privados) para especificações de design e protótipo diretamente na interface Web. Quando um designer publica um convite nomeado seguro, é possível usar a opção Convidar para convidar outros revisores internos e externos.

Enviar convites privados para usuários do navegador
Enviar convites privados para usuários do navegador

Observação:

A opção Convidar está visível somente para o designer proprietário do documento, e as partes interessadas não podem convidar outras pessoas a menos que o designer permita isso.

Para obter mais informações, consulte Usar convites privados na Web.

Suporte à @menção para comentários

Você pode usar @menção para exibir os nomes dos usuários convidados para acessar um convite privado de design. No caso de especificações de design e protótipos públicos, somente usuários que comentarem pelo menos uma vez, serão exibidos na lista de revisores. O revisor @ mencionado pelo nome recebe uma notificação por email ou no aplicativo de desktop da Creative Cloud. Quando você clica na notificação, é direcionado para a prancheta referenciada.

@menção
@menção

Para obter mais informações, consulte Fluxo de trabalho do revisor.

Suporte a tipos de traçado nas especificações de design

Do XD 11.0 em diante, os usuários podem selecionar qualquer objeto na especificação de design compartilhada e clicar nas bordas para exibir os traçados usados na tela. 

Tipos de traçados
A. Tipos de traçados 

Para obter mais informações, consulte Inspecionar especificações de design.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online