Saiba como organizar interfaces de usuário de maneira eficaz e precisa. Use as grades e as guias para agilizar a criação de seus designs e deixá-los mais precisos.

As pranchetas geralmente representam cada uma das telas que você deseja projetar com parte de seu site ou aplicativo para dispositivo móvel.

Você pode ter muitas pranchetas em um único arquivo do Adobe XD. Por exemplo, você pode escolher definir pranchetas para experiências móveis, em tablets e online em desktops usando um único arquivo. Como alternativa, você também pode escolher criar o design de várias telas de um fluxo de usuário para a mesma plataforma em um arquivo.

Escolha um tamanho predefinido para a prancheta no começo do seu projeto na tela inicial. Se não quiser usar as predefinições disponíveis, crie uma prancheta com um tamanho personalizado. Assim que seu novo arquivo com o tamanho escolhido da prancheta for criado, adicione quantas pranchetas quiser usando a ferramenta Prancheta.

Várias pranchetas para várias telas em um único arquivo do XD
Várias pranchetas para várias telas em um único arquivo do XD

Para exibir todas as pranchetas do seu projeto, abra o painel Camadas (clique em  na barra de ferramentas). 

Criar pranchetas

Ao criar um projeto ou arquivo pela primeira vez, selecione um dos tamanhos predefinidos para a prancheta na tela inicial. Para especificar um tamanho personalizado, selecione Personalizado e especifique o tamanho em pixels.

Para adicionar mais pranchetas a um arquivo existente, clique na ferramenta Prancheta. Depois, clique em uma das predefinições no painel à direita e clique no local onde deseja colocar a prancheta.

Para definir uma prancheta de tamanho personalizado, selecione a ferramenta Prancheta e desenhe a prancheta desejada diretamente na área de trabalho.

Criar pranchetas com rolagem

Às vezes, quando você cria um design no XD, a prancheta não é longa o suficiente para enquadrar todo o conteúdo. Para acomodar dispositivos de diferentes tamanhos, você pode alongar a prancheta e personalizá-la de acordo com as suas necessidades de design, permitindo a rolagem vertical da tela.

A rolagem vertical ajuda a simular efeitos de rolagem na criação de listas suspensas roláveis ou sites, no entanto, não há suporte para rolagem horizontal no XD.  Para obter mais informações, consulte Criar pranchetas com rolagem.

Selecionar pranchetas

Para selecionar uma prancheta, clique na ferramenta Seleção e execute uma das seguintes ações:

  • Clique no título da prancheta ou 
  • Clique duas vezes no fundo da prancheta

Copiar e redimensionar pranchetas

No Mac, segure a tecla Option e arraste uma prancheta para copiá-la. No Windows, segure a tecla Alt e arraste uma prancheta.

Como alternativa, clique com o botão direito do mouse no painel Camadas e selecione Copiar. Depois, clique com o botão direito do mouse novamente e selecione Copiar.

Para redimensionar uma prancheta, clique nela e use as alças circulares exibidas nas bordas.

Reorganizar pranchetas

Clique no título da prancheta e arraste-a para o novo local. 

Observação:

Você pode arrastar as pranchetas no painel Camadas e alterar sua ordem na lista Pranchetas. Mas isso só altera a ordem de empilhamento das pranchetas, não sua posição (coordenadas X e Y).

Renomear pranchetas

Por padrão, as pranchetas são nomeadas de acordo com a predefinição selecionada e são numeradas sequencialmente. Para especificar um nome personalizado para suas pranchetas, clique duas vezes no título da prancheta e digite o novo nome da prancheta.

Você também pode renomear pranchetas no painel Camadas. Clique duas vezes ou clique com o botão direito do mouse no título da prancheta e selecione Renomear

Alinhar e distribuir pranchetas

Marque várias pranchetas e clique nas opções Alinhar e Distribuir no Inspetor de propriedades.

Alinhar e distribuir várias pranchetas
Alinhar e distribuir várias pranchetas

Copiar e mover elementos entre as pranchetas

Você pode mover livremente qualquer elemento de uma prancheta para outra. Basta arrastar o elemento e soltá-lo na prancheta desejada.

Para copiar um elemento, use Command+C (no Mac) ou Ctrl+C (no Windows). Clique na prancheta na qual você deseja colar o elemento e use Command+V (no Mac) ou Ctrl+V (no Windows).

Você também pode arrastar um elemento enquanto segura a tecla Option (no Mac) ou a tecla Alt (no Windows) para duplicar elementos.

Você também pode usar a Posição fixa para fixar a posição de elementos, como cabeçalhos e rodapés em uma prancheta com rolagem ou elementos fixos flutuantes. O ícone de pino no modo de Protótipo indica os elementos fixos, e você pode colocá-los em camadas acima ou abaixo de outros objetos de design. 

 

Observação:

