Muito se fala em Design System e nas mágicas possíveis depois de se ter ele integrado com seu site. Uma das bruxarias é trocar a cor de uma caixa no Figma e no site mudar também…. Óóoooo 🙈

Então resolvi escrever este artigo para mostrar como isso é possível.

Preparando o Figma:

Primeiramente crie um arquivo no Figma, com algumas cores:

Dê um nome ao seu frame e coloque um nome para cada objeto, estes nomes serão os Tokens, que farão parte do Design System e serão utilizados em toda parte, do Figma ao CSS do front-end.

Agora precisamos gerar a chave da API do Figma (Personal Access Token) e o ID do arquivo (file-id).

Geração da chave da API

No Figma vá em seu Profile, clicando em seu nome na área inicial do Figma e depois na área Personal Access Tokens clique em ” Create a new personal access token”.
Dê um nome para identificar esta chave e em seguida copie o código de números que o Figma irá gerar e guarde no seu bloco de notas. Vou usar o bloco de notas padrão do windows apenas para demonstrar, mas você pode utilizar seu editor de código de preferência.

Chave de acesso ao Figma – Guarde no seu bloco de notas
Geração do ID do arquivo

Em nosso arquivo recém criado, clique no botão compartilhar (Share), no canto superior direito do Figma.
Em seguida, na janela que se abre clique em “Copy link”.

O link do arquivo está na área de transferência de seu computador, agora é só colar no bloco de notas para extrairmos o ID do seu arquivo.

No link do arquivo, delete o endereço do Figma e o nome do arquivo. Então teremos o ID do arquivo.

Pronto, de posse dos dados de acesso ao arquivo, é hora de acessa-lo via código.

Conectando-se ao Figma

Para conectarmos ao Figma iremos usar um editor e o seu navegado de internet.

Então vamos usar o código abaixo fazer a conexão, ele será a base que iremos trabalhar para fazer a conexão e exibição das cores. Copie este código e coloque no bloco de notas.

<!DOCTYPE html>
<html>
<head>
    <title>Teste Figma</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        fileId= "";
        apiKey = "";

        $.ajaxSetup({
            headers: {
                'X-FIGMA-TOKEN': figmaApiKey
            }
        });

        $.get("https://api.figma.com/v1/files/" + figmaId, function(resultado) {
            console.log(resultado);
        });
    </script>
</body>
</html>

Vamos alterar as linhas 16 e 17 do arquivo com os nossos dados de acesso ao arquivo:

Salve o arquivo do bloco de notas com o nome de “getfigma.html”, em seguida abra este arquivo no Google Chrome.

Ao abrir o arquivo mostrará uma página em branco, aperte a techa f12 do seu teclado e barra que abriu, clique em Console.

Clique linha “Object” para abrir.
Este objeto já é seu arquivo do Figma. Agora clique em “document:”, depois em “Children:”.

Já é possível ver a página um do arquivo….

Agora clique em “0:”, depois “Children: (4)”. agora já é possível ver a semelhança:

Na imagem temos o nosso frame sinalizado e os objetos de texto. Que estão fora do frame, pois são somente informações.

Agora vamos abrir o nosso frame, clique em “0:” e em seguida em “children: (7)”. Agora já podemos ver os elementos que possuem as cores de nosso Design System:

Então Abrindo o filho “6:”, queremos ver o preenchimento deste elemento. Clique em “fills:” em seguida “0:”. agora em “color:” já é possível ver nossa cor!

A cor está em um número absoluto de 0 a 1, depois eremos converter ele para o RGB normal.

Voltando a nosso arquivo “getfigma.html” abra ele no bloco de notas novamente. Agora iremos colocar o caminho para os nossos objetos.

Agora na linha 26, onde tínhamos “console.log(resultado);” iremos alterar para:

console.log(resultado.document.children[0].children);

Salve o arquivo e abra no Chrome novamente. Agora no console aparece já dentro da página do figma, onde temos o frame e os objetos de texto soltos.

Agora precisaremos criar alguns loopings no código para que possamos buscar dentro do Figma os elementos pelo token.

Inicialmente iremos buscar o frame, hoje tenho somente um, mas depois eu criarei os frames para tipografia, botões, espaçamentos, etc. Assim precisarei localizar o objeto certo.

Então nosso código fica assim:

<!DOCTYPE html>
<html>
<head>
    <title>Teste Figma</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        fileId = "E07GCLrgPx9sF5GTlzwB9r";
        apiKey = "43292-f9abfb4e-d13b-4dbd-8984-fb3b3383745c";
        $.ajaxSetup({
            headers: {
                'X-FIGMA-TOKEN': apiKey
            }
        });
        $.get("https://api.figma.com/v1/files/" + fileId, function(resultado) {
            
            for (i = 0; i < resultado.document.children[0].children.length; i++) {
                myFrame = resultado.document.children[0].children[i];

                if (myFrame.name === "Color Palette") {
                    console.log(myFrame);
                    return;
                }
            }
        });
    </script>
</body>
</html>

Agora quando recarregar o arquivo no Chrome, irá aparecer o nosso frame “Color Palette”.

Mas eu preciso chegar nas cores deste frame. Então agora é só repetir o looping, um dentro do outro.

Dentro deste arquivo, onde está meu frame? Está aqui. Agora dentro dele, onde está a minha cor principal?

