A nova aba de design do Framer

Alvaro Lourenço
3 min readNov 4, 2017

Recentemente o Framer apresentou uma série de atualizações na aba de design. Como a ferramenta se tornará mais amigável?

Momento atual

A aba de design foi apresentada em Junho de 2017, e desde então alguns itens se diferenciaram de outras ferramentas:

Layouts e agrupamentos dinâmicos

Comportamentos automáticos para posição, escala e hierarquia das camadas permitem construir layouts responsivos no Framer.

Estilos e filtros CSS

Itens exclusivos do CSS conferem vantagem à aba de design, oferecendo vários elementos nativamente:

Painel de propriedades

  • 4 estilos diferentes de bordas
  • Cantos e bordas individuais
  • Sombras internas e externas
  • Desfoque no fundo e no primeiro plano
  • Brilho e contraste
  • Tons de cinza (dessaturação)
  • Saturação e ajustes de matiz
  • Cores invertidas e sépia

Atualizações

Muitos dos recursos atuais vieram de atualizações nos meses seguintes à introdução da aba de design:

  • Gradientes, Layer de texto, Mesclagem de camadas, Desfoque, Sombras, Filtros, Estilos de borda, Exportar e Copiar CSS

Todavia, uma pesquisa recente na comunidade revelou interesses bem diversos ao que vem sendo produzido:

  • Importar do Sketch, Ferramentas vetoriais, Símbolos, Design para camadas em código, Gradientes, Ferramentas de gestão de projetos, Exportar, Alternador entre JS/CS, Componentes reutilizáveis
Dribbble animation by Krijn Rijshouwer

Exportar’ — introduzido em outubro de 2017 — foi sinal de que o Framer prefere competir com Sketch que integrar com ele completamente.

Essa é uma mensagem especialmente forte, vez que ‘Importar do Sketch’ venceu confortavelmente a pesquisa na comunidade.

A boa notícia é que em algum momento os designers terão boa alternativa ao Sketch e ao Photoshop.

A má notícia é que as agendas são ainda muito incertas para motivar adesões volumosas já nos dias de hoje.

Crescimento

Novembro trouxe novidades: o Framer recebeu investimentos de 8M da Accel para continuar a crescer.

O acontecimento não é trivial, visto que a Accel esteve por trás de serviços como Facebook, Dropbox, Spotify e Slack.

E a mensagem foi suficientemente clara: tornar o Framer um destino óbvio para design, do começo ao fim.

A promessa inspiradora é atingir designers de todos os tipos: produto, web, híbridos e iniciantes.

Conclusão

A aba de design é um grande início, mas o Framer tem tomado tempo para alcançar um ambiente de trabalho perfeito.

A comunidade do Framer é ativa em participar e demandar novos recursos, mas as atualização não responderam na mesma sincronia.

Os investimentos recentes vão encorpar o avanços de até então, criando um ótimo momento para aprender a Ferramenta.

Próximo tópico

Fundamentos do código

As peças essenciais dos códigos no Framer. Como identificar cada uma e compreender porquê são tão usadas.

--

--