Iniciar um design system de um site que já está no ar pode ser bem chato. Pede acesso ao Figma ou a um arquivo, procura no Github os CSS usados, tenta cruzar isso para fazer um styleguide, nomeia as cores, são vários passos.
Agora imagina uma ferramenta que gere automaticamente para você um styleguide inicial com cores, tipografia, espaçamento, assets, etc. Seria mágico? Pois essa mágica existe e se chama Superposition.
Confira neste post:
Quanto custa
O criador da ferramenta, o Killian Valkhof decidiu disponibilizar a ferramenta gratuitamente, por acreditar que todos deveriam ter os benefícios de um design system pode proporcionar. Você pode ver o texto na íntegra aqui.
Sistemas operacionais suportados
Achou que só ia ter para Mac OS? Foi exatamente o que pensei! Amigos do Windows: tem para Windows sim! E até para Linux que achei uma boa novidade sendo uma ferramenta instalável de design. Lista dos OS que foram usados nos testes, todos em computadores com no mínimo 4GB de ram:
- Windows 10
- Mac OS Mojave
- Ubuntu 18.04+ (.deb)
- Linux OS (.AppImage)
No Windows, seu anti-vírus pode acustar um falso positivo, mas como informa o site isso não quer dizer que a ferramenta não é segura. Quando abrir o .exe no seu Windows, basta ir em “Mais informações” e dar permissão de instalação. Depois clicar em “Instalar mesmo assim”.
Download
- Acesse a ferramenta SuperPosition
- insira seu e-mail
- clique em download.
A versão de Windows pesa 50mb.
Como usar
É extremamente fácil! Quando abrir o programa, basta digitar o site que você quer gerar o styleguide e dar ‘Enter’.
Atualmente ele pega as seguintes informações do site para gerar o styleguide:
- Cores, colocando inclusive nomes em cada uma delas;
- Tipografia, desde font-size até letter-spacing;
- Espaçamento, separando em vertical e horizontal;
- Borda arredondada (border-radius);
- Sombras;
- Padrões de animação (motion);
- Assets indo de ícones à fotos.
Exportando as informações
Hoje ele exporta todos os design tokens utilizados no site para:
- CSS puro;
- Sass (.scss);
- JavaScript.
Além desses, como mostra na própria ferramenta, futuramente poderemos exportar também para Sketch, Figma, Swift e Android. ❤️
Há também um plugin para o Adobe XD, que ajuda você a usar os padrões capturados lá dentro diretamente. Inclusive mudando conforme você altera o site no Superposition.
Nossa avaliação
Não lembro de ter me empolgado tanto com uma ferramenta assim desde que descobri o Figma lá em 2016 e o Zeroheight em 2019. Claro que na prática é gerado mais um guia de estilo do que um design system, mas a praticidade em pegar as informações diretamente do site facilita muito nosso trabalho. Principalmente quando caímos em um projeto de paraquedas ou mesmo um projeto que não iniciamos com um styleguide definido.
Comparando com o Zeroheight (ferramenta que gosto bastante) está bem próximo, mas o ZH hoje não pega os design tokens de um site em produção.
Identificamos alguns pontos de melhoria no Superposition:
- Edição dos nomes das cores;
- Um botão de “baixar todos os assets”;
- Visualização dos espaçamentos mais próximos do front-end (padding e margin);
- Poder alternar disposição das tipografias para bloco estilo Google Keep;
- Talvez um “exportar design tokens” em .csv para importarmos no gStudio? ;
- Figma, urgente! 😁
Resumindo: todos os pontos acima são detalhes, a ferramenta é maravilhosa, rápida e agiliza bastante nossa vida.
Já estou utilizando em meus projetos tanto na empresa quanto na minha agência.
E o que você achou da ferramenta? O que é muito bom ou está faltando?