Projete e crie protótipos com mais rapidez no Adobe XD usando estas dicas e truques.

Veja algumas dicas para ajudar você a usar o Adobe XD.

Dicas e truques gerais

  • Em vez de copiar e colar grupos de itens em seu design, considere o uso da ferramenta Repetição de grade (disponível no Inspetor de propriedades).
  • É possível duplicar uma forma selecionando-a, mantendo pressionada a tecla Option (no Mac) ou a tecla Alt (no Windows) e arrastando uma nova cópia dela.
  • Elementos podem ser bloqueados usando Objeto > Bloquear (ou Cmd + L) no Mac. Isso alterna o bloqueio, então, use o mesmo comando para desbloquear os elementos. No Windows, clique com o botão direito do mouse em um objeto e selecione Bloquear no menu de contexto.
  • Habilite a seleção direta, mantendo pressionada a tecla Cmd ou Ctrl. Isso permite selecionar objetos aninhados.
  • Mascare rapidamente, soltando uma imagem em uma forma: o preenchimento da forma torna-se a imagem.
  • Crie uma máscara editável importando uma imagem e desenhe uma forma sobre ela. Selecione ambas e escolha Objeto > Máscara com forma (no Mac), ou clique com o botão direito do mouse nos objetos e escolha Máscara com forma no menu de contexto. É possível editar a máscara ou a imagem mais tarde clicando duas vezes no grupo mascarado.

Desenho e texto

  • Você pode desativar as guias de alinhamento mantendo pressionada a tecla Cmd/Ctrl.
  • Clique duas vezes em qualquer ponto de ancoragem para alternar entre uma curva e um ângulo.
  • Pressione Opt/Alt enquanto arrasta uma alça da curva para torná-la independente. (Para torná-las dependentes de novo, clique duas vezes para retornar a um ângulo e clique duas vezes novamente).
  • É possível selecionar pontos de ancoragem ao desenhar usando a ferramenta Caneta.
  • Clique duas vezes para inserir o contexto de edição de um grupo (você pode adicionar elementos nesse contexto) ou simplesmente pressione Cmd/Ctrl e clique em um objeto dentro de um grupo para selecioná-lo.
  • Selecione um item de texto e crie um novo item para aplicar todos os estilos do primeiro item ao segundo.
  • Combinações de demarcadores (Adicionar/Subtrair/Manter interseção/Excluir sobreposição) não são destrutivas. Você pode ativá-las e desativá-las.

Importar conteúdo

  • Para importar conteúdo do Illustrator, selecione a forma vetorial no Illustrator, copie e cole no Adobe XD.
  • Para importar conteúdo de bitmap do Photoshop, selecione todos (Cmd + A ou Ctrl + A) em um bitmap ou camada de texto (ou converta primeiro uma camada ou grupo vetorial em um Objeto inteligente), copie-o e cole-o no Adobe XD. A camada colada será um bitmap. Também é possível copiar conteúdo do Photoshop fazendo uma seleção usando a ferramenta Letreiro. Em seguida, nos menus, escolha Editar > Copiar (para obter a seleção na camada atual) ou Editar > Copiar mesclado (para obter a seleção em todas as camadas de sua seleção).
  • Para importar conteúdo do Sketch, selecione uma ou mais camadas ou grupos e clique em Tornar exportável. Escolha SVG como o formato, e arraste e solte a camada do Sketch no Adobe XD. Isso fornecerá conteúdo do vetor editável no Adobe XD.
  • Para importar ativos (PNG, JPG, TIFF, GIF, SVGs), no Mac, use Arquivo > Importar ou arraste e solte ou copie e cole imagens do Finder no Adobe XD.
    No Windows, clique no menu Hambúrguer e clique em Importar, ou arraste e solte ou copie e cole imagens do Explorador de Arquivos.
    Você também pode copiar do navegador e colar no Adobe XD.

