Front-end Design System?

Artigo

Se ainda não sabes o que é um Design System, o tutor da EDIT. Ricardo Melo pode ajudar-te!O Team Leader & Senior Front-end Developer na Grand Union Portugal explica esta metodologia, algumas das abordagens utilizadas, e qual o desafio que apresenta ao Front-end Developer.

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.


Partilhar:

Chat on WhatsApp

    Fale connosco

    Interesses

      Subscrever Newsletter

      Interesses

      Privacy Overview
      EDIT. - Disruptive Digital Education

      This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

      Necessários

      Os cookies necessários ajudam a tornar um website útil, permitindo funções básicas, como a navegação e o acesso à página para proteger áreas do website. O website pode não funcionar corretamente sem estes cookies.

      Estatísticas

      Os cookies de estatística ajudam os proprietários de websites a entenderem como os visitantes interagem com os websites, recolhendo e divulgando informações de forma anónima.