Como usar os kits da interface do usuário em adobe xd

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

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

Também na

Como Lote Converter Fotos com o Adobe Bridge

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

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

Passo 1: Clique no botão do menu hamburger 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 três das opções disponíveis.

Para este artigo, escolho 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 web oficial da qual você pode baixar os kits de interface do usuário gratuitamente.

Etapa 3: Localize o kit da interface do usuário do Adobe XD na página da Web a seguir e faça o download no seu sistema.

Passo 4: Agora abra o arquivo baixado no Adobe XD e você será recebido 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 ampliar / reduzir para ver todas as pranchetas individuais.

Se você deseja fazer o download de Wireframes, clique 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 de interface do usuário muito legal que se parece com um display 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: Aproxime o elemento da interface do usuário que você 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 do Adobe XD no menu.

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

Para este artigo, usarei o elemento Móvel escuro 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.

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

Passo 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 utilizarei um dos diálogos.

Etapa 7: Cole o novo elemento no elemento anterior e, em seguida, 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 do brinde.

Em seguida, altere o conteúdo do corpo clicando duas vezes na caixa de texto e digitando o que você 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 sob a opção Opacidade na barra de ferramentas à 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 da caixa de diálogo, o que é ótimo se você optar 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.

Também na

#design gráfico

Clique aqui para ver nossa página de artigos de design gráfico

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 em pouco tempo. 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 simples tutorial passo-a-passo.