Guia do Usuário Cancelar

Trabalhar com ferramentas de desenho e texto

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
    14. Fazer backup ou transferir ativos do XD
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

Saiba como criar imagens usando as ferramentas Forma e Caneta no Adobe XD.

Ferramentas de desenho

Você pode desenhar rapidamente ícones e imagens simples no Adobe XD usando as ferramentas de desenho na barra de ferramentas esquerda: as ferramentas Retângulo, Elipse, Polígono, Linha e Caneta. A ferramenta de seleção ajuda a selecionar uma linha específica, formas ou objetos para editá-los.

Você pode combinar estas formas de diferentes maneiras para criar formas e objetos compostos ou mascarar partes da forma. Para obter mais informações sobre técnicas de mascaramento e combinação, consulte Editar objetos usando operações booleanas e técnicas de mascaramento.

Desenhar retângulos e quadrados

  1. Selecione a ferramenta Retângulo .

  2. Execute uma das seguintes ações:

    • Para desenhar um retângulo, arraste diagonalmente até o retângulo atingir o tamanho desejado.
    • Para desenhar um quadrado, mantenha pressionada a tecla Shift ao arrastar diagonalmente, até o quadrado atingir o tamanho desejado.
  3. Para desenhar um retângulo arredondado, desenhe um retângulo e, depois, clique nele para ver as alças de edição do raio. Clique em qualquer alça e arraste-a para o centro do retângulo. Você também pode usar o Inspetor de propriedades para inserir um valor específico para o raio de um ou mais cantos.

    Desenhar retângulos e quadrados arredondados
    Desenhar retângulos e quadrados arredondados

  4. Para personalizar ainda mais seu quadrado ou retângulo, você pode editar os raios do canto.

    • Para ajustar o raio de apenas um canto, faça o seguinte:
      • Pressione a tecla Option (Mac) ou a tecla Alt (Win), clique na alça do canto e arraste o mouse.
      • Edite o valor dos raios dos cantos individualmente depois de selecionar  no Inspetor de propriedades.
    • Para ajustar o raio de todos os cantos simultaneamente, faça o seguinte:
      • Clique em um raio do canto e arraste o mouse. 
      • Edite o valor dos raios depois de selecionar  no Inspetor de propriedades.
    Ajustar os cantos individualmente
    Ajustar os cantos individualmente

    Ajustar os quatro cantos simultaneamente
    Ajustar os quatro cantos simultaneamente

Desenhar elipses e círculos

  1. Selecione a ferramenta Elipse .

  2. Execute uma das seguintes ações:

    • Arraste diagonalmente até a elipse atingir o tamanho desejado.
    • Para criar um círculo, mantenha a tecla Shift pressionada enquanto arrasta.
    Segure a tecla Shift e arraste para redimensionar o círculo.

Desenhar polígonos

A ferramenta Polígono permite criar várias novas formas, como triângulos, losangos, pentágonos, estrelas e corações.

Ferramenta Polígono
Ferramenta Polígono

  1. Para começar a desenhar um polígono, clique no “Y” no teclado ou selecione o ícone de triângulo na barra de ferramentas.

  2. Na prancheta ou na tela, clique e arraste para desenhar a forma no tamanho desejado. Observe que a forma padrão é um triângulo.

    • Pressione a tecla Shift enquanto desenha para criar uma forma equilátera.
    • Use as teclas de seta para a esquerda e para a direita enquanto desenha para alterar o polígono para uma forma de estrela.
    • Use as setas para cima e para baixo enquanto desenha para aumentar ou diminuir o número de lados do polígono.
  3. Depois de criar a forma, altere o número de lados do polígono no Inspetor de propriedades. Selecione a forma, clique no campo Contagem lateral no Inspetor de propriedades e insira o número de lados.

    Propriedades do polígono
    Propriedades do polígono

    A. Contagem lateral B. Raio do canto C. Proporção da estrela 

  4. Para criar uma forma de estrela usando a ferramenta Polígono, comece desenhando um polígono na prancheta. Em seguida, clique na alça Proporção da estrela no canto superior direito do polígono e arraste em direção ao raio. Para ajustar a proporção da estrela, clique no campo Proporção da estrela () no Inspetor de propriedades. A proporção pode ser um valor entre 1 e 100. Use o campo Quantidade de cantos para definir o número de lados do polígono. Você pode desenhar um polígono estrelado a partir de um triângulo regular e ir até um polígono de cem lados. 

    • Mantenha a tecla Shift pressionada enquanto arrasta a alça Proporção da estrela para alterá-la em incrementos de 10%. Como alternativa, coloque o cursor no campo Proporção da estrela e pressione as teclas de seta para cima e para baixo para controlar a proporção.
    Propriedades do polígono

  5. Para criar uma forma de coração, desenhe um polígono na prancheta. Depois, clique no campo Quantidade de cantos ()
    no Inspetor de propriedades e digite <3

  6. Para alterar o Raio do canto do polígono, clique e arraste a alça de decoração do raio do canto superior da forma ou clique no campo Raio de canto no Inspetor de propriedades e insira o valor desejado.

     Cada forma tem uma alça de raio. Você não pode alterar o raio do canto de cada lado da forma.

  7. Defina as propriedades (Cor de preenchimento, Espessura da borda e Cor, Sombra interna, Sombra e Desfoque do fundo) para o polígono. Essas propriedades são preservadas quando você altera o número de lados da forma. 

  8. Clique duas vezes em um polígono para ver todos os pontos de ancoragem da forma. Você pode criar novos pontos de ancoragem clicando em qualquer lugar no demarcador da forma. 

     Criar ou editar pontos de ancoragem de uma forma transforma-a em um demarcador e ela perde os recursos de polígono.