Se houver uma coleção de objetos que não se encaixam na prancheta quando colados, eles serão colados no centro da prancheta de destino.

Você pode usar a área cinza ao redor das pranchetas como área de trabalho. É possível colocar qualquer elemento na área de trabalho e copiá-lo e movê-lo para as pranchetas quando necessário. 

Observação:

Quando exportar todas as pranchetas, os elementos na área de trabalho que não fizerem parte de nenhuma prancheta não serão exportados. Se um elemento é colocado parcialmente em uma prancheta, somente a parte do elemento na prancheta é exportada.

Cortar, copiar, mover, redimensionar, ampliar ou reduzir o zoom e excluir várias pranchetas simultaneamente

Marque várias pranchetas para editá-las simultaneamente. 

Várias pranchetas selecionadas ao mesmo tempo
Várias pranchetas selecionadas ao mesmo tempo

Use a ferramenta Seleção para arrastar uma marca ao redor das pranchetas que deseja selecionar.

Ao selecionar várias pranchetas, verifique se você selecionou as pranchetas completamente. Se uma prancheta for selecionada parcialmente, os objetos contidos nela serão selecionados e não a prancheta em si.

Uma caixa delimitadora é exibida ao redor das pranchetas selecionadas. 

Redimensionar

Arraste as alças na caixa delimitadora para redimensionar as pranchetas selecionadas.

Cortar, copiar e colar

 Clique com a tecla Ctrl pressionada (no Mac) ou clique com o botão direito do mouse (no Windows) para abrir o menu de contexto que permite cortar, copiar e colar todas as pranchetas selecionadas.

Excluir

Pressione a tecla Delete no teclado ou use Ctrl-clique (no Mac) ou clique com o botão direito do mouse (no Windows) para abrir o menu e excluir as pranchetas selecionadas. Como alternativa, selecione uma ou mais pranchetas no painel Camadas, clique com o botão direito do mouse e selecione Excluir.

Zoom Entre no modo Zoom clicando no ícone Zoom na barra de ferramentas ou pressionando a tecla Z no teclado. No modo Zoom, você pode:

  • Ampliar o zoom: clique em qualquer lugar na tela do XD ou clique na prancheta desejada. Ou selecione uma área para ampliar o zoom.
  • Reduzir o Zoom: Option-clique (no Mac) ou Alt-clique (no Windows).

Para ampliar ou reduzir o zoom rapidamente sem entrar no modo Zoom, é possível ativar o modo Zoom temporariamente:

  • Ampliar o zoom: pressione Espaço+Cmd (no Mac) ou Espaço+Ctrl (no Windows) e, depois, clique ou selecione uma área na prancheta
  • Reduzir o Zoom: pressione Espaço+Cmd+Opt

Para ampliar o zoom em objetos específicos na prancheta, selecione os objetos e depois selecione Exibir > Zoom para ampliar a seleção ou ⌘ 3 no Mac. No Windows, use o atalho de teclado Ctrl+3.

Trabalhar com guias da prancheta personalizadas

A opção Guias da prancheta personalizadas ajuda a posicionar e projetar objetos na tela com precisão ajustando-os às guias em várias pranchetas. Você pode criar guias, ajustar a posição, copiar e colar guias em várias pranchetas, removê-las, bloqueá-las ou ocultá-las.

Guias da prancheta personalizadas
Guias da prancheta personalizadas

Criar guia: para criar uma guia vertical, passe o mouse sobre a borda esquerda da prancheta para exibir uma seta dupla. Arraste o ícone de seta até a prancheta para criar uma guia e solte-a para colocar a guia na prancheta. Para criar uma guia horizontal, arraste e solte o ícone de seta da borda superior da prancheta. Durante a criação de uma guia, a distância entre a guia e as bordas da prancheta ou outras guias e a posição exata da guia na tela serão exibidas.

Durante a criação, as guias são ajustadas aos objetos selecionados ou objetos de nível superior desenhados na tela. Para desativar temporariamente o comportamento de ajuste, pressione Cmd (no Mac) ou Ctrl (no Windows).

Pressione a tecla Shift durante a criação da guia para posicioná-la em incrementos de 10 px na tela.

Copiar e colar guias: para copiar guias de uma prancheta, selecione a prancheta e clique na opção Exibir na barra de menu superior. Clique na opção Guias na lista suspensa e selecione Copiar guias. Todas as guias da prancheta selecionada são copiadas.

Para colar as guias, selecione a prancheta na qual você deseja que as guias sejam coladas. Clique em Cmd+v (no Mac) ou Ctrl+v (no Windows) para colar as guias. Você também pode clicar na opção Exibir na barra de menu superior (no Mac) ou clicar com o botão direito do mouse na prancheta (no Windows), selecionar a opção Guias na lista suspensa e clicar em Colar guias.

