Selecione um objeto e clique em Preencher no Inspetor de propriedades.
Última atualização em
25 de mar de 2024
- 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
Crie, edite, importe e use degradês no Adobe XD. Adicione limites de cor e controle a opacidade do degradê usando o painel Degradê.
Um degradê é uma mistura gradual entre duas ou mais cores ou tons da mesma cor ou de cores diferentes. Você pode usar degradês para criar misturas de cores, gráficos de pizza, adicionar volume a objetos vetoriais e adicionar um efeito de luz e sombra aos seus designs.
O XD permite degradês lineares, radiais e angulares.
Degradê linear
O XD muda do ponto inicial para o ponto final em uma linha reta.
Degradê radial
O XD muda do ponto inicial para o ponto final em um padrão circular.
Degradê angular
O XD aplica um preenchimento com degradês de cores ao redor de uma forma a partir do centro de um círculo.
O seletor de cores Degradê
Para acessar o seletor de cores Degradê no XD, selecione um objeto e clique em Preencher no Inspetor de propriedades. É possível criar degradês lineares, radiais e angulares no XD.
Escolha Degradê linear, Degradê radial ou Degradê angular na lista suspensa na parte superior do Seletor de cores.
A. Editor de degradê B. Limite de cor C. Controle deslizante de opacidade D. Campo de cores E. Salvar como amostra F. Editor de degradê na tela
Você pode usar o seletor de cores Degradê para escolher as cores e definir a opacidade dos degradês.
O seletor de cores Degradê possui um editor de degradê que mostra uma visualização rápida de todas as cores usadas em um degradê. Tabuleiros indicam as partes transparentes.
O editor de degradê também exibe os limites de cor em um degradê. Pequenos círculos indicam os limites de cor. As cores mudam e se misturam dependendo do grau de proximidade entre os limites de cor. Os limites de cor também são exibidos no editor de degradê que aparece na tela do objeto ao qual o degradê é aplicado.
Dois limites de cor estão disponíveis por padrão. É possível adicionar mais limites de cor clicando nos editores de degradê. Você pode arrastar os limites de cor pelos editores de degradê para alterar as posições dos limites de cor e variar a distribuição de cada cor. Para excluir ou remover um limite de cor, arraste-o para fora do editor de degradê no seletor de cores Degradê ou clique no limite de cor no editor de degradê na tela e selecione Excluir.
O editor de degradê na tela ajuda a alterar a direção do degradê.
A alça de canto ajuda a alterar o ponto de origem e o ângulo de um degradê radial.
O controle deslizante à direita do seletor de cores Degradê permite controlar a opacidade do limite de cor.
Aplicar um preenchimento de degradê linear, radial ou angular
-
-
No Seletor de cores, selecione Degradê linear, Degradê radial ou Degradê angula na lista suspensa.
Seletor de cores
Seletor de cores 
degradês lineares, radiais e angulares
degradês lineares, radiais e angulares -
Clique nos limites de cor no editor de degradê e selecione as cores necessárias usando o seletor de cores.
- Para adicionar mais limites de cor, clique no editor de degradê.
- Para modificar a cor atribuída a um limite de cor, clique no limite de cor.
- Para mover os limites de cor, arraste-os pelo editor de degradê.
Observação: não é possível mover os limites de cor em nenhuma das extremidades do editor de degradê.
- Para excluir um limite de cor, arraste-o para fora do editor de degradê. Se estiver usando o editor de degradê na tela, clique no limite de cor e pressione Excluir.
- Para alternar entre os limites de cor, use a tecla Tab.
- Para alterar o ponto de orientação e o ângulo de degradês radiais, arraste a alça do canto.
Trabalhar com um degradê radial
Trabalhar com um degradê radial - Para adicionar mais limites de cor, clique no editor de degradê.
-
Para alterar a direção do degradê, arraste o segmento do editor de degradê na tela (no objeto) conforme necessário.
Você também pode arrastar os pontos finais do segmento do editor de degradê na tela para fora dos limites do objeto. Se um limite de cor for colocado fora dos limites de um objeto, a cor (associada ao limite de cor) não será mostrada no objeto.
Observação:Você pode mover a extremidade do segmento do editor de degradê na tela usando as teclas de seta e as teclas Shift + seta. Depois de selecionar um limite de cor interno, você pode movê-lo pelo segmento usando as teclas de seta e as teclas Shift + seta. Você também pode pressionar Tab para alterar os limites de cor pelo editor de degradê na tela.
-
Após a criação de um degradê, você pode salvá-lo para reutilização posterior no painel Ativos. Clique em um objeto com o degradê e clique no ícone + ao lado de Cores no painel Ativos para salvá-lo.
Degradês salvos no painel Ativos
Degradês salvos no painel Ativos
Observação:
A gradação de cores entre limites de cor em um degradê angular criado usando o código CSS nas especificações de design pode variar da renderização do degradê angular na tela de design.
Você pode criar discos de cores, gráficos de pizza ou indicadores de progresso usando degradês angulares. O degradê angular aplica um preenchimento com degradês de cores ao redor de uma forma a partir do centro de um círculo.
Siga estas etapas para aplicar Degradê angular a um círculo e crie uma disco de cores.
Aplicar degradê angular a um círculo
Selecione um círculo na tela, clique em Preencher no Inspetor de propriedades e selecione Degradê angular
.
Adicione mais cores
Clique no editor Degradê angular para adicionar mais limites de cor. Clique nos limites de cor e selecione as cores desejadas.
Adicionar uma transição de cores perfeita
Para criar uma disco de cores contígua, use a mesma cor para o último limite de cor e o primeiro limite de cor usando a ferramenta Conta-gotas.
Adicione cores contrastantes
Você também pode criar um disco de cores com cores de contraste nítido, selecionando cores diferentes para o último e o primeiro limite de cores.
Depois de concluir a criação de um disco de cores, você poderá copiar e reutilizar os efeitos de Degradê angular em outras formas, como Retângulo ou Triângulo.
Exemplos
Encontre abaixo alguns dos exemplos criados usando Degradê angular.
Ícones giratórios de progresso
Gráficos de pizza ou discos de cores
Gráficos vetoriais aprimorados
Elementos ou objetos do painel
Tutorial
Degradês angulares, que são diferentes dos degradês lineares e radiais, podem ser realmente úteis para designs como ícones giratórios de progresso e discos de cores. Assista a este tutorial de Dani Beaumont, gerente de produto principal do Adobe XD, para saber como usar o degradê angular.
Duração: 4 minutos e 7 segundos.
Importar objetos com preenchimento de degradê
-
Certifique-se de salvar o arquivo como um arquivo .svg antes de importar para o Adobe XD.
-
Clique em Arquivo > Importar, selecione o arquivo SVG e clique em Importar.
Quando você importa um degradê como um SVG, o seletor de cores exibe a opção Degradê por padrão. Quando você copia e cola um objeto no XD, o preenchimento de degradê também é copiado. Você pode modificar a cor e os limites de cor do degradê que você importa.
Observação:
Degradês radiais importados com pontos de origem descentralizados não são editáveis no XD.