Da complexidade à unidade: Reestruturação dos arquivos do Figma para o Design System do Letras

Unifiquei os arquivos do Figma do Design System num só UI Kit, eliminando a duplicação de componentes entre Web, Android e iOS.

---

---

O projeto tem como objetivo a revisão e reestruturação das organizações e formatos dos arquivos Figma no Design System do Letras. O seu desenvolvimento foi impulsionado por questões essenciais, como a definição do tipo de organização dos componentes a ser adotado, seja semântica, atômica ou outra abordagem. Outros pontos-chave incluíram a determinação do nome para o arquivo Figma unificado, a viabilidade de consolidar o maior número possível de componentes compartilhados entre plataformas em um único arquivo, e a consideração de diluir a documentação dos componentes em páginas para facilitar a visibilidade e compreensão dos elementos disponíveis.

O público-alvo do projeto foram os times de Product Design e desenvolvimento, visando um arquivo unificado de UI para todas as plataformas.

Minha responsabilidade principal neste projeto foi impulsionada por meu forte interesse e habilidades na criação e organização de regras e guias em Design System.

Enfrentei desafios significativos, como a pesquisa intensiva em outros Design Systems para entender suas práticas de nomenclatura e organização de arquivos Figma. Além disso, a coordenação constante entre os times de desenvolvimento de diferentes plataformas e o time de design foi essencial para aprovação contínua das propostas.

Utilizei o Notion como ferramenta central, consolidando benchmarks, feedbacks e suposições de cada reunião realizada.

A solução adotada foi unificar os arquivos Figma em um único chamado “UI Kit”, reconhecendo que o Figma era parte, não a totalidade, do Design System.

Optamos pela organização dos componentes pelo modelo Atômico, mas documentados por nomenclaturas semânticas para facilitar a busca e evitar confusões sobre o que é um Átomo ou uma Molécula.

A unificação dos arquivos permitiu que os componentes fossem únicos e utilizados em todas as plataformas, eliminando a necessidade de replicação para Web, Android e iOS.

Com apenas um arquivo para gerenciar, designers e desenvolvedores ganharam maior facilidade para encontrar os componentes necessários. As atualizações de tokens e componentes refletem de maneira abrangente em toda a documentação, simplificando o processo de manutenção e evolução do Design System.