DSvault

Carregando...

Registrar

Design System - Design Tokens - 18/04/2022

Design Tokens – Do Figma até ao Código

Compartilhe por ai!

Finalidade deste post é de agregar o conhecimento sobre a criação e manipulação dos Design Tokens a partir do início do Figma até o seu consumo pelo código, dando uma visão ampla e objetiva através de um exemplo prático que iremos construir.


O que é Design Token?

Design tokens são basicamente variáveis que armazenam informações dos nosso elementos fundamentais. A sua construção, inicialmente, pode ser lenta e árdua no início, mas em curtíssimo prazo nos da o benefício das entregas mais rápidas e consistentes e aumenta exponencialmente a automação de nossos projetos, quanto no Design quanto no FrontCaso queria se aprofundar mais sobre o conceito recomendo uma neste belo material: https://brasil.uxdesign.cc/o-que-são-design-tokens-cd408431727d


Criando os Tokens no Figma

Para agilizar nosso processo da construção do nosso exemplo, já estou disponibilizando a nossa palheta de cores, basta apenas duplicar o projeto no seu Figma:

https://www.figma.com/community/file/1097577375456657297/Design-Tokens—Sergio

Após abrir o projeto, você irá precisar que o plugin do Figma Tokens esteja instalado. Com ele aberto iremos criar os nosso tokens, adicionando as cores como valores e os nomes. Recomendo fortemente a separar os tokens criando categorias, como no exemplo foi criado a categoria “colors”, pois isso ajuda na organização quando formos exportarmos os nossos tokens.

Para que o exemplo fique mais interessante também há a palheta de Alias, que é basicamente uma variável nova de token que consome um token de cor já existente porém acrescentamos semântica a ela. As nossas alias indica respectivamente o uso de cores com foco em erros (denominada de “critial”, tendo o valor do token de {colors.danger.80)) e outra para indicar links (”link” com o valor {colors.primary.80})


Exportando os Tokens

Chegou a hora de exportar os nossos tokens, para que possamos ser consumidas por outras plataformas. Como o nosso exemplo esta em um contexto único e simplificado iremos desmarcar a opção “Include parent key” que removerá o nível acima de “global” na hora de exportar nosso json com os tokens.

Assim tendo menos níveis para acessar cada valor futuramente. Aqui você também pode perceber a importância de termos criado o nível (categoria) de “colors”, como o arquivo fica mais organizado e contextualizado.


Criando um projeto em React

Nesta etapa iremos criar um projeto simples e básico utilizando o React JS. O Framework nos permite a criação de toda estrutura de forma bem simples, então você não precisa possuir um conhecimento sobre a tecnologia. Você irá precisar ter o node.js instalado no seu PC.

