Boas Práticas de Design: Assets
Compreender que o tempo é extremamente valioso faz com que seja comum a busca por formas eficazes para otimizá-lo, e o mercado de trabalho dificilmente foge dessa realidade, especialmente porque ‘tempo é dinheiro’. Pensando especificamente em um profissional da área de design, que lida constantemente com prazos e cujas diversas atividades de um projeto muitas vezes dependem dele, ter boas práticas ou técnicas para aprimorar o processo de desenvolvimento pode ser essencial para ‘aliviar’ a carga de trabalho, além de se destacar da grande maioria.
Tendo tudo isso em mente e considerando que o dinamismo do ambiente corporativo leva a constante solicitações de alterações, mas como seria possível agilizar tais momentos?
Uma solução é se utilizar de componentes, que consistem em elementos reutilizáveis no design, ou seja, trazer (componente mãe) que permite criar diversas cópias idênticas (componentes filhos) que carregam todas as características, onde sendo alterado quaisquer coisa da mãe, será alterada automaticamente em suas filhos. Quando o componente principal é alterado, todas as cópias são atualizadas automaticamente, como mostrado no exemplo a seguir.
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 Figma. Como o exemplo deste artigo, o componente criado será um botão.
Primeiro clicando no menu de texto ou pressione a tecla T e escreva o texto que será exibido o botão. Para componente principal, use um texto genérico, como "button", já que ele pode ser modificado posteriormente.
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 transformará o texto em um frame, onde é possível definir também sua largura (width) e altura (height), por meio da feramenta apresentada na Figura (3). Após definir todas as propriedades do botão, sendo elas por exemplo tamanho, cor, tipografia e etc.
Logo após realizar tais tarefas clicando com o botão direto e selecionando Create Component. Seu botão Mãe a partir desse momento está pronto.
Existem diferentes formas de criar variantes, a seguir será apresentado um destes métodos. Logo a seguir clique em Properties, que lhe serão apresentadas diferentes opções como apresentada na Figura (5), escolha a opção Variant, como no exemplo a seguir.
Clicando em uma variant será criada uma variant1 no componente Mãe
Sendo que o ideal seja nomear cada uma das variantes da Mãe. Como boa prática é nomear, cada variante seguindo um padrão. Por exemplo, nomeá-las com base no estado: "Desativado", “Padrão” e “Clicado”.
Pronto! Agora seu componente principal e variantes já estão finalizados.
Para ter acesso aos filhos, basta clicar no menu de Assets, localizado no campo superior esquerdo e selecionar o item desejado.
Com este tutorial, você pôde explorar como a componentização não apenas torna seus projetos mais eficientes, mas também garante consistência em cada detalhe do seu projeto. A prática de nomear corretamente as variantes é essencial para facilitar atualizações futuras, permitindo que o fluxo de trabalho seja mais organizado e ágil. Agora é só aplicar essas dicas e elevar a qualidade dos seus projetos e garantir um design fluido e profissional.
