Guia do Usuário Cancelar

Introdução às pranchetas no Adobe 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. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  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
  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 pranchetas para criar projetos de design no XD.

Esta é a Jeanee, uma designer gráfica que foi escolhida para liderar um projeto de design de UX. Ela está apresentando o Adobe XD à sua equipe, cujos membros têm níveis diferentes de experiência com design e ferramentas de UX.

 
  • Ela está procurando recursos para ajudar a começar o projeto rapidamente.

 

  • Ela precisa de tutoriais para começar e arquivos de amostra para aprender.

A Jeanee está se familiarizando com terminologias básicas de design e trabalhando com pranchetas para criar seu primeiro protótipo no XD. Continue lendo para saber como podemos ajudá-la a começar.

Experimente

Arquivo de amostra

.xd; 6 MB

Antes de continuar

Configurar pranchetas em 4 etapas fáceis

O que é uma prancheta? As pranchetas representam as telas de um aplicativo ou páginas de um site. Elas simplificam os processos de design e criam designs interativos para vários tamanhos de tela em um único documento. Use pranchetas para criar seu projeto do XD.

Continue lendo para saber como configurar suas pranchetas.

Criar uma prancheta

O Adobe XD fornece pranchetas para tamanhos de tela populares, como telas de diferentes versões de iPhone, iPad e páginas da Web. Você pode criar uma prancheta personalizada se as opções não atenderem aos seus requisitos.

Tela inicial

Use os tamanhos de prancheta predefinidos ou crie sua própria prancheta personalizada.

Pranchetas personalizadas

Aplicativo do XD

Use a ferramenta Prancheta para criar pranchetas adicionais. Selecione e aplique as predefinições de prancheta no Inspetor de propriedades.

Propriedade da prancheta

Usar uma prancheta existente do Photoshop e do Illustrator

Você pode importar pranchetas existentes do Photoshop ou do Illustrator no XD sem precisar recriá-las. 

Usar uma prancheta existente do Photoshop e do Illustrator

Use a opção Arquivo > Importar do XD para abrir pranchetas do Photoshop ou do Illustrator no XD com todas as pranchetas e camadas intactas e editáveis.

Gerenciar pranchetas

Mudou de ideia sobre o tamanho da prancheta? Redimensione-as. Você também pode renomeá-las com base nas suas necessidades de design. Deseja criar mais pranchetas e gerenciar a disposição delas? Duplique-as e reorganize-as.

Renomear

Reorganizar

Clique duas vezes no nome da prancheta.

Redimensionar

Redimensionar

Arraste a alça circular exibida nas bordas de uma prancheta.

Duplicar

Copiar e colar pranchetas

Selecione a prancheta e pressione Ctrl/Cmd + D.

Alinhar e distribuir

Alinhar e distribuir

Selecione várias pranchetas e clique em Alinhar e distribuir no Inspetor de propriedades. Arraste a prancheta para reordená-la.

Aplicar grades de layout ou quadriculadas

Deseja definir a estrutura subjacente do conteúdo do design adicionado às pranchetas? Aplique grades de layout. Deseja ter uma ideia de como medir rapidamente e alinhar o conteúdo do design ao inserir objetos ou texto nas pranchetas? Use as grades quadriculadas.

Grades de layout

Grades de layout

Selecione uma ou mais pranchetas e, na seção Grade do Inspetor de propriedades, selecione Layout.

Grades quadriculadas

Grades de layout

Selecione uma ou mais pranchetas e, na seção Grade do Inspetor de propriedades, selecione Quadrado.

Pranchetas de design

Agora que você criou sua primeira prancheta, saiba como adicionar elementos visuais e textuais, alterar o plano de fundo e criar efeitos de rolagem.

Adicionar elementos visuais e textuais

Criar pranchetas com rolagem

Adicionar elementos visuais e textuais

Agora que sua prancheta básica está pronta, você pode criar ou modificar a cor do fundo, adicionar gráficos e criar ou formatar estilos de texto em ativos reutilizáveis. Deseja criar uma grade editável de elementos repetidos? Use as repetições de grade.

Adicionar elementos visuais e textuais

Adicionar elementos

Use ferramentas de desenho para criar elementos personalizados ou selecione Arquivo > Importar para importar elementos existentes, como imagens e ícones, da pasta de seu dispositivo. Use ferramentas de texto para criar, formatar e capturar estilos de texto em ativos reutilizáveis. 

Para alterar a cor do fundo da prancheta pelo Inspetor de propriedades, selecione Preencher e aplique a cor do seletor de cores.

Criar elementos repetíveis

Repetir elementos

Use as repetições de grade para criar objetos com elementos repetíveis, como listas e layouts baseados em cartões.

Criar pranchetas com rolagem

Deseja adicionar efeitos de rolagem vertical e horizontal ao seu design? Use os grupos de rolagem para criar protótipos de uma janela de conteúdo.

Deseja criar uma simulação realista de rolagem no desktop e em dispositivos móveis? Defina a posição fixa de um elemento na prancheta para que outros elementos rolem por baixo dele. 

Rolagem vertical

Linha pontilhada e conteúdo com rolagem

Para estender a prancheta para além da altura da janela, use o marcador. O marcador indica a posição até a qual você precisa rolar para acessar o conteúdo.

Posição fixa ao rolar

Linha pontilhada e conteúdo com rolagem

Para manter os elementos do design em uma posição fixa, selecione Posição fixa ao rolar no Inspetor de propriedades.

O design final

Agora que você sabe o bastante sobre pranchetas, pode experimentar o que aprendeu até agora e criar mais pranchetas incríveis para seus projetos de design.

Sujeito a alterações

Vá em frente e baixe o design final para ver como seu projeto de design ficou.

Saiba mais

Confira este vídeo de exemplo de 4 minutos para começar. Você também pode baixar os arquivos de amostra para experimentar enquanto assiste aos vídeos

Arquivos de amostra

Dicas e truques

Agora que você aprendeu o básico sobre pranchetas no XD, confira estas dicas e truques úteis:

  • Para medir a distância entre um objeto e as bordas de uma prancheta, clique no objeto e pressione a tecla Option (no macOS) ou Alt (no Windows).
  • Para DESATIVAR a opção de rolagem em uma prancheta, selecione a prancheta e, no Inspetor de propriedades, altere a opção Rolagem para Nenhuma.

Para obter mais dicas profissionais sobre como trabalhar com pranchetas, siga a @Elainecchao, gerente de produto do XD, no Twitter.

O que vem por aí?

Agora você sabe como criar, gerenciar e compartilhar pranchetas. Continue em frente e saiba mais sobre como criar guias de prancheta personalizadas e posicionar sua prancheta usando grades.

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

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.

Logotipo da Adobe

Fazer logon em sua conta