Framer | Crie Sites Profissionais em 2024 Sem Programação

cara a gente tá em 2024 hoje basicamente a gente não faz mais nada sem ser pela internet e eu posso te garantir que a maioria das pessoas que estão prestando um serviço online elas não possuem um website ou um portfólio bem estruturado para mostrar pros seus clientes quando o cliente requisita para elas pode ter certeza que essas pessoas estão deixando muito dinheiro na mesa hoje basicamente quando alguém quer contratar um serviço Primeiro ela vai olhar as redes sociais dessa pessoa segundo ela vai olhar o site ou portfólio dessa pessoa e se você se identificou aí

com esse grupo de pessoas depois desse vídeo aqui não quero mais desculpas para você não ter um site e um portfólio seu online aí para você mostrar pros seus clientes meu objetivo nesse vídeo aqui é te apresentar o framer uma ferramenta no code todas as funcionalidades dele hoje para mim a forma mais eficiente da gente tá subindo e criando um site extremamente profissional e por fim fazer um comparativo aí com webflow outra grande e muito famosa ferramenta para criação de websites pessoal como eu comentei para vocês o framer é uma ferramenta especializada aí na criação

de websites de portfólios de blogs e ela traz uma familiaridade muito grande para quem é designer porque ela tem uma interface muito análoga e parecida com a do figma inclusive se você tem os seus designs aí no figma você consegue estar exportando e importando no framer continuando o desenvolvimento até ter seu site de fato no ar ou se você preferir também você consegue começar direto do zero no framer até ter o seu site ali publicado mas antes da gente avançar aí no frame eu mostrar as funcionalidades da ferramenta para vocês eu queria dar uns passinhos

atrás pra gente discutir um pontinho aqui que eu vejo que muitos de vocês ainda TM dúvida como eu já comentei algumas vezes o framer é uma ferramenta focada para criação de websites então ele tá dentro dessa categoria de ferramentas no code mas aí eu pergunto né cara o que que de fato é um website né Qual que é a diferença de um website para um aplicativo eu vejo que muitos de vocês cometem essa dúvida e ficam aí se questionando né Por que que eu vou usar um framer sendo que eu já sei um Bubble porque

eu não posso criar um site no Bubble no flutterflow no web E é isso que eu quero discutir rapidamente aqui com vocês então trabalhando aqui em cima de definições aplicativos elas são aplicações mais dinâmicas né onde a gente tem os nossos usuários e os usuários eles se comunicam com um banco de dados da nossa aplicação de uma forma mais dinâmica né através de ações no nosso aplicativo ele vai lá adiciona elementos ou deleta elementos no banco de dados os aplicativos eles podem ser tanto Web Apps né que a gente acessa através do nosso navegador assim

como os nossos sites Ou eles podem ser Mobile Apps que são aplicativos que a gente acessa a partir de downloads lá da nossa Play Store ou da App Store quando a gente fala de websites Eles já são mais estáticos né então eles servem para disponibilizar alguma informação tem informação do nossa empresa a gente tem outra um blog né uma informação de uma notícia e eles podem também conter né cms né que são esses content Management Systems né que um blog basicamente ele é controlado a partir de um cms a gente tem um cms descreve todo

o blog lá o conteúdo o título bota os subtítulos e isso Isso é disponibilizado pra gente lá no nosso site de uma forma estruturada é isso que um cms faz Então essas são as principais diferenças aí entre um aplicativo e um website e trazendo aí pro nosso Universo de ferramentas no code trazendo ferramentas aí que são focadas em aplicativos a gente tem aí o conhecido Bubble o flutterflow o eweb e pro lado de websites a gente tem ferramentas como o framer que é o que a gente vai est apresentando aqui para vocês hoje e o

webflow uma ferramenta muito conhecida aí no mercado também concorrente aí do framer e para reforçar ainda mais esse ponto principalmente para você que conhece um Bubble flutterflow e web tá se perguntando cara por que que eu não crio direto meu site ali minha Landing page meu portfólio em Bubble e flutterflow vou trazer aqui um exemplo bem prático uma forma que a gente recomenda bastante que seja feita né Principalmente quem tem um aplicativo um software aí e tá apresentando esse aplicativo numa Landing page tô aqui no próprio site do flutterflow se a gente analisar aqui e

