Projeto · Dezembro de 2022

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.

Dilton
Quem é você?
Sou Product Designer, com oito anos dedicados a transformar ideias em produtos digitais.
A maior parte deles construída no Letras, onde acompanhei diferentes fases da plataforma e ajudei a moldar sua identidade visual, sistemas e experiência ao longo do tempo.
Meu foco está em UI Design, Design System e soluções criativas, incluindo a criação e documentação de guias que orientam como um produto deve ser construído visualmente.
E antes disso?
Antes disso, cresci brincando com vídeo, fotografia e edição.
Passei por game design, produção multimídia, e várias formas de criar até encontrar no design de produto um lugar onde tudo isso se encontra.
O que te move?
Sou movido pelo fazer: gosto de colocar a mão na massa, construir com cuidado visual, e equilibrar criatividade com clareza.
Aqui você encontra os projetos que carregam essa forma de trabalhar.