Desenhar linhas

  1. Selecione a ferramenta Linha .

  2. Posicione o ponteiro no local desejado para o início da linha e arraste até o local desejado para o término da linha.

    Desenhar linhas usando a ferramenta Linha
    Desenhar linhas usando a ferramenta Linha

Desenhar com a ferramenta Caneta

O demarcador mais simples que você pode desenhar com a ferramenta Caneta é uma linha reta, feita com a seleção da ferramenta Caneta para criar dois pontos de ancoragem. Ao continuar clicando, você cria um demarcador feito de segmentos de linha reta conectados por pontos de vértice.

  1. Selecione a ferramenta Caneta .

  2. Posicione a ferramenta Caneta no local desejado para o início do segmento e clique para definir o primeiro ponto de ancoragem.

  3. Clique novamente onde você deseja que o segmento termine (clique com a tecla Shift pressionada para restringir o ângulo do segmento a um múltiplo de 45°).

  4. Continue clicando para definir pontos de ancoragem para outros segmentos retos.

     Para converter um ponto de ancoragem reto em curvado e vice-versa, clique duas vezes no ponto de ancoragem.

    O último ponto de ancoragem adicionado sempre é exibido como um círculo sólido, que indica que ele está selecionado. Os pontos de ancoragem anteriormente definidos tornam-se vazados e desmarcados conforme mais pontos de ancoragem são adicionados.

  5. Complete o demarcador executando um dos seguintes procedimentos:

    • Para deixar o demarcador aberto, clique em Esc.
    • Para fechar o demarcador, posicione a ferramenta Caneta sobre o primeiro ponto de ancoragem (vazio). Clique ou arraste para fechar o demarcador.
    • Para selecionar e arrastar o ponto inicial sem fechar o demarcador, segure a tecla Cmd/Ctrl.
    Desenhar linhas retas usando a ferramenta Caneta

Desenhar curvas

Você pode criar uma curva adicionando um ponto de ancoragem no local em que deseja que a curva mude de direção e arrastando as linhas de direção para formar a curva. O comprimento e a inclinação das linhas de direção determinam a forma da curva.

