Por Dani Beaumont
Última atualização em
7 de jun 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
Saiba como criar protótipos interativos, wireframes e gráficos usando o XD.
O Adobe XD permite que os designers de experiência de usuário criem experiências de usuário interativas para aplicativos da Web e para dispositivos móveis usando um único aplicativo.
Você pode criar designs rápidos e simples em pranchetas no XD. Em seguida, conecte as pranchetas para criar um protótipo interativo que você possa compartilhar e iterar com os envolvidos no projeto. Você também pode usar plug-ins para automatizar as operações repetidas ou partes do fluxo de trabalho do designer que são tediosas, complexas ou repetitivas.
O Adobe XD integra-se bem ao Photoshop, ao Illustrator e ao After Effects.
Você pode continuar criando em seus aplicativos preferidos, reunir os ativos no XD e usar o XD para criar e compartilhar protótipos. O XD permite arquivos SVG e bitmap sem perda de fidelidade. Você pode aprimorar os ativos no Adobe XD ou usá-los para desenvolver protótipos interativos.
Fluxo de trabalho geral
O fluxo de trabalho pode ser resumido nas seguintes etapas de alto nível:
- Design: crie elementos de layout, adicione pranchetas e importe recursos de outros aplicativos, como o Adobe Illustrator, o Adobe Photoshop e o Adobe After Effects. Você também pode usar plug-ins para automatizar as operações repetidas ou partes do fluxo de trabalho do designer que são tediosas, complexas ou repetitivas.
- Protótipo: selecione objetos ou pranchetas no seu design e crie interações entre diferentes pranchetas.
- Compartilhamento: uma vez que seu projeto esteja pronto para ser revisado, você pode compartilhar protótipos e especificações de design ou exportar o projeto ou ativos com os envolvidos no projeto.
Continue lendo para obter mais detalhes sobre criação de design, criação de protótipos e compartilhamento no XD.
Design
Introdução ao Adobe XD
Introdução ao Adobe XD
Selecione um tamanho predefinido para a prancheta. Se você deseja trabalhar com um tamanho personalizado, digite a largura e a altura em pixels nos campos de texto abaixo da opção Personalizado. Se você quiser especificar um tamanho personalizado, clique no ícone Personalizado.
Reúna os ativos de uma das seguintes maneiras:
- Use as ferramentas de design do Adobe XD para criar ativos do zero. Para obter mais informações, consulte Ferramentas de desenho e Ferramentas de texto.
- Copie seus designs do Photoshop, do Sketch, do After Effects ou do Illustrator e cole-os na prancheta no Adobe XD. Você também pode importar, arrastar ou copiar e colar um arquivo JPG, SVG, PNG ou GIF de:
- Explorador de Arquivos (no Windows)
- Finder (no Mac)
- Navegador da Web
- Área de transferência do SO
Aprimore os objetos em seu design. Por exemplo, combinar ou mascarar objetos, alterar as propriedades de traçado e preenchimento, usar sobreposição para sobrepor uma prancheta base com conteúdo, mover ou girar objetos ou usar o redimensionamento responsivo para criar ativos para vários tamanhos e layouts de tela. Use ativos vinculados para criar e manter uma única versão de kits de interface do usuário, folhas de adesivos ou guias de estilo e compartilhe-os em documentos para obter uma escalabilidade consistente de design. Use também plug-ins para automatizar operações repetidas ou partes de fluxos de trabalho tediosas, complexas ou repetitivas para o designer.
Para obter mais informações, consulte:
- Selecionar, redimensionar e girar objetos
- Combinar objetos usando operações booleanas e mascarar objetos com formas
- Agrupar, bloquear e duplicar objetos
- Mover, alinhar, distribuir e organizar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Usar redimensionamento responsivo e restrições
- Criar e gerenciar plug-ins
- Trabalhar com componentes
Disponha elementos repetidos sem esforço usando o recurso Repetição de grade para criar uma grade a partir do conteúdo existente sem precisar duplicá-lo manualmente. Para obter mais informações, consulte Criar elementos de repetição.
Use plug-ins para automatizar as operações repetidas ou partes do fluxo de trabalho do designer que são tediosas, complexas ou repetitivas. Para obter mais informações, consulte Criar e gerenciar plug-ins.
Adicione mais pranchetas para cada uma das telas necessárias no seu protótipo. Para obter mais informações, consulte Trabalhar com pranchetas.
Protótipo
Você pode criar protótipos interativos usando recursos de voz, animação automática, gestos de arrastar e transições temporizadas. Para obter mais informações, consulte Design de voz e protótipos no XD, Criar protótipos usando animação automática e gestos de arrastar e Usar transições temporizadas.
Você pode visualizar a interatividade em protótipos e, ao visualizar, registrar a interação como um arquivo MP4.
Para vincular pranchetas ou configurar a interatividade, selecione a prancheta ou um objeto e clique na seta à direita. Um fio aparecerá. Basta arrastar e conectar o fio a outro objeto ou prancheta. Na janela pop-up, especifique as opções de transição e sua duração.
Você também pode usar a sobreposição para simular o conceito de transições sem duplicar o conteúdo em várias pranchetas. Para obter informações detalhadas, consulte Criar protótipos interativos.
Clique no ícone Visualização no canto superior direito do aplicativo. O XD exibe uma tela de exibição que permite visualizar e navegar pelas diferentes páginas. A tela de visualização tem um ícone de gravação que permite gravar o fluxo entre as páginas e salvá-lo em formato MP4.
Para obter mais informações, consulte Visualizar e gravar interações.
Compartilhamento
Compartilhe protótipos para revisar designs, fazer apresentações ou testes de usuário. Você também pode publicar protótipos e especificações de design para desenvolvimento ou personalizar a experiência de exibição conforme sua preferência. Para obter mais informações, consulte Compartilhar designs e protótipos.
