Duração: 1 hora, 21 minutos | Lições: 9
No design da interface do usuário, os componentes são elementos regulares, como botões ou formulários, usados durante o processo de design em prol da velocidade e da eficiência.
No Figma, você pode criar componentes com muita facilidade – e como parte de seu fluxo de trabalho padrão – para que possam ser reutilizados posteriormente em diferentes projetos. Portanto, um esforço inicial mínimo (e único) significa que você terá uma experiência de design simplificada daqui em diante. Vamos mergulhar!
1. Introdução
Assistir vídeo aula [0:00] ↗
Então, sim, criar um botão e salvá-lo como um componente significa que você pode usar o mesmo botão várias vezes em vários designs. Mas, de longe, o aspecto mais popular dos componentes no Figma é o fato de que, se você fizer uma alteração em um componente salvo, essa alteração será refletida automaticamente em todas as instâncias desse componente em seu design atual.
Se você quiser alterar a cor de um botão, basta fazê-lo no botão principal e todas as instâncias desse botão serão atualizadas.
Agora, para acompanhar este curso, você precisará de alguns arquivos à sua disposição. Baixar o seguinte irá ajudá-lo a seguir este tutorial passo a passo. Depois de ter tudo baixado e pronto para uso, passe para a próxima lição:
Arquivos Fonte
Ícones
Ícones Incríveis de Fonte
logotipos de criptomoeda
2. Criando um ou mais componentes
Assistir vídeo aula [4:29] ↗
Com o arquivo Figma de origem aberto, você pode iniciar o processo de criação de um componente. Para criar um componente, primeiro você precisa selecionar as camadas que deseja incluir nele. Continuando com nosso exemplo de botão, você precisa selecionar as camadas de texto e forma – ou um grupo de elementos – para garantir que está criando um componente corretamente.
Basta clicar com o botão direito do mouse para criar um novo componente dessa maneira.
Um elemento (ou grupo de elementos) ficará roxo no menu à esquerda quando se tornar um componente.
3. Componentes principais x instâncias
Assistir vídeo aula [10:38] ↗
Uma coisa que é importante entender sobre os componentes está relacionada à terminologia – apenas para que você não se confunda à medida que avança nos vários tutoriais do Figma.
Portanto, na primeira vez que você cria um componente, ele é chamado de componente principal. No entanto, sempre que você cria uma cópia desse componente principal, isso é chamado de instância.
Notavelmente, você não pode alterar nenhum atributo de uma instância – apenas no componente principal.
4. Fazendo alterações em componentes e instâncias
Assistir vídeo aula [17:51] ↗
Você pode alterar o conteúdo contido na instância de um componente. Isso é chamado de substituição de componente e descreve qualquer uma das alterações feitas em uma instância individual. Essas substituições podem incluir coisas como:
- O conteúdo dentro da instância
- O preenchimento e o traço
- raio da borda
- Grades de layout
- Exportar configurações
- Nomes de camadas
- Estilos de camada e texto
5. Trocando instâncias de componentes
Assistir vídeo aula [28:06] ↗
No Figma, a troca de instância descreve o processo em que você pode trocar a instância de um componente por outra instância. Isso pode ser útil em uma ampla variedade de situações, mas é particularmente útil em menus nos quais você pode precisar mover opções de menu ou botões em tempo real.
6. Nomeando e organizando componentes
Assistir vídeo aula [34:39] ↗
Um arquivo de design deve estar sempre organizado e o Figma nos fornece uma tonelada de ferramentas para isso. Uma delas é a capacidade de organizar componentes automaticamente se forem nomeados de uma determinada maneira.
Usando a convenção de nomenclatura separada por “barra” ou “” no Figma, o que faz com que todos os componentes selecionados sejam nomeados como “Nome que você escolher / nome do componente”. Isso torna muito mais fácil localizar itens semelhantes em sua lista de componentes. Neste exemplo, os itens são organizados na categoria “Ícone de menu”.
7. Usando variantes de componentes
Assistir vídeo aula [47:00] ↗
As variantes permitem agrupar componentes semelhantes dentro do mesmo contêiner. Por exemplo, um botão pode ter estados diferentes, como pressionado, mouse sobre ou desativado. Mas, em vez de criar um componente separado para cada um desses estados, você pode criar um único componente com diversas variantes.
O uso de variantes de componentes resulta em uma prancheta e fluxo de trabalho muito mais limpos.
8. Trabalhando com propriedades de componentes
Assistir vídeo aula [1:00:26] ↗
Agora você sabe que as variantes de componentes podem ser muito poderosas, mas chega um ponto em que usá-las se torna ineficiente. Por exemplo, você pode ter um botão com dezenas de variantes para dar conta de diferentes opções de cores, estados, modo claro e escuro e assim por diante. Mas ter todas essas variantes pode dificultar a localização correta de que você precisa a qualquer momento.
A solução para esse problema no Figma são as propriedades dos componentes. Embora não substituam as variantes, eles trabalham junto com elas para simplificar bastante o processo de design.
Existem 4 tipos de propriedades de componentes: troca de instância, texto, booleano e variante.
9. Prototipagem com componentes interativos
Assistir vídeo aula [1:13:31] ↗
A prototipagem tem tudo a ver com interação, e seu objetivo é mostrar a você como um design funcionaria no mundo real. Para tornar os protótipos que produz o mais próximo possível do real, Figma permite criar componentes interativos.
Componentes interativos permitem alternar entre diferentes variantes em um protótipo.
Saiba mais sobre o Figma e como usá-lo
Agora que você já conhece os componentes do Figma, talvez queira expandir ainda mais seu conjunto de habilidades. Esta coleção de tutoriais deve mantê-lo ocupado por algum tempo!