As curvas são mais fáceis de serem editadas e seu sistema pode exibi-las e imprimi-las mais rápido se elas forem desenhadas usando o menor número de pontos de ancoragem possível. O uso de muitos pontos também pode gerar saliências indesejadas em uma curva. Em vez disso, desenhe pontos de ancoragem bem espaçados e pratique a formatação das curvas ajustando o comprimento e os ângulos das linhas de direção.

  1. Selecione a ferramenta Caneta .

  2. Posicione a ferramenta Caneta no local desejado para o início da curva e mantenha o botão do mouse pressionado.

  3. Arraste para definir a inclinação do segmento curvado que você está criando e, em seguida, solte o botão do mouse.

     Mantenha a tecla Shift pressionada enquanto arrasta para restringir a ferramenta a múltiplos de 15°.

  4. Posicione a ferramenta Caneta no local em que deseja que o segmento curvado termine e execute um dos procedimentos a seguir:

    • Para criar uma curva em forma de C, arraste em uma direção oposta à linha de direção anterior. Em seguida, solte o botão do mouse.
    • Para criar uma curva em forma de S, arraste na mesma direção da linha de direção anterior. Em seguida, solte o botão do mouse.
    Desenhar curvas usando a ferramenta Caneta
    Desenhar curvas usando a ferramenta Caneta

  5. Para criar várias curvas suaves, continue arrastando a ferramenta Caneta a partir de locais diferentes.

     Você também pode arrastar as linhas direcionais para removê-las de um ponto de ancoragem.

  6. Complete o demarcador executando um dos seguintes procedimentos:

    • Para fechar o demarcador, posicione a ferramenta Caneta sobre o primeiro ponto de ancoragem (vazio). Clique ou arraste para fechar o demarcador.
    • Para deixar o demarcador aberto, pressione Esc.

Desenhar linhas retas seguidas de curvas

  1. Usando a ferramenta Caneta (), clique nos pontos de vértice em dois locais para criar um segmento reto.

  2. Posicione a ferramenta Caneta sobre a extremidade selecionada. Para definir a inclinação do segmento curvado criado em seguida, clique no ponto de ancoragem e arraste a linha direcional que é exibida.

  3. Posicione a caneta onde deseja colocar o próximo ponto de ancoragem; em seguida, clique (e arraste, se desejado) no novo ponto de ancoragem para completar a curva.

Desenhar curvas seguidas de linhas retas

  1. Usando a ferramenta Caneta (), arraste para criar o primeiro ponto suave de um segmento curvado e solte o botão do mouse.

  2. Reposicione a ferramenta Caneta no local em que deseja que o segmento curvado termine; arraste para completar a curva e solte o botão do mouse.

  3. Posicione a ferramenta Caneta sobre a extremidade selecionada.

  4. Reposicione a ferramenta Caneta onde deseja que o segmento reto termine e clique para completar o segmento reto.

    Desenhar curvas seguidas de linhas retas
    Desenhar curvas seguidas de linhas retas

Desenhar dois segmentos curvados conectados por um vértice

  1. Usando a ferramenta Caneta (), arraste para criar o primeiro ponto suave de um segmento curvado.

  2. Para criar uma curva com um segundo ponto suave, reposicione a ferramenta Caneta e arraste.

  3. Reposicione a ferramenta Caneta no local em que deseja que o segundo segmento curvado termine e arraste um novo ponto suave para completar o segundo segmento curvado.

Modo de desenho x modo de edição

Para alternar os modos de desenho e de edição, pressione a tecla Esc.

Você também pode inserir o “modo de edição de demarcador” clicando duas vezes na forma ou no demarcador. Nesse modo, os pontos de ancoragem da forma são visíveis, mas o movimento do mouse não desenha nada. Você pode manipular os pontos de ancoragem/controle ou inserir novos pontos de ancoragem nos segmentos existentes no demarcador.

Ao desenhar com a ferramenta Caneta, você pode executar todas as edições descritas acima, além de desenhar novos segmentos.

Estender demarcadores existentes

Ao selecionar a ferramenta Caneta, todos os demarcadores da prancheta abaixo do ponteiro do mouse exibem alças nos pontos de início e fim. Para continuar desenhando o demarcador a partir desse ponto, clique em uma das alças.

Estender um demarcador fechado vai reabri-lo e colocar a ferramenta Caneta no modo de desenho para ele.

Selecionar pontos de ancoragem

Clique duas vezes no desenho para exibir os pontos de ancoragem. Clique em um ponto de ancoragem para selecioná-lo. Para selecionar vários pontos de ancoragem, mantenha a tecla Shift pressionada e selecione os pontos de ancoragem ou selecione a área dos pontos de ancoragem usando a ferramenta Seleção.

Ajuste os pontos de ancoragem selecionados usando o teclado, arraste-os usando o mouse ou edite as propriedades deles (coordenadas x e y) no Inspetor de propriedades.

Desabilitar o ajuste de pontos de ancoragem

Quando você coloca um novo ponto de ancoragem ou arrasta um existente, as linhas de ajuste são exibidas quando uma âncora está vertical ou horizontalmente próxima a outro ponto de ancoragem. Mantenha a tecla Cmd/Ctrl pressionada para desabilitar o ajuste dos pontos de ancoragem.

