Guia do Usuário Cancelar

Trabalhar com protótipos compartilhados no XD

  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 mais sobre como trabalhar com protótipos compartilhados no XD.

protótipos

O Adobe XD facilita a colaboração entre designers e revisores com os protótipos compartilhados. Como revisor, você pode trabalhar com protótipos das seguintes maneiras:

Vamos primeiro nos familiarizar com as configurações e opções do link do protótipo.

Familiarizar-se com as configurações e opções

No link do protótipo, você pode verificar as configurações da sua conta, ajustar as configurações de zoom, verificar as notificações e convidar outras partes interessadas:

interagir com protótipos

A. Convidar B. Configurações de zoom C. Modo de tela inteira D. Suporte e feedback E. Notificações F. Configurações de conta 

  • Convidar: para convidar outras partes interessadas para o link do protótipo, clique Convidar. Ao convidar uma parte interessada, você pode definir o nível de acesso para Pode exibir ou Pode editar. Você deve entrar em sua conta da Adobe para ver o botão Convidar.
  • Configurações de zoom: para ampliar e reduzir o link do protótipo, use as configurações de zoom. Você pode selecionar um dos incrementos de zoom predefinidos: 25%, 50%, 75%, 100%, 150%, 200%, conforme necessário. Como alternativa, use o gesto de pinçagem no touchpad para ajustar o zoom ou mantenha pressionada a tecla Cmd/Ctrl e gire o botão de rolagem do mouse para rolar e ajustar o zoom em incrementos menores. O nível de zoom padrão no qual os links de protótipo são abertos permanece o mesmo de antes.
  • Modo de tela inteira: clique no ícone de tela inteira para exibir o protótipo no modo de tela inteira. Pressione Esc para sair do modo de tela inteira.
  • Suporte e feedback: a qualquer momento, se você deseja obter ajuda ou fornecer feedback, clique no ícone do ponto de interrogação.
  • Notificações: para exibir todas as atividades/notificações nos protótipos aplicáveis a você, clique no ícone de sino. 
  • Configurações de conta: para ver os detalhes da sua conta de usuário, clique no ícone do perfil.

Interagir com protótipos

Os protótipos compartilhados são de natureza interativa. Você pode interagir com um protótipo usando gatilhos. Use gatilhos definidos pelo designer, como tocar, arrastar, teclado, controles e entradas de voz, que resultam em ações como transição, áudio, fala, vídeo e reprodução de Lottie. Você também pode usar os controles de navegação na parte inferior da tela.

Observações importantes

  • Se a tela de carregamento do link do protótipo tiver um vídeo configurado para ser reproduzido automaticamente, o vídeo ficará sempre sem som. Clique em Ativar som na mensagem que você recebe na parte inferior da tela.
  • [Somente Safari] Por padrão, a reprodução automática de som está desabilitada no Safari. Para habilitar a reprodução automática de som em links de protótipo do XD, consulte Ativar reprodução automática de som no Safari. Se você habilitar a reprodução automática para links de protótipo do XD, não será necessário ativar o som do vídeo no futuro. 

Para saber como o vídeo funciona com outras interações, consulte Compreender as interações e o comportamento de reprodução de vídeo.

Ativar o som do vídeo
Clicar em Ativar som no banner azul na parte inferior da tela

Navegar nos protótipos

  • Na parte inferior do protótipo, clique nos botões de controle direito e esquerdo para percorrer as pranchetas de um protótipo. Clique em Início para voltar para a exibição da primeira prancheta. 
  • Ao clicar em um comentário no navegador do aplicativo, a prancheta correspondente ao comentário é exibida na tela. 
  • Para criar um ambiente mais controlado para testes de usuário em protótipos com fios, oculte os controles de paginação e navegação no seu protótipo da Web.

Para isso, selecione Compartilhamento > Configuração de exibição > Personalizado > Mostrar controle de navegação ao criar links no XD. Para obter mais informações, consulte Compartilhar protótipos.

Se os controles de navegação estiverem:

  • Ativados (configuração padrão): o protótipo de aplicativo Web exibirá os botões Início, Voltar e Avançar.
  • Desativados: os controles de navegação do protótipo de aplicativo Web e os números da prancheta não estarão visíveis. Use os pontos ativos definidos para interagir com protótipos e clique no botão Início para navegar até a tela inicial. Quando você abre um protótipo em um dispositivo móvel, a tela de boas-vindas é exibida, as divisões esquerda/direita são ocultadas e o gesto de deslizar é desativado.
Controles de navegação ativados
Controles de navegação ativados

A. Início B. Prancheta anterior C. Próxima prancheta 

Controles de navegação desativados
Controles de navegação desativados

Se os fluxos contiverem vínculos, você poderá optar por mostrar os controles de navegação ao publicar seus protótipos.

Exibição em grade

