Como aproveitar variantes de componentes no Penpot – Smashing Magazine

Desde que Brad Frost popularizou o uso de sistemas de design em design digital em 2013, eles se tornaram um recurso inestimável para organizações — e até mesmo indivíduos — que desejam criar padrões de design reutilizáveis ​​que pareçam consistentes.

Mas Brad não popularizou apenas os sistemas de design; ele também nos deu um estrutura para estruturá-los, e embora não tenhamos que seguir exatamente essa estrutura (a maioria das pessoas a adapta às suas necessidades), uma parte particularmente importante da maioria dos sistemas de design é o variantesque são variações de componentes. As variantes de componentes permitem o design de componentes que são iguais a outros componentes, mas diferentes, para que sejam imediatamente compreendidos pelos usuários e, ainda assim, forneçam clareza para um contexto único.

Isso torna as variantes dos componentes tão importantes quanto os próprios componentes. Eles garantem que não estamos criando muitos componentes que precisam ser gerenciados individualmente, mesmo que sejam apenas ligeiramente diferentes de outros componentes, e como as variantes dos componentes são agrupadas, eles também garantem organização e consistência visual.

E agora podemos usá-los no Penpot, a ferramenta de design de código aberto baseada na web onde o design é expresso como código. Neste artigo, você aprenderá sobre as variantes, seu lugar nos sistemas de design e como usá-las de forma eficaz no Penpot.

Etapa 1: coloque seus tokens de design em ordem

Na maior parte, o que separa uma variante da outra são os tokens de design que ela usa. Mas o que é exatamente um token de design?

Imagine a cor de uma marca, digamos um valor de cor igual a hsl(270 100 42) em CSS. Nós o salvamos como um “token de design” chamado color.brand.default para que possamos reutilizá-lo mais facilmente, sem ter que nos lembrar dos mais complicados hsl(270 100 42).

A partir daí, também podemos criar um segundo token de design chamado background.button.primary.default e configure-o para color.brand.defaulttornando-os iguais à mesma cor, mas com nomes diferentes para estabelecer separação semântica entre os dois. Essa referência ao valor de um token de outro token costuma ser chamada de “alias”.

Essa configuração nos dá a flexibilidade de alterar o valor da cor em todo o documento, alterar a cor usada no componente (talvez mudando para um alias de token diferente) ou criar uma variante do componente que use uma cor diferente. Em última análise, o objetivo é ser capaz de fazer alterações em muitos lugares ao mesmo tempo, em vez de um por um, principalmente editando os valores dos tokens de design em vez do design em si, em escopos específicos, em vez de nos limitarmos a mudanças do tipo tudo ou nada. Isso também nos permite dimensionar nosso sistema de design sem restrições.

Com isso em mente, aqui está uma ideia aproximada de apenas alguns tokens de design relacionados a cores para um botão primário com estados de foco e desativado:

Para criar um token colorido no Penpot, mude para a aba “Tokens” no painel esquerdo, clique no sinal de mais (+) ao lado de “Cor” e especifique o nome, o valor e a descrição opcional.

Por exemplo:

• Nome: color.brand.default,
• Valor: hsl(270 100 42) (há um seletor de cores se você precisar).

É praticamente o mesmo processo para outros tipos de tokens de design.

Não se preocupe, não vou explicar todos os tokens de design, mas mostrarei como criar um token de design apelido. Simplesmente repita as etapas acima, mas para o valor, observe como acabei de referenciar outro token de cor (certifique-se de incluir as chaves):

• Nome: background.button.primary.default,
• Valor: {color.brand.default}

Agora, se o valor da cor mudar, o fundo dos botões também mudará. Mas também, se quisermos dissociar a cor dos botões, tudo o que precisamos fazer é referenciar um token ou valor de cor diferente. Mikołaj Dobrucki entra em muito mais detalhes em outro artigo do Smashing, mas é importante notar aqui que os tokens de design Penpot são independentes de plataforma. Eles seguem o formato padronizado W3C DTCG, o que significa que são compatíveis com outras ferramentas e exportam facilmente para todas as plataformas, incluindo web, iOS e Android.

Nas próximas etapas, criaremos um componente de botão e suas variantes enquanto conectamos diferentes tokens de design em diferentes variantes. Você verá por que isso é tão útil e como o uso de tokens de design em variantes beneficia os sistemas de design em geral.

Etapa 2: crie o componente

Você precisará criar o que chamamos de componente “principal”, que será atualizado conforme necessário daqui para frente. Outros componentes — aqueles que você realmente inserirá em seus designs — serão cópias (ou “instâncias”) do componente principal, e esse é o ponto principal, certo? Atualize uma vez e as alterações serão refletidas em todos os lugares.

Aqui está um que fiz anteriormente, sem as cores:

Para aplicar um token de design, certifique-se de estar na guia “Tokens” e ter a camada relevante selecionada e, em seguida, selecione o token de design que deseja aplicar a ela:

Não importa qual variante você cria primeiro, mas provavelmente você desejará usar a variante padrão como ponto de partida, como eu fiz. De qualquer forma, para transformar este botão em um componente principal, selecione o objeto do botão através da tela (ou guia “Camadas”), clique com o botão direito sobre ele e escolha a opção “Criar componente” no menu de contexto (ou apenas pressione Ctrl / ⌘ + K depois de selecioná-lo).

