Tutorial do Framer: 7 microinterações simples para melhorar seus protótipos

Bem-vindo à segunda parte da nossa série de tutoriais do Framer. No último artigo, aprendemos sobre o básico do uso do Framer no modo Design, bem como como escrever um código simples para dar vida aos nossos designs. Nesta parte, vamos nos concentrar no uso do Framer para criar microinterações e transições animadas. Veremos como criar sete interações úteis para seus protótipos.

Por que você deve prototipar pequenas interações?

Movimentos suaves, mudanças de estado e transições sutis ajudam o usuário a entender como usar sua interface, fornecendo feedback sobre determinadas ações. Muitas vezes, essas transições ecoarão os análogos do mundo real (como o deslizamento de um controle de chave) ou utilizarão padrões comuns de interação do dispositivo (como toque para expandir). Neste tutorial, focaremos nas interações que adicionam um toque final à interface para orientar a compreensão e despertar o prazer do usuário.

Dê uma olhada nos exemplos abaixo. Designers de todo o mundo estão criando essas microinterações em vários produtos.

Os 7 protótipos

Neste tutorial, apresentarei uma visão geral de cada microinteração e alguns trechos de código. Usaremos várias técnicas diferentes, para que você possa escolher a que melhor se adapta ao seu produto. Não existe uma maneira “certa” de criar qualquer coisa dentro do Framer Studio – como mencionei em meu artigo anterior, o Framer lhe dá muita liberdade para criar do jeito que você quiser.

Você já viu interações como essas antes? Claro, você tem! Você os vê todos os dias em seu smartphone. É hora de criar o seu próprio.

1. Botão de ação

O botão de ação geralmente representa a ação principal da tela atual. Às vezes contém várias ações dentro. Estaremos criando uma interação para o segundo caso. Baixe o protótipo de trabalho aqui: https://framer.cloud/ShBnH

Etapa 1: crie três botões em forma de círculo

Para começar, crie um botão principal em forma de círculo com um ícone dentro e dois botões menores colocados sob o botão principal. Não se esqueça de marcar todas essas camadas como interativas no modo de design (com o indicador de destino).

Etapa 2: projetar dois estados para todas as camadas

Crie dois estados diferentes para as camadas. Use o código abaixo para fazer com que os botões menores se movam acima do principal e gire o ícone 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Etapa 3: adicionar um evento

Para tornar este protótipo animado, temos que adicionar um evento. Depois de tocar no botão de ação, altere os estados de todas as camadas:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Etapa 4: animação de primavera

Neste ponto, a animação parece muito mecânica. Para adicionar um toque humano, adicionaremos uma animação de primavera para todas as camadas:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

O botão de ação está pronto para ser usado!

2. Interruptores interativos

As etapas abaixo permitirão que você crie sua própria interação de switch. Baixe o protótipo de trabalho aqui: https://framer.cloud/ieypV

Etapa 1: projetar um playground de switch

Você precisará apenas de duas coisas: o próprio switch, que contém pelo menos duas camadas (fundo e ponto), e algumas camadas para animar depois de usar o switch.

Etapa 2: criar estados

Você se lembra do primeiro artigo como projetar estados diretamente no Framer Studio? Projete seus estados como quiser ou use minhas configurações:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Etapa 3: adicionar um evento

Para fazer o protótipo funcionar, temos que adicionar um evento ao switch. Depois de tocar no interruptor, vamos alterar o estado de todas as camadas:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Etapa 4: ajuste o tempo

Para tornar tudo mais natural, ajuste o tempo e o atraso de todos os estados:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Agora nosso protótipo está pronto!

3. Ação de deslizar o item da lista

Essa é uma interação típica para remover, arquivar ou salvar itens de uma lista. Deslize para a esquerda ou para a direita e um item será removido. Baixe o protótipo aqui: https://framer.cloud/rzMWP

Etapa 1: criar um protótipo no modo Design

Você pode usar seu próprio design, se desejar. Você apenas tem que manter a mesma estrutura das camadas. Como você pode ver na imagem acima, todos os itens da lista têm um botão “desfazer” embaixo deles.

Etapa 2: tornar os itens arrastáveis

Para simplificar, criaremos uma interação apenas para o primeiro item da lista. Primeiro, torne o item da lista arrastável: item.draggable = true .