Adicionar e editar pontos de ancoragem

Clique duas vezes no desenho para selecioná-lo e exibir os pontos de ancoragem. Clique no demarcador para adicionar novos pontos de ancoragem no local do cursor.

Adicionar e editar pontos de ancoragem
Adicionar e editar pontos de ancoragem

Excluir pontos de ancoragem

Selecione os pontos de ancoragem e pressione Excluir.

Atalhos de desenho

Ferramenta de desenho

Atalho de teclado no macOS

Atalho de teclado no Windows

Selecionar

V

V

Retângulo

R

R

Elipse

E

E

Polígono

Y

Y

Linha

L

L

Caneta

P

P

Zoom

Entrar no modo mais zoom: Z

  • Ampliar o zoom: clique em qualquer lugar na tela do Adobe XD ou clique na prancheta desejada. Ou selecione uma área para ampliar o zoom.
  • Reduzir o zoom: Option + Clique

Para ativar temporariamente a ampliação e a redução de zoom:

  • Pressione Espaço + Cmd e clique ou selecione uma área na prancheta para ampliar o zoom.
  • Para reduzir o zoom, pressione Espaço + Cmd + Opt.

Entrar no modo mais zoom: Z

  • Ampliar o zoom: clique em qualquer lugar na tela do Adobe XD ou clique na prancheta desejada. Ou selecione uma área para ampliar o zoom.
  • Reduzir o zoom: Alt + Clique

Para ativar temporariamente a ampliação de zoom:

  • Pressione Espaço + Ctrl e clique ou selecione uma área na prancheta para ampliar o zoom.

Aplicar zoom na seleção

⌘3

Ctrl + 3

Medir distâncias

Meça as distâncias entre um objeto e a prancheta ou um objeto e outros objetos ao redor clicando nele e pressionando a tecla Option no Mac ou a tecla Alt no Windows. 

 Se o objeto selecionado não for um quadrado ou um retângulo, o XD desenha uma caixa delimitadora ao redor dele. Em seguida, ele exibirá as medidas dos limites da caixa delimitadora.

Para medir a distância de um objeto das bordas da prancheta:

Basta clicar nele e pressionar a tecla Option (no Mac) ou a tecla Alt (no Windows).

O Adobe XD mede as distâncias e exibe as medidas enquanto você pressiona a tecla Option ou Alt.

Medir a distância entre um objeto e a borda da prancheta
Medir a distância entre um objeto e a borda da prancheta

Para medir a distância de um objeto de outros objetos na prancheta:

Clique nele, pressione a tecla Option (no Mac) ou a tecla Alt (no Windows) e passe o mouse sobre os outros objetos.

O Adobe XD mede as distâncias entre os limites mais próximos de ambos os objetos e exibe as medidas quando você pressiona a tecla Option ou Alt.

Medir a distância entre dois objetos
Medir a distância entre dois objetos

Ferramentas de texto

Inserir texto em um ponto

Clique na ferramenta de texto e depois no local onde deseja que o texto comece. Digite o texto e pressione Esc para confirmar suas alterações ou Return para ir para a próxima linha.

Quando você digita texto selecionando um ponto na tela, uma linha de texto horizontal é exibida no local onde você clicou e é expandida conforme os caracteres são digitados. Cada linha de texto é independente: a linha aumenta ou diminui à medida que é editada, mas não há quebra para a próxima linha. A inserção de texto desse modo é útil para a adição de algumas palavras à arte-final.

Inserir texto em um ponto.

Você pode digitar texto sobre outros objetos e organizá-lo para ser exibido à frente usando as opções Objeto > Organizar.

Inserir texto em uma área

Clique na ferramenta de texto e depois no local onde deseja inserir o texto na tela e arraste para definir a área de texto. Em seguida, clique dentro da área para começar a digitar o texto.

Quando você define a área de texto, os limites de um objeto controlam o fluxo de caracteres, horizontal ou verticalmente. Quando um texto atinge um limite, ele é quebrado automaticamente para se ajustar em uma área definida. Essa maneira de inserir texto é útil quando você deseja criar um ou mais parágrafos, como em um folheto.

Clique na ferramenta de texto e comece a digitar o texto.

Verificação ortográfica