vier aqui nas extensões eu ten uma extensão chamada weizer que a gente mostra o que que é utilizado para criar um site e a gente tem aqui page Builder webflow Flow webflow como acabei de mostrar uma ferramenta especializada pra criação de websites uma ferramenta no code Ah então quer dizer que o flutterflow não usa flutterflow para fazer a landpage dele usa outra ferramenta no code que é webflow sim é isso que ele faz então se você vier aqui em flutterflow.io é isso que você vai encontrar agora se a gente entra aqui em fazer um cadastro

né lugar etc a gente já muda aqui a nossa URL a gente vai para app. flutterflow.io Ou seja a gente está em outro subdomínio e aqui agora se a gente vi aqui no applier novamente e analisar Agora sim a gente vê aqui o i Framework tá sendo usado o flutter de fato Então é isso que a gente recomenda seu site portfólio ou sua Landing page em um domínio no seu domínio principal quando você for acessar ali seu aplicativo né se você tem um SAS um sistema você acessa aí um outro subdomínio app ponto e aí

o seu domínio principal E aí de fato você usa a aplicação correta para fazer o desenvolvimento desse seu SAS então depois de feita essa divagação apresentado aí essas diferenças deentre aplicativos e websites que eu sei que muitos de vocês têm dúvidas quero voltar aqui pra gente conhecer um pouquinho mais a fundo o framer entrar aqui no site do framer pra gente conhecer as funcionalidades dele então eu já tô aqui dentro do site do framer né a gente já vê aqui e obviamente o site do framer é construído em framer então a gente já pode entender

um pouquinho o que que é possível a gente fazer com essa ferramenta né então aqui a gente vê cara a nível de design a gente tem bastante flexibilidade para tá construindo designs de fato bem bonitos bem responsveis então a gente tem questão de layouts responsivos efeitos né a gente tem muito efeito já disponível pra gente construir o framer ele tem uma diferenciação que ele dá uma facilidade aí pra gente fazer a publicação da nossa aplicação Então quem tá acostumado eventualmente trabalhar com WordPress ou elementor talvez nem se lembre mas cara a gente tem todo um

setup inicial até a gente chegar mexer na ferramenta e de fato publicar nos site ele tá no ar aqui não você faz o cadastro e Em 2 segundos você consegue já tá com o site Conectado e no ar né Então essa facilidade é muito grande ele também traz aqui pra gente a parte de cms né que é o content Management Systems pra gente conseguir criar um portfólio pra gente conseguir criar um blog completo e isso aí tudo focado e otimizado para se que é algo extremamente importante principalmente a gente tá construindo um blog né então

a gente tem tem também a funcionalidade aí de localização né Colocar e fazer a tradução aí do nosso site e aqui embaixo a gente tem aqui diversos templates né templates não né diversos exemplos de S construídos com framer e eu quero trazer algum aqui para vocês verem também então aqui a gente tem um site aqui construído com framer né um site de tickets então a gente vê aqui já algumas animações site bem bem bonito a gente tem aqui um outro site que é uma comunidade né de comunicação então a gente já vê aqui elementos né

a gente tem diversos elementos aqui para fazer iterações né então a gente tem Space aqui a gente vê que tem um certas interações aqui é um site extremamente complexo então a gente consegue fazer sites bem complexos nível de design assim então colocar coisas mais espalhafatosas a gente consegue também e aqui um portfólio né então aqui a gente tem portfólio with Grant aqui para ver eh Quais são as funções dele então algo um pouco mais relacionado aí Possivelmente o que muitos de vocês vão querer fazer a para dispor os projetos de vocês e aqui agora sim

templates né alguns templates prontos que o framer disponibiliza pra gente pra gente começar a partir deles e adaptando pra gente subir nosso site Então a gente tem diversos templates aqui nessa biblioteca de templates e aqui a gente tem alguns templates gratuitos que eu quero começar um aqui com vocês então vou selecionar um template aqui pra gente iniciar a partir dele a gente pode dar um preview ou usar diretamente Então vou usar já vai carregar aqui minha aplicação pede aqui para colocar um e-mail né então coloquei aqui o meu e-mail submit ele vai já criar essa