Em seguida, bloqueie o eixo vertical: item.draggable.vertical = false .

Configure as restrições da área arrastável: item.draggable.constraints

E, finalmente, defina o tamanho para o item size: size: item .

É assim que todo o código se parece:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Agora você pode deslizar para a esquerda e para a direita e o item sempre retornará à sua posição original.

Etapa 3: criar estado

Em seguida, crie o estado para o item da lista quando ele for removido. Eu simplesmente o movi para fora da tela usando o eixo x.

 item.states.a = x: -360

Etapa 4: alterar o estado após deslizar

Por fim, temos que criar um gatilho para iniciar a interação. Quando arrastamos o item para o lado esquerdo da tela, ele deve ser removido. O código ficará assim:

 item.onMove -> if item.x < -70 item.stateCycle("a")

Nesse caso, estamos usando uma instrução “if”. O código acima basicamente diz, quando movemos a camada do item mais de 70px, então mudamos o estado do item para o estado 'a'. Você pode ler sobre instruções if na documentação do Framer Studio: https://framer.com/getstarted/programming/#conditional

Etapa 5: desfazer a ação após tocar

Estamos quase terminando essa interação. A única coisa que resta é desfazer esta ação:

 item_bg.onTap -> item.stateCycle("default")

Você deve estar familiarizado com este código do tutorial anterior.

Etapa 6 (opcional): ajuste o tempo da animação

Se desejar, você pode ajustar o tempo da animação:

 item.animationOptions = time: 0.75 curve: Spring

4. Carregador de botões

Essa é uma interação muito útil para ações que exigem carregamento ou tempos de espera para o usuário. Quando criarmos essa interação, você aprenderá a gerenciar muitas animações que estão acontecendo uma a uma. Baixe o protótipo aqui: https://framer.cloud/FxmHN

Etapa 1: criar um protótipo no modo Design

Crie um botão simples com quatro subcamadas: uma barra de progresso e três ícones para diferentes estados. Eu projetei meu botão com um ícone de upload visível, uma barra de progresso na parte inferior com uma largura de 0 e mais dois ícones ocultos.

Etapa 2: adicionar um evento

Todo esse protótipo pode ser feito sem escrever uma única linha de código, apenas usando os recursos de autocodificação do Framer.

Primeiro, adicione um evento. Vamos acionar toda a interação com um toque na camada do botão:

Este é o código que o Framer escreveu para você:

 button.onTap (event, layer) ->

Etapa 3: criar animações

Usaremos os recursos de autocodificação do Framer para projetar todas as animações:

Eu projetei quatro animações com tempos diferentes:

• A primeira animação está alterando a largura da barra de progresso.
• A segunda é ocultar o ícone de upload com opacidade.
• O terceiro está girando e mostrando o ícone do carregador.
• O último está mostrando e dimensionando o ícone de verificação.

Aqui está o código que Framer escreveu para cada uma dessas animações:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Etapa 4: redefinir a animação de carregamento

Como você deve ter notado, não ocultamos o ícone do carregador após a conclusão da animação. Para finalizar este protótipo, acione outra animação usando este evento: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Puxe para atualizar

Quase todos os produtos com uma lista dentro dele usam esse tipo de interação. O usuário puxa a lista inteira para atualizá-la. É muito fácil de criar. Baixe o protótipo aqui: https://framer.cloud/DgMDw

Etapa 1: crie uma lista simples com ícone de atualização

Podemos pular direto para o modo de design. Precisamos de duas coisas: uma lista e um ícone de atualização. O crucial aqui é ocultar o ícone de atualização com opacidade e colocá-lo em nossa lista:

Etapa 2: criar um componente de rolagem

Queremos tornar nossa lista rolável. Para fazer isso, use um componente de rolagem e adicione uma camada de lista a ele:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Etapa 3: tornar o ícone de atualização visível

Crie um estado simples para o ícone:

 icon.states.a = opacity: 1

Etapa 4: adicionar um evento depois de puxar para baixo

Nossa lista é rolável agora. Isso significa que quando estamos rolando para cima ou para baixo, todo o conteúdo da rolagem está se movendo no eixo 'y'. Com esse conhecimento, podemos criar um evento:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Novamente, estamos usando uma instrução “if”. Se a lista for puxada para baixo (movida no eixo y) mais de 180px, acionaremos uma ação. Nesse caso, vamos animar duas camadas: a lista e o ícone de atualização.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Estamos usando “animate” para mover a lista 210px para baixo e girar o ícone de atualização 360°.

