Framer: Desafios e Oportunidades de uma ferramenta em evolução
Este texto tem como objetivo informar sobre o Framer, uma nova ferramenta no-code (que não precisa de código), que utiliza do poder de uma IA (Inteligência Artificial) para a criação de websites dinâmicos, responsivos e mostrar as vantagens e desvantagens dessa ferramenta que vem agregando tanto para designers quanto para novos usuários.
Todos os dias diversos negócios digitais nascem na internet como portfólios profissionais, blogs, e-commerces, entre outros. E é por conta dessa alta demanda que a cada dia mais ferramentas nascem para tentar solucionar essa necessidade. E o Framer é uma delas.
Entretanto, é importante lembrar que essas ferramentas no-code só foram disponibilizadas para o público há pouco tempo e antes disso as formas de criação de um website eram bem mais complexas e com um custo muito mais elevado.
Veja abaixo as opções comumente usadas para desenvolver um site completo para o seu negócio ou serviço hoje em dia.
- Custo Alto: Contratar uma equipe de desenvolvimento que faça todo o serviço, desde o protótipo até a programação e upload do site na internet;
- Custo Médio: Buscar por desenvolvedores freelancers que façam esse serviço completo ou auxiliem na criação;
- Custo Baixo ou Nenhum Custo: Estudar alguma plataforma no-code e fazer o site por conta própria, mas caso necessite de algo mais refinado contratar os serviços de um Designer de Produto;
Agora que entendemos o contexto em que o Framer se encontra nesse meio da crição de websites, vamos ver alguns pontos importantes em relação a ferramenta, diferentes contextos de uso dependendo do usuário
e como começar a utilizá-la de forma efetiva.
Um site sem código
Qualquer website que você visita na internet vai além da parte visual e dos locais em que o usuário interage na interface, pois antes de tudo qualquer site existe essencialmente como linhas de código, e a partir delas nascem os componentes, cores, fontes e tudo mais.
Até mesmo no site onde você está lendo este artigo isso também acontece, basta clicar com o botão direito na tela e ir em (Inspecionar) para visualizar a estrutura do site. Veja abaixo:
De certa forma, o que o Framer faz é antecipar essa etapa de criação dos códigos, pois a ferramenta contém diversos componentes já prontos.
O Framer também permite que o usuário desenvolva seu site livremente, sem usar de componentes já prontos, porém existem certas limitações de design na plataforma em comparação com outras ferramentas de protótipo como o Figma por exemplo.
Além de usar o acervo de componentes do Framer, o usuário também pode aproveitar do recurso de IA (Inteligência Artficial), que de certa forma é um grande diferencial em relação a outras plataforma para criação de sites.
O funcionamento da IA é bem simples, você digita alguma instrução e ela vai tentar gerar um site com base no texto. Por exemplo, vamos supor que a instrução dada seja: “faça uma página que fale sobre carros e que tenha um design minimalista com estética neobrutalista”.
Como visto no exemplo acima, é nítido que esse processo ainda não é totalmente automático, e muito menos perfeito. Pois, os sites gerados pela IA não são exatamente como as instruções, ou seja, o usuário pode usar esse recurso para ter uma base, um norte de como estruturar seu site e até mesmo pegar exemplos de estilos, cores, tipografias e layout.
O ponto principal, é que diferente do que muitos pensam, o Framer ainda não é uma ferramenta para se fazer um website apenas com um clique ou digitando algumas sentenças. O recurso de IA funciona sim, mas como um suporte na criação. Então tenha em mente que caso você queria criar seu website pelo Framer, alguns conhecimentos prévios são necessários, caso contrário ficará refém de algumas limitações da plataforma.
Portanto, caso você tenha interesse em usar o Framer para criar seu website e não tenha familiaridade com esse tipo de ferramenta, não tem problema, pois a seguir você verá por onde começar.
Por onde começar
No caso do Framer, aprender a utilizar a ferramenta é bem fácil, pois no próprio site existe uma seção “Academy”, com diversos tutoriais de funções específicas da ferramenta e até mesmo cursos completos e gratuitos sobre os fundamentos necessários para criar seu website no Framer.
Os tutoriais variam de dificuldade indo do nível iniciante ao avançado, o que facilita ainda mais o aprendizado. Tanto os cursos quantos os tutoriais são práticos, de forma que o usuário aprende enquanto cria, desenvolve e conhece a ferramenta. Então antes de tudo, assista o curso sobre os Fundamentos do Framer e dê uma olhada nos outros tutoriais básicos no YouTube ou em outras redes sociais.
Agora, digamos que você seja Designer de Produto, que já utiliza o Figma, Sketch ou Adobe XD e quer entender mais sobre o Framer, a seguir veremos a dinâmica dessa ferramenta para Designers.
Framer para Designers
Falando um pouco sobre o meu caso, atualmente minha ferramenta de trabalho principal é o Figma, onde é possível criar protótipos de baixa e alta fidelidade para websites e apps. Porém, diferente do Framer as criações do Figma funcionam como um referencial que o programador usará para desenvolver por meio de uma linguagem de programação.
Dito isso, ao olharmos para as interfaces das duas ferramentas em si, não veremos muitas diferenças, ambas tem a aparência e o uso bem parecido também, como podemos ver no comparativo abaixo.
Além das semelhanças, as duas plataformas podem ser usadas de forma colaborativa, na criação de websites por exemplo o protótipo pode ser feito no Figma e importado para o Framer facilmente, assim transformando o que era apenas a parte visual em um website responsivo e funcional.
Porém, nem tudo é uma maravilha, vale ressaltar que essa interação de importar conteúdo do Figma para o Framer ainda apresenta diversas inconsistências, pois caso o projeto tenha muitos componentes, estilos ou interações, tenha em mente que grande parte disso não vai ser importado.
Portanto, a importação ainda pode ajudar bastante na adaptação do protótipo no Framer, o que facilita e agiliza muito a criação do seu website usável em comparação se feito no Wordpress por exemplo.
Então, ainda sobre a interação Figma x Framer é importante que os Designers não rivalizem as duas ferramentas de modo a compará-las, mas sim que utilizem-as de forma colaborativa nas suas criações.
Assim, otimizando os processos de desenvolvimento e expandindo as possibilidades de o trabalho como Designer de Produto.
Ambas possuem vantagens e desvantagens se colocadas como objeto de comparação, então o melhor a se fazer é enxergar esses pontos e usá-los da melhor forma possível.
Considerações Finais
Então, agora que você viu como funcionam as ferramentas no-code e aprendeu um pouco sobre o Framer, basta analisar como utilizar isso nos seus projetos futuros e aproveitar ao máximo de todas as possibilidades.
Por fim, espero esse conteúdo tenha sido útil para você e obrigado por ler até o final. Caso tenha alguma sugestão de melhoria, dúvida ou ideia para um próximo conteúdo, fique a vontade para deixar nos comentários. Obrigado!
