Design System Integrado com IA
Transformei o Design System em uma base operacional para geração assistida por IA, conectando Figma, Code Connect, biblioteca de código e Claude em um único fluxo. O alinhamento alcançou 100% das variáveis entre design e desenvolvimento, permitindo gerar primeiras versões com componentes reais. Como Design Manager, conduzi a integração com os desenvolvedores e defini a curadoria final e os critérios de uso da IA.
Este case não é sobre uma feature entregue ao cliente, é sobre como reorganizei a forma como design e desenvolvimento trabalham juntos, usando IA de verdade no processo. Conectei o Figma, a nossa biblioteca de código e o Claude em um fluxo único: a IA gera a primeira versão já com os nossos componentes reais, e o time de design faz a curadoria final.
Duração
Processo contínuo, em evolução
Cliente
EGS Sistemas
Função
Design Manager
Ferramentas
Figma, Code Connect, Claude (via MCP do Figma), biblioteca de componentes EGS Códigos
Duração
Processo contínuo, em evolução
Cliente
EGS Sistemas
Função
Design Manager
Ferramentas
Figma, Code Connect, Claude (via MCP do Figma), biblioteca de componentes EGS Códigos
Contexto
A demanda por pequenas features cresceu mais rápido que a capacidade do time de validar tudo manualmente antes do desenvolvimento. Já tínhamos a base pronta: os componentes do Figma espelhados em código na biblioteca EGS Códigos, documentados via Code Connect, cada componente visual mapeado ao seu equivalente real no código do aplicativo.
Contexto
A demanda por pequenas features cresceu mais rápido que a capacidade do time de validar tudo manualmente antes do desenvolvimento. Já tínhamos a base pronta: os componentes do Figma espelhados em código na biblioteca EGS Códigos, documentados via Code Connect, cada componente visual mapeado ao seu equivalente real no código do aplicativo.
Fechando o Ciclo com IA, sem Perder Controle
Liguei o Claude, via MCP do Figma, à nossa própria biblioteca de código. Quando chega uma demanda simples, gero uma versão navegável direto no canvas do Figma, já com os nossos componentes reais, não componentes genéricos inventados na hora. A parte difícil não foi fazer a IA gerar telas, isso é o fácil. Foi o trabalho, feito junto com os desenvolvedores, de alinhar 100% das variáveis do Figma com a lib de código. Sem esse alinhamento, toda geração vira um 'quase certo' que dá mais trabalho de corrigir do que desenhar do zero. A IA acelera a primeira versão. A responsabilidade pela qualidade final continua sendo do time de design.
Fechando o Ciclo com IA, sem Perder Controle
Liguei o Claude, via MCP do Figma, à nossa própria biblioteca de código. Quando chega uma demanda simples, gero uma versão navegável direto no canvas do Figma, já com os nossos componentes reais, não componentes genéricos inventados na hora. A parte difícil não foi fazer a IA gerar telas, isso é o fácil. Foi o trabalho, feito junto com os desenvolvedores, de alinhar 100% das variáveis do Figma com a lib de código. Sem esse alinhamento, toda geração vira um 'quase certo' que dá mais trabalho de corrigir do que desenhar do zero. A IA acelera a primeira versão. A responsabilidade pela qualidade final continua sendo do time de design.
Estrutura
Como a pesquisa, o design e a validação aconteceram nas 3 etapas do projeto
Estrutura
Como a pesquisa, o design e a validação aconteceram nas 3 etapas do projeto
Etapa 01 de 03
Pesquisa / Diagnóstico
Identifiquei o gargalo entre demanda e capacidade de validação e mapeei o que já existia de Code Connect e o que ainda faltava alinhar.
Etapa 02 de 03
Design / Implementação
Estruturei o fluxo Figma → lib EGS Códigos → Claude (via MCP) e fechei, com os desenvolvedores, a paridade entre componentes visuais e de código.
Etapa 03 de 03
Validação
Definimos como regra do time: toda geração via IA passa por curadoria de design antes de seguir. A IA é acelerador da primeira versão, não etapa final.
Biblioteca de Entregáveis
Arquivos de Code Connect (componente.figma.tsx) mapeando Figma ↔ código · Fluxo de geração assistida por IA integrado ao MCP do Figma · Diretrizes de quando usar geração via IA vs. desenho manual
Biblioteca de Entregáveis
Arquivos de Code Connect (componente.figma.tsx) mapeando Figma ↔ código · Fluxo de geração assistida por IA integrado ao MCP do Figma · Diretrizes de quando usar geração via IA vs. desenho manual
Impacto Gerado
Conquista: criei um fluxo replicável para acelerar primeiras versões sem perder a curadoria do design. Evidência: 100% das variáveis do Figma foram alinhadas à biblioteca de código, eliminando divergências entre o desenho e a produção. Ação: conectei Claude, MCP do Figma e Code Connect e estabeleci critérios claros para geração por IA ou desenho manual.
Velocidade com controle: demandas simples ganharam um caminho rápido de primeira versão via IA, sem abrir mão da curadoria final do design. Figma e código na mesma língua: o alinhamento de variáveis eliminou a divergência entre o que é desenhado e o que chega em produção. · Fluxo replicável: diretrizes claras de quando usar IA e quando desenhar à mão de acordo com a capacidade do time, não dependência de uma pessoa.
Impacto Gerado
Conquista: criei um fluxo replicável para acelerar primeiras versões sem perder a curadoria do design. Evidência: 100% das variáveis do Figma foram alinhadas à biblioteca de código, eliminando divergências entre o desenho e a produção. Ação: conectei Claude, MCP do Figma e Code Connect e estabeleci critérios claros para geração por IA ou desenho manual.