Etapa 5: redefinir todos os estados

O protótipo está quase funcionando, mas temos que redefinir todas as camadas após a atualização da animação. Para fazer isso, usaremos um evento após o término da animação:

 icon.onAnimationEnd ->

Estamos animando a rotação do ícone de atualização de volta à sua posição original e, usando o ciclo de estado, estamos redefinindo o estado de fundo da lista e do ícone:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

É isso!

6. Interação de arrastar

Você já notou que enquanto você está arrastando um item para dentro de um aplicativo, sempre há algo acontecendo com o próprio item? Às vezes, o item encolhe, talvez outros itens fiquem borrados ou a opacidade seja alterada. Vamos aprender como criar esse tipo de interação. Baixe o protótipo de trabalho aqui: https://framer.cloud/YstiW

Passo 1: Projete uma grade simples com ladrilhos

Crie uma grade de ladrilhos e verifique se eles estão dentro do elemento pai.

Etapa 2: use o loop “for” para segmentar todos os blocos

“ for loop” pode parecer assustador, mas é muito simples. Se você não estiver familiarizado com loops for , você pode ler um pouco do background primeiro: https://framer.com/getstarted/programming/#loops-and-arrays

Usaremos o loop for para direcionar todos os ladrilhos dentro de nossa grade:

 for item in grid.subLayers

Com esta simples linha de código, você direcionou todas as camadas dentro da camada de grade.

Etapa 3: tornar os blocos arrastáveis

Torne cada item dentro da grade arrastável:

 for item in grid.subLayers item.draggable = true

Etapa 4: projetar um estado de arrastar

Todos os itens devem ter um estado enquanto estão sendo arrastados. Você tem que começar a partir do código, mas depois poderá editar este estado no Editor de Camadas:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Etapa 5: arrastar eventos

Temos que criar eventos para acionar diferentes estados enquanto o item está sendo arrastado. O primeiro evento acionará uma ação enquanto começamos a arrastar:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Eu usei this.bringToFront() para garantir que o item esteja sempre acima das outras camadas.

O segundo gatilho irá redefinir o estado do item:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

Neste ponto, temos um protótipo funcional.

Passo 6 (opcional): Brinque com o tempo

A interação sempre acontece ao longo de uma linha do tempo. É bom ajustar a linha do tempo para obter um efeito perfeito:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Vários botões "curtir" (avançado)

Neste protótipo, usaremos técnicas mais avançadas para mostrar a você uma maneira diferente de segmentar camadas no Framer Studio, que criará interações mais responsivas em menos tempo. Se você não estiver familiarizado com a codificação básica, recomendo que você leia este artigo primeiro: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Para essa interação, pularemos a parte de design e usaremos um protótipo que criei especificamente para este artigo: https://framer.cloud/SZMCH

Etapa 1: criar matrizes

Dê uma olhada na estrutura das camadas dentro do Framer Studio:

Temos um “botão” dentro de uma “linha” no grupo “lista”. Estaremos criando uma interação nas camadas de botão, então temos que direcioná-las. Mas primeiro, temos que encontrar todas as camadas de linha e colocá-las dentro de um array:

 rows = list.children buttons = []

Eu também criei um array vazio para todas as camadas “button”: buttons = [] .

Etapa 2: adicionar uma subcamada ao array

Vamos começar do “loop for”:

 for i in rows buttons.push(i.children[0])

Para adicionar camadas ao array, usaremos: buttons.push() . Isso significa que estamos colocando a primeira camada de cada grupo de “linhas” dentro de um array.

Etapa 3: criar estado e evento

Agora vamos criar um estado para nossos botões “curtir” e adicionar um evento a eles enquanto tocamos:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Você pode usar essa técnica para recriar todos os protótipos anteriores e torná-los mais complexos.

Nota Final

Quando você está criando microinterações, você está focando nos mínimos detalhes. Você pode criar animações acionadas por qualquer tipo de ação e torná-las absolutamente perfeitas. Lembre-se de que existem centenas de maneiras de criar o mesmo protótipo e você deve usar o método que se adapta às suas habilidades e às necessidades dos designs de seus produtos.

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas