Trabalhar com ativos externos

Você pode importar ativos para o XD de aplicativos da Adobe, como o Photoshop e o Illustrator, aplicativos de terceiros, como o Sketch, e navegadores da Web. Aprimore esses ativos no XD ou use-os para desenvolver protótipos interativos. Você também pode exportar ativos do XD para o After Effects para aprimorá-los ainda mais.

Você pode trabalhar com ativos externos de várias maneiras, dependendo do aplicativo:

• Reunir ativos do Photoshop
• Reunir ativos do Illustrator
• Reunir ativos do Sketch
• Reunir ativos de navegadores da Web
• Importar outros arquivos
  
• Exportar para o After Effects

 Se você deseja converter arquivos do Photoshop e do Illustrator em arquivos do XD, use o botão Abrir. Se você deseja adicionar o conteúdo desses arquivos em um arquivo do XD existente, use Importar.

Você pode usar qualquer um destes métodos para importar ativos do Photoshop para o XD:

• Abra um arquivo .psd diretamente no XD selecionando Arquivo > Abrir. Você pode editar o arquivo no XD como qualquer outro arquivo do XD, conectar interações e compartilhar como especificações de design ou protótipo.
• Importe o arquivo .psd para o XD selecionando Arquivo > Importar.
• Copie e cole conteúdo de bitmap e vetor do Photoshop e cole-o no XD. 
• Arraste ativos do Photoshop do painel Bibliotecas para a tela do XD. Para obter mais informações, consulte Bibliotecas da Creative Cloud no Adobe XD.

• Copie um arquivo .psd na área de transferência do sistema operacional e use a opção Colar aparência para colar a imagem diretamente como um preenchimento de imagem. 

Para obter mais informações, consulte Trabalhar com ativos de design do Photoshop.

Copiar e colar SVG do Photoshop

Para copiar e colar um SVG do Photoshop, clique com o botão direito do mouse na camada de forma ou vetor no Photoshop, clique em Copiar SVG e cole-o no XD.

Reunir ativos do Illustrator

Você pode abrir arquivos do Illustrator no XD ou importá-los.

Você também pode copiar imagens vetoriais e de bitmap do Adobe Illustrator e colá-las no XD mantendo a mesma fidelidade e capacidade de edição ao abrir ou importar arquivos do Illustrator. Os arquivos do Illustrator são inseridos no documento aberto e não como um documento separado. Os objetos inteligentes são exportados como camadas expandidas em vez de bitmaps e as camadas de ajuste são preservadas. No entanto, você não pode copiar e colar uma prancheta do Illustrator no XD.

Você também pode copiar um arquivo vetorial na área de transferência do SO e usar a opção Colar aparência para colar a imagem diretamente como um preenchimento de imagem. 

Você também pode importar ativos do Adobe Illustrator armazenados nas Bibliotecas da Creative Cloud ao XD, arrastando-os do painel Bibliotecas para a tela do XD. Para obter mais informações, consulte Bibliotecas da Creative Cloud no Adobe XD.

Copiar e colar arquivos SVG do XD no Illustrator

Agora, você pode copiar conteúdo vetorial do XD para a área de transferência e colá-lo como camadas totalmente editáveis no Adobe Illustrator.

Para copiar e colar conteúdo do XD no Illustrator:

1. Clique com o botão direito do mouse na forma ou camada vetorial no XD e selecione Copiar no menu de contexto.

2. No Adobe Illustrator, selecione Editar > Colar para colar o conteúdo vetorial.

Abrir arquivos do Illustrator no XD

É possível abrir diretamente seus arquivos do Illustrator (.ai) no XD e convertê-los em arquivos do XD. Depois de abrir seus arquivos, você pode editá-los no XD, conectar interações e compartilhá-los como especificações de design ou protótipo.

Para abrir um arquivo do Illustrator no XD, faça o seguinte:

• No XD, selecione Arquivo > Abrir. Navegue até a pasta desejada, selecione  um arquivo .ai  e abra no XD. Você também pode usar os atalhos de teclado Cmd+O (Mac) ou Ctrl+O (Windows).
• Para abrir o arquivo no XD (apenas no Mac), arraste o arquivo Ai sobre o ícone XD.
• Clique com o botão direito do mouse no arquivo do Illustrator e selecione Abrir com > XD no submenu.

 Quando você abre um arquivo do Illustrator no XD, nem todos os elementos são compatíveis com fidelidade total. Para obter uma lista de elementos compatíveis e não compatíveis, consulte Elementos compatíveis quando você abre arquivos do Illustrator no XD.

Importar arquivos do Illustrator

Para importar um arquivo do Illustrator para o XD, selecione Arquivo > Importar. Se o arquivo importado do Illustrator tiver pranchetas, essas pranchetas serão colocadas abaixo de pranchetas do XD. Se faltar espaço abaixo das pranchetas do XD, as pranchetas importadas serão colocadas nos espaços disponíveis. Se o arquivo importado não tiver pranchetas, seus ativos serão colocados no centro da tela. Se o arquivo importado não tiver pranchetas, seus ativos serão colocados no centro da tela. 

Reunir ativos do Sketch

• Você pode abrir um arquivo .sketch diretamente no XD. Você pode editar o arquivo no XD como qualquer outro arquivo do XD, conectar interações e compartilhar como especificações de design ou protótipo. Para obter mais informações, consulte Abrir arquivos do Sketch no XD.
• Você também pode copiar ativos do Sketch e colá-lo no XD. Para obter mais informações, consulte Reunir ativos selecionados do Sketch.
• Você também pode copiar e colar diretamente do Sketch no XD, mantendo sua capacidade de edição no XD.
• Você também pode copiar um arquivo do Sketch na área de transferência do SO e usar a opção Colar aparência para colar a imagem diretamente como um preenchimento de imagem. 
• Você pode converter o conteúdo do Sketch em sistemas de design do XD. Para obter mais informações, consulte Converter bibliotecas do Sketch.
  