Controles do teclado

  • Ao ajustar o raio do canto, mantenha pressionada a tecla OPTION para restringir o ajuste a um único canto.
  • Para desabilitar temporariamente o ajuste ao mover ou redimensionar elementos, mantenha pressionada a tecla Cmd ou Ctrl.
  • Mantenha pressionada a tecla SHIFT para manter a proporção de um elemento enquanto o redimensiona.
  • Mantenha pressionada a tecla ALT ao desenhar uma forma para desenhar a partir do centro, em vez do padrão (que está no canto superior esquerdo).
  • Para alterar rapidamente a opacidade de um item selecionado, pressione as teclas numéricas a seguir. Aqui, 1 = 10%, 2 = 20% e assim por diante, 0 = 100%.
  • Ao ajustar uma forma ou um ponto de controle usando as teclas de setas, mantenha pressionada a tecla SHIFT para ajustar em 10 px.
  • Mantenha pressionada a BARRA DE ESPAÇO para ativar o modo manual. Clique e arraste para abranger toda a tela.

Pranchetas

  • Para selecionar uma prancheta, clique no título da prancheta, mantenha pressionada a tecla Cmd/Ctrl e clique no fundo, ou clique duas vezes no fundo.
  • Para selecionar uma prancheta vazia, clique no fundo da prancheta.
  • Para duplicar uma prancheta (e seu conteúdo), selecione a prancheta e pressione Cmd (no Mac) ou Alt (no Windows) enquanto arrasta para fazer uma cópia.
  • Para renomear uma prancheta, clique duas vezes em seu título.

Repetição de grade

  • Para ajustar o preenchimento entre itens repetidos em uma Repetição de grade, selecione a repetição de grade, passe o mouse sobre o espaço entre os elementos e arraste. Se você estiver editando um item dentro da repetição de grade, será necessário pressionar a tecla ESCAPE para sair do modo de edição.

Protótipos e visualização

  • Selecione qualquer objeto em uma prancheta (ou toda a prancheta) e arraste um fio para acionar uma interação entre pranchetas.
  • Afaste um fio de um destino para desfazer uma interação definida.
  • Use a transição Dissolver ao projetar para a Web.
  • Você pode ver todas as conexões entre suas pranchetas (exceto aquelas que são acionadas diretamente de pranchetas) pressionando Cmd + A (no Mac) ou Ctrl + A (no Windows) no modo de protótipo.
  • A janela de visualização exibe a prancheta que contém a seleção atual. Se não houver seleção, a janela de visualização será aberta com a prancheta inicial.
  • É possível gravar um vídeo na janela de visualização do seu protótipo interativo. Clique no ícone de gravação na barra de título para começar um vídeo.
  • Clicar no botão de gravação novamente OU pressionar ESC interrompe a gravação de um vídeo.

Compartilhamento

  • Para compartilhar, é necessário fazer logon com uma conta da Adobe no aplicativo de desktop da Adobe Creative Cloud ou em qualquer outro aplicativo da Adobe (como Photoshop, Illustrator e assim por diante).
    Adobe IDs, Enterprise IDs e Federated IDs são compatíveis.
  • Se você compartilhar seu arquivo de design sem primeiro adicionar interações, todas as suas pranchetas serão submetidas a upload e os usuários poderão navegar usando as teclas de setas do teclado. A ordem das suas pranchetas será a partir do canto superior esquerdo e se moverá para a direita.
  • Se o seu design incluir interações, somente as pranchetas conectadas à prancheta inicial serão submetidas a upload e compartilhadas.
  • A prancheta definida como sua prancheta inicial é a primeira que os usuários de prancheta veem quando exibem seu design compartilhado.
  • É possível alterar a prancheta inicial selecionando o ícone de prancheta inicial, ao lado da prancheta, no modo de protótipo. Esse ícone de prancheta inicial é exibido apenas para pranchetas selecionadas (ou o destino de um destino selecionado).
  • Ao exibir um protótipo em um navegador da Web para dispositivos móveis, você pode salvar um atalho para ele na tela inicial do dispositivo. Isso faz com que o protótipo se pareça mais com um aplicativo nativo ao apresentá-lo.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online