A duplicação de uma prancheta também duplica as guias criadas na prancheta.

Copiar e colar guias
Copiar e colar guias

Limpar guias: para excluir uma guia, clique e arraste a guia para fora da prancheta. Para excluir todas as guias de uma prancheta, selecione a prancheta e clique na opção Exibir na barra de menu superior (no Mac) ou clique com o botão direito do mouse na prancheta (no Windows). Clique na opção Guias na lista suspensa e selecione Limpar guias.

Ocultar guias: a opção Ocultar todas as guias desativa a visibilidade das guias em todas as pranchetas e desabilita a criação de guias. Selecione a prancheta e pressione Cmd+; (no Mac) e Ctrl+; (no Windows) para ocultar as guias. Você também pode clicar na opção Exibir na barra de menu superior (no Mac) ou clicar com o botão direito do mouse na prancheta (no Windows), selecionar a opção Guias na lista suspensa e clicar em Ocultar todas as guias.    

Bloquear guias: a opção Bloquear todas as guias permite bloquear as guias em todas as pranchetas. Enquanto as guias estão bloqueadas, você pode criar guias e ajustar objetos às guias, mas não pode alterar a posição delas na tela. Para bloquear as guias, pressione Shift+Cmd+; (no Mac) e Shift+Ctrl+; (no Windows). Você também pode clicar na opção Exibir na barra de menu superior (no Mac) ou clicar com o botão direito do mouse na prancheta (no Windows), selecionar a opção Guias na lista suspensa e clicar em Bloquear todas as guias.

Posicionar elementos nas pranchetas usando grades

O XD oferece dois tipos de opções de grade: grades quadriculadas e grades de layout. 

Grades quadriculadas

As grades quadriculadas fornecem guias para alinhar objetos e texto. Quando você desenha, os objetos se ajustam automaticamente à grade quando as bordas do objeto estão dentro da zona de ajuste da grade.

As grades quadriculadas também dão uma noção de medida quando você organiza objetos ou texto nas pranchetas. 

Grades quadriculadas no XD
Grades quadriculadas no XD

Grades de layout

Você pode usar grades de layout para definir colunas no XD. Uma grade de layout ajuda a definir a estrutura subjacente do seu design e como cada componente nela responde a pontos de parada diferentes (para designs responsivos).

Depois que uma grade de layout é aplicada a uma prancheta, você pode adicionar elementos a ela. No entanto, se a prancheta for redimensionada ou a grade for ajustada, os itens fixados não serão redimensionados ou refluídos.

Grades de layout no XD
Grades de layout no XD

Mostrar ou ocultar grades

Selecione uma prancheta e siga um destes procedimentos:

  • No Mac: escolha Exibir > Mostrar grade de layout ou Exibir > Mostrar grade quadriculada.
  • No Mac ou no Windows: no Inspetor de propriedade, selecione um tipo de grade na lista suspensa Grade e marque a caixa de seleção ao lado da opção.
  • Atalhos de teclado: 
    • Mostrar grade quadriculada: 
      • No Mac: ⌘ '  
      • No Windows: Ctrl+'
    • Mostrar grade de layout:
      • No Mac - ⇧ ⌘ '
      • No Windows: Ctrl+Tab
Definir grades quadriculadas ou de layout no XD
Definir grades quadriculadas ou de layout no XD

Para ocultar a grade, desmarque a caixa de seleção de Grade.

Definir preferências da grade quadriculada

As opções de grade quadriculada permitem alterar o espaçamento e a cor. Salve um conjunto de opções de grade como padrão para usá-lo com rapidez no futuro. Para obter mais informações, consulte Preferências de grade padrão ou grade de layout.

Observação:

O XD usa um pixel virtual para a maioria de suas medidas e tamanhos de fonte, que é a mesma unidade de medida de um pixel CSS, ou medidas no iOS. O pixel virtual é aproximadamente igual a um pixel físico em um monitor de 72 dpi. No momento, não é possível alterar a unidade de medida no XD.

Alterar o tamanho da grade

Para alterar o tamanho da grade, edite o valor do espaçamento no Inspetor de propriedades. Quanto menor for o número, maior será a densidade da grade. 

Ajustar objetos em uma grade quadriculada

Para ajustar um objeto a uma grade, arraste o objeto em direção à grade até que uma das bordas do objeto esteja dentro da zona de ajuste da grade.

Ajustar à grade enquanto os objetos são desenhados
Ajustar à grade enquanto os objetos são desenhados

Para impedir o ajuste à grade, pressione a tecla Cmd (no Mac) ou a tecla Ctrl (no Windows) enquanto você arrasta o mouse e desenha um objeto.

Definir preferências da grade de layout

Quando você habilita uma grade de layout, o XD exibe de forma inteligente colunas que se ajustam à natureza da prancheta. Por exemplo, uma prancheta de telefone tem menos colunas e mais estreitas do que as grades de layout padrão de um tablet.

