Lost my job of 6 yrs last May and decided to return to being a designer and wanted to make my own site to showcase my portfolio. This tutorial helped me a lot, thank you!
I am definitely interested in learning more about Framer. I do ultimately want to learn Webflow, but this feels like an easier entry point at the moment. Also gets me into Figma a little more which has been helpful.
Now that I’ve messed around more with framer I don’t really see how it’s any easier. It’s more or less the same once you start using proper layouts with containers. Don’t just use the blank canvas and drop things in Willy nilly, it won’t look right as the screen expands. The infinite canvas is dope as fuck though. Having your layouts right beside each other is sweet. But fundamentally if you get this it’ll take you no longer to get webflow
That was cool. Probably a good idea to put the PiP of yourself in the lower left so it's not obscuring half of the clicking in the tutorial. Hope this helps.
Why is there no button when I search for it. In fact, there’s a lot missing when I search for them. Is this some extension/plugin. If so please tell me what it is so I can use it
Hi there, which option is best for creating only the static Home-page and inner pages without the webapp? As I've built the webapp with React and deployed it to Vercel. And I'm thinking that instead of coding the Figma designs for home pages, I could just use Webflow or Framer to convert it without coding and easily host it. I have a designer who designs excellently on Figma. Do you think Framer would be the best choice over Webflow but I also want the micro animations and smooth transitions?
Please highlight your cursor to make it easier to follow, and explain when you are jumping back and forth, for example when you jumped to "Spply" I had to stop and rewind several times before realizing it was not actually in Framer. Thanks for the tutorials
Pls am currently new on framer , but am having some issues navigating the panel containing the colors, i can't scroll down and up, is there any command for this , pls kindly help, it is very frustrating.
Hey, I've been using Framer a little and I'm really struggling to find any UI design kits for Framer-- all the UI kits are for Figma. Why is this? Do you guys recommend that I start in Figma and export to Framer or should I only use Framer?
I was about to learn Webflow, but i discover Framer thanks to you. The interface is much more ergonomic, and so it really hype me. Please do more tutorials like this, i follow you !
trust me, coming from Webflow this is super limited and frustrating. It's missing so many little things that Webflow is amazing at. It's worth your time to learn
@@jasonhebert1656 Like what? I've spent a ton of time trying to figure out some things in webflow and was so frustrated. What things is framer missing exactly?
Hey, thanks for making this video! Really helps. One quick feedback - it would be great if you could have your video on the left hand side while working so that the right panel view is not obstructed
I assume this video is for 1st timers on framer. but u didnt mention where exactly things are placed. ex - where is supply / spply option ? where am i supposed to nagivage and find it?
Will be good to know the basics: How it's hosted? How many websites per account? Code output and page speed test results? How to connect your domain? How does it handle transactional emails? How does it handle e-commerce? Does it allow query loops and dynamic data?
These feel like things you could understand by browsing the website dude. Might've been nice to thank the man for making his video before adding requests.
@@tomlebree First he asked if any questions about this put it in the comments. Second they’re paid for these videos why do i need to say thank you?? I was merely giving ideas to him for the next video on the subject. You got this the wrong way round.
Thanks for this, one thing I can't change is the font type from Framer Supply it is Inter by default and It doesn't have the option to choose another one
I have a similar issue - when I copy and paste text into the motion component from supply I cannot format the text to be 3 different lines. There's no grow setting like with a regular text component. I'm not sure how he got his hero text to be 3 lines.
I was having this issue, and I got the text to stack like his in the Hero Text by clicking on the Motion Text, going to the Font settings under the Motion Text setting in the right pane, then selecting ‘Pre’ under the Space sub-setting in the Font settings. Hope this helps what y’all were having trouble with too!
I would like to use framer to make shareable micro-sites (not hosted online, basically interactive presentations that can be shared via a secure link. Is this possible with the basic or pro account? The pricing table shows pricing per site. But as mentioned before for private sales numbers etc I don’t want to host just have unlimited projects to build and send out. Any help from framer users on this question would be super appreciated!
7:28 Why is my motion text not automatically line breaking to fit the box when I type longer text like here? Instead it just extends further to the right. It's so frustrating
Nevermind, I had to go to the Font settings while selecting the text and in the space section you can find no wrap, change it to normal. Fucking hell they didn't show this in the video and mine was automatically set to no wrap
I'm super interested in trying this platform. The UI looks clean and intuitive, with delivering functionality. Please have couple more tutorials so that people like me who wants to try Framer, can learn more from you.
we live in the days of Babble - where the same concept is reffered to by so many differnt "terms" ie. frame/container/wrapper - stacks/ liquid layout/auto layout/flexbox which is really a CSS a cascading style sheet for styling "Elements" ...ouch - it feels like there should be a Digital World Game called "Digital Jeaperdy" and contestants have to answear what is a synonym for the terms... "who's on first and who's on the second" conversation... its a Babble of terminology that interchangeble from one platfor to another
The readymade "motion text" doesn't show all the line from the title. Only feu words are visibles. Motion text with is Fixed and height Fit. So I can't understand wha it doesn't multiplie as you :/ And I dunno why shaddow doesn't want to show on Button component. (BTW Button doesn't exist anymore in insert)
WOW!! You are an awesome at teaching! My husband just introduced me to using Figma & Framer. This is my first tutorial. I have no background in web building but have only played around with building on the very limited Google Sites (haha). But you made me feel like I can do this! SUPER EXCITED!
Great video Ran :D Thanks! I'm planning to deep into Framer to be able to create more realistic prototypes. Definitely, please do more content with this software ;)
Stupid question but when I introduce Motion Text, the text never wraps and always overflow. How come? On your video it automatically wraps, i can't find how to change it.
Hello, I have an issue : when I put text on the frame, the text doesn't appear in the preview. And I've tried to understand the problem by using a blank canva, creating a frame and the issue is that when my frame and my text are in a stack, they don't appear in the preview. Could you help me please ?
Framer does not have a good plugin to allow me to download and copy my figma work by one click. I have a page i designed with 50 layers because of masking and autolayouts .. and i tried to reduce it down to copy 1 frame at a time and even reduced it to 15 layers and still cannot copy with one click . Terrible
wait. I am lost. wasnt figma, adobe XD sketch made to do frames? or now all these have move to a website make and now there is only one app that dies frames? this is a bit deluded.. so we are working with frame while figma aldo do frames????? is like if we are cannibals. human eating another human hahahahahaah.. workinf with a framing app while exporting those frames to a framing app which is figma... I do not get it!!
Hi, Appreciate the work you are doing sir. But when I try to apply the transition effect on the login button, it does not show up. I would be grateful if u help me out with this.
Okay, I kind lost my mind when I saw how Framer utilizes components. I've been messaging my design team to let them know that a new builder is in town.
This is a pretty good tutorial but you're calling the font "Bowrey" instead of "Bowlby" and it's spelled "Beige" LOL. Also, you imported the Hero Text instead of typing it out. When I type it out it won't break into multiple lines, it just goes off the page out of view on one line..
Hi, thanks for the video. Could you possibly add one on making the whole thing responsive? I looked into the Figma plugin, so I could build it in Figma and then use the plugin to transfer everything. But I remember you mentioned that re-building the design directly in Framer has the advantage of responsiveness. Could you go deeper into that, that would be awesome🎉 thanks for your content.
Hi great video! I just started working with framer and got to watch your video. But i have a rather simple question...I can't seem to find 'spply?' Can you help me find it?
Comparing about website publish between doing with Framer and Divi WordPress Builder, what do you think about these two ? Then, why do you think that way ?
do you really like framer? I've been messing around and although the infinite canvas is dope everything else seems REALLY rudimentary compared to Webflow. Adding elements to a page and placing it anywhere seems great to designers but it actually causes so many other issues. I've been trying it for a couple hours and I wanna throw my computer out the window at this point that's how frustrating it is to do really simple layout things that I can do in 30 seconds in Webflow. I guess I'm asking if it's worth learning cause it seems really limited
Thanks for the content! What is your strategy to prototyping with Framer nowadays? I think they could add a toggle to web and prototyping version. I really miss it, lot of people miss it.
really liked this video. just one quick suggestion, it would be helpful if you could move the video circle on the bottom right towards bottom left, especially when there is content on the right, so that it doesn't cover it up. thanks a lot.
This looks amazing, but the websites it genereates contain a TON of w3c validation errors. Is it irrelevant? Does it matter? I just hate not having direct access to the source code, but i'd love the convenience for making smaller sites.
You teach UI/UX design and I find it hard to be able to download the file to follow along with the tutorial. Right there on your website I'm completely confused as to how to download the file and when I log in it takes me to a page with paid courses, shouldn't that be easy enough? Now I'll have to find another tutorial that I can follow. I'm pretty pissed to be honest.
now make it responsive - see you in week
wdym? Add breakpoints and tweak positioning a little bit.
Loved this Rann, Please create more videos on Framer! Thanks!
Lost my job of 6 yrs last May and decided to return to being a designer and wanted to make my own site to showcase my portfolio. This tutorial helped me a lot, thank you!
did you end up using framer for your website?
I am definitely interested in learning more about Framer. I do ultimately want to learn Webflow, but this feels like an easier entry point at the moment. Also gets me into Figma a little more which has been helpful.
same feeling man!
why would you want to "ultimately" learn Webflow? lol. It's just a more difficult site builder.
Now that I’ve messed around more with framer I don’t really see how it’s any easier. It’s more or less the same once you start using proper layouts with containers. Don’t just use the blank canvas and drop things in Willy nilly, it won’t look right as the screen expands. The infinite canvas is dope as fuck though. Having your layouts right beside each other is sweet. But fundamentally if you get this it’ll take you no longer to get webflow
Webflows cms, logic, and code export are worth it alone. You can build much more robust sites that will ultimately earn you more money as a designer.
same feeling man!
Great video! 😍
That was cool. Probably a good idea to put the PiP of yourself in the lower left so it's not obscuring half of the clicking in the tutorial. Hope this helps.
Framer tutorials from Ran🤠. I'm surprised
Same
He has linked his Pro web flow in the description, so don’t be surprised 😂
Nav menu doesn't show anymore on new version ::(((
When I add the text it doesnt auto fit it all like your does. Any tips?
in the "font" section, in field "space" use "normal"
@@PaniYaja thanks, it was helpful!
how did you got to spply motion text where's the option to access it
Why is there no button when I search for it. In fact, there’s a lot missing when I search for them. Is this some extension/plugin. If so please tell me what it is so I can use it
Hands down the best framer tutorial ever, thank you for the awesome video and keep up the great work. 😊
Hi there, which option is best for creating only the static Home-page and inner pages without the webapp? As I've built the webapp with React and deployed it to Vercel. And I'm thinking that instead of coding the Figma designs for home pages, I could just use Webflow or Framer to convert it without coding and easily host it.
I have a designer who designs excellently on Figma. Do you think Framer would be the best choice over Webflow but I also want the micro animations and smooth transitions?
Webflow - Its a lot better at taking FIGMA designs. There are plugins available for it too. Framer, not fully there yet.
Well I guess now I have to try Framer 🤷 (hope Webflow doesn’t see this comment😂)
Please highlight your cursor to make it easier to follow, and explain when you are jumping back and forth, for example when you jumped to "Spply" I had to stop and rewind several times before realizing it was not actually in Framer. Thanks for the tutorials
Wow! Are my eyes deceiving me Ran made a framer tutorial who would have thought
From where did you open SPPLY in framer?
I didn't found it anywhere
Where can I find the link to Supply by Framer?
Fonts are not working for me. Did anyone have this issue too? Doesn´t matter which name I write, the text does not change.
Pls am currently new on framer , but am having some issues navigating the panel containing the colors, i can't scroll down and up, is there any command for this , pls kindly help, it is very frustrating.
My god that's amazing! Just 20 minutes, but looks wayyyy better and cleaner than the 100 hour portfolio you did. I think I finally need to try Framer!
Great video pal but maybe put your commentery video to the other side of the editor so we can see the pannel you are clicking on to change things....
Hey, I've been using Framer a little and I'm really struggling to find any UI design kits for Framer-- all the UI kits are for Figma. Why is this? Do you guys recommend that I start in Figma and export to Framer or should I only use Framer?
Definitely would appreciate more framer tutorials
I was about to learn Webflow, but i discover Framer thanks to you. The interface is much more ergonomic, and so it really hype me. Please do more tutorials like this, i follow you !
trust me, coming from Webflow this is super limited and frustrating. It's missing so many little things that Webflow is amazing at. It's worth your time to learn
@@jasonhebert1656 I have a feeling Framer will have a higher potential in the future though so it's worth learning it now
@@jasonhebert1656 Like what? I've spent a ton of time trying to figure out some things in webflow and was so frustrated. What things is framer missing exactly?
Is Webflow scared that they have a strong competitor? I hope Framer maintains the hype. Please make more videos on Framer.
How do I find the spply please, Great work Ran❤❤
much easier and cheaper than webflow. Can't believe I spent all this time learning webflow
Where can i find SPPLY(((
How did he open the section with the motion text in it?
Hey, thanks for making this video! Really helps. One quick feedback - it would be great if you could have your video on the left hand side while working so that the right panel view is not obstructed
True, so many details were hidden because of it and also it was too distracting.. there's so much blank space on the left he could have used..
wow it was amazing, Please create some more videos about Framer. Cheers 🎉
I assume this video is for 1st timers on framer. but u didnt mention where exactly things are placed. ex - where is supply / spply option ? where am i supposed to nagivage and find it?
where is the second part
I tried Framer a few weeks ago. It definitely has potential. I hope they expand the CMS features and make it more powerful.
Yo Flux!
I just introduced to Framer a few days ago and your video is making me fall in love with it.
I always like your lessons.
Thank you.
Will be good to know the basics: How it's hosted? How many websites per account? Code output and page speed test results? How to connect your domain? How does it handle transactional emails? How does it handle e-commerce? Does it allow query loops and dynamic data?
These feel like things you could understand by browsing the website dude. Might've been nice to thank the man for making his video before adding requests.
@@tomlebree First he asked if any questions about this put it in the comments. Second they’re paid for these videos why do i need to say thank you??
I was merely giving ideas to him for the next video on the subject. You got this the wrong way round.
Can anyone provide me with the name of this style of designs is that neubrutalism?
Thank you, it was more useful than framer's official tutorials for understanding the layouts 🤣😅
I'm searching so many tutorials on RUclips clear and to the point tutorial about framer but know my favorite channel has done this job for me haha 🎉
I also make content around framer too.
@@adebimpeomolaso ok ok
Hi, I'm wondering for designs that have more than just 1 page, how do we set a flow from the initial page to the another page? thanks!
fonts are not setting
Thanks for this, one thing I can't change is the font type from Framer Supply it is Inter by default and It doesn't have the option to choose another one
Same here, quite weird. When choosing a normal text block, the font selection works as it should be.
same issue here, on preview I see inter instead the one I have chosen
I have a similar issue - when I copy and paste text into the motion component from supply I cannot format the text to be 3 different lines. There's no grow setting like with a regular text component. I'm not sure how he got his hero text to be 3 lines.
I was having this issue, and I got the text to stack like his in the Hero Text by clicking on the Motion Text, going to the Font settings under the Motion Text setting in the right pane, then selecting ‘Pre’ under the Space sub-setting in the Font settings. Hope this helps what y’all were having trouble with too!
Sorry, let me correct myself, it should be Normal and not Pre
I would like to use framer to make shareable micro-sites (not hosted online, basically interactive presentations that can be shared via a secure link.
Is this possible with the basic or pro account? The pricing table shows pricing per site. But as mentioned before for private sales numbers etc I don’t want to host just have unlimited projects to build and send out.
Any help from framer users on this question would be super appreciated!
I’d love to know too! 😊
7:28 Why is my motion text not automatically line breaking to fit the box when I type longer text like here? Instead it just extends further to the right. It's so frustrating
Nevermind, I had to go to the Font settings while selecting the text and in the space section you can find no wrap, change it to normal. Fucking hell they didn't show this in the video and mine was automatically set to no wrap
@@feelcollins4358 how did you get to the spply screen cos i can't seem to find it?
@@MaryGbadebo-k7g err just type in framer spply in search engine, spply is supply basically
thank you I was looking for this
I'm super interested in trying this platform. The UI looks clean and intuitive, with delivering functionality. Please have couple more tutorials so that people like me who wants to try Framer, can learn more from you.
we live in the days of Babble - where the same concept is reffered to by so many differnt "terms" ie. frame/container/wrapper - stacks/ liquid layout/auto layout/flexbox which is really a CSS a cascading style sheet for styling "Elements" ...ouch - it feels like there should be a Digital World Game called
"Digital Jeaperdy" and contestants have to answear what is a synonym for the terms...
"who's on first and who's on the second" conversation... its a Babble of terminology that interchangeble from one platfor to another
The readymade "motion text" doesn't show all the line from the title. Only feu words are visibles. Motion text with is Fixed and height Fit. So I can't understand wha it doesn't multiplie as you :/ And I dunno why shaddow doesn't want to show on Button component. (BTW Button doesn't exist anymore in insert)
WOW!! You are an awesome at teaching! My husband just introduced me to using Figma & Framer. This is my first tutorial. I have no background in web building but have only played around with building on the very limited Google Sites (haha). But you made me feel like I can do this! SUPER EXCITED!
Great video Ran :D Thanks! I'm planning to deep into Framer to be able to create more realistic prototypes. Definitely, please do more content with this software ;)
Stupid question but when I introduce Motion Text, the text never wraps and always overflow. How come? On your video it automatically wraps, i can't find how to change it.
Hello, I have an issue : when I put text on the frame, the text doesn't appear in the preview. And I've tried to understand the problem by using a blank canva, creating a frame and the issue is that when my frame and my text are in a stack, they don't appear in the preview. Could you help me please ?
Framer does not have a good plugin to allow me to download and copy my figma work by one click. I have a page i designed with 50 layers because of masking and autolayouts .. and i tried to reduce it down to copy 1 frame at a time and even reduced it to 15 layers and still cannot copy with one click . Terrible
Who's cloning these hipsters? I see this guy at every bar in Oakland and SF..
I'm stuck at 7 minutes as I'm unable to find the Motion text for SPPLY. Please can someone help as the tutorial doesn't explain very well.
wait. I am lost. wasnt figma, adobe XD sketch made to do frames? or now all these have move to a website make and now there is only one app that dies frames? this is a bit deluded.. so we are working with frame while figma aldo do frames????? is like if we are cannibals. human eating another human hahahahahaah.. workinf with a framing app while exporting those frames to a framing app which is figma... I do not get it!!
Hi,
Appreciate the work you are doing sir. But when I try to apply the transition effect on the login button, it does not show up. I would be grateful if u help me out with this.
Okay, I kind lost my mind when I saw how Framer utilizes components. I've been messaging my design team to let them know that a new builder is in town.
I arcived a framer website. And it isn't appearing from then. Please tell me how to recover that website. And is there any option like that?
That was a very good Video We need full UI design to website deployment video please.... And you got one more subs
Great tutorial except for the part where you block the important settings panel with your head.😮💨
When i want to change the text of the motion effect it doesn't resize the box. So my text just gets cut off. How can I help this problem?
Why does when I paste the text into the motion text, it doesn't form multiple lines, it just went straight on. No matter what I tried, it doesnt work.
the tutorial is good, but i am having a hard time finding the same menus on my framer :( not even the text options for different fonts HELP
I dont have the navbar that you chose from the ready made navigation bars? i know its a year old tutorial but is it possible to still find it?
Is there any usecase in which you prefer framer over webflow?
Great video. Where do we find the "Spply"? Is it available on the free version?
does someone know why i can't have the same elements than him ? i can't find for the "click" button at 16:30 ?
How can I make this responsive and publish on web?
I am not able to find that SPPLY component😵💫 Please help me, anyone?
Would love to see more. I stumbled across framer and think it would work great for certain client projects
Hello!!Can I ask if I can sell the website templates I created from framer?
Love the video, but cant find the spply. ready made components :(
me too.
what about responsive things? PS beautiful work
where is exactly the second part of this tutorial. I really want to build the rest of the site.
can't seem to find the button when i search it up. Is the updated version different?
Garbage Framer gives you no export feature. So pay 15$ or get the hell out&
Can somone help me. At 7:35 when I paste the text its all going in one line. I can't get the text to go in multiple lines
Bro how to get only burger images like you used in this video in high quality
I am unable to find spply in framer, can somebody please help me with that
Thank you! Yes, I'm interested in learning more!
Please add "WebFlow" to the title, because otherwise is confusing for many (leading to downvotes)
This is a Framer tutorial why will he add Webflow in title?
I signed up to get the free assets and follow along but I never got the email with the assets.
video is really good . but where is that supply in framer ?
Can I export framer design to html and css ?
Where is the Spply for the animated text? Where can I find that in Framer?
This is a pretty good tutorial but you're calling the font "Bowrey" instead of "Bowlby" and it's spelled "Beige" LOL. Also, you imported the Hero Text instead of typing it out. When I type it out it won't break into multiple lines, it just goes off the page out of view on one line..
Great tutorial Rann! Thank you! Cheers from 🇲🇽
Hi, thanks for the video. Could you possibly add one on making the whole thing responsive? I looked into the Figma plugin, so I could build it in Figma and then use the plugin to transfer everything. But I remember you mentioned that re-building the design directly in Framer has the advantage of responsiveness. Could you go deeper into that, that would be awesome🎉 thanks for your content.
Hi great video! I just started working with framer and got to watch your video. But i have a rather simple question...I can't seem to find 'spply?' Can you help me find it?
Thank you. Where's the "Spply" button?
Comparing about website publish between doing with Framer and Divi WordPress Builder, what do you think about these two ? Then, why do you think that way ?
do you really like framer? I've been messing around and although the infinite canvas is dope everything else seems REALLY rudimentary compared to Webflow. Adding elements to a page and placing it anywhere seems great to designers but it actually causes so many other issues. I've been trying it for a couple hours and I wanna throw my computer out the window at this point that's how frustrating it is to do really simple layout things that I can do in 30 seconds in Webflow. I guess I'm asking if it's worth learning cause it seems really limited
Thanks for the content! What is your strategy to prototyping with Framer nowadays? I think they could add a toggle to web and prototyping version. I really miss it, lot of people miss it.
This is not for beginners :( I couldn't follow.
it is nice how you are using a webflow way to build a website in framer
Amazing Video! Iam currently making my websites with elementor but was thinking of exploring other editing and design tools. Thanks!
really liked this video. just one quick suggestion, it would be helpful if you could move the video circle on the bottom right towards bottom left, especially when there is content on the right, so that it doesn't cover it up. thanks a lot.
This looks amazing, but the websites it genereates contain a TON of w3c validation errors. Is it irrelevant? Does it matter? I just hate not having direct access to the source code, but i'd love the convenience for making smaller sites.
You teach UI/UX design and I find it hard to be able to download the file to follow along with the tutorial. Right there on your website I'm completely confused as to how to download the file and when I log in it takes me to a page with paid courses, shouldn't that be easy enough? Now I'll have to find another tutorial that I can follow. I'm pretty pissed to be honest.