DEV Community

Anderson Nieves
Anderson Nieves

Posted on

Diário Dev7: Por que decidi criar meu próprio design system?

Essa provavelmente será a última postagem do ano. Em vez de fazer uma retrospectiva do projeto, quero aproveitar para apresentar algo novo!

Há um bom tempo, enquanto eu ainda mostrava os mockups para um amigo que também é desenvolvedor, ele comentou algo que ficou na minha cabeça. Ao ver uma página no Figma cheia de componentes e suas variações, ele disse: “Nossa, parece que você está fazendo um design system.”

Aquilo me marcou, porque sim, eu já havia trabalhado em empresas que criavam seus próprios design systems, mas nunca cheguei a atuar diretamente no time que os mantinha. Eu apenas consumia os componentes e seguia as guidelines.

Outra coisa que me veio à mente foram as decisões que tomei neste projeto. Lembro de ter mencionado aqui antes que algumas escolhas seriam voltadas também para o meu desenvolvimento pessoal. Por isso decidi criar os componentes do zero, mesmo sabendo que isso tornaria o projeto mais demorado. Só não imaginava que levaria tanto tempo.

Fiquei com a fala do meu amigo na cabeça e percebi o quanto desenvolver componentes e guidelines do zero é trabalhoso, principalmente sendo um projeto solo.

Fiquei com a fala do meu amigo na cabeça e percebi o quanto desenvolver componentes e guidelines do zero é trabalhoso, principalmente sendo um projeto solo.
Aí pensei em aproveitar o que já tinha feito e transformar isso em um projeto paralelo, um design system/biblioteca de UI para React. Assim, nasceu o ModleKit, que inicialmente vai servir como uma biblioteca de componentes para o Mangos.

Pesquisei sobre design systems e como eles diferem das bibliotecas de componentes de UI. Inicialmente, entendi que um design system é mais abrangente e inclui uma biblioteca de UI. Enquanto uma biblioteca de UI se concentra em elementos reutilizáveis como botões, cards, modais, formulários e outros, um design system compreende a biblioteca, diretrizes para consistência, design tokens para cores e espaçamentos, e uma documentação extensa. No contexto do meu projeto, acredito que o MoldeKit começará como uma biblioteca, mas à medida que evoluir e se tornar mais completo, poderá se tornar um design system completo.

Estou animado e um pouco apreensivo com este projeto. É a primeira vez que crio algo assim, e ele claramente não se destina a uso em produção ou outros projetos. Em vez disso, é um portfólio para demonstrar meu conhecimento e promover meu desenvolvimento pessoal, o que deixo bem claro na documentação do projeto. Espero não estar divergindo muito do projeto do Mangos. Minha estratégia é a seguinte: inicialmente, o MoldeKit conterá apenas componentes para suportar a interface do Mangos. À medida que eu finalizar os componentes que pretendo usar no Mangos, eles serão disponibilizados no MoldeKit.

Agora, quando começo um novo projeto, já tenho meus próprios componentes prontos para agilizar o processo. Deixo aqui embaixo o link do Repositório e do Storybook do projeto para quem quiser conferir e contribuir.

Top comments (0)