Isabela Scussel • 17 mar 2021 • Adobe Xd - Experience Design
Os programas da Adobe são bastante reconhecidos não apenas pela grande confiabilidade transmitida pela empresa, mas também devido as suas diversas opções de plug-ins e integrações entre os seus softwares.
Conheça 5 plug-ins essenciais para utilizar no Adobe Xd
Sendo assim, é natural que o usuário busque sempre pelas melhores e mais eficientes soluções para os casos de uso das plataformas e, neste sentido, o Adobe Xd e o Adobe Illustrator se destacam consideravelmente.
Já trouxemos diversos artigos sobre essas – e outras – ferramentas muito conhecidas e utilizadas no mercado de trabalho. Neste artigo falaremos brevemente sobre a integração existente entre duas soluções específicas da Adobe: o Adobe XD e o Adobe Illustrator. Utilizando ambas, poderemos trazer projetos de design feitos no Illustrator diretamente para a plataforma do Adobe Xd, e o mais importante: sem perder a capacidade de edição do seu trabalho!
Antes de apresentarmos o passo-a-passo de como adicionar esses projetos do Illustrator ao seu protótipo, é importante que possamos compreender um pouco mais sobre estes dois recursos.
Veja mais abaixo!
O que é e pra que serve o Adobe Xd?
Caso você ainda não conheça esta solução da Adobe, vamos apresenta-la – brevemente – para que tenha uma noção de como o software soluciona a questão da criação de protótipos de aplicativos de celular ou páginas da web totalmente interativos.
Com o Adobe Xd, não se faz necessário o uso de códigos ou desenvolvedores, o que auxilia no fluxo de criação do início ao fim, visto que o projeto pode ser compartilhado com rapidez e facilidade.
O XD vem ganhando cada vez mais notoriedade, ao passo que se configura como uma das mais poderosas ferramentas no mundo do design UI/UX. Além de tudo, a área de User Interface (UI) e de User Experience (UX) também cresce no seu reconhecimento dentro do mundo do trabalho, atraindo cada vez mais usuários apaixonados pela parte criativa que rodeia esses temas, e claro, graças às oportunidades que surgem constantemente no ramo.
Imagem disponível em: Adobe.com
Assim como o Illustrator, o Adobe XD é baseado em vetor, e este é um fator relevante para a eficiência dessa integração entre os softwares.
Você pode mergulhar nas possibilidades da plataforma, de modo a aprender como criar um protótipo de aplicativo do zero no XD, e o melhor de tudo: a ferramenta é muito intuitiva, o que torna toda a experiência mais simples e descomplicada. Nela, você poderá desenvolver ainda mais as suas habilidades e garantir conhecimentos para a sua carreira.
Para que você consiga iniciar na área UI/UX, a ENG disponibiliza o Minicurso: Design UI/UX com Adobe XD totalmente gratuito e com emissão de certificado!
Inscreva-se neste e em outros Minicursos gratuitos:
Além disso, o Adobe Experience Design (XD) é uma ferramenta de uso gratuito, com restrições apenas à quantidade de links de compartilhamento você pode gerar.
Ficou curioso quanto a esses links? Acesse o protótipo realizado ao vivo durante o Minicurso e entenda como criar protótipos de aplicativos: https://xd.adobe.com/view/f989a7b0-a526-4d58-a916-207361b3f4f6-acda/?fullscreen&hints=off
Como funciona o Adobe Illustrator?
Aqueles que estão acostumados a lidar com ferramentas de design com toda certeza já ouviram falar ou já utilizaram ao menos uma vez o programa do Adobe Illustrator, que se trata de uma ferramenta poderosa e extremamente versátil na criação de ilustrações dos mais variados tipos.
Também baseado em desenhos vetoriais, o Adobe Illustrator se destaca no mercado justamente pela capacidade com que se integra à criação de novas e criativas propostas.
De acordo com o website da Adobe:
“O software (...) permite criar de tudo, desde imagens incríveis para a Web e dispositivos móveis até logotipos, ícones, ilustrações de livros, embalagens de produtos e outdoors.”
Não apenas isso, mas o software se tornou disponível inclusive em dispositivos móveis – como tablets –, agregando ainda mais à experiência de ilustração característica da plataforma do Illustrator. Essas ilustrações podem ser aplicadas a múltiplos setores, estando presentes em diferentes contextos do nosso dia-a-dia.
Aprenda como trazer as suas criações diretamente do espaço de trabalho do Illustrator para o seu protótipo no Adobe XD:
Como trazer seus projetos do Illustrator para o Adobe Xd – sem perder a capacidade de edição (!)
O que buscamos frisar neste artigo é o fato de que ambas as ferramentas – tanto o XD quanto o Illustrator – são baseadas em desenhos vetoriais e, sendo assim, contêm a capacidade de ser redimensionados sem perder a qualidade na sua visualização final. Deste modo, enquanto usuários desses softwares, podemos trazer nossas criações diretamente de dentro do Adobe Illustrator para o Adobe Xd.
Veja a seguir como fazer isso, de 3 formas diferentes:
1. IMPORTAR O ARQUIVO
i. No Adobe XD, vá até a seção denominada ‘Arquivo’. Dentre as opções, selecione a opção ‘IMPORTAR”
ii. No seu computador, escolha o arquivo .ai desejado e selecione ‘IMPORTAR’:
iii. Pronto! Seu arquivo será aberto como uma nova prancheta, e com todos os elementos que você criou no Illustrator:
2. CTRL C + CTRL V (copiar e colar)
i. No Adobe Illustrator, abra o arquivo que contém os elementos que você deseja trazer para o seu protótipo no Adobe Xd (por exemplo: logotipos, ícones, desenhos...):
ii. Em seguida, selecione a(s) arte(s) que você quer colocar no seu protótipo do Xd e copie-a(s) (Ctrl + C):
iii. Por último, vá até o seu projeto no Adobe Xd e cole (Ctrl + V) o(s) componente(s) em questão. Ajuste da forma que desejar!
4. ABRIR COM ADOBE XD
i. No seu computador, vá até o local em que salvou o arquivo .ai:
ii. Com o botão direito do mouse, clique e escolha a opção: “Abrir com” ? “Adobe Xd”:
iii. Um novo projeto será aberto na plataforma do Adobe Xd contendo todos os objetos que compõem o arquivo .ai:
Quer conhecer ou se aprofundar no mundo do Design UI/UX com Adobe XD?
Participe do nosso Minicurso gratuito e com emissão de certificado internacional!
Para conhecer diversas tecnologias requisitadas no mercado, visite também o nosso Blog Tecnológico:
https://www.eng.com.br/blog.cfm