Contendo o node.js basta abrir o seu terminal (cmd – no caso de windows) e digitar: npx create-react-app tokens-example. Ele irá puxar todos os arquivos necessários e criar toda a estrutura de pastas do seu projeto de forma automática, depois para testar basta apenas acessar a pasta do seu projeto pelo terminal e digitar o comando npm start, assim ele irá rodar uma espécie de servidor local na sua máquina e abrirá uma aba no navegador. Caso tenha dúvidas neste ponto está tudo bem explicado na documentação do React (https://pt-br.reactjs.org/docs/create-a-new-react-app.html)

Após criarmos a estrutura do projeto React iremos instalar dois pacotes que nos ajudarão a entender melhor e de forma mais simplificada o poder dos tokens gerados pelo Figma.


Style Dictionary

O Pacote Style Dictionary utiliza dos tokens de design para definir as configurações desejadas de como serão consumidas para qualquer plataforma.

Ele basicamente tem o poder de pegar nosso arquivo de token gerado pelo Figma e acrescenta configurações conforme a necessidade ( Ex.: Transformar HEX para RGB, PX para REM, alterar nomenclatura, etc..) e no final exporta-las. Também existe a opção de escolher o formato de como será exportado, como por exemplo em formato de CSS, Javastrip, SCSS, Json, etc..

Então, após baixar o pacote npm install -D style-dictionary , iremos criar um arquivo na pasta raiz do projeto com o nome de tokens-example/**config.js** e iremos acrescentar o seguinte código:

module.exports = {
    source: ["tokens.json"],
    platforms: {
      css: {
        transformGroup: "css",
        buildPath: "src/tokens/css/",
        files: [
          {
            destination: "colors.css",
            format: "css/variables",
            options: {
              outputReferences: true,
            },
            filter: {
              "type": "color"
            }
          },
        ],
      },
      ts: {
        transformGroup: "js",
        buildPath: "src/tokens/js/",
        files: [
          {
            destination: "colors.js",
            format: "javascript/es6",
            options: {
              outputReferences: true,
            },
            filter: {
              "type": "color"
            }
          },
        ],
      },
      js: {
        transformGroup: "web",
        buildPath: "src/tokens/json/",
        files: [{
          destination: "colors.json",
          format: "json/nested",
          options: {
            outputReferences: true,
          },
          filter: {
            "type": "color"
          }
        }]
      },
    },
  };

Explicando alguns conceitos de forma simples:

  • source: ["tokens.json"] – representa o caminho do arquivo de token gerado pelo Figma;
  • platforms – Para quais plataformas serão geradas;
  • transformGroup – Tipo de plataforma;
  • buildPath – Local o qual o arquivo será gerado/exportado;
  • files – configuração dos arquivos que serão exportado como o nome, formato
  • outputReferences: true – definição se as variaveis ou alias complexas virão com os valores com os nomes de referências ou valores final como HEX;
  • filter: type: Filtra os tipos de tokens a ser seja gerado, como por exemplo “Type: color” o resultado final irá apresentar neste arquivo apenas os tokens com tipo definido de “color”

No nosso projeto estamos gerando o formato em CSS, JS e Json.. para podermos ter a visibilidade de diferentes tipos de arquivos sendo gerados.

Também iremos criar um arquivo tokens-example/**build.js** que será o arquivo responsável pelo build das configurações, ou seja, que será o responsável por executar as configurações anteriores e gerar os aquivos:

const StyleDictionary = require('style-dictionary').extend('config.js');
StyleDictionary.buildAllPlatforms();

Arquivo basicamente está indicando que ele se estende do arquivo config.js que criamos e que irá executar o build deste arquivo.

Agora no seu terminal, estando na pasta do projeto basta digitar node build.js, ele irá apresentar os arquivos gerados no seu terminal.

Para poder visualizar os arquivos gerados, basta acessar a pasta tokens-example/src/tokens, os códigos devem ficar algo semelhante a esta imagem:

Próximo passo iremos consumir no código estes tokens gerados!


Styled Component

Styled componente é um pacote que nos permite escrever o CSS no Javascript de forma mais simples e adiciona a possibilidade de acrescentar códigos JS na folha de estilo.

Após instalar o pacote digitando npm install --D styled-components no seu terminal (sempre na raiz do projeto) veremos o uso do mesmo na construção do componente e importando os tokens.


Criando um botão

Aqui teremos os arquivos necessários para a construção de um componente de botão super simples para o nosso projeto, como o objetivo não é de aprofundar em código e sim dar uma visibilidade de como os tokens podem serem consumidos, irei colocar os arquivos e os códigos aqui de forma rápida apenas para um contexto geral. Você também pode baixar a estrutura toda pronta do projeto no Github:

https://github.com/snksergio/tokens-example
Após o download, na pasta de onde puxou o projeto digite ”npm” para instalar os pacotes

1. Arquivo tokens-example/app.js

import './App.css';import Button from './components/button';
import { ThemeProvider } from "styled-components"
import * as theme from './tokens/json/colors.json';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Button />
      </div>
    </ThemeProvider>
  );
}

export default App;

App.js é como se fosse a nossa index.html, todo o projeto percorre por ele. No código acima estamos importando o componente Button, que estará nos próximos arquivos, e também a tag <ThemeProvider theme={theme} />, que é a tag responsável por prover os tokens que estamos importando que no caso estamos impotando neste momento apenas o json.

2. Arquivo tokens-example/src/components/button/index.js

import './App.css';import Button from './components/button';
  import React from "react";
  import { ButtonStyled } from "./style";
  
  const Button = () => {
    return (
      <ButtonStyled>Exemplo</ButtonStyled>
    );
  };
  
  export default Button;

Aqui basicamente estamos montando a estrutura JS do nosso botão e importando o estilo

3. Arquivo tokens-example/src/components/button/style.js

import './App.css';import Button from './components/button';
  import styled from "styled-components";
  import { ColorsPrimary80 } from "../../tokens/js/colors";
  
  const ButtonStyled = styled.div`
    <width: 250px;>
    <height: 50px;>
    <margin: 20px;>
    <background: ${ColorsPrimary80};>
    <border: solid 13px ${({ theme }) => theme.colors.neutral['80']}>
  `;
  
  export { ButtonStyled };

Neste arquivo é o local em que estamos escrevendo a folha de estilo do nosso componente de botão, e é neste momento em que iremos consumir os tokens em nosso projeto. Neste exemplo está sendo indicado duas maneiras diferente de consumir o token

  1. Importando o token em formato de javascript (ColorsPrimary80), que basicamente é uma variável que esta armazenando a cor. Estamos utilizando ela para o Background.
  2. Acessando o token pelo theme (Aquele ThemeProvider que escrevemos no app.js importando em formato de Json), podemos sempre acessar os tokens passado pelo ThemeProvider escrevendo os níveis até chegar ao nível requerido que no caso é theme.corlos.neutral[’80’] na cor da borda.

Depois que os arquivos estiverem todos prontos e devidamente configurados basta rodar o projeto para ver a magia acontecendo! (npm start) Lembrando que eu forneço toda a estrutura pronta no meu GitHub, aqui o intuito foi apenas de demonstrar passo a passo uma maneira da construção!


Arquivos utilizados

  1. Plugin Figma Tokens:
    https://www.figma.com/community/plugin/843461159747178978
  2. Token:
    https://github.com/snksergio/tokens-example/blob/main/tokens.json
  3. Exemplo do Figma:
    https://www.figma.com/community/file/1097577375456657297/Design-Tokens—Sergio
  4. NodeJS:
    https://nodejs.org/en/
  5. GitHub:
    https://github.com/snksergio/tokens-example

Considerações Finais

Esse projeto de exemplo teve o intuito de apresentar a importância do Design Tokens e também a importância do Design e do Desenvolvedor estarem alinhados. Não precisa dominar todas as técnicas, mas o conhecimento é muito valioso que ajuda muito, por exemplo, na construção de um Design System.

Vejo muitos Designers fazendo diferentes tipos de trabalhos mas muitas vezes não conseguem ter uma visibilidade além do Designer, seja por conta da cultura da empresa ou outros fatores.. e é muito importante hoje o UI/UX ter um bom relacionamento com o desenvolvimento para adquirir cada vez mais conhecimento, todos saem ganhando!

Ressaltando que cada projeto, cada equipe possui maneiras diferentes de estruturar um projeto. Não existe o certo o errado… existe o bem feito e o que atende a necessidade de todos!


Sérgio Vieira Araújo
UX/UI Designer

Que tal dar uma lida em: