Apresentando os sistemas de design no Adobe XD: crie, compartilhe e gerencie facilmente cores, estilos e diversos componentes reutilizáveis com seu time

Depois de adicionar documentos da nuvem no XD ano passado, nós mencionamos as principais áreas que estaríamos trabalhando durante 2019 – uma dessas áreas era a criação e gerenciamento de sistemas de design.

Com o lançamento deste mês, nós estamos felizes em apresentar um número de novas funções que vão permitir a criação de documentos na nuvem contendo cores, estilos de caracteres e componentes reutilizáveis, compartilhando tudo de um jeito muito fácil com os membros da sua equipe para que todos usem nos próprios documentos, e assim, o gerenciamento centralizado das atualizações dos elementos no sistema de design para todo mundo aproveitar os mais novos ativos.

Nosso objetivo principal era gerar que existisse uma progressão natural passar da criação individual de elementos para criação de um conjunto abrangente de recursos reutilizáveis que ajudem a garantir a consistência do design à medida que você e sua equipe ampliam o trabalho.

Componentes

Desde a apresentação do XD, nós temos símbolos como elementos reutilizáveis, mas eles tinham um número de limitações em relação à flexibilidade e adaptabilidade. Com esta novidade, nós substituimos totalmente os símbolos por componentes, que têm mais possibilidades. Você pode criar um componente principal para definir um elemento reutilizável, como um botão, e as instâncias desse elemento podem ser personalizadas fazendo alterações em qualquer propriedade.

As alterações que você faz em uma instância individual são específicas desse elemento, mas as alterações feitas no componente principal serão propagadas para todas as instâncias em que a propriedade não foi personalizada. É um modelo incrivelmente poderoso, mas extremamente fácil de usar e está no centro da nossa solução de sistemas de design.

Nós desenvolvemos componentes para trabalhar com redimensionamento responsivo, portanto, você pode usar qualquer instância e ajustar o tamanho do componente, com XD gerenciando automaticamente a localização e a escala dos elementos para você.

Componentes têm o potencial de mudar o modo como você traballha no XD, e isso é só o começo – nos próximos meses, nós vamos adicionar um suporte para definir vários estados de componentes e animar entre estados, para criar componentes reutilizáveis completos com interações, bem como explorar maneiras de conectar componentes de design a seus equivalentes de produção.

Conectando Ativos

O painel de ativos proporciona um modo de você gerenciar as cores, estilos de caracteres e componentes usados no seu documento. Como parte de um sistema de design, agora você pode usar o painel de ativos para fazer uma curadoria da coleção de elementos reutilizáveis que você quer disponibilizar para outros designers da sua equipe.

Para permitir que eles aproveitem as cores, os estilos de caracteres e os componentes que você definiu, você só precisa convidá-los usando o Compartilhar > Convidar para Editar. Quando eles tiverem acesso, vão poder conectar o seu documento na nuvem com o deles – isso vai adicionar as cores, estilos de caracteres e componentes que você criou e compartilhou. Quando você faz atualizações no documento original, eles são notificados que existem atualizações disponíveis e podem escolher aceitar as alterações no próprio documento – assegurando que toda a equipe está trabalhando na última versão dos ativos.

Guias de Estilo

Além de permitir que outros designers tenham acesso ao seu arquivo, você também pode precisar compartilhá-lo com os desenvolvedores. Ao dispor os elementos do painel de ativos como uma “folha de adesivos” no documento XD, você pode usar a função Compartilhar > Compartilhar para Desenvolvimento para publicar seu sistema de design na Web, a partir do qual outras pessoas podem fazer referência a valores de cores, atributos de estilo e ativos de download.

Diagrama Sistema de Design Hi-Res Asset

Com a habilidade de criar componentes complexos, que podem ser combinados com cores e estilos de caracteres, compartilhados com designers e desenvolvedores, nós acreditamos que agora você tem a base para criar e gerenciar sistemas de design no XD. Nós continuamos trabalhando em diversas melhorias que vão adicionar um controle mais preciso sobre as permissões de compartilhamento e a distribuição de atualizações para produzir elementos do sistema.

Mais recursos e melhorias

Também vamos lançar neste mês vários novos recursos e melhorias em resposta às sugestões que recebemos.

Guias de prancheta

Os guias agora podem ser adicionados a qualquer prancheta, arrastando-os para fora do lado superior ou esquerdo da prancheta – isso facilita o alinhamento dos elementos e o posicionamento consistente dos elementos nas pranchetas.

Acionadores de teclado e gamepad

Estamos sempre procurando maneiras de expandir os dispositivos e as plataformas para os quais você pode criar protótipos no XD, por isso, temos o prazer de adicionar suporte para acionadores de teclado e gamepad. Com esta versão, você pode atribuir gatilhos de teclado para simular experiências baseadas em desktop, bem como usar controladores XBox One e Playstation Dualshock conectados como entradas para simular a interação para experiências de console de jogos.

Ferramenta polígono

A nova ferramenta polígono agiliza a criação de uma infinidade de formas, incluindo triângulos, losangos, pentágonos e outros polígonos com até 100 lados. Quando combinada com autoanimação, a ferramenta facilita a transformação entre diferentes formas.

Maiúsculas, minúsculas, títulos e rasurado

As melhorias nas opções de formatação de texto incluem a adição de texto em maiúsculas, minúsculas ou maiúsculas e minúsculas, bem como a capacidade de definir rasurados no texto. Em uma atualização futura, também ativaremos textos sobrescritoss e subscritos.

Permissões e compartilhamento

Finalmente, para aqueles que compartilham protótipos e especificações de projeto de maneira segura apenas para pessoas convidadas, agora é possível que pessoas com o link, mas sem permissão para visualizar, solicitem o acesso a você. Você pode analisar cada uma das solicitações recebidas e decidir se concederá acesso ao seu trabalho.

Mais plugins para aumentar o poder do XD

O ecossistema de plugin do XD continua crescer a cada mês, com mais de 150 plugins disponíveis atualmente. Com um número cada vez maior de plug-ins, fizemos algumas melhorias no gerenciador de plug-ins para que você possa ver resumos e descrições detalhadas, e também pesquisar plug-ins com base em palavras-chave. Além disso, no mês passado, anunciamos o Adobe XD Plugin Accelerator, um programa intensivo de noventa dias que oferece financiamento e recursos para pessoas com visões únicas para o futuro da criatividade.

Alguns novos e notáveis plugins que valem um destaque incluem: o UnDraw, que oferece belas ilustrações para seus projetos, Rotato, que apresenta seus projetos nas telas de dispositivos em 3D fotorrealista, e Maps Generator, que torna rápido e fácil inserir mapas em seus projetos. Saiba mais sobre os plug-ins disponíveis.

Comunidade UX

Adoraríamos continuar o diálogo! Ajude-nos a moldar o futuro do Adobe XD enviando solicitações de recursos ou bugs de arquivo. Você pode seguir a gente no Twitter @AdobeXD para atualizações ou mencionar a equipe usando o #AdobeXD. Você também pode falar conosco usando o Facebook, onde compartilhamos vídeos e atualizações, além de responder a perguntas durante as nossas lives.

#MadeWithAdobeXD

Ao compartilhar seus protótipos no Behance, não se esqueça de marcá-los com #MadeWithAdobeXD e selecione Adobe XD em “Ferramentas usadas” para ter a oportunidade de aparecer na newsletter do Adobe XD.