Resumo dos recursos | Adobe XD | Versões de 2019

A versão de novembro de 2019 do XD possui as seguintes melhorias: 

• Colaboração em tempo real com a coedição (Beta)
• Adicionar elementos interativos com os estados de componente
• Gerenciar revisões de design com o Histórico do documento
• Criar protótipos de alta fidelidade usando interações múltiplas
  
• Acessar plug-ins no Plugin Manager reformulado
  
• Compartilhar e colaborar com o modo de compartilhamento reformulado
  
• Compartilhar ativos com integração aprimorada às bibliotecas da Creative Cloud 
  
• Converter bibliotecas do Sketch em ativos vinculados
  

Colaboração em tempo real com a coedição (Beta)

A coedição (Beta) permite que você colabore em tempo real com outros designers, acelerando seu fluxo de trabalho e eliminando trabalhos duplicados ou conflitantes. Você pode ver avatares de outros usuários que estão editando o mesmo documento, e as edições são exibidas para todos em tempo real.

Com a coedição, suas equipes de design podem trabalhar mais rapidamente e manter uma única fonte confiável para todo um projeto de design.

Os recursos beta são novos recursos disponíveis para usuários do XD testarem e fornecerem feedback enquanto trabalhamos para deixá-los prontos para uso. Os recursos beta podem ter alguns problemas de qualidade e desempenho.

Para obter mais informações, consulte Colaborar e coeditar designs.

Adicionar elementos interativos com os estados de componente

Agora você pode usar os estados de componente para criar variações para diferentes interações de usuário. Por exemplo, você pode criar um componente de botão e criar estados diferentes para ações como passar o mouse sobre o botão ou pressioná-lo. 

Chega de criar e conectar várias pranchetas para exibir interações complexas! 

Com um componente com estados, você pode usar o acionador Passar o mouse no modo de Protótipo para especificar um efeito ao passar ou manter o mouse sobre determinado elemento de design.

Traga novos níveis de interatividade para seus protótipos.

Gerenciar revisões de design com o Histórico do documento

Agora você pode usar o Histórico do documento para navegar em um histórico de versões de um documento na nuvem salvas enquanto você trabalhava. Você também pode usá-lo para reverter um documento para uma versão anterior e restaurar as últimas alterações em um documento do XD. 

Para reverter para uma versão anterior, abra uma versão do documento no Histórico do documento e copie e cole o conteúdo na versão atual. 

Trabalhe em colaboração com seus designers e exiba o progresso dos documentos ao longo do tempo.

Para obter mais informações, consulte Gerenciar revisões de designs.

Criar protótipos de alta fidelidade usando interações múltiplas

Agora, no modo de Protótipo, você pode especificar várias interações para um elemento de design ou objeto.

Arraste vários fios de um único elemento e adicione interações para diferentes acionadores, como Tocar ou Arrastar, sem precisar duplicar objetos ou pranchetas.

Chega de interações espalhadas! 

Para obter mais informações, consulte Criar protótipos interativos | Visão geral.

Acessar plug-ins no Plugin Manager reformulado

O Plugin Manager reformulado permite pesquisar, descobrir e instalar plug-ins para o XD.  Navegue por diferentes categorias e coleções de plug-ins, pesquise plug-ins ou termos específicos e exiba listagens de perfis avançados para cada plug-in, descrições, suporte a idiomas e muito mais.

Para obter mais informações, consulte Plug-ins no XD.

Compartilhar e colaborar com o modo de compartilhamento reformulado

O novo modo de compartilhamento consolida diferentes recursos de compartilhamento em um só local para você compartilhar seus designs e colaborar com outros designers com facilidade. Combinado com as predefinições integradas baseadas em cenário, como Revisão de design e Desenvolvimento, você tem total controle sobre o gerenciamento ou a atualização de seus links compartilhados.

Continue lendo para saber mais sobre as vantagens do modo de compartilhamento reformulado.

