Tutorial do Framer: Como criar protótipos interativos impressionantes

Dê uma olhada nos protótipos de exemplo abaixo. Estes foram feitos no Framer. Após este tutorial, você poderá começar a criar seus próprios protótipos animados impressionantes rapidamente.

A Framer lançou sua mais nova versão há uma semana, e o mercado de prototipagem nunca mais será o mesmo. A ferramenta de prototipagem Framer costumava ser difícil de dominar, mas útil como o software de prototipagem mais preciso e ilimitado. Agora, as coisas mudaram. O Framer agora vem com recursos de Design + Code + Collaborate, o que significa que você pode criar seu protótipo diretamente dentro do Framer, desenvolvendo um protótipo totalmente funcional sem nenhum software de terceiros e sem nenhuma habilidade de codificação.

Aqui, vou ensiná-lo a usar o código Framer simples sem nenhum conhecimento prévio de codificação necessário. Você aprenderá a combinar os melhores recursos do modo de design e código no Framer para criar protótipos animados e interativos. Então, vamos pular para este tutorial e pegar alguns pequenos trechos de código para melhorar seus protótipos.

Fundamentos do Framer

Vamos começar! Basta acessar framer.com e baixar uma versão de teste. Eles estão dando a você duas semanas de demonstração totalmente funcional e, acredite, é tempo suficiente para aprender muito sobre esse software de prototipagem.

Após a instalação, você pode querer passar por alguns dos exemplos que eles fornecem e brincar um pouco com eles. Quando terminar, é hora de começar a prototipagem.

(Neste tutorial do Framer, focarei na criação de protótipos diretamente no Framer.js. Você também deve saber que existem outras maneiras de começar a prototipagem no Framer. Por exemplo, você pode trabalhar diretamente com arquivos do Sketch. Abordarei esse fluxo de trabalho em outro artigo.)

O novo Framer – Modo Design

Neste artigo, criaremos três protótipos interessantes em minutos com uso mínimo de código: interações básicas, componente de rolagem e componente de página

A versão mais recente do Framer tem uma grande novidade: o modo de design. Ele permite que você trabalhe quase da mesma maneira que no Sketch ou no Figma. Você pode criar camadas vetoriais, importar imagens ou criar e estilizar camadas de texto. Tudo isso se torna muito útil quando você deseja prototipar rapidamente sem aplicativos de terceiros.

Vamos criar um design do tipo aplicativo

Na primeira parte deste tutorial, vamos preparar um playground para nosso protótipo do Framer. Vamos criar um design do tipo app, com três tipos diferentes de camadas: vetor, imagem e texto.

Passo 1: Crie um botão simples e um plano de fundo.

Para iniciar seu design, selecione a primeira guia - que é o modo de design - e adicione uma prancheta, assim como no Sketch. Neste tutorial, trabalharemos em um protótipo do iPhone 7, então escolhi essa predefinição como tamanho da minha prancheta. Eu também adicionei um preenchimento de fundo azul.

Em seguida, selecione a ferramenta retângulo e crie uma forma na forma de um botão redondo simples.

Passo 2: Adicione um cartão com uma imagem.

O segundo método de adicionar camadas é o recurso de arrastar e soltar . Você pode selecionar qualquer arquivo de imagem do seu computador, soltá-lo no Framer e estilizá-lo usando a barra lateral direita. Usei uma ilustração simples e a estilizei como um cartão.

Etapa 3: adicione um título de aplicativo.

O Framer também permite adicionar uma camada de texto. Novamente, o estilo é basicamente o mesmo que em qualquer software gráfico. Você pode escolher fonte, tamanho, alinhamento, espaçamento entre letras e muito mais.

Etapa 4: informe ao Framer quais camadas são interativas.

Temos mais um passo antes de iniciar nosso protótipo do Framer. Nós apenas temos que dizer ao Framer quais camadas serão interativas. Basta clicar no ponto ao lado do nome da camada dentro do painel de camadas. É bom nomear cada camada corretamente para uso posterior. Eu nomeei minhas camadas de cartão e botão .

