Boas Práticas de Design: Componentização

Patrick Inocencio
3 min readJun 10, 2024

--

Possuir o entendimento que o tempo em si é extremamente valioso, torna-se comum a busca por formas eficazes de otimiza-lo, o mercado de trabalho dificilmente fugiria de tal realidade, até mesmo porque "tempo é dinheiro". Sendo pensando particularmente em um profissional da área de design, que lida constantemente com prazos e que diversas atividades de um projeto estão tecnicamente "dependendo" dele, possuir boas práticas, ou técnicas para aprimorar no momento de desenvolvimento pode ser o ideal para "aliviar" como também se destacar da grande maioria.

Tendo tudo isso em mente e que diversos fatores ocorrem no meio corporativo, o que ocorre com muita frequência, são as alterações, mas como seria possível agilizar tais momentos, sendo que não é possível saber o que foi produzido, está de acordo com o que o cliente deseja?

Por meio de componentes, que consistem em elementos reutilizáveis no design, ou seja, lhe garante a possibilidade de utilizar diversas cópias tendo um elemento (mãe) que possui diversos elementos (filhos) que carregam todas as características, onde sendo alterado quaisquer coisa da mãe, será alterada em suas filhos, como visto no exemplo abaixo.

Figura 1

Sabendo que por meio dos componentes uma alteração na mãe, resultará na atualização imediata nos seus filhos, a baixo será apresentado um tutorial de como criar um componente na plataforma do Figma.

Clicando na ferramenta T, escreva o nome da ação, independente de quaisquer que seja.

A seguir por meio da criação de um frame pelo atalho (shift + a) ou clicando no botão direito e selecionando a opção Frame Selection.

Tal ação tornará o botão expansível, mas sendo possível alteração

Após definir todas as propriedades do seu botão, basta apenas clicar em Create Component.

Logo a seguir clique em Properties e escolha a opção Variant.

Clicando em uma variante será criada uma variante no componente Mãe

Sendo que o ideal seja nomear cada uma das variantes da Mãe.

Tendo realizado todas variantes desejadas, o componente mãe está finalizado.

Para ter acesso aos filhos, basta ir para a o canto superior esquerdo em Assets, para ter acesso aos filhos

Agora com tutorial acima é possível otimizar um pouco mais os momentos de alterações nos seus projetos!

--

--