Dando poder para os seus Designs
Provavelmente se você for um Design e já criou projetos de interfaces no Figma, como sites, apps, posts… tudo que você quiser fazer hoje em Design o Figma tem proporcionado uma boa experiência, com plugins fantásticos e todos os meses novas funcionalidades que facilitam o nosso trabalho.
Limitações do Figma
Agora o que não podemos deixar de falar é quando o assunto são sites reais, onde os seus usuários possam acessar, usar e sentir o projeto publicado no ar! Acaba que isso não acontece dentro do Figma por ser uma ferramenta de protótipos focado apenas no Design.
E isso foi por muito tempo um dos meus maiores limitadores, muitas vezes os clientes chegavam e eu não conseguia proporcionar e entregar um site completo para ele, precisava contratar um desenvolvedor para poder colocar os meus sites para o ar e isso inclusive por consequência impactava no meu faturamento.
A chegada de uma ferramenta revolucionária
Mas isso mudou quando eu encontrei a ferramenta do Framer… pois ela permitia não só criar websites com NoCode, sem precisar de uma linha de código, e já conseguir em segundos publicar um site Otimizado, profissional, como também já tinha a interface muito parecida com o próprio Figma, Sketch e Adobe XD.
E, além disso, tudo, o melhor seria…
Agora você poder por meio de um Plugin passar os seus projetos do figma para o Framer com apenas um clique, Com o do plugin Figma, você pode copiar sessões, componentes completos com estilos e efeitos já do Figma, o que economiza muito tempo na construção do projeto.
Copie e cole seus designs web do Figma para o Framer e clique em publicar. Envie uma landingpage simples ou transforme seu design em um blog totalmente dinâmico com o CMS integrado.
Ignore o processo manual de conversão de HTML.
O fluxo de trabalho do Framer é otimizado para ir do Figma ao site com facilidade. O legal disso é que você não precisa converter seu design em código - com o Framer manualmente, você pode colar seu arquivo Figma no Framer e publicá-lo como está. Todos os nomes e grupos de camadas são totalmente preservados.
Exportando Figma para HTML com facilidade.
Quando você publica com o Framer, garantimos que seu site seja construído usando todas as práticas recomendadas, para carregar rapidamente em dispositivos móveis e obtenha uma boa classificação nos resultados de pesquisa do Google. Convertemos seus modelos de design em código HTML, CSS e React. Também otimizamos o desempenho minimizando todos os arquivos JavaScript e de imagem.
Agora se ficou alguma dúvida, aprenda na prática
Nesse vídeo eu passei um projeto inteiro do Figma para o Framer com as melhores práticas e explicando como que funciona o fluxo dessas duas ferramentas.