Front-end Design System?

Com a constante evolução no panorama tecnológico, temos cada vez mais a necessidade de desenvolver soluções que se tornem sustentáveis e consistentes visualmente, considerando também a solução tecnológica que as sustenta.

Como tal, é preciso respostas para um desenvolvimento uniforme, com regras e que consiga perdurar no tempo. Os design systems são, em parte, a resposta para estes desafios: um design system é uma metodologia que traz consistência, centralização e envolvimento, quer da marca, quer das equipas que nele vão trabalhar.  Toda a vertente modular de um design system está muito ligada à “corrente” de Atomic Design e à sua conceção modular.

Mais que tudo, desenvolver um design system requer compromisso, empenho e muito pensamento de todas as equipas nele envolvidas; é um processo de pensamento e discussão profundos.

Para os front-end developers é uma enorme oportunidade de desenvolver algo devidamente documentado, com regras específicas de utilização e implementação. Com a necessidade de desenvolver componentes reutilizáveis e com uma linguagem visual coerente, o desafio para o front-end começa pela forma de tornar essa necessidade em realidade.

A arquitetura de front-end tem aqui um papel fundamental, e para isso é possível recorrer a metodologias e tecnologias de forma a desenvolver um ecossistema modular.

Na implementação de um design system, do ponto de vista técnico, deve ser agnóstico de linguagem. Uma das partes fundamentais da arquitetura é a vertente de estilização (CSS) e para isso é possível seguir várias abordagens, como por exemplo:

Scalable and Modular Architecture for CSS (SMACSS)

Inverted Triangle CSS (ITCSS)

Pode também ser feita a sua conjugação com algumas metodologias, como BEM (Block Element Modifier) e a utilização de SASS, que nos permite estender o CSS.

Todos estes pontos são a ponta do iceberg, pois existem vários caminhos que se podem seguir, várias técnicas e metodologias para chegar a uma finalidade que varia de realidade para realidade. O importante é aceitar o desafio e aproveitar a oportunidade para desenvolver algo cada vez melhor e com mais consistência para os utilizadores.