ProtoSparker para Framer.js — Vídeo

Gerando protótipos para o Framer.js automaticamente sem precisar programar

O Framer.js é uma ferramenta de prototipagem poderosíssima que nos permite construir interações complexas e atingir novos patamares de alta fidelidade nos protótipos. O problema? A curva de aprendizado é gigantesca.

Primeiro, você precisa saber programar. Segundo, você precisa programar todo e qualquer tipo de interação que seu protótipo precise ter. Isso significa escrever centenas de linhas de código apenas para ter interações simples, como navegar para uma página, abrir ou menu ou rolar por um conteúdo.

É por isso que construímos o ProtoSparker.

O ProtoSparker é um módulo para o Framer.js que automatiza a criação de interações simples sem precisar programar nada. Tudo que você precisa fazer é nomear suas layers de acordo com o comportamento desejado e importá-las no Framer.js: o seu protótipo já sai funcionando automaticamente!

Editado: já está funcionando no Sketch!

Tutorial

Veja o vídeo tutorial abaixo para aprender como o módulo funciona:

Instalação

Acesse a página do Github, baixe o módulo "protoSparker.coffee" e mova esse arquivo para a pasta "modules" do seu projeto do Framer.js.

Inicie o ProtoSparker dentro da área de código do Framer:

{ProtoSparker} = require 'protoSparker'
protoSparker = new ProtoSparker
    # essa layer será a página inicial do protótipo
    firstPage: figma.home

Agora, basta ir para o Figma ou Sketch, renomear algumas layers e re-importar o layout para que o protótipo saia funcionando.

Para ver todas as interações que o ProtoSparker disponibiliza, olhe a documentação completa no Github. Lá você encontra também exemplos de como utilizar cada funcionalidade e como nomear suas layers.

O ProtoSparker ainda é um projeto em beta, mas já tem nos ajudado imensamente na Redspark a ganhar tempo. Ele permite que foquemos nossos esforços nas interações mais complexas que realmente estão sendo validadas e que farão a diferença na experiência do usuário.

Dúvidas e sugestões? Abra uma issue no Github ou faça pull requests no repositório!