aplicação para mim então em poucos segundos aplicação já criada com o template aqui para quem tá familiarizado com figma já vê aqui uma uma interface muito parecida né então a gente tem aqui já um do lado do outro né os Break points né então toda a responsividade construída tem aqui os elementos facilmente a gente consegue arrastar soltar eles obviamente tem toda uma responsividade envolvida aqui então a gente não não tem toda a liberdade aqui né mas consegue já fazer aqui a mudança dos elementos aqui no lateral a gente tem todas as configurações que a gente

consegue fazer nesses elementos a gente tem aqui inputs né uma Landing page coletar e-mails então aqui a gente já tem o nosso site construído a partir de um template a gente clica aqui em publicar o site já tá online a gente consegue daí acessar ele clicando aqui no nosso RL o site já abriu qualquer um que vocês que entrar nesse site aqui já acessa esse esse nosso site online algo muito diferente de algumas ferramentas que demora pra gente conseguir chegar at ter espaço Então pessoal esse é o framer a gente viu aqui um pouquinho ele

aí por dentro a gente não aprofundou mas é para de fato dar uma visão geral aí para vocês que eu quero apresentar para vocês agora é a precificação da ferramenta né quanto que custa pra gente tá usando o framer então o framer aqui na precificação dele ele tem um plano free aí que a gente consegue que nem eu acabei de fazer né logar subir meu meu site construi ele consigo ter alguns acessos ali então ele dá um plano free legal pra gente só que a gente não consegue colocar no nosso domínio que obviamente é algo

importante né então a gente consegue fazer isso aqui no nosso plano free é mini né que começa em r$ 5 aqui a gente não tem acesso a cms que vem a partir do plano Basic então vocês precisar de um cms plano Basic mas o plano mini vejo que vai atender muitos de vocês então esse plano Basic mini provavelmente vai atender a maioria das pessoas e aí para sites maiores a gente tem aí um plano pro a partir de r$ 0 Então pessoal pra gente fechar esse conteúdo aqui último tópico eu queria abordar com vocês Possivelmente

né Pode ser que muitos de vocês já tenham ouvido falar do webflow framer um pouco menos porque é uma ferramenta mais recente lançada em 2022 mas webflow uma ferramenta mais antiga que tá domina esse mercado né Ela é uma ferramenta muito robusta muito conhecida muito poderosa do Universo no code para criação de websites pode gerar uma dúvida aí entre vocês né cara qual que é a diferença entre o webflow o framer o que que é melhor o que que é pior e é isso que eu quero discutir aqui com vocês para vocês entenderem onde cada

uma vive né então aqui a gente tem um comparativo entre web4 framer a gente trouxe algumas categorias aqui né categoria de comunidade facilidade de uso cms integração conf figma preços e se a possibilidade de exportar o código eu vou fazendo alguns comentários aqui com vocês então a nível de comunidade como eu comentei o webflow uma ferramenta que tá aí no mercado bem mais tempo né Tá meados ali de 2012 2013 não lembra exatamente o ano agora mas já faz bastante tempo e o framer é uma ferramenta bem mais recente ela veio pro mercado foi lançada

no mercado em 2022 depois que eles fizeram uma readaptação a equipe do framer mudou aí o modelo de negócio e de fato criou o framer então a comunidade do webflow é uma comunidade bem mais robusta né enquanto do framer tá se consolidando tá crescendo então aqui a webflow ela tem essa vantagem por ter mais tempo principalmente né questão de facilidade de uso aqui a gente tem uma diferenciação bem importante né webflow É uma ferramenta mais complexa ela tem uma curva de aprendizado bem maior a gente gosta de trazer analogia que o webflow ela é uma

ferramenta de web o desenvolvedores Web que foi traduzida aí para uma interface visual para facilitar o seu desenvolvimento já o framer é uma ferramenta que é para web designers né então uma visual bem figma assim que foi traduzido para de fato a gente conseguir construir aplicações por completo Então ela tem uma facilidade de uso muito maior a curva de aprendizado dela é bem menor a gente entra ali já sente familiarizado e consegue construir aí de fato um site sem muito tempo de trabalho né quando a gente vai paraa cms essa questão de poder do cms

