Saiba como dispor designs para telas diferentes nas pranchetas. Use as grades nas pranchetas para posicionar seus elementos de design.

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

Você pode criar pranchetas com uma barra de rolagem vertical.

Observação:

Esta versão do Adobe XD não oferece suporte à rolagem horizontal.

Para criar uma prancheta com rolagem:

Pranchetas criadas usando tamanhos predefinidos: se seu conteúdo exceder o comprimento da prancheta, arraste a parte inferior da prancheta para o comprimento desejado e continue o design. Uma linha pontilhada na sua prancheta indica o começo do conteúdo com rolagem.

Para desabilitar a rolagem, selecione a prancheta e selecione Nenhuma na seção Rolagem do Inspetor de propriedades.

Pranchetas com tamanhos personalizados: para criar uma prancheta personalizada com rolagem, selecione a prancheta e, em seguida, selecione Vertical na seção Rolagem do Inspetor de propriedades.

Além disso, especifique a altura da janela, que é o tamanho da janela na qual a prancheta é exibida. A altura da janela deve ser menor do que a altura da prancheta para a rolagem ser exibida. Você também pode especificar a altura da janela movendo a cabeça da linha pontilhada na tela para a posição desejada.

Editar a altura da janela
Editar a altura da janela

Para desabilitar a rolagem, selecione Nenhuma na seção Rolagem do Inspetor de propriedades.

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 copiar. 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-o 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 e 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 tiver 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

 Ctrl+Clique (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, depois selecione Exibir > Zoom para selecionar ou ⌘ 3 no Mac. No Windows, use o atalho de teclado Ctrl + 3.

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 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 de layout.
  • No Mac ou no Windows: no Inspetor de propriedade, selecione um tipo de grade na lista suspensa Grade e selecione a caixa de seleção ao lado.
  • 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, cancele a seleção da caixa 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. Assim, por exemplo, uma prancheta de telefone tem menos colunas e mais estreitas do que as grades de layout padrão de um tablet.

Se 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 forma uniforme, clique no ícone margens direita/esquerda vinculadas e edite o valor da margem.

Para ajustar as margens de todos os quatro lados individualmente, clique nas margens diferentes no ícone de cada margem 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.

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