Passo 5 (Bônus): Defina suas cores globais.

Uma boa prática é definir algumas variáveis ​​para todo o protótipo. Você pode definir a paleta de cores, a tipografia e as dimensões básicas que usará desde o início. Isso ajuda a economizar tempo na linha.

Quando você estiver configurando suas cores, apenas nomeie-as no editor de código e forneça valores HEX, RGB ou RGBa após o sinal “=” apropriado. Lembre-se de manter todas as variáveis ​​no topo do seu código.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Passo 6 (Bônus): Adicionando a posição relativa.

Com o novo Framer, é muito fácil manter seu protótipo responsivo. Você pode definir posições relativas no modo de design , conforme demonstrado abaixo:

Aqui está uma pequena lista de propriedades que são úteis para alinhar e calcular a posição da camada diretamente no código. Você pode fazer as contas necessárias para calcular as posições das camadas. Isso se torna necessário quando você adiciona interações posteriormente e deseja manter seu protótipo responsivo.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Agora você está pronto - vamos começar nosso projeto

Criamos diferentes tipos de camadas do Framer. Agora nosso playground de interação está pronto para ser usado.

Finalmente! A parte chata chegou ao fim. Agora é hora de um pouco de design de interação.

Baixe o protótipo completo aqui.

1. Criando uma interação de feedback de botão

Para projetar qualquer interação, precisamos de um gatilho para que isso aconteça. Pode ser quase qualquer coisa: um toque na tela, o fim de uma animação, o fim de um carregamento de imagem ou o acelerômetro do seu telefone.

Passo 1: Criando o evento para interação.

Vamos mantê-lo simples. Vamos criar um feedback de botão quando você tocar nele, usando o seguinte comando:

 layerA.onTap (event, layer) ->

Framer acabou de escrever esta linha de código para você. Isso significa que quando você toca na camada do botão, algo vai acontecer.

Passo 2: Adicionando animação ao evento.

Vamos iniciar uma animação após este gatilho. Para fazer isso, clique no ponto ao lado da camada do botão no painel de camadas e selecione Adicionar animação . Quando você adiciona uma animação, o Framer entra no modo de edição de animação. Você pode dimensionar, mover, girar ou alterar qualquer parâmetro da camada:

