Saiba como usar grades quadriculadas no Adobe XD CC para posicionar e alinhar imagens ou elementos com precisão.

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 também dão uma noção de medida quando você organiza objetos ou texto nas pranchetas.

No Adobe XD CC, você pode optar por mostrar ou ocultar as grades. Basta selecionar uma prancheta e marcar ou desmarcar a caixa de seleção no Inspetor de propriedades. As opções de grade também 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.

Observação:

O Adobe 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 (e, incidentalmente, um ponto). No momento, não é possível alterar a unidade de medida no Adobe XD.

Mostrar ou ocultar uma grade

Selecione uma prancheta e siga um destes procedimentos:

  • No Mac: escolha Exibir> Mostrar grade da prancheta ou use o atalho de teclado ⌘ '
  • No Mac ou no Windows: no Inspetor de propriedades, marque a caixa de seleção Grade.
Mostrar grade na prancheta
Mostrar grade na prancheta

Definir preferências de grade

Você pode personalizar a cor e a densidade da grade usando o painel Grade no Inspetor de propriedades. 

Alterar cor da grade

Para alterar a cor da grade:

  1. Clique na caixa ao lado de Quadrado.

    O seletor de cores é exibido.

    Use o seletor de cores para escolher as cores.
    Seletor de cores
  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.

    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 Adobe XD exibirá automaticamente a cor com o código #000000. Da mesma forma, você pode digitar OA para #OAOAOA e OAF para #OOAAFF.

    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. 

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. 

Definir preferências padrão da grade

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

Para definir as preferências personalizadas da grade como padrão, clique em Tornar padrão. Isso define a opção padrão da grade para o arquivo.

Ajustar objetos à grade

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.

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