Como fazer um efeito de foco no Figma

Figma permite aos usuários projetar e personalizar muitos recursos. Um dos recursos que você pode usar para melhorar a experiência do usuário é o efeito de foco. O efeito de foco nos botões significa que você verá um design diferente ao mover o cursor em direção a ele. Este efeito em si pode variar, desde um padrão que altera as cores até métodos mais complicados, como alterar a borda ou realces.

Continue lendo para aprender como adicionar um efeito de foco aos seus componentes no Figma.

Criando efeito de foco nos botões

Você pode configurar um efeito de foco se quiser que seu componente tenha uma interação e transição específicas ao passar o mouse sobre ele. O resultado mais simples que você pode criar é alterar a cor do botão para destacá-lo ao clicar. É assim que você pode criar um efeito de foco em um componente de botão:

1. Faça o botão.

   

2. Duplique-o e mova-o para fora do quadro.

   

3. Mude a cor do botão duplicado.

   

4. Crie componentes clicando com o botão direito e selecionando “Criar Componente” no menu ou pressionando “Ctrl + Alt + K” no teclado.

   

5. Clique na guia “Protótipo” na barra lateral.

   

6. Conecte os dois componentes do botão.

   

7. No menu suspenso “Detalhes da interação”, selecione “Enquanto paira”.

   

8. Clique na opção “Abrir sobreposição” no mesmo menu e defina a sobreposição como “Manual”.

   

Quando o usuário passa o mouse sobre o botão original, ele será substituído por outro de cor diferente. Você também pode alterar o texto exibido no botão de maneira semelhante.

Você terá que repetir isso para cada botão.

Criando efeito de foco nas bordas dos botões

Outra maneira de utilizar o efeito de foco nos componentes do botão é criar uma borda que muda quando você passa o cursor sobre o botão. Aqui está como você pode fazer isso:

1. Crie um botão com qualquer texto dentro.

   

2. Duplique-o.

   

3. Adicione o traço à duplicata, remova o preenchimento e altere a cor.

   

4. Clique na guia “Protótipo” na barra lateral.

   

5. Conecte os dois componentes do botão.

   

6. No menu suspenso “Detalhes da interação”, selecione “Enquanto paira”.

   

Agora, quando você visualiza o efeito do botão e passa o mouse sobre ele, as bordas coloridas aparecerão nele.

Usando o plugin Anima no Figma

Outra maneira de adicionar um efeito de foco no Figma é usando uma ferramenta de design para código Anima. Este plugin possui recursos exclusivos que você pode implementar ao criar sites, ícones de aplicativos ou outros componentes da web no Figma. Você só precisa escolher qual componente deseja animar e ajustar as configurações de acordo. É assim que se faz:

1. Escolha o componente.
2. Abra o plug-in Anima.

   

3. Toque na opção “Efeito Hover”.

   

4. Escolha o efeito (aumentar, diminuir, brilho da sombra e muito mais).

   

5. Personalize efeitos de animação como “Duração” ou “Curva”.

   

6. Toque no botão “Visualizar” para ver os efeitos.

   

7. Clique em “Salvar”.

   

Outra característica do plugin Anime é que você pode personalizar a transição CSS. Com ele, você pode controlar a velocidade da animação e ajustar suas configurações de acordo com suas preferências ou torná-las mais naturais.

Aproveite as vantagens do recurso de efeito Hover do Figma

Seja um designer profissional ou iniciante, você tem muitos recursos no Figma para criar designs e animações exclusivos para seus componentes, ícones e objetos. O efeito de foco permite alterar o texto ou adicionar destaques, cores diferentes, bordas diferentes e muito mais. Saber criar esses efeitos é de extrema importância para tornar seu primeiro site interativo e dar um toque pessoal a ele.

Qual efeito de foco você implementa em seus componentes no Figma? Deixe-nos saber na seção de comentários abaixo.