Sistema de design Gravity UI: como construir facilmente sua interface

Olá a todos, eu sou Alexey Sizikov, chefe do departamento de User Experience no Yandex Cloud. Neste artigo, quero compartilhar uma novidade: lançamos nossa design system e biblioteca de componentes Gravity UI em open source.

Com a biblioteca de componentes Gravity UI, é possível construir interfaces modernas. Ela inclui:

• um conjunto de componentes React básicos;
• uma biblioteca-construtor para landing pages;
• guias detalhados sobre como usar os componentes;
• a biblioteca no Figma;
• um conjunto de ícones prontos, com quase 600 variações;
• ChartKit — pacote para visualização de dados;
• Yagr — renderização de gráficos de alta performance baseada em uPlot;
• I18n — pacote para localização da interface
• e mais de 25 bibliotecas úteis.

Abaixo, sob o corte — uma história sobre por que fizemos o Gravity UI, como o usamos, quais são as particularidades e vantagens da nossa abordagem e como planejamos desenvolvê-lo adiante. E também — como configurar diferentes esquemas de cores nos seus projetos e por que temos quatro temas em vez de dois padrões.

Quais são as particularidades do Gravity UI

Baseado em experiência real

Uma das características que diferenciam nossa design system é que ela evolui a partir das necessidades dos nossos usuários, a maioria dos quais são desenvolvedores. Além disso, nossos designers estão intimamente ligados aos produtos em que trabalham. Cada designer tem vários serviços com seus próprios cenários de uso. Depois que uma solução é testada nos serviços deles, o designer de produto a leva para outros serviços, para garantir que ela funciona e ajuda os desenvolvedores.

Por exemplo, o componente de navegação lateral inicialmente evoluiu apenas com o logotipo e itens de menu. Mais tarde, por conveniência, adicionamos um item com todos os serviços e busca. E quando surgiu um serviço em que havia necessidade de criar uma nova entidade diretamente no menu lateral, apareceu um botão separado com um sinal de mais. Depois disso, surgiram seções de menu com separadores para serviços complexos com muitos itens, bem como o botão “Outros itens”.

Variabilidade flexível

Muitos componentes do Gravity UI podem ser configurados considerando diferentes cenários. Por exemplo, o componente pagination tem várias opções de exibição: com o número total de páginas, rótulos completos nos botões, possibilidade de ir para uma página específica e alterar o número de respostas por página — essa opção é voltada para um grande número de páginas. Já se você tem um caso em que há poucos resultados, dá para usar um modo compacto ou até esconder os números e mostrar apenas as setas.

Ampla área de aplicação

Com o Gravity UI, é possível fazer tanto uma interface simples de administração quanto um dashboard complexo com gráficos. Aqui estão alguns exemplos do que dá para montar com a nossa design system:

• landing pages,
• painéis de administração,
• dashboards,
• gráficos,
• CRM,
• serviço analítico.

Por exemplo, nossos colegas fizeram este dashboard:

Também é possível fazer uma landing page simples. Por exemplo, o site com nossos projetos em open source é feito com componentes do Gravity UI.

Mais de 150 contribuidores

Nosso ecossistema está em constante desenvolvimento e melhora. Além do feedback da nossa comunidade de desenvolvedores, recebemos sugestões de mais de 100 serviços que já usam nossa design system.

Vou dar um exemplo. Inicialmente, tínhamos dois temas — escuro e claro. Mas começamos a receber feedback de equipes que exibem a interface em TVs para acompanhar gráficos ou durante o stand-up. O problema é que na TV a interface fica difícil de enxergar. Um problema semelhante aparece também para usuários com monitores antigos ou de baixa qualidade.

No fim, desenvolvemos um modo de contraste aumentado para cada tema. Ele aumenta o brilho do escuro e do claro, além das cores semânticas. Isso é configurado via estilos CSS e controlado nas configurações do usuário.

Aliás, agora você também pode contribuir. Para isso, envie PRs no GitHub ou deixe comentários no Figma.

