Como importar ícones e telas do Google Material para o Adobe XD

Pesquisar

Última atualização em 06/05/2021

O Adobe XD aprimora e simplifica o fluxo de trabalho de criação de interfaces graças à função de importação de kits de interface. Saiba como importar elementos pertencentes ao sistema de design do Google para começar rapidamente a criar sua interface de usuário.

Italo Sannino está em contato com a criatividade digital há mais de 20 anos, desde que se formou na Academia de Belas Artes de Nápoles, onde leciona design de interface de usuário atualmente. Em 1997 ele criou a “Geko”, uma pequena agência de novas mídias que se tornou seu campo pessoal para experimentação. Graças ao projeto Adobe Guru e por ser um profissional da comunidade da Adobe, ele esteve envolvido na metodologia, no design e no planejamento de interfaces utilizáveis e de ferramentas importantes da Adobe. Além disso, ele recentemente se tornou um dos membros Ambassador da Wacom.

Veja como ele liberou sua criatividade aqui!

Pré-requisito: ativar as fontes corretas

O Google Material é um sistema de design desenvolvido pelo Google principalmente para o sistema operacional Android. A tipografia é essencial ao usar sistemas de design. Para garantir que os designs funcionem adequadamente, ative as fontes de referência nas bibliotecas do Adobe Fonts.

Observação:

O Google Material é mais do que apenas um conjunto de ícones de botões e estilos. É um sistema de design e, portanto, consiste das melhores práticas para interface e experiência do usuário no geral, além do uso de elementos de interface importados. Para obter mais informações, acesse Material Design.

Siga estas etapas para ativar a fonte correta:

Acesse a página do Roboto no Adobe Fonts.
Use o controle deslizante Ativar todas as fontes no canto superior direito para ativar a família de fontes.

Página da fonte Roboto em fonts.adobe.com

Preparar para importar kits de interface

Inicie o Adobe XD. Você será recebido pela página inicial que oferece várias possibilidades. Escolha uma predefinição clássica, como iPhone 6/7/8.
Depois de selecionar a predefinição e criar um documento, selecione o item do menu: Arquivo > Obter kits de interface > Google Material.

Menu Obter kits de interface
Você será redirecionado para a página de download do Google Material. Clique no link de download para baixar o kit de interface no formato do Adobe XD.

Página de download para baixar o formato de arquivo do Adobe XD
Abra o arquivo do Adobe XD recém-baixado.

O arquivo que contém o kit de interface do Google Material

Depois de baixar o arquivo com os elementos de interface do Google Material, você poderá importá-lo com eficiência para seu design ou para um novo arquivo de duas maneiras, dependendo de suas necessidades específicas. Você pode importar um único item de cada vez ou todas as pranchetas que contêm todos os elementos (incluindo componentes).

Importar itens individuais para seu design

Este método oferece vantagens inegáveis para manter o arquivo leve e ter controle total dos seus ativos.

Identifique o elemento de interface (ou os elementos de interface de seu interesse).
Use a ferramenta Selecionar (pressione v) e selecione o elemento de interface.
Copie o item escolhido pressionando command + c (no Mac) ou ctrl + c (no Windows) e cole pressionando command + v (no Mac) ou ctrl + v (no Windows).

Cole pressionando command + v (no Mac) ou ctrl + v (no Windows).

Neste caso, decidi pegar o ícone de email para integrá-lo ao meu design:

Operação de copiar e colar do arquivo do Google Material para o nosso design

Observação:

Todos os elementos do kit de interface do Google estão em gráficos vetoriais, para que você possa editá-los como preferir.

Se houver muitos elementos individuais sendo copiados um de cada vez do arquivo que contém os elementos de interface do Google, o processo poderá ser demorado e tedioso. A capacidade de copiar e colar uma ou mais pranchetas é um recurso interessante do Adobe XD que você pode aproveitar.

Importar várias pranchetas para o seu design

Reabra ou volte para o arquivo do Adobe XD que contém os elementos de interface do Google.
Pressione Cmd + a (no Mac) ou Ctrl + a (no Windows) para selecionar todas as pranchetas.
Copie pressionando command + c (no Mac) ou ctrl + c (no Windows) e cole pressionando command + v (no Mac) ou ctrl + v (no Windows).

Usar componentes para importar várias pranchetas

O processo de colar várias pranchetas é conveniente e avançado, mas, desde a última versão, o Adobe XD utiliza o modelo de componentes vinculados. Não é possível editar as partes da interface que já foram convertidas em um componente no arquivo do Google, a menos que você desvincule um componente do original ou edite os componentes do arquivo de origem. Nesse caso, desconecte um componente de sua origem.

Hoje em dia é comum ter várias pessoas trabalhando no mesmo projeto e compartilhando seus arquivos. Claro, isso também se aplica ao seu arquivo de kit de interface do Google no XD. São em casos como estes que os componentes vinculados mostram seu potencial.

Os componentes vinculados permitem que você tenha apenas um arquivo de origem (um guia de estilo ou um sistema de design, como nesse caso) com todos os elementos da interface do seu projeto e possa usá-los em outros arquivos do Adobe XD.

Quando você usa um componente vinculado em seu arquivo do XD, que vem do arquivo de origem, uma notificação é enviada sempre que um desses componentes é alterado. Assim, você pode visualizar as alterações e, então, decidir se as aceitará ou as rejeitará.

Esse recurso avançado, além de simplificar seu fluxo de trabalho, mantém a consistência na sua interface e experiência de usuário, o que é provavelmente o aspecto mais importante desse tipo de trabalho.

Usar o comando Criar componente local

Habilite o painel Ativos pressionando command + shift + y (no Mac) ou ctrl + shift + y (no Windows).
Selecione o componente (ou componentes) que você deseja converter com clique + control (no Mac) ou com um clique com o botão direito do mouse (no Windows) e selecione Criar componente local na janela pop-up.