Inicialmente farei o Chrome listar os elementos:

$.get("https://api.figma.com/v1/files/" + fileId, function(resultado) {
            
            for (i = 0; i < resultado.document.children[0].children.length; i++) {
                myFrame = resultado.document.children[0].children[i];

                if (myFrame.name === "Color Palette") {
                    console.log(myFrame.name);
                    
                    for (i = 0; i < myFrame.children.length; i++) {
                        myColor = myFrame.children[i];
                        console.log("  > " + myColor.name)
                    }
                    return;
                }
            }
        });

Assim conseguimos verificar que os objetos foram das cores foram encontrados. Então agora vamos pegar a cor do elemento “brand-primary”. Primeiramente vamos listar o objeto do elemento.

$.get("https://api.figma.com/v1/files/" + fileId, function(resultado) {
            
            for (i = 0; i < resultado.document.children[0].children.length; i++) {
                myFrame = resultado.document.children[0].children[i];

                if (myFrame.name === "Color Palette") {
                    console.log(myFrame.name);
                    
                    for (i = 0; i < myFrame.children.length; i++) {
                        myColor = myFrame.children[i];
                        console.log("  > " + myColor.name)
                        if (myColor.name === "brand-primary") {
                            console.log(myColor);
                        }
                    }
                    return;
                }
            }
        });

Após listar o objeto, vamos abrir ele até encontrarmos a cor, para isso clique no objeto e depois em “fills”, depois “0:” e por fim “color:” Chegamos na localização do código RGBa da cor do nosso primeiro elemento.

Agora que sabemos a localização das cores, vamos modificar o código listar somente o código RGBa:

$.get("https://api.figma.com/v1/files/" + fileId, function(resultado) {
            
            for (i = 0; i < resultado.document.children[0].children.length; i++) {
                myFrame = resultado.document.children[0].children[i];

                if (myFrame.name === "Color Palette") {
                    console.log(myFrame.name);
                    
                    for (i = 0; i < myFrame.children.length; i++) {
                        myColor = myFrame.children[i];
                        console.log("  > " + myColor.name)
                        if (myColor.name === "brand-primary") {
                            console.log(myColor.fills[0].color);
                        }
                    }
                    return;
                }
            }
        });

Atualizando a nossa página no Chrome, agora temos somente a listagem da cor no nosso elemento do Figma:

Porém os valores não estão padrão das cores RGB e tão pouco no formato.

Então vamos modificar o código da nossa página para gerar a cor no formato correto:

        $.get("https://api.figma.com/v1/files/" + fileId, function(resultado) {
            
            for (i = 0; i < resultado.document.children[0].children.length; i++) {
                myFrame = resultado.document.children[0].children[i];

                if (myFrame.name === "Color Palette") {
                    console.log(myFrame.name);
                    
                    for (i = 0; i < myFrame.children.length; i++) {
                        myColor = myFrame.children[i];
                        console.log("  > " + myColor.name)
                        if (myColor.name === "brand-primary") {
            
                            var r = myColor.fills[0].color.r * 255;
                            var g = myColor.fills[0].color.g * 255;
                            var b = myColor.fills[0].color.b * 255;
                            var a = myColor.fills[0].color.a;
                            brandPrimary = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
                            console.log(brandPrimary);
                        }
                    }
                    return;
                }
            }
        });

Agora temos nossa cor em um formato que consigo utilizar no CSS da minha página.
Vou fazer a aplicação na página de forma bruta, apenas para que ilustrar, colocarei um h1 na página irei aplicar a cor principal na fonte do h1.

Então nosso código final ficou assim:

<!DOCTYPE html>
<html>
<head>
    <title>Teste Figma</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
   
   <h1>Teste de integração com o Figma</h1>
   
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        fileId = "E07GCLrgPx9sF5GTlzwB9r";
        apiKey = "43292-f9abfb4e-d13b-4dbd-8984-fb3b3383745c";
        $.ajaxSetup({
            headers: {
                'X-FIGMA-TOKEN': apiKey
            }
        });

        $.get("https://api.figma.com/v1/files/" + fileId, function(resultado) {
            
            for (i = 0; i < resultado.document.children[0].children.length; i++) {
                myFrame = resultado.document.children[0].children[i];

                if (myFrame.name === "Color Palette") {
                    console.log(myFrame.name);
                    
                    for (i = 0; i < myFrame.children.length; i++) {
                        myColor = myFrame.children[i];
                        console.log("  > " + myColor.name)
                        if (myColor.name === "brand-primary") {
            
                            var r = myColor.fills[0].color.r * 255;
                            var g = myColor.fills[0].color.g * 255;
                            var b = myColor.fills[0].color.b * 255;
                            var a = myColor.fills[0].color.a;
                            brandPrimary = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
                            console.log(brandPrimary);
                            
                            $("h1").css("color", brandPrimary);
                        }
                    }
                    return;
                }
            }
        });
    </script>
</body>
</html>

E nossa página agora ficou assim:

Apesar de um pouco difícil de ver, o texto da página está em verde escuro, mas altere no Figma e recarregue a página e, veja a mudança na sua página.

Este é somente o primeiro post de uma série que pretendo escrever, até fazer o Design System de uma tema em WordPress.

Categorias: UI