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

Para os interessados ​​em web design, os kits de interface do usuário no Adobe XD são uma ótima maneira de iniciar um novo projeto de design. Com esses kits, você obtém acesso a alguns recursos úteis que podem ser modificados e usados ​​para o design do seu site ou aplicativo.

Se você é novo no software e não tem certeza de como usar os kits de interface do usuário no Adobe XD, veio ao lugar certo. Neste artigo, mostrarei como você pode instalar kits de interface do usuário no software e usar os recursos incluídos para seu projeto.

Como baixar 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, diretamente do software. Basta seguir estes passos para começar:

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

Etapa 2: no menu, role para baixo até a opção Obter kits de interface do usuário e clique em uma das três opções disponíveis.

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

Etapa 3: Localize o kit de interface do usuário do Adobe XD na página da Web a seguir e baixe-o em seu sistema.

Etapa 4: agora abra o arquivo baixado no Adobe XD e você será recebido com várias 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, você pode clicar na opção Wireframes no menu Get UI Kits.

Você também pode procurar kits de interface do usuário adicionais no site da Adobe clicando na opção Mais kits de interface do usuário no menu Obter kits de interface do usuário.

O site tem ótimas opções para escolher, incluindo este kit Movie Magic UI muito legal que se parece com uma tela de heads-up.

Agora que você sabe como baixar kits de interface do usuário, 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 interface do usuário em seu projeto, basta seguir estas etapas simples:

Etapa 1: amplie o 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: abra um novo projeto do Adobe XD no menu.

Etapa 4: aqui, cole o elemento da interface do usuário usando o atalho Ctrl+V.

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

Passo 5: Para remover guias, clique no ícone de cadeado no canto superior esquerdo e, em seguida, pressione delete. 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 interface do usuário 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.

Estarei criando um brinde básico para este artigo para o qual usarei um dos diálogos.

Passo 7: Cole o novo elemento no elemento anterior e alinhe-o conforme as guias.

Passo 8: Agora, para editar cada elemento no brinde, clique duas vezes na caixa de texto e digite o texto que deseja usar. Primeiro, vamos alterar o título do brinde.

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ê poderá alterar a cor e a opacidade do texto. Para alterar a opacidade, basta mover o controle deslizante na 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 seu 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 kits de interface do usuário no Adobe XD, tenho certeza de que começará a produzir designs incríveis rapidamente. Esses kits de interface do usuário são definitivamente bastante úteis e ajudam você a ir direto ao seu projeto sem se preocupar em projetar cada elemento da interface do usuário.

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.