A maioria de vocês pode estar usando-os de alguma forma. E se você fizer isso, este artigo irá ajudá-lo a torná-los melhores. Mas vamos lá...
A maioria de vocês pode estar usando-os de alguma forma. E se você fizer isso, este artigo irá ajudá-lo a torná-los melhores. Mas vamos lá... |
O que é um token de design? |
É um conceito criado pela Salesforce, por uma designer de produto, Jina Anne. Design Tokens são a única fonte de verdade que armazena decisões de design distribuídas em ferramentas de design e linguagens de codificação. De forma simples, use para cores, tipografia, sombras, raio da borda, espaçamento, bordas, animação, dimensionamento de ícones e muuuuuito mais. |
Os Tokens de Design irão ajudá-lo a: |
|
|
|
Com base nas minhas vivências, existem 3 ou 4 maneiras de os designers manterem suas decisões de design: |
1. Usando formatos, medidas ou até variáveis 🧐 |
A partir daqui para facilitar o entendimento usarei como exemplo apenas tokens de cor. |
Se você trabalha para uma agência ou produtos no início (que não possuem um Design System), é provável que adicione e faça referência às suas cores na interface do usuário diretamente pelos valores hexadecimais (#2F80ED), RGB (47 128 237) ou HSL (214 84 56). |
2. Usando Tokens Globais 🤩 |
Aí está. Os tokens que a maioria de vocês usam (ou deveriam 👀). |
Se você trabalha para uma startup com produtos mais maduros onde já existem um DS, você já deve ter dado uma olhadinha e estudado outros sistemas de design e decidido estruturar suas cores com nomes mais significativos e semânticos. |
#2F80ED que eu poderia chamar de $color.blue.500, caracterizando um Token Global e sem aplicação específica mas que consolida a raiz ou base do nosso DS. |
3. Alias Tokens como intermediário 💎 |
Os alias tokens são específicos do contexto. Em vez de se referir às cores pelo que elas são, agora você também se refere a elas pelo que elas fazem, trazendo mais semântica ao contexto de uso. |
#2F80ED será referido como $color.blue.500, que agora também será referido por diferentes aliases com base em seu caso de uso. Por exemplo, $text.link ou $background.button.primary, são todos Alias Tokens. Olhando para esses tokens, fica claro onde ou quando usá-los. |
4. Component Specific, o mais direto possível 🎯 |
Esse tipo de token são específicos ao componente e apenas ali, claro que fazem uma referência aos Globais, mas tem uma semântica muito direta em componentes, especial aqueles com centenas de variações, como botões e inputs. |
#2F80ED que é referido como $color.blue.500, agora referido como o alias token $background.button.primary, quando referenciado em forma de component specific token seria algo como $color.background.button.primary.default trazendo de forma clara o estado do nosso botão ou pode indicar outros atributos também como o input $color.background.input.focused.border. |
Nos próximos textos, trarei prós e contras dessas decisões de design ❤️ |
As segundas quero saber a sua opinião! 😉 |
Cada dica, sugestão ou crítica que vocês enviarem, semanalmente, serão úteis e consideradas. Agradecemos a cada um que depois da leitura da edição parou e apontou o que está gostando ou onde devemos melhorar. Conta aqui ó, nos comentários 🤓👇 |