né O que a gente consegue fazer ou não o cms do webflow é um cms bem robusto né a gente tem integrações da api já consegue fazer diversas integrações então aqui ela é um cms muito poderoso enquanto do framer ainda tem coisas a desejar né então a gente não consegue integrar ele com apis ou integração com make usar perda vida então aqui eu acho que é o principal ponto assim onde o webflow se destaca né relação a uma integração com o figma o webflow tem uma integração legal mas ali a gente tem que fazer muitas

adaptações enquanto o framer tem uma integração bem bacana também você precisa fazer algumas adaptações mas isso ajuda muito no fluxo de trabalho principalmente para quem trabalha com o figma né questão de preços tem uns preços bem análogos assim Mas webflow dependendo do plano que você for pegar ele pode ficar um pouquinho mais salgado e a questão de exportar código Se isso for algo importante para você né paraos seus projetos de sites aí vai depender muito Com quem você tá trabalhando no webflow a gente consegue sim exportar o código no framer a gente já não consegue

Então essa aqui é uma visão geral para vocês entenderem a gente gosta muito do framer porque ele traz essa facilidade né de você de fato você entrar na ferramenta conseguir começar a criar o seu site em poucos minutos tá com o site online que é o objetivo aqui eh pra gente é o que Ele atende é para isso que a gente por isso que a gente gosta muito dele e pro nosso público também eu vejo que é uma ferramenta que faz muito sentido webflow ele já vem com essa pegada mais de desenvolvimento mesmo né você

quer ser ponta da linha lá do desenvolvimento sites mais complexos coas mais robustas webflow ele é uma excelente ferramenta Então pessoal esse é o nosso comparativo entre o webflow o framer um pouquinho da apresentação aí do framer para vocês conhecerem um pouco mais agora acabou as desculpas aí para vocês não subirem sites de vocês e pra gente fechar né Aonde vocês podem aprender a utilizar o framer aprender os fundamentos já criar alguns projetinhos tem uma boa notícia para vocês nessa essa semana que a gente tá lançando esse vídeo a gente fez o lançamento do nosso

curso de framer dentro da no cod flix lá então dentro do no cod flix já tá disponível né quando vocês estiverem vendo esse vídeo já vai est disponível nossos primeiros módulos do nosso curso de framer ministrados aí pelo Leo né expert em framer tanto em framer quanto webflow designer aí já foi designer de empresas grandes fazendo esse nosso treinamento para vocês então a gente faz aí toda a parte de fundamentação da ferramenta né Vocês entendem os fundamentos dá overview da ferramenta conhece todos os componentes depois a gente cria um primeiro projeto já serve aí de

portfólio para vocês também então um projeto de link Tree vocês constróem uma réplica do link Tree depois a gente vem com um super projeto aí que vai ser o desenvolvimento de um portfólio onde vocês vão usar as funcionalidade cms para vocês adicionarem o portfólio de vocês então aqui dois projetos para vocês terem aí já no portfólio de vocês inclusive criar o portfólio de vocês também então esses nossos dois primeiros modulos já vão estar disponíveis e esse nosso módulo aqui terceiro módulo vai ficar disponível aí em futuro breve dependendo quando você estiver vendo esse vídeo ele

já vai estar disponível também então pessoal por hoje é isso espero que vocês tenham curtido esse conteúdo que de fato agora vocês usem esse conhecimento aí conhecendo o framer entendendo que essa ferramenta é extremamente simples de usar muito fácil um valor extremamente acessível poucos minutos Vocês conseguem construir os sites os portfólios de vocês então com isso acabaram as desculpas para vocês não terem um portfólio de primeira linha para vocês apresentarem pros clientes de vocês pessoal por hoje é isso vejo vocês em um próximo vídeo que a gente vai estar recomendando um próximo um outro vídeo

aqui nosso também que pode fazer sentido paraa jornada de vocês vocês podem estar assistindo e até uma [Música] próxima