Como trabalhar com o Gravity UI

Ajustar a interface à sua marca

A seguir, vou falar sobre o que mais é possível fazer com o Gravity UI. Vou começar pela possibilidade de adaptar a design system à sua marca. Por exemplo, quando o YDB foi para open source, tivemos a tarefa de manter uma design system unificada, mas ao mesmo tempo torná-la distinta para marcas diferentes. Para isso, criamos um grupo separado de variáveis CSS. Ele inclui cores da marca, fontes e raios de arredondamento. No código, isso parece um pequeno bloco:

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

Nesse grupo, é possível trocar a fonte, a cor dos botões de destaque e os arredondamentos. Assim, dá para usar uma única design system para marcas diferentes, mantendo a identidade visual. Se essa opção não servir, você pode criar seu próprio esquema de cores. Há uma instrução detalhada na documentação.

Vale notar que mudar as cores da marca não vai afetar a interface principal. Isso é especialmente importante para elementos que usam cores semânticas: por exemplo, o vermelho continuará significando erro, e o verde — sucesso.

Componentes no Figma

Para facilitar o trabalho, nossa equipe de designers preparou e carregou todos os estados dos componentes no Figma. Se quiser, você pode fazer uma cópia da biblioteca e tentar montar uma interface diretamente no serviço.

Com a última atualização, a biblioteca não duplica todos os quatro temas. Por padrão, você trabalha no tema claro, mas na seção Layer você pode alternar qualquer elemento ou a página inteira para outro tema.

Todos os elementos da biblioteca estão apresentados na página Overview. Aqui você pode encontrar o componente necessário e ir para a página com todos os estados do elemento. Além disso, cada componente tem um exemplo de uso.

Quase 600 ícones

Ícones são um dos elementos obrigatórios de design e usabilidade. Eles ajudam a organizar e estruturar o conteúdo, destacar pontos importantes e melhorar a percepção da informação. À primeira vista, fazer um pack de ícones não parece tão difícil. Mas enfrentamos um desafio ao criar ícones para metáforas complexas, como máquinas virtuais, bancos de dados e diferentes tipos de gráficos.

Para tornar a busca por ícones mais conveniente, usamos um sistema especial de nomenclatura. Agora, o mesmo ícone pode ser encontrado digitando diferentes nomes. Por exemplo, para encontrar um ícone com setinha, você pode digitar qualquer palavra: arrow, enter, move, login.

Guias

Como mencionei acima, nosso objetivo era que os desenvolvedores pudessem criar facilmente interfaces típicas usando as descrições de componentes no nosso guia. Buscamos tornar esse processo simples, sem a necessidade de recorrer a um designer para cada elemento. No momento, já temos cinco exemplos de serviços internos que foram totalmente criados por desenvolvedores usando apenas os guias.

Claro, só com as mãos do desenvolvedor não dá para resolver tudo: de um jeito ou de outro existem cenários complexos que exigem atenção de um especialista em UX/UI. Ainda assim, conseguimos tirar uma parte significativa da carga dos nossos designers.

Nos guias, a equipe de design descreveu os componentes e deu recomendações de uso, demonstrando exemplos de abordagens corretas e incorretas. Você pode consultá-los nesta página .

Como usar o Gravity UI

Tudo o que você precisa fazer é digitar o comando no console:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

Há uma instrução mais detalhada na página principal do repositório no GitHub.

Você pode ver todos os componentes do Gravity UI no UIkit e conectar a biblioteca necessária para as suas necessidades em Libraries.

Em resumo, vale destacar mais uma vez: o Gravity UI é uma design system que cresceu a partir da experiência real dos nossos usuários, das necessidades dos desenvolvedores e da expertise dos designers. Isso permite que ela seja prática e eficiente. E agora qualquer pessoa pode usá-la gratuitamente.

Nós buscamos tornar o projeto ainda melhor, considerando as necessidades e o feedback dos nossos usuários. Venha ao nosso GitHub, envie seus PRs, escreva comentários no Figma e compartilhe exemplos de uso.