• Gerencie vários links publicados: exiba todos os links publicados pelo seletor de URL. Você pode modificar os links ou até mesmo atualizar links de design existentes com facilidade.
• Predefinições disponíveis ao publicar: acesse predefinições úteis baseadas em cenário, como Revisão de design, Desenvolvimento, Apresentação, Teste de usuário e Personalizado no menu Exibir configurações. Você não precisa mais selecionar várias opções ou caixas de seleção para criar seus links de design. O XD faz tudo isso de uma só vez.
  
• Use o mesmo URL para várias predefinições e iterações: crie um só URL e faça iterações ou alterne entre predefinições várias vezes. 
• Identificação fácil de pranchetas: identifique visualmente as pranchetas destacadas que serão publicadas na tela de design. Chega de linhas ou telas ausentes em seus links publicados.

Para obter mais informações, consulte Compartilhar designs e protótipos.

Compartilhar ativos com integração aprimorada às bibliotecas da Creative Cloud

Agora você pode acessar e navegar nas bibliotecas da Creative Cloud, adicionar ativos, como componentes, imagens, cores, gradientes e estilos de caractere, às bibliotecas da Creative Cloud, consumi-los diretamente no XD e usá-los diretamente em projetos do XD.

Você também pode adicionar ativos do XD às bibliotecas da Creative Cloud e usá-los em outros aplicativos da Creative Cloud.

Conecte as equipes de criação de toda a organização com ativos compartilhados, como cores da marca, imagens, logotipos e muito mais.

Para obter mais informações, consulte Bibliotecas da Creative Cloud para o XD. 

Converter bibliotecas do Sketch em ativos vinculados

Agora, ao trabalhar em seus sistemas de design, você pode importar e reutilizar qualquer ativo do Sketch sem precisar criá-lo novamente.

Os símbolos e elementos do Sketch são convertidos em componentes do XD e podem ser usados como ativos vinculados.

Para obter mais informações, consulte Converter bibliotecas do Sketch.

Novos recursos do Adobe XD 23

A versão de outubro de 2019 do XD possui as seguintes melhorias: 

• Efeitos de mesclagem
  
• Ajustar e Redimensionar deslocamento
• Selecionar camadas sobrepostas

Efeitos de mesclagem

A partir do XD 23.0, você pode aplicar efeitos de mesclagem não destrutivos para estilizar imagens ou ativos gráficos.

Use os efeitos de mesclagem para transformar seus designs variando a maneira como as cores dos objetos se mesclam com as cores de objetos subjacentes e dê vida aos seus designs.

Para obter mais informações sobre a aplicação de efeitos de mesclagem, consulte Aplicar efeitos de mesclagem.

Ajustar e Redimensionar deslocamento

No XD 23.0, você pode combinar esses atalhos de teclado com as teclas de seta para controlar com precisão a posição e o tamanho dos elementos da interface de usuário em incrementos de tamanho da grade.

• Shift+setas: move a seleção em incrementos de 10 px.
• Cmd+setas: redimensiona a seleção em incrementos de 1 px (o elemento é fixado no canto superior esquerdo).
• Cmd+Shift+setas (Mac) e Alt+Shift +setas (Windows): redimensiona a seleção em incrementos de 10 px (o elemento é fixado no canto superior esquerdo).

Quando a grade quadriculada está ativada:

• Shift+setas: move a seleção para ajustar primeiro à grade e depois move em incrementos de tamanho da grade.
  
• Cmd+Shift+setas (Mac) e Alt+Shift+setas (Windows): redimensiona a seleção para ajustar à grade e depois redimensiona a seleção em incrementos de tamanho de grade (o elemento é fixado no canto superior esquerdo da tela)

Selecionar camadas sobrepostas

Modo de design

O XD 23.0 estende o comportamento do atalho de teclado Cmd+clique ou Ctrl+clique para analisar a ordem Z dos objetos na tela de design, bem como nas especificações de design. Ao chegar na camada desejada, você pode usar o teclado para ajustar ou clicar com o botão direito do mouse para exibir o menu contextual correspondente.