Abrir arquivos do Sketch no XD

É possível abrir diretamente seus arquivos do Sketch (.sketch) no XD e convertê-los em arquivos do XD. Depois de abrir seus arquivos, você pode editá-los no XD, conectar interações e compartilhá-los como especificações de design ou protótipo.

 Você só pode abrir arquivos do Sketch criados usando o Sketch versão 43 ou versões mais novas. Se você tiver um arquivo mais antigo, salve o arquivo usando a versão mais recente do Sketch e abra o arquivo no XD.

Para abrir um arquivo do Sketch no XD, siga um destes procedimentos:

• Clique em Arquivo > Abrir. Navegue até a pasta desejada, selecione um arquivo .sketch e abra-o no XD.
• Arraste o arquivo do Sketch sobre o ícone do XD para abrir o arquivo no XD (somente no Mac).
• Clique com o botão direito do mouse no arquivo do Sketch e selecione Abrir com > XD no menu de contexto.

Você também pode usar os atalhos de teclado Cmd+O (Mac) ou Ctrl+O (Windows).

 Quando você abre um arquivo do Sketch no XD, nem todos os elementos são compatíveis com fidelidade total. Para ver uma lista de elementos compatíveis e não compatíveis, consulte Elementos compatíveis quando você abre arquivos do Sketch no XD.

Reunir ativos selecionados do Sketch

Converter bibliotecas do Sketch em sistemas de design do XD

Agora é possível mover o conteúdo do Sketch para o XD e continuar trabalhando nos seus sistemas de design. Os símbolos e elementos do Sketch são convertidos em componentes do XD, mas podem ser usados como ativos vinculados.

1. Abra o sistema de design no XD.
2. No painel Ativos, clique em Vincular ativos. Se já houver ativos no painel Ativos, clique no ícone de adição (+).
3. Na janela Vincular ativos, selecione Converter biblioteca do Sketch e selecione um arquivo do Sketch no seletor de arquivos. O XD converte o documento do Sketch de origem e o salva automaticamente como um documento na nuvem e vincula a cor, os estilos de caractere e os componentes ao seu documento do XD. 
4. Se você tiver várias bibliotecas do Sketch com as quais precisa trabalhar, clique no ícone de adição no painel Ativos e importe novamente outra biblioteca do Sketch. 

Bibliotecas e componentes do Sketch

Use estas diretrizes para trabalhar com componentes no XD:

1. Arraste os componentes convertidos para a prancheta. 
2. Para editar um componente de origem, clique em uma instância do componente, clique com o botão direito do mouse e selecione Editar mestre no documento de origem. 
3. Para editar um ativo, selecione o ativo no painel Ativos.
4. Depois que as alterações forem aplicadas, mude para o seu documento de trabalho.
5. Clique em Atualizar para aceitar as alterações. 

Para obter mais informações, consulte Trabalhar com componentes no XD.

Saiba mais

Assista a esta ilustração animada para saber mais sobre a conversão de bibliotecas do Sketch em sistemas de design do XD.

Duração: 30 segundos.

Reunir ativos de navegadores da Web

Você pode arrastar imagens diretamente de todos os navegadores da Web modernos para suas pranchetas. Você também pode arrastar as imagens para um objeto em uma prancheta; ao fazê-lo, a imagem é redimensionada automaticamente para se ajustar ao objeto.

Você também pode copiar uma imagem na área de transferência do SO e usar a opção Colar aparência para colar a imagem diretamente como um preenchimento de imagem. 

Importar outros arquivos

Para importar ativos como PNG, JPG, TIFF, GIF, SVG, vídeos compatíveis e arquivos Lottie, execute uma das seguintes ações:

• Clique em Arquivo > Importar, procure e selecione o arquivo.
• Arraste o arquivo no XD do Finder ou do Windows File Explorer. Você também pode copiar e colar um arquivo de imagem.
  

Exportar para o After Effects

 No XD, você pode exportar apenas para o After Effects 2018 e versões posteriores. Se você tem uma versão mais antiga instalada, a opção Exportar para o After Effects é desabilitada. Para habilitar essa opção, entre no aplicativo de desktop da Creative Cloud e atualize o After Effects para a versão mais recente.

Para usar o After Effects para transformar seus designs XD em animações personalizadas ou microinterações, faça o seguinte:

• No XD, selecione a camada ou a prancheta que você deseja animar no After Effects. 
• Selecione Arquivo > Exportar > After Effects. Se o After Effects não estiver instalado no seu computador, essa opção estará desativada. Você também pode usar os atalhos de teclado ⌥⌘F (Mac) ou Ctrl+Alt+F (Windows). O After Effects é iniciado (se estiver fechado) ou se move para o primeiro plano (se estiver em execução no fundo).
• As camadas ou pranchetas selecionadas são transferidas como formas nativas, textos que incluem espaçamento entre parágrafos, ativos, traçados internos e externos e composições aninhadas em seu projeto do After Effects. Você pode fazer várias transferências de ativos para o mesmo projeto do After Effects e criar animações em estágios ou em vários arquivos do XD.

 Quando você exporta conteúdo do XD para o After Effects, nem todos os elementos são compatíveis com fidelidade total. Para obter uma lista de elementos compatíveis e não compatíveis, consulte Recursos compatíveis quando você exporta arquivos do XD para o After Effects. 

Limitações de importação e exportação

Para saber mais sobre as limitações de importação e exportação, consulte Por que não consigo importar ou exportar arquivos no Adobe XD?