Prós e contras do Framer

Alvaro Lourenço
3 min readNov 4, 2017

É importante entender o que o Framer é, e analisar se ele se combina com seu perfil.

Framer é uma IDE para construir protótipos interativos que usa o Framer.js: uma biblioteca aberta que cria o conceito de Camadas, que é familiar a muitos designers.

Propriedades familiares

  • x, y, width, height, scale
  • visible, opacity, brightness
  • borderWidth, shadowBlur

Visão geral

Com mais de 100 atualizações desde seu início, novas versões continuam saindo em intervalos de aproximadamente 40 dias.

O Framer é composto de 4 áreas principais:

  1. Aba de design: para criar artboards e layouts
  2. Aba de código: para criar as interações
  3. Visualizador: para ver resultados em tempo real
  4. Apresentador: para compartilhar em apresentações

Vantagens

Liberdade Criativa

Por usar tecnologias da internet, o Framer herda todos os recursos visuais do CSS, atual e futuro.

Essa vantagem confere potencial maior aos designers, mesmo quando o Framer não disponibiliza controles amigáveis.

Muito da simplicidade do Framer se dá exatamente por isso: não é necessário ter a melhor IDE para conter todos os recursos.

Alcance da plataforma

Framer roda em qualquer device com um navegador: desktops, smartphones, tablets e smart-TVs.

Hardwares com comunicação MIDI, como controladores musicais, são facilmente integrados em recursos nativos do Framer.

Outros protocolos também podem ser usados para controlar protótipos Framer, contanto que suportem tecnologias web.

Comunidade intensa

Modulos do Framer permitem que a comunidade compartilhe criações de forma reusável, usando bibliotecas independentes.

Frequentemente, a comunidade de desenvolvedores web oferecerá recursos adicionais para o designer que usa Framer.

Módulos interessantes

Especificação para interações

O código do Framer pode ser usado por desenvolvedores para reproduzir interações com alta fidelidade.

Mesmo em animações muito específicas, o Framer Handoff pode exportar códigos finais para a utilização dos desenvolvedores.

Algumas vezes, esta abordagem gera resultados melhores que serviços de especificação como Zeplin e Avocode.

Desvantagens

Código assusta

Código parece uma realidade distance para muitos designers, que na maioria das vezes teme a complexidade.

Designers buscam aumentos de produtividade e processos de código/aprendizado formam um conjunto difícil de resolver.

Mesmo os que querem aprender enfrentam dificuldade, vez que os tutoriais costumam pular as fundamentações para atingir resultados rapidamente.

Competidores são mais rápidos

Familiaridade gera engajamento. Muitos designers se sentem mais confortáveis em dedicar tempo para aprender alternativas mais visuais.

O conjunto de promessas maiores do Framer amplia a percepção sobre o quão íngreme pode ser sua curva de aprendizado.

Muitas vezes designers simplesmente não começam aprender nada até que um padrão de mercado se estabeleça.

Dificuldades de importação

O Sketch Import é limitado pelas imagens achatadas, que limitam a manipulação dos efeitos e propriedades das camadas.

Não existe interoperabilidade com ferramentas populares, transformando o trabalho no Framer em esforço duplicado.

O Framer tem implementado features na tentativa de se equiparar ao Sketch, estando todavia atrasado nessa competição.

Ferramentas de especificação

Ferramentas de especificação como Zeplin são muito úteis, mesmo com suas limitações em lidar com interatividade.

Os recursos Handoff e Export cumprem com animações e estilos, mas ainda deixam muita especificação para ser entregue manualmente.

Ao competir com ferramentas de especificação o Framer perde velocidade importante na entrega de melhorias na IDE.

Conclusão

Presume-se que o usuário do Framer não teme código, e não se importa de pesquisar, integrar e criar novas ferramentas.

O Framer está trabalhando para entregar um ambiente amigável ao Designer, mas as atualizações parecem ocorrer aos poucos.

Designers interessados em resultados mais simples vão provavelmente preferir outras ferramentas de prototipação.

Próximo tópico

Escolhendo processos

As abordagens disponíveis para construir interfaces no Framer antes de começar a fazer interações.

--

--