B2B: Design System da Syndigo - Biblioteca de Componentes Unificada e Pipeline de Design para Código
Sobre o projeto
Resumo do projeto
- Cargo: Senior Manager, UX Design na Syndigo — de nov. de 2023 até à atualidade (mais de 10 anos de experiência em UX)
- Solução: Um único design system consolidado e conectado ao código que abrange todo o conjunto de produtos da Syndigo …. substituindo bibliotecas de componentes fragmentadas e duplicadas por uma única fonte de verdade governada, ligada diretamente ao Storybook, ao GitHub e às ferramentas de prototipagem com IA da empresa.
- Objetivo: Dar aos designers, engenheiros de front-end e gestores de produto um único sistema consistente a partir do qual construir, eliminando a deriva, fechando a lacuna entre design e código, e permitindo que toda a organização avance mais depressa sem sacrificar consistência ou acessibilidade. Entrei na Syndigo … uma plataforma B2B de dados de produto que abrange produtos de MDM, PXM e sindicação … como Senior Manager de UX Design. A minha responsabilidade era tripla:
Liderar o design de produto de ponta a ponta nos produtos principais, incluindo a plataforma Nutrition Analysis e o Syndication Tracker , enquanto supervisionava o designer que trabalhava comigo neles.
Assumir a responsabilidade por um design system fragmentado e sem governação e reconstruí-lo numa única fonte de verdade consistente e conectada ao código.
Gerir e desenvolver uma equipa de mais de 8 product designers, reportando ao VP of Design e colaborando com o Director of Design e a engenharia de front-end.
Processo de design
Abordei a reconstrução em etapas claras, cada uma fundamentada na auditoria.
- Auditoria: inventariei cada componente em todos os produtos, cruzei o Figma com a produção e assinalei cada duplicado e inconsistência.
- Consolidação: reduzi cada conjunto de duplicados a um único componente canónico, documentei cada um com a sua anatomia, variantes e histórico de versões, e introduzi um fluxo de trabalho claro — ideação, em progresso, concluído — com tickets associados aos frames de design.
- Code Connect e Storybook: para os mais de 70 componentes, escrevi os ficheiros de Code Connect e de código de componente e configurei o Storybook para mostrar o design e a forma programada ao vivo lado a lado.
- Integração com GitHub: sem representante de UX no repositório, a engenharia deu-me acesso e submeti os ficheiros de componente e de Code Connect diretamente no GitHub, fechando o ciclo de design para código.
- Prototipagem com IA: fui o primeiro na empresa a usar o Figma MCP para transformar designs em protótipos programados e clicáveis para testar antes do desenvolvimento, e depois restringi o Lovable e o Claude Design aos componentes do sistema, para que as equipas só pudessem gerar trabalho dentro do sistema.
- Acessibilidade: construí e verifiquei cada componente para cumprir os padrões WCAG AAA.
Acessibilidade
O sistema foi construído para cumprir os padrões WCAG AAA. Os componentes foram desenhados para leitores de ecrã — com estrutura semântica, papéis ARIA e etiquetas claras — e testados diretamente com software de leitura de ecrã. A cor foi tratada para várias formas de daltonismo, de modo a que nenhuma informação dependesse alguma vez apenas da cor. A conformidade foi verificada com ferramentas automatizadas de acessibilidade e registada em diretrizes escritas, para que cada equipa pudesse construir e contribuir para o sistema de forma acessível.
Métricas de impacto
Mais de 70 componentes consolidados numa única fonte de verdade conectada ao código.
O primeiro pipeline de design para engenharia da Syndigo, validando designs com protótipos programados antes da construção.
Prototipagem dentro do sistema adotada em toda a empresa pelas equipas de produto e de design através do Lovable e do Claude Design.
Redução do tempo de ciclo de design para desenvolvimento graças a componentes consistentes e conectados ao código.
Contexto e definição do problema
O design system não tinha estrutura nem governação. O mesmo componente existia frequentemente em várias versões inconsistentes entre produtos, e nada ligava o design ao código lançado: sem Storybook, sem componentes conectados ao código e sem presença de UX no GitHub.
O resultado era deriva. Designers, engenheiros e gestores de produto interpretavam o sistema de forma diferente, atrasando a entrega e obrigando os engenheiros a reconstruir a UI a partir de especificações inconsistentes.
Análise de stakeholders
- Engenheiros de Front-End: precisavam de componentes que correspondessem à intenção de design e entrassem diretamente em produção, em vez de reconstruir a partir de especificações inconsistentes.
- Product Designers: a minha equipa precisava de um único kit de componentes governado para se poder focar em resolver problemas em vez de recriar UI.
- Gestores de Produto: precisavam de prototipar e testar ideias depressa sem se afastar do produto real.
Auditoria do sistema
Antes de mudar seja o que fosse, auditei como o sistema era efetivamente usado, para que a reconstrução assentasse em evidências.
- Inventário de Componentes: cataloguei cada componente em uso e identifiquei os duplicados.
- Mapeamento de Figma para Produção: comparei as bibliotecas de design com a UI lançada para localizar a deriva.
- Entrevistas à Equipa: falei com designers e engenheiros sobre onde o sistema ajudava e onde o contornavam.
- Plugin UI Relay: construí um plugin de Figma personalizado para gerir o sistema — mapeando componentes para código, acompanhando cobertura e saúde do código, gerando e sincronizando código de componente, gerindo tokens e templates, e assinalando lacunas a corrigir — transformando a governação e o design para código num fluxo de trabalho contínuo em vez de uma limpeza pontual.
Desafios e soluções
O desafio central era a ligação em falta entre design e código. Sem presença de UX no repositório, garanti acesso ao GitHub e assumi eu próprio a responsabilidade pelos ficheiros de Code Connect e de componente, para que as decisões de design chegassem fielmente à produção em vez de serem reinterpretadas.
A fragmentação era o segundo. Em vez de policiar a consistência à mão, consolidei os duplicados em componentes canónicos e construí o plugin UI Relay para impedir que o sistema voltasse a derivar.
A adoção era o terceiro. Ao ligar o sistema às ferramentas que as equipas já queriam — protótipos programados, Lovable e Claude Design — tornei a construção dentro do sistema o caminho de menor resistência.