No menu Editar, selecione Ativar o corretor ortográfico. O recurso de verificação ortográfica funciona somente em um texto incorreto no contêiner. As palavras com erros ortográficos são sublinhadas em vermelho, e as palavras com correção automática são sublinhadas em azul. Erros gramaticais são destacados com um sublinhado verde.

Ativar a opção de ortografia e gramática
Ativar a opção de ortografia e gramática

Clique com o botão direito do mouse na palavra com erro ortográfico e selecione na lista sugerida a ortografia correta de acordo com o contexto.

Selecionar a palavra grafada corretamente
Selecionar a palavra grafada corretamente

Para reverter as ortografias corrigidas automaticamente para a palavra que você digitou inicialmente, pressione Cmd + Z no Mac e Ctrl + Z no Windows.

Desfazer correção automática
Desfazer correção automática

Aprender ortografia
Aprender ortografia

Importar texto de arquivos de texto

Você pode incluir com facilidade texto pré-escrito na sua prancheta usando um dos seguintes métodos:

  • Arrastar um arquivo de texto para a prancheta.

Você pode incluir com facilidade texto pré-escrito em seu design simplesmente arrastando um arquivo de texto sem formatação para a prancheta. Essa ação cria uma área de texto na prancheta com o conteúdo do arquivo de texto.          

  • Arrastar um arquivo de texto para uma repetição de grade.

Você também pode arrastar um arquivo de texto (com novas linhas) e, depois, arrastá-lo sobre um componente de texto em uma repetição de grade. Todos os elementos de texto são preenchidos com o texto do arquivo em questão.

Para obter mais informações, consulte Arrastar um arquivo de texto separado por retorno para seu objeto de texto em uma Repetição de grade

  • Copiar e colar o texto na prancheta.

Você também pode copiar e colar texto na prancheta criando um elemento da área de texto que pode ser movido e editado com facilidade no Adobe XD.

Opções de redimensionamento de texto

O XD fornece três opções de redimensionamento de texto que permitem aumentar a largura da caixa de texto para manter o conteúdo em uma única linha, ajustar dinamicamente a altura da caixa de texto e controlar a largura e a altura da área de texto.

Com base nas suas necessidades de design, selecione um objeto de texto e escolha dentre as opções Largura automática, Altura automáticaTamanho fixo no Inspetor de propriedades.

Alternar entre texto de ponto e área de texto
Opções de redimensionamento de texto

Largura automática

Ao adicionar texto dentro de quadros, imagens e objetos, você pode aumentar a largura da caixa de texto até o limite máximo para manter o texto em uma única linha.

Para ativar a Largura automática, selecione o ícone  no Inspetor de propriedades.

Largura automática

Altura automática

Ao criar um aplicativo que possui uma grande quantidade de texto ou designs responsivos que envolvem pilhas, você pode ajustar de maneira dinâmica a altura da área de texto sem alterar sua largura.

O texto de altura automática faz com que a área de texto se ajuste automaticamente à altura do conteúdo. Quando você desenha uma área de texto, essa opção é ativada por padrão. 

Texto de altura automática

Para ativar manualmente o texto de altura automática, você pode clicar duas vezes na alça de redimensionamento inferior ou selecionar o ícone  no Inspetor de propriedades.

Tamanho Fixo

Ao adicionar texto aos seus designs, como folhetos ou sites, você pode querer adicionar alguns parágrafos e controlar a largura e a altura da área de texto. O Tamanho fixo permite quebrar o texto para que ele caiba na caixa de texto e o corta automaticamente quando ele excede a altura. 

Para ativar o Tamanho fixo, selecione o ícone  no Inspetor de propriedades. Clique e arraste as alças de redimensionamento de todos os lados para redimensionar uma área de texto. O XD indica com uma alça vermelha de redimensionamento quando o texto dentro de uma área de texto está excedendo seus limites.

Clique duas vezes na alça de redimensionamento inferior da caixa de texto para redimensionar rapidamente a área de texto para ajustá-la ao conteúdo.

resize-handle

Formatar texto

Clique no texto e, em seguida, especifique a fonte, o tamanho da fonte e o alinhamento do texto usando o Inspetor de propriedades.

Você também pode selecionar palavras ou caracteres individuais em um bloco de texto e formatar essas seções individualmente.

Formatar todo o objeto de texto ou as seções individuais do texto
Formatar todo o objeto de texto ou as seções individuais do texto

