Nesta página: Plugin para transformar valores brutos de interface em variáveis e estilos reutilizáveis no FigmaPlugin para transformar valores brutos de interface em variáveis e estilos reutilizáveis no Figma

Contexto

Em arquivos de produto que evoluem ao longo do tempo, é comum encontrar valores repetidos espalhados pela interface. Cores semelhantes aplicadas manualmente, tipografia inconsistente, espaçamentos duplicados e padrões visuais que nunca chegaram a ser formalizados como parte de um sistema.

Isso torna a manutenção difícil e atrasa a evolução de design systems, principalmente quando o objetivo não é criar um sistema do zero, mas estruturar um sistema a partir de um produto que já existe.

Durante esse processo em alguns projetos, percebi que grande parte do trabalho consistia em identificar padrões escondidos dentro do arquivo e transformá-los em variáveis e estilos reutilizáveis.

Problema

Extrair um vaiables e styles a partir de um produto existente é um processo lento e manual.

Entre os principais obstáculos:

  • valores de interface repetidos em dezenas de camadas
  • cores semelhantes usadas de formas levemente diferentes
  • tipografia aplicada manualmente em vez de estilos
  • espaçamentos inconsistentes
  • ausência de um fluxo para transformar esses valores em tokens

O trabalho de localizar, nomear e estruturar esses elementos normalmente exige uma limpeza extensa no arquivo.

Hipótese

Se fosse possível analisar uma área da interface e detectar automaticamente valores recorrentes, seria possível acelerar a criação de variáveis e estilos reutilizáveis.

Em vez de reconstruir o sistema manualmente, o designer poderia:

  1. escanear a interface existente
  2. identificar padrões recorrentes
  3. revisar candidatos a tokens
  4. gerar variáveis e estilos reutilizáveis

Solução

Desenvolvi o plugin Selection to Variables, uma ferramenta que analisa elementos selecionados no Figma e identifica valores que podem se tornar ativos reutilizáveis.

O plugin escaneia frames, grupos e seções e extrai propriedades da interface como:

  • cores
  • textos
  • largura e altura
  • arredondamento das bordas (border-radius)
  • tamanhos das fontes (font-size)
  • espaçamento entre linhas (line-height)
  • espaços internos e entre os elemento e distribuição entre eles (gap e padding de auto layout)

A partir desses dados, o plugin detecta valores repetidos, sugere agrupamentos semânticos e permite criar diretamente:

  • variables
  • text styles
  • color styles
  • effect styles

Os assets criados podem ser aplicados automaticamente à seleção, ajudando a transformar partes existentes da interface em estruturas reutilizáveis.

Decisões de produto

Durante o desenvolvimento, algumas decisões foram importantes para tornar o fluxo mais útil.

  • Priorizar valores repetidos
    Nem todo valor encontrado no arquivo merece virar token. O plugin passou a priorizar valores recorrentes, que normalmente representam padrões reais da interface.
  • Separar valores de estilos
    Variáveis representam valores reutilizáveis, enquanto estilos representam padrões visuais. O plugin passou a gerar ambos.
  • Permitir revisão antes da criação
    Automação completa tende a gerar ruído. O fluxo permite revisar e editar nomes antes de criar os assets.
  • Reutilizar variáveis dentro de estilos
    Quando possível, os estilos gerados utilizam variáveis compatíveis, conectando melhor a estrutura do sistema.

Principais funcionalidades

  • Escaneamento da seleção
    Analisa frames, grupos e seções do arquivo.
  • Detecção de tokens recorrentes
    Identifica valores repetidos que indicam oportunidades de padronização.
  • Agrupamento semântico
    Sugere categorias como tipografia, layout, superfície e ação.
  • Criação de assets reutilizáveis
    Permite criar ou reutilizar:
    • variables
    • text styles
    • color styles
    • effect styles
  • Aplicação automática
    Os assets podem ser aplicados diretamente aos elementos selecionados.
  • Exportação JSON
    Os tokens podem ser exportados para uso em pipelines de design tokens ou handoff para desenvolvimento.

Tecnologia

O plugin foi desenvolvido utilizando:

O projeto foi publicado como repositório open source, permitindo colaboração da comunidade.

Aprendizados

Alguns aprendizados importantes surgiram durante o desenvolvimento:

  • Valores repetidos são melhores indicadores de padrão do que simples extração de dados.
  • Automação em design systems precisa manter espaço para revisão humana.
  • Variáveis e estilos funcionam melhor quando são parte do mesmo fluxo de criação.
  • A experiência de uso do plugin é tão importante quanto a lógica técnica. Feedback visual, estados de carregamento e organização da interface foram essenciais para tornar o fluxo compreensível.