Variable Collection Creator
Ano: 2025
Duração: 1 mês
Desafio
Variable Collection Creator é um plugin para Figma criado para simplificar uma das tarefas mais repetitivas e técnicas no processo de construção de Design Systems: a criação de variáveis.
Desenvolvido como um projeto experimental, explorando o uso de IA para construir ferramentas de design, o plugin nasceu para automatizar a criação de coleções básicas como espaçamentos, tamanhos de fonte, paddings e mais, acelerando o setup de design tokens e evitando erros manuais.
Mais do que a solução em si, esse projeto representa uma jornada de aprendizado profundo sobre desenvolvimento, lógica e colaboração entre design e engenharia.
Ferramentas utilizadas
Processo
Pesquisa e discovery
Sem ter um background de desenvolvimento, iniciei o projeto investigando o funcionamento da API do Figma, analisando plugins existentes e entendendo quais necessidades não estavam sendo atendidas. Percebi que, embora o recurso de Variables seja poderoso, seu uso ainda exige um trabalho inicial considerável, especialmente em contextos de design system. A partir disso, defini um objetivo claro: criar um plugin que automatizasse esse processo sem comprometer a estrutura ou a escalabilidade.
Definição de escopo
Comecei a mapear quais coleções de variáveis deveriam estar presentes na versão inicial e quais funcionalidades seriam realmente essenciais. Inicialmente, trabalhei apenas a com possibilidade de criar coleções customizadas visando dar mais flexibilidade à pessoa usuária.
Além disso, pesquisei ferramentas de IA para me auxiliar no desenvolvimento do plugin. Inicialmente, testei o uso do ChatGPT e do Bolt.new, mas foi com o GitHub Copilot que consegui melhores resultados.
Desenvolvimento de MVP
Para tirar a ideia do papel, utilizei a API oficial do Figma para desenvolvimento de plugins e optei por usar React na construção da interface. O GitHub Copilot foi fundamental nesse processo: mesmo sem experiência prévia com TypeScript ou Webpack, consegui montar a lógica do plugin a partir de sugestões de código e de um entendimento gradual da estrutura.
À medida que fui compreendendo o comportamento do plugin, consegui ajustar e até mesmo escrever trechos inteiros de código por conta própria.
Testes e refinamento
Durante o desenvolvimento, adotei ciclos curtos de iteração e feedback. Criei protótipos internos, testei fluxos com amigos designers e refinei tanto a interface quanto a lógica com base nas dificuldades encontradas. Essa fase foi essencial para garantir que o plugin não só funcionasse tecnicamente, mas também fosse simples, claro e confiável de usar no dia a dia.
Lançamento do plugin
Por fim, realizei a publicação do plugin na comunidade do Figma, tornando-o disponível gratuitamente para qualquer plano.
Funcionalidades
Componentes
Apesar de estruturalmente simples, me empenhei em fazer a interface o mais escalável possível. Pensando nisso, além de tornar o plugin funcional também projetei com auxílio do Copilot uma série de componentes:
Display card
Input text
Button
Tab bar group
Segmented control
Desse grupo se destacam:
Display card: O componente mais utilizado na Interface e que precisava ser muito versátil para atender cenários diversos. Possui uma composição padrão com título e ícone, mas pode receber conteúdo customizado. Usei este componente para configurar e listar coleções de variáveis.
Inputs de texto: Para esse componente, além da variante principal, de inserção de texto, também adicionei uma variante com botões de controle para campos numéricos. Dessa forma, é possível digitar o valor, mas também ajustá-lo com botões.
Evolução da UI
Primeira versão
A primeira versão funcional do plugin permitia criar uma coleção numérica personalizada, definindo o nome da coleção, prefixo e um valor escalável. Também era possível gerar uma coleção básica de cores, sem opções de personalização.
Nessa etapa inicial, as coleções eram adicionadas a uma fila e exigiam uma ação adicional para serem efetivamente criadas no Figma, o que tornava o processo menos fluido.
Versão em produção
A versão atual do plugin ainda permite a criação de coleções personalizadas, mas agora inclui a opção de gerar um conjunto pré-definido de coleções, baseadas nas principais categorias de tokens de design systems. Mesmo nesse conjunto pré-definido, é possível personalizar aspectos como o número de variáveis e a escala numérica.
Eliminei a necessidade da fila para criação das coleções; agora, a ação principal já as cria diretamente no Figma. Além disso, adicionei uma listagem das coleções criadas, evitando a duplicação e proporcionando uma visão mais clara do que já foi desenvolvido.
Resultados
O Variable Collection Creator trouxe ganhos significativos em eficiência e consistência na criação de tokens no Figma.
Hoje, em um cenário manual:
Criar uma coleção leva aproximadamente 10 segundos, e cada variável adicional requer mais 10 segundos. Assim, para uma coleção com 10 variáveis, o tempo total seria de cerca de 110 segundos.
Ao criar 5 coleções com 10 variáveis cada, o tempo manual estimado seria de aproximadamente 9 minutos.
Processo automatizado
Próximos passos
Avaliar melhorias de código;
Estudar novas funcionalidades para o plugin como, por exemplo, gerar uma documentação das coleções criadas;
Avaliar a possibilidade de criar coleções de cores personalizadas;
Disponibilizar o projeto de maneira open source no GitHub para colaboração e coleta de feedback.
Aprendizados
Melhoria significativa na compreensão de lógica de programação
Capacidade de colaborar melhor com times de engenharia
Experiência prática na criação de produto digital — do conceito à publicação
"Não me tornei um desenvolvedor, mas certamente esse aprendizado vai me permitir colaborar de forma mais eficiente com equipes de engenharia no futuro. A experiência de construir um produto — mesmo algo simples como um plugin — é extremamente valiosa para qualquer designer."
Conteúdo complementar
Confira também
Vamos conversar
Meus contatos
Telefone: (051) 9 8434.6001
Mande uma mensagem
GABRIEL
ARRUDA
•
2025