Como reconstruí do zero uma biblioteca de componentes Shopify no Figma e eliminou o "Design Drift" — resultando em 90% de redução no tempo de Design QA.
A Casper operava com uma biblioteca de componentes obsoleta no Figma que não acompanhava a complexidade real do código no Shopify. Isso gerava um problema sistêmico chamado "Design Drift": o que era desenhado não era o que era desenvolvido.
Na prática, isso significava que designers eram forçados a "destacar" (detach) instâncias de componentes para customizá-los manualmente, e os desenvolvedores precisavam "adivinhar" estados de hover, active e responsividade — gerando inconsistência em toda a operação de e-commerce.
Inconsistência entre estados e visibilidade, gerando discrepâncias entre os mockups de design e o código em produção — e retrabaho constante.
Desenvolvedores recebiam designs estáticos sem propriedades dinâmicas de componentes, tendo que interpretar e "adivinhar" comportamentos interativos.
Manter e atualizar centenas de instâncias de componentes era demorado e propenso a erros, dificultando a escala da operação.
A biblioteca existente não refletia o framework Shopify Polaris, criando uma lacuna técnica crescente entre design e engenharia.
Atuei na camada de Design Operations, reconstruindo o sistema do zero com foco em paridade técnica. O objetivo central era fazer os componentes do Figma "falarem a mesma língua" que o código do Shopify.
Utilizei Nested Instances para modularidade e Boolean Properties para reduzir o número de variantes de centenas para dezenas, tornando a biblioteca leve e intuitiva. Cada componente foi configurado com Auto Layout e grades específicas para replicar o comportamento responsivo do framework Polaris do Shopify.
A biblioteca reconstruída: componentes modulares com Boolean Properties, Variantes e Nested Instances espelhando o comportamento do Shopify Polaris.
A solução foi executada maximizando os recursos avançados do Figma para atingir paridade funcional real com o código Shopify.
| Feature do Figma | Objetivo e Implementação |
|---|---|
| Variants | Usadas extensivamente para gerenciar estados fixos (Active, Disabled, Hover) e tipos primários (Primary Button, Secondary Button), simplificando a seleção de componentes. |
| Boolean Properties | Implementadas para todas as opções de visibilidade (Show Icon, Show Tooltip). Permitia alternar elementos on/off sem criar centenas de variantes. |
| Nested Instances | Usadas para modularidade. Componentes complexos (Card UIs, Navigation Bars) utilizavam componentes mais simples como instâncias aninhadas, herdando propriedades e tornando atualizações globais seamless. |
| Auto Layout & Grid | Críticos para layouts responsivos. Configurados para gerenciar espaçamento interno e replicar a estrutura de colunas e breakpoints do Shopify. |
Comparativo do fluxo de trabalho: antes (detach manual e ambiguidade) vs. depois (toggle de propriedades e handoff zero-ambiguidade).
| Categoria | Resultado |
|---|---|
| Eficiência | 90% de redução no tempo gasto em Design QA. Designers passaram a configurar componentes via toggles e variantes em vez de editar layers manualmente. |
| Developer Handoff | Zero ambiguidade nas especificações. Desenvolvedores receberam especificações precisas para comportamentos dinâmicos (estados, responsividade, lógica de visibilidade) diretamente do painel de propriedades. |
| Integridade de Design | Eliminação do "Design Drift": todo novo design criado com a biblioteca era inerentemente consistente com o código em produção. |
| Escalabilidade | A biblioteca estabeleceu uma fundação modular e robusta, permitindo que a Casper escalasse suas operações de design mantendo uma única fonte de verdade. |
"O handoff tornou-se 'zero ambiguidade': as propriedades do Figma passaram a falar a mesma língua das propriedades do código."