Tudo começou com uma solicitação de sistema de design. Nossa equipe de sistema de design foi solicitada a adicionar uma opção de tamanho maior ao nosso componente de botão existente. Depois de olhar para os outros tamanhos, poderíamos extrapolar outro tamanho, mas fiquei curioso… “como todos os tamanhos de componentes se comparam em nosso sistema de design? Existem regras universais que devemos seguir para dimensionamento?”

Infelizmente, a resposta foi não. Alguns valores eram comuns, mas nada consistente. Não havia regras para ajudar a garantir dimensionamento, espaçamento e escala coesos em todo o nosso sistema.

Voltando ao básico

Um bom design geralmente está enraizado em acertar os fundamentos. Para muitos designers (como eu) a tipografia é o elemento fundamental mais importante do design. Olhamos para nossa escala de tipos para ver como poderíamos criar designs proporcionais dimensionados com base em proporções e métodos comuns.

Apresentando Proportio

Proportio é um aplicativo da web para designers criarem as bases de um sistema de design proporcional. Você pode explorar escalas tipográficas e como elas podem ser aplicadas a ícones, dimensionamento, espaçamento e composição de um componente. Com um sistema de design proporcional, os tamanhos e densidades dos componentes são fáceis.

Criando sistemas fundamentais

Você começa definindo sua escala de tipo, que será usada para grande parte do resto do seu sistema. Um tamanho de fonte base é usado, junto com um fator de escala como terça menor (1:1.125). Todos os outros tamanhos de fonte são baseados nessa proporção.

Os ícones são dimensionados automaticamente com base na escala do tipo, pois a tipografia e o emparelhamento de ícones são um elemento comum e importante nos sistemas de design.

O espaçamento entre texto e ícone também é proporcional, com base na escala do tipo. Isso garante que o espaçamento entre eles seja relativo e equilibrado. Da mesma forma, você pode criar escalas de tamanho proporcional, escalas de raio e até mesmo escalas de elevação (sombra projetada).

O sistema de componentes

Aqui é onde as coisas ficam realmente interessantes.

Depois de ter nossos sistemas fundamentais, você pode optar por usar nossa escala de tipo ou escala de espaçamento para dimensionar o preenchimento e as alturas de nossos componentes. O componente de tamanho base (padrão) usa o tamanho do tipo base (por padrão, 16px).

Você pode adicionar tamanhos menores e maiores, que são gerados na interface do usuário com base em incrementos nas escalas selecionadas.

Você também pode adicionar opções mais ou menos densas. A densidade é como o tamanho, embora afete apenas o preenchimento e a altura do componente — os tamanhos de texto e ícone permanecem os mesmos. Eles também são gerados com base em suas escalas e você pode modificar a taxa na qual suas densidades crescem ou diminuem.

Você pode alternar a exibição do componente para ver como seu componente aparece quando há apenas texto, apenas um ícone ou ambos. Você também pode alternar uma exibição para mostrar as especificações do componente.

O sistema de contêineres

Assim como o sistema de componentes, o Proportio permite que você crie contêineres dimensionados proporcionalmente.

Por exemplo, um popover pode ser um pequeno contêiner (pequeno raio de canto e preenchimento). Recipientes maiores, como cartões, podem ter um raio de canto e preenchimento maiores. Diálogos modais podem ser considerados contêineres ainda maiores e precisam de mais preenchimento e maior raio de canto para parecerem apropriados em um sistema de interface.

Usando os mesmos sistemas proporcionais, você pode criar contêineres com preenchimento dimensionado, raio dimensionado e até elevação (se necessário).

Exportando valores

Depois de criar um sistema que deseja usar, eles podem ser exportados como Design Tokens (formato de rascunho W3C) ou como variáveis ​​CSS. Isso torna mais fácil entregar seu sistema aos engenheiros.

Atualmente, não há como puxar esses valores diretamente para o Figma . Portanto, em seu estado atual, é mais útil como um protótipo para definir o que você gostaria de usar em seu sistema, em vez de uma verdadeira “ferramenta de design”. Mas com isso dito, esse recurso pode ser adicionado se você quiser, porque o Proportio é uma ferramenta de código aberto.

Código aberto

Proportio é um projeto de código aberto . Acredito muito em retribuir à comunidade de sistemas de design para ajudar a compartilhar ou provocar novas ideias para que todos possamos crescer juntos.

A ferramenta ainda está em sua infância, mas há recursos adicionais em andamento para ajudá-lo a fazer o melhor uso do Proportio para design e desenvolvimento.