Desvendando o Figma

Meus aprendizados no Workshop

Olá, me chamo Rita de Cássia, sou Product Designer e hoje venho compartilhar com vocês meu aprendizado no Workshop Desvendando o Figma da EDIT, em que tive a oportunidade de participar através da comunidade maravilhosa Pretux (Não consigo nem expressar em palavras o quão grata sou, pela existência maravilhosa, que apoia e incentiva cada vez mais negras e negros entrarem no mercado de trabalho).

Sem mais delongas Vamos lá !

O profissional UX tem a função de unir a dor do usuário e o objetivo do negócio, tudo isso expresso em uma tecnologia; muitas das vezes, essa estratégia de experiência embasada em pesquisas, testes e técnicas, é expressa através da elaboração de interfaces e prototipagens, de baixa, média e alta fidelidade.

Atualmente, temos uma ótima ferramenta que nos ajuda na elaboração dessas interfaces de maneira prática chamada Figma.

Porém, o Figma tem suas peculiaridades de uso em que, muitas vezes como no meu caso, me sentia um pouco perdida no uso da ferramenta, demorava muito para a elaboração das interfaces, por falta de experiência.

O curso Desvendando o Figma da EDIT, foi certeiro, tratando diretamente esta minha dor, que possivelmente é a dor de vários UX iniciantes. Então, se você “ apanha do Figma” e está procurando um curso prático que te ensine técnicas para tornar o uso mais prático e eficaz no dia a dia, pode apostar na EDIT, saiba mais clicando aqui.

O Figma

O Figma é uma ferramenta de design para interfaces que oferece a possibilidade de trabalho colaborativo, ou seja, diversos membros de uma equipe podem explorar e atuar em um mesmo projeto. Ele funciona 100% online, como uma aplicação web. Com isso, não é preciso baixar o programa ou aplicar atualizações constantes. Atualmente, é a plataforma mais usada no universo UI/UX. Se você não conhece a plataforma, clique aqui para saber mais.

O aprendizado

O workshop foi bem dinâmico, explicativo e prático; primeiro, pudemos entender a função de cada ferramenta detalhadamente, e a relevância da área de Comunidade do Figma, onde você pode explorar trabalhos de outras empresas e profissionais e até mesmo usar de designs system e componentes liberados. Basta clicar em Duplicate e terá acesso a um universo de possibilidades, não é demais ?

Um outro assunto bem comentado no curso, foi a importância da organização na hora de elaborar as telas e a criação de componentes.

Então o ideal, antes de você botar a mão na massa, é já organizar e separar as cores que você irá usar, as fontes, símbolos e imagens, assim ficará muito mais prático na hora de estruturar tudo, acredite…

A Praticidade dos componentes

Quando vamos criar um botão que será usado em várias de nossas telas, ele é um componente. Antes eu perdia muito do meu tempo copiando e colando o mesmo botão, testando cores e fontes em cada um deles e alterando a escrita. Com o aprendizado que tive, vi que criando um componente se cria um botão “Mãe” em que qualquer alteração, se replicará para suas cópias, poupando muuuito nosso tempo. Vamos ver como criar um componente ?

Click com um botão direito em sua figura e selecione Create componente.

Quando fazemos uma cópia deste botão componente, todos os outros passam pela mesma alteração. Assim, no dia dia, podemos distribuir nossos botões pelas interfaces e alterá-los todos de uma vez a qualquer momento. Imagina um projeto de 100 telas com vários botões espalhados para alterar um por um daria um trabalhão, não é mesmo?

E lá vai mais uma dica preciosa, que otimizou muito meu tempo: quando criamos um componente, ao selecionar a opção auto layout, conseguimos ter consistência em tudo que escrevemos naquela região, ou seja, não precisamos perder nosso tempo alinhando cada texto dento um botão, isso é feito automaticamente

A criação de componentes nos ajuda também na hora de prototipar: se realizamos a ligação de um botão a uma determinada tela, todos os outros botões do mesmo componente, seguirão o mesmo comportamento.

O Workshop também me mostrou alguns atalhos para facilitar a usabilidade, como por exemplo:

Apertando o ctrl e passando a seta de seleção, você direciona exatamente no objeto desejado.

Apertando T, já abre automaticamente o texto.

Apertando espaço podemos mover a tela por completo.

Para praticar o conteúdo do workshop, elaborei algumas telas de um app de cuidados com as plantas, exercitando as criações de componentes, as organizações, a consistência da interface e explorando o design system.

Por fim, agradeço ao time do workshop Desvendando o Figma da EDIT e à equipe da Pretux. Vocês fazem parte do meu crescimento profissional e de muitas outras pessoas. E agradeço a você, que leu até aqui. Fico à disposição no Linkedin para possíveis dúvidas e um bate papo.