Alterar o espaçamento de caracteres, linhas e parágrafos

Para alterar o espaçamento de caracteres, clique no objeto de texto e especifique o espaçamento usando a opção Espaçamento de caracteres no Inspetor de propriedades.

Para alterar o espaçamento de caracteres em um subconjunto de texto, clique no texto e especifique o espaçamento em mili-ems usando o Inspetor de propriedades.

Alterar o espaçamento de caracteres e de linha de um texto em um objeto de texto
Alterar o espaçamento de caracteres e de linha de um texto em um objeto de texto

Para alterar o espaçamento entre linhas, clique na área de texto e especifique o espaçamento usando a opção Espaçamento entre linhas no Inspetor de propriedades.

Para restaurar a altura da linha para o padrão, insira 0 na opção Espaçamento entre linhas no Inspetor de propriedades.

Semelhante ao Photoshop e ao InDesign, o Adobe XD permite que você altere o espaço antes e depois dos parágrafos dentro do mesmo elemento de texto.

Para alterar o espaçamento de parágrafo, selecione um parágrafo e clique no ícone de parágrafo no painel Formatação. Altere o valor do espaçamento conforme desejado.

 

Transformações de texto

Para aplicar uma transformação de texto, selecione o texto que você deseja alterar. No Inspetor de propriedades, selecione qualquer uma das seguintes opções:

  • Ícone de Maiúsculas (TT) para definir o texto em maiúsculas.
  • Ícone de Minúsculas (tt) para definir o texto em minúsculas.
  • Ícone Primeira letra maiúscula (Tt) para definir o texto como primeira letra da palavra maiúscula.
  • Ícone de texto sobrescrito para deixar o texto sobrescrito.
  • Ícone de texto subscrito para deixar o texto subscrito
Transformações de texto
Transformações de texto

Sublinhar texto

Para sublinhar o texto, clique na área de texto e, em seguida, no ícone Sublinhado no Inspetor de propriedades. O XD desenha um sublinhado suave que quebra ao redor dos descendentes no texto (criando uma linha mais estética).

Texto tachado

Para tachar o texto, selecione a área de texto no Inspetor de propriedades e clique no ícone Tachado. Uma linha suave é desenhada diretamente no centro do texto, dando a aparência de riscado.    

Mudanças globais de estilo

Para fazer alterações globais de estilo com facilidade, aplique transformações de texto ou tachado aos Estilos de caractere.

No painel Ativos, salve um estilo que você usa em todo o documento como um estilo de caractere. Depois, clique com o botão direito do mouse no estilo de caractere e selecione a opção Editar no menu suspenso. Escolha uma das opções maiúsculo, minúsculo, primeira letra maiúscula ou tachado, e o texto com esse estilo de caractere será alterado em todo o documento. 

Criar projetos de precisão com cálculos matemáticos

Use cálculos matemáticos para criar designs com mais precisão, mover objetos para um novo local ou modificar a largura e a altura.

Selecione um ou mais objetos. No Inspetor de propriedades, faça um cálculo simples em qualquer caixa que aceite valores numéricos. O Adobe XD oferece suporte às operações matemáticas +, -, / e * para calcular as alterações.

Por exemplo, para mover o objeto selecionado 3 unidades para a direita usando as unidades de medida atuais, insira +3 após o valor atual.


Na caixa de texto do Inspetor de propriedades que aceita valores numéricos, escolha uma das seguintes opções:

  •   Para substituir o valor atual inteiro por uma expressão matemática, selecione-o.
  •   Para usar o valor atual como parte de uma expressão matemática, clique antes ou depois do valor.

 

 O Adobe XD só pode executar uma operação por vez. Ou seja, ele pode resolver cálculos “4in + 2p”, mas não “4in + 2p - 1p”, porque essa operação é interpretada como duas operações diferentes.

Vídeo: Como trabalhar com texto de altura automática?

“O contêiner do texto de altura automática se ajusta automaticamente à altura com base na quantidade de texto que você tem dentro dele. Também funciona perfeitamente com recursos de layout sensíveis a conteúdo, como pilhas e preenchimento”– Dani Beaumont, gerente de produto principal do Adobe XD.

Assista a este vídeo para saber como trabalhar com texto de altura automática.

Duração: 3 minutos.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14 a 16 de outubro, Miami Beach e online