Lembre-se de nomear o componente também. Você pode fazer isso clicando duas vezes no nome (também por meio da tela ou da guia “Camadas”).

Etapa 3: Crie as variantes do componente

Para criar uma variante, selecione o componente principal e clique no botão Ctrl / ⌘ + K atalho de teclado ou clique no ícone que revela a dica de ferramenta “Criar variante” (localizada na guia “Design” no painel direito).

A seguir, enquanto a variante ainda estiver selecionada, faça as alterações de design necessárias através da guia “Design”. Ou, se quiser trocar tokens de design por outros tokens de design, você pode fazer isso da mesma forma que os aplicou inicialmente, por meio da guia “Tokens”. Enxágue e repita até ter todas as suas variantes projetadas na tela:

Depois disso, como você deve ter adivinhado, você desejará nomear suas variantes. Mas evite fazer isso através do painel “Camadas”. Em vez disso, selecione uma variante e substitua “Propriedade 1” por um rótulo que descreva a propriedade diferenciadora de cada variante. Como minhas variantes de botão neste exemplo representam estados diferentes do mesmo botão, denominei isso de “Estado”. Isso se aplica a todas as variantes, portanto, você só precisa fazer isso uma vez.

Ao lado do nome da propriedade, você verá “Valor 1” ou algo semelhante. Edite isso para cada variante, por exemplo, o nome do estado. No meu caso, eu os chamei de “Padrão”, “Hover” e “Desativado”.

E sim, você pode adicionar mais propriedades a um componente. Para fazer isso, clique no sinal de adição próximo (+) ícone. Falarei mais sobre variantes de componentes em escala em um minuto.

Para ver o componente em ação, mude para a guia “Ativos” (localizada no painel esquerdo) e arraste o componente para a tela para inicializar uma instância dele. Novamente, lembre-se de escolher o valor correto da propriedade na guia “Design”:

Se você já possui um sistema de design Penpot, combinar vários componentes em um componente com variantes não é apenas fácil e à prova de erros, mas você já pode estar pronto se estiver usando um sistema robusto de nomenclatura de propriedades que usa barras (/). Penpot elaborou um guia muito simples, mas o diagrama abaixo resume muito bem:

Como as variantes de componentes funcionam em escala

Tokens de design, componentes e variantes de componentes – a ameaça tripla dos sistemas de design – trabalham juntos, não apenas para criar sistemas de design poderosos, porém flexíveis, mas também sistemas de design sustentáveis ​​e escaláveis. Isso é mais fácil de conseguir quando se pensa no futuro, começando com tokens de design que separam o “o quê” do “para quê” usando aliases de token, apesar de quão detalhado isso possa parecer à primeira vista.

Por exemplo, eu usei color.brand.lightest para a cor do texto de cada variante, mas em vez de inserir esse token de cor diretamente, criei aliases como text.button.primary.default. Isso significa que posso alterar a cor do texto de qualquer variante posteriormente, sem precisar mergulhar na variante real na tela ou forçar uma alteração na color.brand.lightest isso pode afetar vários outros componentes.

Porque lembre-se, embora o componente e suas variantes nos proporcionem a reutilização do botão, os tokens de cores nos dão a capacidade de reutilização das coresque pode ser usado em dezenas, senão centenas, de outros componentes. Um sistema de design é como um ecossistema vivo e respirante, onde algumas partes estão conectadas, algumas partes não estão conectadas e algumas partes estão ou não conectadas, mas talvez precisem estar mais tarde, e precisamos estar prontos para isso.

A boa notícia é que o Penpot torna tudo isso muito fácil de gerenciar, desde que você planeje um pouco com antecedência.

Considere o seguinte:

• Os tokens de design que você reutilizará (por exemplo, cores, tamanhos de fonte e assim por diante),
• Onde os aliases de token de design serão reutilizados (por exemplo, botões, títulos e assim por diante),
• Organizando os tokens de design em conjuntos,
• Organizando os conjuntos em temas,
• Organizando os temas em grupos,
• Os diferentes componentes que você precisará e
• As diferentes variantes e propriedades de variantes necessárias para cada componente.

Até mesmo os botões que projetei aqui hoje podem ser dimensionados muito além do que já criei. Pense em todas as variantes possíveis que podem surgir, como uma cor de botão secundária, uma cor terciária, uma cor de confirmação, uma cor de aviso, uma cor cancelada, cores diferentes para modo claro e escuro, sem mencionar mais propriedades para mais estados, como estados ativos e de foco. E se quisermos toda uma matriz de variantes, como onde os botões desativados podem ser pairados e onde todos os botões podem ser focados? Ou onde alguns botões possuem ícones em vez de rótulos de texto, ou ambos?

Os designs podem ficar muito complicados, mas depois de organizá-los em tokens de design, componentes e variantes de componentes no Penpot, eles parecerão bastante simples, especialmente quando você puder vê-los na tela, e ainda mais depois de fazer uma alteração significativa em apenas alguns segundos sem quebrar nada.

Conclusão

É assim que fazemos com que as variantes dos componentes funcionem em escala. Obtemos os benefícios de reutilização enquanto mantém o flexibilidade bifurcar qualquer aspecto do nosso sistema de design, grande ou pequeno, sem sair dele. E ferramentas de design como o Penpot tornam possível não apenas estabelecer um sistema de design, mas também expressar seus tokens e estilos de design como código.