Guia do Usuário Cancelar

Redimensionamento responsivo e restrições

  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 usar redimensionamento responsivo e restrições para vários tamanhos e layouts de tela.

Redimensionamento responsivo

Ao criar um design para um ambiente com vários dispositivos, é importante considerar a variedade de tamanhos de tela disponíveis nas resoluções para dispositivos móveis, tablets e desktop. Como nem todos os designers usam os mesmos dispositivos, eles precisam considerar como o conteúdo se comporta em tamanhos de tela diferentes. 

Para solucionar esse problema, o Adobe XD desenvolveu um recurso chamado redimensionamento responsivo, que permite redimensionar objetos mantendo os relacionamentos espaciais em tamanhos diferentes para adaptar o design a vários tamanhos de tela.

Redimensionamento responsivo
Redimensionamento responsivo

Trabalhar com redimensionamento responsivo

Com o redimensionamento responsivo, o XD prevê automaticamente quais restrições você provavelmente aplicará e as aplica automaticamente à medida que os objetos são redimensionados. 

Tradicionalmente, para obter um comportamento do tipo responsivo, os designers precisavam aplicar manualmente restrições a vários objetos para ditar o comportamento do objeto ao redimensioná-lo. Esse método monótono e demorado se concentrou mais em adivinhação e movimentos repetitivos, ofuscando a centelha criativa do design.

O XD aplica restrições automaticamente, analisando os objetos selecionados, a estrutura de agrupamento, a proximidade das bordas do grupo pai e as informações de layout.

Redimensionamento responsivo trabalhando com um ativo sendo redimensionado

Mira de redimensionamento responsiva

Ao redimensionar, miras rosas aparecem no objeto que está sendo redimensionado. Essas miras indicam quais regras de restrição são aplicadas a um grupo. O XD fornece um método visual e contextual de aprender como o redimensionamento responsivo e as restrições manuais funcionam em conjunto.

Grupo sendo redimensionado com mira rosa

Redimensionamento e grupos responsivos

Antes de redimensionar, você pode agrupar objetos semelhantes para estabelecer relações entre eles. O XD retém os objetos agrupados por padrão e permite estabelecer uma hierarquia em seus projetos por meio de um mecanismo de organização que você já usa. Quando redimensionados, os objetos agrupados permanecem juntos.

Editar manualmente restrições

Se não estiver satisfeito com os resultados do redimensionamento responsivo, você poderá editar as regras de restrição manualmente. Definir restrições manuais permite determinar com precisão o comportamento dos objetos quando você redimensiona um componente, uma prancheta ou um grupo de camadas.

Selecione Manual  para editar manualmente as restrições que o redimensionamento responsivo colocou em objetos. As restrições manuais sempre substituem as restrições automáticas colocadas pelo XD. Você pode usar as seguintes restrições para especificar as regras e controlar o comportamento dos vários componentes.

  • Largura corrigida/variável
  • Altura corrigida/variável
  • Margem corrigida/variável
  • Margem direita corrigida/variável
  • Margem superior corrigida/variável
  • Margem inferior corrigida/variável
Configuração de restrições em objetos individuais

Configuração de restrições em grupos de objetos
Configuração de restrições em um grupo de objetos

Redimensionamento responsivo de pranchetas

Por padrão, o redimensionamento responsivo é desativado para pranchetas, mas você pode ativá-lo para iniciar o redimensionamento responsivo em pranchetas.

Para ativar o redimensionamento responsivo:

  1. Selecione a prancheta no modo de Design.

  2. No Inspetor de propriedades, selecione o botão para alterar o redimensionamento responsivo.

    Ativar o redimensionamento responsivo, selecionar Manual e exibir restrições
    Ativar ou desativar o redimensionamento responsivo

  3. Selecione as seguintes opções de redimensionamento responsivo:

    • Automático: usa automaticamente restrições para redimensionar a prancheta.
    • Manual: permite definir restrições manuais disponíveis no Inspetor de propriedades.
    Ativar o redimensionamento responsivo, selecionar Manual e exibir restrições
    Ativar o redimensionamento responsivo, selecionar Manual e exibir restrições

Substituir o redimensionamento responsivo para grupos

Embora o redimensionamento responsivo seja comportamento padrão para o redimensionamento de grupos e várias seleções, você pode: 

  • Para um redimensionamento escalado, use a tecla Shift para substituir temporariamente o comportamento responsivo. Você pode utilizar uma das alças de seleção de canto para bloquear a proporção do seu grupo ao redimensioná-lo.
  • Desative a opção de redimensionamento responsivo no Inspetor de propriedades.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

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

Adobe MAX 2024

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