Se houver várias camadas empilhadas, Cmd+clique ou Ctrl+clique selecionará o próximo objeto abaixo da camada selecionada. Quando chegar na camada mais abaixo, use o mesmo atalho de teclado para retornar à primeira camada superior. 

Especificações de design

Para exibir e inspecionar as camadas ocultas abaixo de uma camada sobreposta nas especificações de design, passe o mouse e clique com o botão direito na área específica da prancheta. Isso exibe a lista de camadas e seus detalhes contextuais nesse ponto de pixel. Você também pode usar Cmd+clique para analisar sequencialmente e exibir as propriedades da camada.

Para obter mais informações sobre como acessar camadas sobrepostas, consulte Redimensionar e girar objetos.

Novos recursos do Adobe XD 22

A versão de agosto de 2019 do XD possui as seguintes melhorias: 

• Editar no Photoshop
• Painel Plug-ins aprimorado
• Trechos de CSS nas especificações de design
• Melhorias nos limites dos componentes 
• Redução de pixels fracionários
• Alternar entre as exibições de grade e de fluxo

Editar no Photoshop

O XD melhora sua integração com o Adobe Photoshop, permitindo abrir e editar imagens do XD diretamente no Photoshop e atualizá-las em tempo real. À medida que você edita e salva as imagens no Photoshop, o XD salva o arquivo compactado e coloca o bitmap no XD, e não no arquivo editado. 

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

Painel Plug-ins aprimorado

A versão mais recente do XD permite que você inicie e interaja com plug-ins do XD diretamente na experiência do usuário do XD, juntamente com a tela de design. Assim como o painel Camadas e Ativos, o novo painel Plug-ins fornece acesso fácil para exibir e modificar plug-ins no XD. Isso ajuda a manter o fluxo criativo ao trabalhar em seus designs do XD. 

Para obter mais informações, consulte Exibir e instalar plug-ins.

Trechos de CSS nas especificações de design

Para ajudar a converter designs em um site ativo, você pode copiar os trechos de código CSS das especificações de design e colá-los em seu código.

O código CSS é gerado automaticamente quando você seleciona Web como um destino de saída na janela Compartilhar para desenvolvimento ao publicar especificações de design. Quando você publica as especificações de design, o XD mostra automaticamente o trecho de código CSS para a camada selecionada. 

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

Melhorias nos limites dos componentes

Os componentes permitem uma variedade de substituições e são perfeitamente redimensionáveis para vários tamanhos de tela, mas podem ser difíceis de usar ao aplicar efeitos ou reorganizar objetos. Nas versões anteriores do XD, o conteúdo era recortado se você adicionasse um objeto fora dos limites do componente mestre original.

Para corrigir problemas com limites de componente, selecione o componente mestre e clique com o botão direito do mouse para selecionar a opção Ajustar limites ao conteúdo. Os limites do componente são ajustados para mostrar todos os objetos recortados nos componentes mestres e suas instâncias.

Se você criar outros componentes:

• Sombras e desfoques são renderizados fora da caixa delimitadora do componente e
  
• A área de limite ajusta todo o conteúdo dentro do componente.

Redução de pixels fracionários

Ao criar para telas HiDPI, os pixels fracionários distorcem o conteúdo. A partir do XD 22.0, para eliminar o atrito de design e a distorção da imagem, o XD arredonda os valores de pixel ao redimensionar grupos de objetos, componentes e máscaras de imagem. No entanto, o XD preserva os valores fracionários do conteúdo criado antes do XD 22.0.  

Alternar entre as exibições de grade e de fluxo

Para ter um panorama completo do fluxo de design com informações de layout das pranchetas, clique no nome do protótipo ou da especificação de design no canto superior esquerdo da tela. Na Exibição de grade padrão, você também pode alternar entre as exibições de grade e de fluxo para exibir o seguinte:

• A Exibição de grade mostra todas as pranchetas organizadas em um formato de grade que você pode inspecionar ou navegar para encontrar uma prancheta específica.
• A Exibição de fluxo organiza as pranchetas para representar a hierarquia de design e de layout.

Para obter mais informações, consulte Navegar em especificações de design no XD.