Ascent Design System
Biblioteca Figma escalável para times de produto
Projeto pessoal · 2024
Product Designer
2023 - 2024
- Eduardo Hessel
- +1 Product Designer
- Figma
- Design Tokens
- Componentes
- Handoff
Resumo
Visão geral
Ascent é uma biblioteca Figma com componentes, variantes e tokens para acelerar o design de interfaces em produtos digitais.
Meu papel
- Estruturação de variáveis e estilos no Figma.
- Criação de componentes com variantes e auto-layout.
- Guidelines de uso para designers e desenvolvedores.
Soluções
Componentes modulares, nomenclatura clara e tokens compartilhados para handoff eficiente.
Sobre o produto
Sobre o projeto
Ascent foi desenvolvido para padronizar a criação de telas em Figma, reduzindo tempo de design e facilitando alinhamento com engenharia.
Problemas
Desafios de negócio
Arquivos Figma desorganizados aumentam tempo de design e geram retrabalho no handoff para desenvolvimento.
Desafios do usuário
Designers perdem tempo buscando componentes e recriando padrões que já deveriam existir na biblioteca.
Como estruturar um design system em Figma que escale com o produto e reduza inconsistências?
Estratégia
Variantes bem definidas
Componentes com estados e tamanhos mapeados para cobrir a maioria dos casos de uso sem duplicação.
Tokens no Figma
Cores, tipografia e espaçamento como variáveis para mudanças globais rápidas.
Soluções
Core components
Botões, campos, navegação e feedback com auto-layout e propriedades expostas.
Templates de tela
Layouts base para acelerar novas features mantendo consistência visual.
Impacto
A biblioteca encurtou ciclos de design e criou uma linguagem visual compartilhada entre projetos.
Aprendizados
Nomenclatura importa
Padrões de nomeação e organização de páginas no Figma fazem diferença na adoção do system pelo time.