A exibição em grade de protótipos e especificações de design permite aos envolvidos no projeto ou desenvolvedores acessar as pranchetas mais relevantes com mais rapidez e facilidade.

Para alternar para a exibição em grade, clique no nome do link ou no ícone de grade no canto superior esquerdo do protótipo compartilhado. 

Exibição em grade

A. Ícone de grade com o nome do link B. Recolher o painel de comentários 

Na exibição em grade, você pode:

  • Exibir a representação em miniatura de todas as telas,
  • Ver o número de comentários em uma determinada prancheta,
  • Pesquisar uma prancheta específica pelo nome e
  • Clicar no ícone de tela vinculada para exibir todas as telas vinculadas a uma determinada prancheta.
gridview-breakdown
Exibição em grade

A. Número de comentários em uma prancheta B. Clique no ícone de telas vinculadas para ver as telas vinculadas C. Telas vinculadas à prancheta First Cards 

Adicionar comentários

É possível revisar os protótipos e compartilhar feedback com os designers ao adicionar comentários nos protótipos compartilhados. O link de protótipo está sempre atualizado com os comentários mais recentes.

Pré-requisitos

Você pode fazer comentários em designs e protótipos públicos sem fazer logon na primeira instância. 

Você pode fazer logon usando sua Adobe ID ou optar por fazer comentários como convidado. Para fazer logon como convidado, clique em Fazer logon como convidado na parte superior do painel. Quando solicitado a inserir um nome, digite um nome e insira o código CAPTCHA.

  • Você pode digitar seus comentários na seção Fazer um comentário. Use as teclas Enter ou Shift + Enter para criar uma nova linha na caixa de comentários, e as teclas Ctrl/Cmd + Enter para Enviar o comentário adicionado.
  • Depois que os comentários forem adicionados, selecione a opção  ao lado da sequência de comentários para ResolverEditarExcluir seus comentários. No entanto, não é possível editar ou excluir comentários adicionados por outros usuários.
  • Use o botão Todos os comentários na tela no canto inferior esquerdo do painel de comentários para exibir todos os comentários adicionados a várias pranchetas em uma só exibição. A opção está ativada por padrão em links de especificações de design ou protótipos publicados.
  • Clique em para ocultar anotações ou marcadoresuse o ícone para filtrar comentários com base no nome do revisor, no horário ou no status dos comentários. 
  • O realce azul à esquerda indica comentários para a prancheta atual. Clique em um conjunto de comentários que não são para a prancheta atual e você será redirecionado para a prancheta em questão para contextualizá-lo. 
  • O número 3 no topo do ícone de notificação, no canto superior direito do painel de comentários, indica a quantidade de comentários não resolvidos nas pranchetas.

 

Recursos de comentários
Recursos de comentários

A. Opção Convidar B. Configurações de zoom C. Modo de tela inteira D. Suporte e feedback E. Notificações F. Perfil de usuário G. Opções do menu para comentários H. Filtrar comentários I. Ocultar anotações J. Botão Todos os comentários na tela 

Filtrar comentários
Filtrar comentários

A. Filtrar comentários por revisores  B. Filtrar comentários por data  C. Filtrar comentários por status  D. Limpar filtro adicionado E. Exibir filtro adicionado 

  • Você também pode reproduzir animações ou gravações que fazem parte de qualquer protótipo compartilhado e adicionar seus comentários conforme o reproduz. 
  • Use @menção enquanto adiciona comentários para exibir a lista de outros revisores em um protótipo. Se você usar essa opção, o outro revisor receberá uma notificação por email e no aplicativo de desktop da Creative Cloud. Quando alguém clica na notificação, ele é direcionado para a prancheta referenciada.

 Quando uma prancheta é excluída no XD, os comentários online na prancheta deixam de estar disponíveis.

Para obter mais informações, consulte Revisar protótipos

Siga estas etapas para usar um navegador para dispositivos móveis no modo retrato para adicionar comentários a protótipos compartilhados em um dispositivo Android ou iOS:

  1. Abra um protótipo compartilhado no navegador para dispositivos móveis e use o gesto de pinça para abrir o modo de navegação.

    Um ícone de comentário aparece com o número de comentários no protótipo. Este ícone de comentário aparece apenas quando o proprietário ativa a opção de comentários no protótipo. 

    Pince para acessar a navegação

  2. Para exibir o painel de comentários, toque no ícone de comentário. Neste painel, você pode adicionar, excluir, editar ou fixar comentários. 

    painel de comentários

  3. Toque no ícone de alfinete e, em seguida, em qualquer lugar da tela para colocar o marcador de fixação. Para confirmar o comentário e a fixação, insira o comentário e toque no ícone de avião de papel. 

    Marcador de fixação

Mais itens semelhantes

Receba ajuda com mais rapidez e facilidade

Novo usuário?