Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.
Última atualização em
17 de fev de 2023
- Guia do usuário do Adobe XD
- Introdução
- Novidades no Adobe XD
- Perguntas frequentes
- Criar designs e protótipos e compartilhar com o Adobe XD
- Gerenciamento de cores
- Requisitos de sistema
- Noções básicas sobre a área de trabalho
- Alterar o idioma do aplicativo no Adobe XD
- Acessar kits de design de interface
- Acessibilidade no Adobe XD
- Atalhos de teclado
- Dicas e truques
- Design
- Pranchetas, guias e camadas
- Formas, objetos e caminho
- Selecionar, redimensionar e girar objetos
- Mover, alinhar, distribuir e organizar objetos
- Agrupar, bloquear, duplicar, copiar e virar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Criar elementos de repetição
- Criar designs de perspectiva com transformações em 3D
- Editar objetos usando operações boolianas
- Texto e fontes
- Componentes e estados
- Mascaramento e efeitos
- Layout
- Vídeos e animações Lottie
- Protótipo
- Criar protótipos interativos
- Animar protótipos
- Propriedades de objeto compatíveis com a Animação automática
- Criar protótipos com teclados e controles
- Criar protótipos usando reprodução e comandos de voz
- Criar transições temporizadas
- Adicionar sobreposições
- Criar protótipos de voz
- Criar links de âncora
- Criar hiperlinks
- Visualizar designs e protótipos
- Compartilhar, exportar e analisar
- Compartilhar pranchetas selecionadas
- Compartilhar designs e protótipos
- Definir permissões de acesso para links
- Trabalhar com protótipos
- Revisar protótipos
- Trabalhar com especificações de design
- Compartilhar especificações de design
- Inspecionar especificações de design
- Navegar em especificações de design
- Revisar e comentar especificações de design
- Exportar ativos de design
- Exportar e baixar ativos de especificações de design
- Compartilhamento em grupo para corporações
- Fazer backup ou transferir ativos do XD
- Sistemas de design
- Sistemas de design com as Bibliotecas da Creative Cloud
- Trabalhar com ativos de documento no Adobe XD
- Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
- Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
- Trabalhar com tokens de design
- Usar ativos das Bibliotecas da Creative Cloud
- Documentos na nuvem
- Integrações e plug-ins
- Trabalhar com ativos externos
- Trabalhar com ativos de design do Photoshop
- Copiar e colar ativos do Photoshop
- Importar ou abrir designs do Photoshop
- Trabalhar com ativos do Illustrator no Adobe XD
- Abrir ou importar designs do Illustrator
- Copiar vetores do Illustrator para o XD
- Plug-ins para o Adobe XD
- Criar e gerenciar plug-ins
- Integração do JIRA com o XD
- Plug-in do Slack para XD
- Plug-in do Zoom para XD
- Publicar o design do XD no Behance
- XD para iOS e Android
- Solução de problemas
- Problemas conhecidos e corrigidos
- Instalação e atualizações
- Inicialização e falha
- Documentos na nuvem e bibliotecas da Creative Cloud
- Prototipagem, publicação e revisão
- Não é possível gravar interações de protótipo no macOS Catalina
- Problemas com fluxos de trabalho de publicação
- Links publicados não são exibidos nos navegadores
- Protótipos não são renderizados corretamente nos navegadores
- Painel de comentários aparecendo repentinamente em links compartilhados
- Não é possível publicar bibliotecas
- Importação, exportação e trabalho em outros aplicativos
Procurando informações sobre como alinhar ativos de design usando guias e grades? Você está no lugar certo.
Oi, eu sou a Jeanee, uma designer gráfica que está liderando um projeto de design de UX no XD com várias pranchetas e objetos.
- Ela está procurando recursos para definir a posição e o layout de objetos usando guias.
- Ela precisa de ajuda para alinhar e definir a estrutura de objetos no projeto de design usando guias.
Isso soa familiar? Se você tem essas mesmas dificuldades, continue lendo para saber como criar e usar guias e grades nas suas pranchetas.
Antes de continuar
Criar e gerenciar guias
Ao inserir suas pranchetas na tela de design, uma área é adicionada acima e à esquerda delas, na qual você pode arrastar guias. Você pode centralizá-las na horizontal ou na vertical, copiá-las e colá-las em várias pranchetas, removê-las e ativar/desativar sua visibilidade.
Continue lendo para saber como criar e gerenciar guias.
Criar guias
Deseja alinhar e posicionar objetos em suas pranchetas de cima para baixo? Use guias verticais. Se você quiser alinhar e posicionar objetos da esquerda para a direita, use guias horizontais.
Guias verticais
Para criar uma guia vertical, passe o mouse sobre a borda esquerda da prancheta até o ícone 
aparecer. Clique e segure o ícone e arraste-o para a posição desejada.
Guias horizontais
Para criar uma guia horizontal, passe o mouse sobre a borda superior da prancheta até o ícone 
aparecer. Arraste-o e solte-o na posição desejada.
Copiar e colar guias
Agora que você criou guias, pode usar a opção Copiar/Colar guias para duplicá-las rapidamente.
Copiar guias
Para copiar guias de uma prancheta, selecione a prancheta e clique em Exibir > Guias > Copiar guias.
Colar guias
Para colar as guias copiadas, clique em Exibir ou clique com o botão direito na prancheta > Guias > Colar guias.
Remover guias
Você pode remover uma ou mais guias ao mesmo tempo.
Para remover uma guia, clique e arraste a guia para fora da prancheta.
Para remover várias guias de uma prancheta, selecione a prancheta e clique na opção Exibir ou clique com o botão direito na prancheta. Selecione Guias > Apagar guias.
Ocultar e bloquear guias
Deseja ocultar temporariamente guias e exibi-las quando necessário? Use a opção Ocultar todas as guias.
Você também pode bloquear guias em todas as pranchetas para impedir que elas sejam movidas ou ajustadas acidentalmente.
Para ocultar e bloquear guias no macOS e Windows:
Ocultar guias
- Clique na opção Exibir > Ocultar todas as guias na barra de menus superior. Você também pode pressionar Command + ; para ocultar todas as guias no macOS.
- Clique com o botão direito na prancheta e selecione Guias > Ocultar todas as guias. Você também pode pressionar Ctrl + ; para ocultar guias no Windows.
Bloquear guias
- Clique na opção Exibir > Bloquear todas as guias na barra de menus superior. Você também pode pressionar Command + Shift + ; para bloquear todas as guias no macOS.
- Clique com o botão direito na prancheta e selecione Guias > Bloquear todas as guias. Você também pode pressionar Ctrl + Shift + ; para bloquear todas as guias no Windows.
Ajustar e alinhar objetos usando guias inteligentes
Agora que você aprendeu o básico sobre como criar e gerenciar guias, pode usar as guias inteligentes para ajustar temporariamente as guias ao criar ou manipular objetos ou pranchetas.
As guias inteligentes estão ativadas por padrão. Ao mover um objeto ou prancheta, as guias inteligentes permitem alinhar, editar e transformar objetos ou pranchetas em relação a outros objetos, pranchetas ou os dois por meio do alinhamento ajustado dos elementos.
Posicionar objetos usando grades
Agora que você sabe o básico sobre guias no XD, vá em frente e aprenda a definir a estrutura do design e alinhar objetos em uma prancheta usando as grades de layout ou quadriculadas.
Para adicionar grades de layout ou quadriculadas, selecione uma ou mais pranchetas. Acesse a seção Grade no Inspetor de propriedades e selecione Layout ou Quadriculada.
Grades de layout
Grades de layout são grades divididas em colunas que podem ser úteis ao alinhar objetos de design ou criar conteúdo para tamanhos de tela diferentes. Você pode ajustá-las com rapidez e facilidade de acordo com suas necessidades.
Grades quadriculadas
Grades quadriculadas têm linhas horizontais e verticais para garantir o dimensionamento e o alinhamento precisos de objetos ao criar ícones ou aplicativos para dispositivos móveis.
Definir preferências de grade
Depois de adicionar grades de layout e quadriculadas às pranchetas, você pode personalizar as opções de exibição das grades ajustando as preferências na seção Grade do Inspetor de propriedades. Continue lendo para saber como alterar o tamanho, o número de colunas, as propriedades da medianiz e as margens das grades.
Com base nas suas necessidades de design, você pode alterar o tamanho das grades quadriculadas.
O tamanho da grade é a distância entre as linhas de grade na grade quadriculada. Para editar o valor do tamanho da grade, insira o número desejado no campo Tamanho do quadrado do Inspetor de propriedades.
Com uma grade de layout aplicada a uma prancheta, você pode definir o número de colunas, a largura da coluna, as propriedades da medianiz e os tamanhos das margens na seção Grade do Inspetor de propriedades.
Alterar o número de colunas
Insira o valor no campo Colunas. Em designs da Web, geralmente são usadas grades com 12 ou 16 colunas.
Alterar a largura da coluna e as propriedades da medianiz
Para alterar a largura das colunas, insira o valor no campo Largura da coluna. Para definir sua própria largura da medianiz, edite o valor padrão no campo Largura da medianiz.
Agora que você modificou o número de colunas, a largura da medianiz e a largura da coluna, saiba como ajustar as margens da prancheta. As margens são a distância entre a grade de layout e a borda da prancheta. Continue lendo para saber como ajustar margens em todos os lados.
Alterar as margens esquerda ou direita vinculadas
Para ajustar a margem vinculada à esquerda ou à direita, clique no ícone 
e edite o valor.
Alterar a margem de cada lado
Para ajustar as margens esquerda, direita, superior e inferior individualmente, clique no ícone 
e insira os valores desejados.
Faça mais com grades
Agora que você sabe como definir preferências para suas grades, continue lendo para saber como adicionar cores às grades e controlar sua visibilidade.
Adicionar cores
Deseja modificar a aparência das grades? Use o seletor de cores no Inspetor de propriedades para adicionar e alterar a cor da grade.
A. Campo de cores B. Controle deslizante de cores C. Conta-gotas
Clique na caixa ao lado de Tamanho do quadrado para grades quadriculadas e Colunas para grades de layout.
No seletor de cores, você pode:
- Ajustar a cor usando o campo de cor e o controle deslizante de cores.
- Usar a ferramenta Conta-gotas para selecionar uma cor em uma prancheta.
- Definir a opacidade do preenchimento usando o controle deslizante de cores ou digitando um valor em porcentagem. Se definir o valor como 0, a grade de layout será alterada para a exibição de contorno.
Ocultar e mostrar grades
Você pode controlar a visibilidade das grades de layout e quadriculadas usando a opção Ocultar grade de layout/quadriculada ou Mostrar grade de layout/quadriculada.
Ocultar grade de layout
- Selecione Exibir > Ocultar grade de layout. Você também pode pressionar Command + Shift + ' para ocultar grades de layout no macOS.
- No Inspetor de propriedades, selecione um tipo de grade na lista suspensa Grade e marque a caixa de seleção ao lado da lista suspensa. Você também pode pressionar Ctrl + Shift + " para ocultar grades de layout no Windows.
Mostrar grade quadriculada
- Selecione Exibir > Mostrar grade quadriculada. Você também pode pressionar Command + ' para mostrar grades quadriculadas no macOS.
- No Inspetor de propriedades, selecione um tipo de grade na lista suspensa Grade e marque a caixa de seleção ao lado da lista suspensa. Você também pode pressionar Ctrl + " para mostrar grades quadriculadas no Windows.
Vídeo: Como faço para adicionar guias e grades de layout?
“Ao trabalhar em projetos de design, utilize guias para ajudar você na hora de alinhar objetos ou garantir que o espaço entre os elementos esteja correto”, recomenda Howard Pinsky, evangelista sênior do XD.
Dicas e truques
- Para ajustar um objeto a uma grade de layout ou quadriculada, arraste o objeto em direção à grade até que uma das bordas do objeto esteja dentro da zona de ajuste da grade.
- As guias são ajustadas aos objetos selecionados ou objetos de nível superior desenhados na tela. Para desativar o comportamento de ajuste, pressione ⌘ (no macOS) ou Ctrl (no Windows).
- Para posicionar a guia em incrementos de 10 px na tela, pressione Shift.
- Para voltar à aparência padrão da grade quadriculada ou de layout, clique na opção Usar padrão na seção Grade do Inspetor de propriedades.
O que vem por aí?
Agora você sabe como posicionar e alinhar objetos em pranchetas usando guias e grades. Continue em frente e saiba mais sobre como usar repetições de grade para criar objetos com elementos repetíveis.
Tem alguma dúvida ou sugestão?
Adobe MAX:
a conferência da criatividade
14 a 16 de outubro, Miami Beach e online
Adobe MAX
A conferência da criatividade
14 a 16 de outubro, Miami Beach e online