Criação e implementação de um Design System completo no Figma, com mais de 200 componentes, ícones, variáveis e tokens. A solução resultou em uma redução de 67% no tempo de criação de telas e melhorou a comunicação entre as equipes de design e desenvolvimento, garantindo consistência e eficiência em todo o processo.
Objetivos do Projeto
Padronização: Criar um conjunto de componentes consistentes que pudessem ser utilizados em diferentes partes do sistema.
Redução de Tempo de Produção: Acelerar o processo de criação de telas e componentes.
Melhoria na Comunicação: Facilitar a interação entre o time de design e o time de desenvolvimento, garantindo que todos seguissem a mesma base de elementos.
Processo
Pesquisa e Planejamento
Realizamos uma análise do estado atual, identificando os pontos críticos como a falta de consistência e os gargalos de comunicação.
Planejamos a criação de mais de 200 componentes, além de ícones, variáveis e tokens para garantir um sistema flexível e escalável.
Criação do Design System
Desenvolvemos componentes desde o zero, criando uma biblioteca de mais de 200 elementos reutilizáveis.
Incluímos ícones personalizados, variáveis de cores, tipografia e tokens, garantindo flexibilidade e escalabilidade.
Todo o sistema foi desenvolvido no Figma, criando um ambiente colaborativo e de fácil acesso para toda a equipe.
Testes e Validação:
Realizamos testes para garantir que os componentes fossem eficientes e funcionais em diferentes contextos.
A interação constante com os desenvolvedores foi essencial para validar a viabilidade técnica dos componentes criados.
Resultados
Redução de tempo: A criação de telas foi acelerada, resultando em uma economia de 67% de tempo no processo.
Antes da implementação do Design System, o tempo médio de criação de uma tela era de 1h 02min 33s, enquanto após a implementação, o tempo médio caiu para 20min 37s. Isso demonstrou uma significativa eficiência operacional, permitindo ao time de design entregar mais rapidamente e com maior consistência.
Padronização: A introdução do Design System garantiu consistência em toda a interface, com mais de 200 componentes e ícones criados.
Melhoria na Comunicação: A colaboração entre as equipes de design e desenvolvimento foi significativamente aprimorada, com um workflow claro e componentes facilmente acessíveis.
Capacitação e Sustentabilidade
Após a entrega do Design System, realizamos workshops para capacitar toda a equipe no uso do novo sistema, garantindo que todos entendessem as vantagens e a aplicação correta dos componentes.
Atualmente, contamos com um comitê de manutenção para garantir a evolução contínua do Design System e seu alinhamento com as necessidades do produto e da empresa.
Ferramentas Utilizadas
Figma: Para a criação e documentação do Design System.
Teams, Jira e Loop: Para comunicação contínua com a equipe de desenvolvimento.
Conclusão
A criação e implementação desse Design System não só resolveu problemas de eficiência e consistência, como também promoveu uma mudança cultural dentro da equipe, permitindo uma entrega mais rápida e colaborativa. Agora, com a manutenção contínua e o comitê responsável, o sistema está em constante evolução para atender às novas demandas da empresa.