Se você redimensionar uma prancheta, as larguras das colunas na grade de layout serão alteradas para que se ajustem ao novo tamanho da prancheta. Os objetos na prancheta permanecem os mesmos e não ficam relacionados às colunas.

Comportamento da grade de layout quando tamanho da prancheta é alterado
Comportamento da grade de layout quando tamanho da prancheta é alterado

Você pode definir suas preferências para número de colunas, largura das colunas, cor da coluna, largura da medianiz e tamanho das margens no Inspetor de propriedades.

Depois de alterar a grade de layout, você pode tornar suas alterações padrão ou reverter para a grade de layout padrão no XD. Para obter mais informações, consulte Preferências de grade padrão ou grade de layout.

Alterar as propriedades da coluna e da medianiz

Você pode alterar as propriedades da coluna de layout de acordo com suas necessidades.

Para definir o número de colunas em uma grade de layout, edite o valor Coluna no Inspetor de propriedades. Ao alterar o número de colunas, o XD recalcula automaticamente a largura das colunas. 

O espaço entre as colunas em uma prancheta é chamado de largura da medianiz. Defina a largura da medianiz editando o valor padrão Largura da medianiz

Para alterar a largura das colunas, edite o valor padrão Largura da coluna.

Definir grades de layout no XD
Definir grades de layout no XD

Alterar margens

Você pode alterar o tamanho das margens ao definir sua grade de layout. 

Para ajustar as margens direita e esquerda de maneira uniforme, clique no ícone de margens direita/esquerda vinculadas e edite o valor da margem.

Para ajustar as margens de todos os quatro lados individualmente, clique no ícone de margens diferentes para cada lado e, depois, edite os valores de cada margem.

Editar o tamanho das margens esquerda e direita de forma uniforme
Editar o tamanho das margens esquerda e direita de forma uniforme
Editar o tamanho das margens individualmente
Editar o tamanho das margens individualmente

Alterar a cor da grade quadriculada ou de layout

Para alterar a cor de uma grade quadriculada ou de layout:

  1. Clique na caixa ao lado de Tamanho da grade para grades quadriculadas e Colunas para grades de layout. 

    O seletor de cores é exibido.

    Editar na grade
    Editar na grade
  2. Você pode:

    • Especificar os valores HSBA ou hexadecimais nos campos HSBA ou hexadecimais se você souber os valores exatos.
    • Ajustar a cor usando o campo de cor e o controle deslizante de cores. Quando isso é feito, os valores HSBA numéricos e hexadecimais são ajustados de acordo.  
    • Definir a opacidade do preenchimento usando o controle deslizante de cores ou digitando um valor em porcentagem. Se definir o alpha como 0, a grade de layout será alterada para a exibição de contorno.
    • Usar o conta-gotas para selecionar uma cor em uma prancheta.

    Observação:

    O Adobe XD também é compatível com abreviação de códigos hexadecimais. Por exemplo, se você digitar 0 e pressionar Return, o XD exibirá automaticamente a cor com o código #000000. Da mesma forma, você pode digitar 0A para #0A0A0A e 0AF para #00AAFF.

    A cor da grade muda conforme você modifica as opções na caixa de diálogo Cores.

  3. Depois que você tiver escolhido uma cor, clique no ícone + na parte inferior do seletor de cores para salvá-la e facilitar o acesso.

Preferências padrão de grade quadriculada ou grade de layout

Para voltar à aparência padrão da grade quadriculada ou de layout, clique em Usar padrão na seção Grade do Inspetor de propriedades.

Defina suas preferências personalizadas de grade como padrão clicando em Tornar padrão. Essa opção define a opção de grade padrão para sua conta. Qualquer novo arquivo aberto com o XD seguirá esse novo padrão.

Ajustar e Redimensionar deslocamento

Você pode combinar esses atalhos de teclado com as teclas de seta para controlar com precisão a posição e o tamanho dos elementos da interface de usuário em incrementos de tamanho da grade:

  • Shift+Setas: move a seleção em incrementos de 10 px.
  • Cmd+Setas: redimensiona a seleção em incrementos de 1 px (o elemento é fixado no canto superior esquerdo).
  • Cmd+Shift+Setas (macOS) e Alt+Shift+Setas (Windows): redimensiona a seleção em incrementos de 10 px (o elemento é fixado no canto superior esquerdo).

Quando a grade quadriculada está habilitada:

  • Shift+Setas: move a seleção para ajustar primeiro à grade e depois aumenta o tamanho da grade.
  • Cmd+Shift+Setas (macOS) e Alt+Shift+Setas (Windows): redimensiona a seleção para ajustar à grade e, em seguida, redimensiona a seleção em incrementos de tamanho de grade (o elemento é fixado no canto superior esquerdo).

 

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