Como usar kits de interface do usuário no Adobe XD

Para os interessados ​​em web design, kits de IU em Adobe XD é uma ótima maneira de iniciar um novo projeto de design. Com esses kits, você tem acesso a alguns recursos úteis que pode modificar e usar para o design de seu site ou aplicativo.

Se você é novo no software e não tem certeza de como usar os kits de IU em Adobe XD, então você veio ao lugar certo. Neste artigo, vou mostrar como você pode instalar kits de IU no software e, em seguida, usar os recursos incluídos para o seu projeto.

Como fazer download de kits de interface do usuário no Adobe XD

Primeiro, vamos dar uma olhada em como você pode baixar kits de interface do usuário no Adobe XD, direto do software. Basta seguir estas etapas para começar:

Passo 1: Clique no botão do menu de hambúrguer no canto superior esquerdo do software.

Passo 2: No menu, role para baixo até a opção Get UI Kits e clique em qualquer uma das três opções disponíveis.

Para este artigo, irei escolher o kit de IU do Google Material. No entanto, dependendo do seu projeto, você pode selecionar os kits Apple iOS ou Microsoft Windows. Isso abrirá uma página oficial da Web, da qual você pode baixar os kits de interface do usuário gratuitamente.

Etapa 3: Localize o kit Adobe XD UI na seguinte página da web e baixe-o em seu sistema.

Passo 4: Agora abra o arquivo baixado no Adobe XD e você será saudado com um monte de pranchetas contendo recursos de interface do usuário para a respectiva plataforma.

Você pode segurar o botão Ctrl e mover a roda de rolagem para aumentar / diminuir o zoom para ver todas as pranchetas individuais.

Se você deseja baixar Wireframes, pode clicar na opção Wireframes no menu Obter UI Kits.

Você também pode procurar kits de IU adicionais no site da Adobe clicando na opção Mais Kits de IU no menu Obter Kits de IU.

O site tem algumas opções excelentes para escolher, incluindo este kit de interface de usuário Movie Magic muito legal que se parece com um display heads-up.

Agora que você sabe como baixar kits de IU, vamos dar uma olhada em como você pode usá-los em seus projetos.

Como usar kits de interface do usuário no Adobe XD

Para usar kits de IU em seu projeto, basta seguir estas etapas simples:

Passo 1: Aumente o zoom no elemento de interface do usuário que deseja usar em seu projeto e clique em seu título para selecioná-lo.

Passo 2: Agora copie o elemento usando o atalho Ctrl + C.

Etapa 3: Em seguida, abra um novo projeto Adobe XD no menu.

Passo 4: Aqui, cole o elemento da IU usando o atalho Ctrl + V.

Para este artigo, usarei o elemento Mobile Dark do kit de IU do Google Material. O elemento inclui guias para ajudá-lo a colocar mais camadas, mas se não quiser usá-los, você pode removê-los facilmente seguindo a próxima etapa.

Etapa 5: Para remover as guias, clique no ícone de cadeado no canto superior esquerdo e clique em excluir. Você pode pular esta etapa se desejar usar as guias para colocar mais objetos no elemento com precisão.

Etapa 6: Agora volte para o kit de IU para selecionar outro elemento para adicionar a esta página. Mais uma vez, clique no título do elemento e copie-o usando o atalho Ctrl + C.

Criarei um brinde básico para este artigo, para o qual usarei uma das caixas de diálogo.

Etapa 7: Cole o novo elemento no elemento anterior e alinhe-o de acordo com as guias.

Etapa 8: Agora, para editar cada elemento do brinde, clique duas vezes na caixa de texto e insira o texto que deseja usar. Primeiro, vamos mudar o título da torrada.

Em seguida, altere o conteúdo do corpo clicando duas vezes na caixa de texto e digitando o que deseja adicionar.

Você também pode alterar o texto dos botões da mesma maneira. Quando terminar de editar o texto, você pode alterar a cor e a opacidade do texto. Para alterar a opacidade, basta mover o controle deslizante sob a opção Opacidade na barra de ferramentas para a direita.

Para alterar a cor do texto, clique no retângulo ao lado da opção Preenchimento e selecione uma nova cor no seletor de cores.

E não é apenas o texto que você pode editar dessa maneira. Você também pode alterar a cor e a opacidade de quase todos os itens na caixa de diálogo, o que é ótimo se você estiver optando por um esquema de cores exclusivo.

Quando estiver satisfeito com o resultado, vá em frente e salve o arquivo clicando na opção Salvar como no menu ou usando o atalho Shift + Ctrl + S.

Aperfeiçoe seu design usando kits de interface do usuário

Agora que você sabe como baixar e usar os kits de interface do usuário no Adobe XD, tenho certeza de que começará a produzir designs incríveis em um piscar de olhos. Esses kits de IU são definitivamente muito úteis e ajudam você a ir direto ao seu projeto sem se preocupar com o design de cada elemento de IU.

Próximo: Concluiu um projeto no Adobe XD e não sabe como exportá-lo para HTML? Confira o próximo artigo para um tutorial passo a passo simples.