Framer adicionou mais algumas linhas de código. (Não se preocupe - você ainda pode editar sua animação com o painel de animação.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Parabéns! Você acabou de criar sua primeira interação. Funciona apenas uma vez agora, mas vamos corrigir isso. A razão pela qual você pode acionar essa animação apenas uma vez é que não há nada definido para acontecer após a conclusão da animação. Temos que redefinir todos os parâmetros após a primeira animação terminar como eram antes.

Etapa 3: Redefinindo a animação.

Adicione outro evento, quase como fizemos antes. A diferença é que estamos procurando um evento quando a animação termina:

Desta vez, o código adicionado pelo Framer ficará assim:

 button.onAnimationEnd (event, layer) ->

Assim, quando a animação na camada do botão estiver concluída, podemos adicionar a próxima animação que redefinirá os parâmetros da camada do botão :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

É isso! Agora temos feedback de trabalho após um toque em nosso botão.

2. Criando diferentes estados para interações de camada de cartão

Ok, agora você sabe como criar uma animação e acioná-la. Mais frequentemente, você precisa projetar diferentes estados de uma camada. Você pode projetar vários estados da mesma camada alterando apenas alguns parâmetros, como posição, tamanho ou opacidade.

Etapa 1: Adicionando e criando estados para uma camada de cartão.

A maneira de adicionar um estado ao cartão é quase a mesma que adicionar uma animação. Você tem que clicar no ponto ao lado da camada do cartão e depois clicar em Adicionar estado . Agora você entrou no modo de edição de estado. Desenhe como quiser:

Por favor, preste atenção ao recuo do código. Deve começar a partir da primeira linha.

Eu projetei dois estados diferentes para minha camada de cartão :

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Passo 2: Adicionando eventos.

Há apenas mais um passo para fazê-lo funcionar. Temos que criar um evento para mudar esses estados.

 button.onTap -> card.stateCycle()

O que isso faz é mudar todos os estados da camada um por um, toda vez que você faz uma ação. Então, no nosso caso, toda vez que tocamos na camada do botão , mudamos para o estado do cartão . Se você quiser criar mais estados e acioná-los corretamente, o snippet abaixo funcionará muito melhor para você:

 button.onTap -> card.stateSwitch("b")

Este snippet é útil quando você deseja acionar um estado específico da camada.

O último ajuste que fiz no meu protótipo é uma mudança de velocidade de animação e curva entre os estados:

 card.animationOptions = curve: Spring time: 0.8 

Há muito mais o que você pode fazer com eventos , mas neste ponto, você poderá criar praticamente qualquer interação básica. É uma das documentações mais bem escritas que já vi.

Acelerando seu trabalho no Framer: Componentes

Chegou a hora de adicionar componentes para acelerar seu trabalho. Para tirar o máximo proveito deste tutorial a partir de agora, baixe este protótipo.

1. O Primeiro Componente: Rolagem

Modifiquei um pouco nosso protótipo. Agora temos uma lista dentro, mas sua altura está acima da resolução da tela. Temos que criar rolagem para poder ver toda a lista no protótipo.

Passo 1: Criando camadas e configurando componentes.

Vamos começar criando uma camada com uma altura maior que nossa tela. Marque esta camada como interativa e nomeie-a como lista . Em seguida, pule para o modo de código. Não usaremos a útil barra lateral esquerda desta vez. Vamos configurar nossa tela inteira para ser rolável:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Este código cria uma área invisível com a largura e altura do dispositivo atual.

Etapa 2: informe ao Framer quais camadas você deseja rolar.

Nada aconteceu ainda. Temos que dizer ao Framer quais camadas devem ser roláveis. Para fazer isso, adicionamos nossa camada de lista ao componente de rolagem:

 list.parent = scroll.content

Passo 3: Bloqueando a rolagem vertical.

Temos permissão para rolar agora, mas está acontecendo em todas as direções. Temos que bloquear a rolagem em um eixo vertical:

 scroll.scrollHorizontal = false 

Uau! Você criou uma rolagem dentro do seu aplicativo com apenas cinco linhas de código simples.

2. O Componente de Página: Deslizando Tela a Tela

Uma interação muito popular para alternar entre telas é deslizar. A ideia aqui é muito semelhante ao componente de rolagem. Você pode baixar um protótipo funcional aqui.

Passo 1: Configurando o componente.

Primeiro, temos que criar uma “caixa” no editor de código onde a mágica acontecerá:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

Neste ponto, você deve estar familiarizado com todo o código aqui. É apenas uma configuração simples do componente e sua área. Agora temos que criar algumas camadas para deslizar.

Etapa 2: criando camadas

Usaremos nosso primeiro projeto de protótipo e o modificaremos um pouco. Em vez de uma imagem de cartão, desta vez importei duas imagens.

Primeiro, temos que fazer a prancheta duas vezes mais larga. No painel de propriedades da prancheta, encontre a largura e multiplique-a por dois (ou apenas adicione *2 ). Coloque as cartas uma ao lado da outra, ative-as com o ponto azul e nomeie-as corretamente: card1 e card2 .

Etapa 3: Adicionando camadas ao componente da página.

No final do nosso código no editor de código, temos que adicionar:

 card1.parent = page.content card2.parent = page.content

Isso significa que estamos adicionando essas camadas ao componente.

O componente de página agora está pronto para ser usado!

Palavra final

Isso é tudo, pessoal! Espero que você tenha achado este tutorial do Framer útil para iniciar sua jornada com a ferramenta de prototipagem mais poderosa do mercado. Além disso, você deve considerar ingressar no grupo Framer no Facebook. Há uma comunidade enorme ao redor, e eles são úteis quando você está começando.

Se você quiser se aprofundar ainda mais no Framer, tente ler a documentação do Framer.

• • •

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