Blog Tecnológico

O Adobe Xd é uma ferramenta de design de experiência do usuário e interface do usuário (UI/UX) baseada em vetores para aplicativos da web e aplicativos móveis, desenvolvida e publicada pela Adobe. Ele está disponível para macOS e Windows, também existem os aplicativos para iOS e Android que ajudam a visualizar o resultado do trabalho diretamente em dispositivos móveis. O Adobe Xd suporta wireframes de sites e criação de protótipos click-through.

Com ela, é possível prototipar e dar vida aos nossos projetos de forma totalmente interativa e navegável, dando atenção a cada detalhe, e graças a nuvem da Adobe, esse é um processo que pode ser feito de forma colaborativa com um time inteiro de forma totalmente remota.

Nesse artigo iremos abordar todos os métodos de importação de ativos do Photoshop para o Adobe XD para trazer ainda mais praticidade e fluidez aos seus projetos.

A suíte Creative Cloud faz a integração de seus aplicativos de forma fácil visando a fluidez de nossos projetos e a praticidade no nosso dia a dia.

Para esse artigo criei uma prancheta no Adobe Photoshop com um botão com textura, sombra e texto, uma imagem de um botão, um bloco de texto e uma imagem cujo fundo foi retirado:

A primeira forma que iremos abordar será usando a importação através da opção de carregamento “No seu computador”. Ela se encontra na tela inicial do Adobe XD:

Ao clicar uma nova janela será aberta, basta escolher a opção “PSD ou AI” (formatos de arquivo para Adobe Photoshop e Adobe Illustrator), e carregar o arquivo desejado do Explorer do seu computador:

A primeira coisa que devemos observar é que o Adobe XD identifica automaticamente as formas, os campos de texto e a imagem.
Elementos como o tamanho da prancheta, e as cores usadas são importadas.
Quando usamos essa forma de importação é importante notar que elementos como chanfro e entalhe e outros efeitos não aparecem:

Esse é um detalhe que deve ser considerado ao fazer importação de ativos do Photoshop para o Adobe XD utilizando esse método, então é cabível sempre realizar um teste dos ativos que você irá usar no seu projeto.

Outra opção para realizar a importação de arquivos Photoshop é já dentro de um projeto do Adobe XD, usando o menu de “arquivo” na opção importar, ou atalho Shift+Ctrl+l para Windows:

Dessa forma basta selecionar o arquivo do seu Explorer e o Adobe XD irá realizar o carregamento.
Vale mencionar que as mesmas observações do primeiro método abordado sobre efeitos se aplicam a esse método de importação também.

Usando ainda o menu “arquivo” e a opção “Abrir” (atalho Ctrl+O) podemos importar arquivos PSD ou AI diretamente da nuvem da Creative Cloud.

Ao usar o menu “arquivo” e a opção “abrir de seu computador” (atalho Shift+Ctrl+O) é possível abrir o arquivo do seu Explorer.

Opções de importação de ativos únicos do Photoshop:

E quando precisamos importar um único item, como um botão que criamos, ou uma imagem que passou por tratamento?
A seguir iremos ver as várias opções que a Adobe permite.

Nessa prancheta do Photoshop temos vários elementos:

O primeiro método que usaremos será inserir os elementos que usaremos em uma biblioteca da Creative Cloud.
Para isso basta arrastar o elemento que desejamos inserir para dentro da biblioteca desejada:

Ao abrirmos o Adobe XD basta clicar no ícone de biblioteca na barra de ferramentas lateral esquerda:

Então selecione a biblioteca desejada.
Para usar um elemento basta arrastá-lo para dentro da prancheta:

Utilizando esse método nós conseguimos trazer os efeitos de chanfro e entalhe e sombras projetadas para o Adobe XD. Observe abaixo a importação do botão criado no Photoshop e aberto no Adobe XD através desse método:

Esse método pode ser usado para qualquer elemento que criamos no Photoshop, até mesmo imagens que passaram por tratamento.

Mas, caso haja alguma impossibilidade de usar a nuvem da Creative Cloud ou esteja trabalhando em ambiente Offline também podemos realizar essa importação de forma fácil.
No Photoshop basta selecionar o elemento na camada desejada e escolher um método de exportação. Nesse caso usarei “Exportação rápida como PNG”:

Para importar para o Adobe XD podemos simplesmente arrastar a imagem do Explorer para a prancheta no Adobe XD:

Ou podemos usar o menu “arquivo” e opção “importar” (shift+Ctrl+l) para selecionar a imagem do Explorer:

Quando adicionamos o Photoshop ao nosso projeto trazemos à mesa inúmeras possibilidade de melhoria do nosso protótipo e temos as ferramentas ideais para abusar da nossa criatividade.

A Adobe desenvolve seus produtos pensando no dia a dia do nosso trabalho e a integração facilitada entre seus aplicativos usando a biblioteca da Creative Cloud é só mais um exemplo das grandes vantagens que temos ao adotar a Creative Cloud na nossa rotina.

Para saber mais sobre o Adobe Xd participe de nossos minicursos gratuitos clicando aqui.

Para saber como contratar a Adobe Creative Cloud para você ou sua empresa basta rolar a página e deixar seu contato no nosso formulário abaixo e um de nossos representantes irá lhe contatar!

Gostou deste conteúdo?