Framer Tutorial: Make A Site From Scratch
Вставка
- Опубліковано 27 лип 2024
- A beginner tutorial showing you how to make your very first Framer website. Follow along and let’s make a website together! Starting from a blank Canvas. By the end of the video, you’ll have a very solid understanding of Framer and should be ready to design your next website. Hope you enjoy.
00:00 Introduction
00:18 The Interface
03:26 The Canvas
05:21 Layout
18:23 Media
21:45 Breakpoints
30:41 Positioning
37:25 Components
41:52 Design Tweaks
45:34 Effects
48:46 Publishing
50:36 Outro
🌞 Start for free: framer.com
📚 Learn more at: www.framer.com/academy/
💎 Join the Community: www.framer.community
🎉 Follow on X: / framer
If you have any question about this video remember to join our Community! → www.framer.community/
good
Posted a question on the equivalent video in the Framer community a few days ago but still haven't heard back... should I re-post here or will someone eventually get back?
Excellent video. This is by far the best tutorial I have seen on Framer. Thank you and keep them coming.
Been waiting for something like this for you guys for a while, VERY helpful, thank you!
Big KUDOS to Framer team! Amazing job 🙌🏼 Keep it up!
That's one of the best training videos I've seen to date. Simple concepts, explained clearly and concisely. Well done
Thak you for considering complete beginners, expecting more videos like this
As a designer who has been using webflow for a while, I feel framer is better for designers to translate their vision from a sketchbook to a website just the way they want it.
this is the best video I have come across so far. kudos
Yo my name is Benjamin!
Best intro speech
I immediately thought of Ryze Hendrick and the persona he created named: Benjermin. bahahaha
good name bro
Yo, yo. Ben is jammin' .
Nice Benjamin!
This is really simple and best tutorial for beginners who wants to learn Framer Basics.🤩🙌
Wow I picked up this tool today and the ease of use is surprising
Love this! Thank you for this super clear tutorial!
very simple to follow step by step, thanks!
It was amazing, learning through this tutorial. love it!
Dropped at the perfect time, thanks
Amazing tutorial. Thank You
Hey guys, this is an excellent video tutorial. I got to learn a lot about creating components - icon animations, adding a video to the website and so on. I noticed that the video was created in framer itself, If its okay I would like to know more about creating the video used in this tutorial.
thanks for the tutorial
This is very easy to understand and follow. Thank you so much!
Thank you so much for this video, much needed. it helps me to start web design again.
Really solid tutorial, well executed.
Your voice ❤ and great explanation.
amazing i love this typoe of content! keep it up.
Thank you, what a perfect guide
Well-explained tutorial 👍
thank you we need more tutorials or schools!:D
Question about the Component Interaction at 41:12. I can only choose "Tap", "Tap Enter", "Mouse Enter", "Mouse Leave" and I can't find the "Appear" button anywhere. Can someone help me out here...? I followed everything same so not sure how this happened.
Hey there. Are you sure you selected the Variant as the source of the Interaction, and not the Text Layer within the Variant? It’s key to select the Variant itself by clicking on either the Layer Panel or on the Title above the icon.
@@Framer You're right! I didn't realize that you can select the Text Layer for interaction as well. Everything is solved now. Thank you so much!
I had the same issue as you but the comment from @Framer addressed it. Thanks!
I had this same issue. I made the same mistake haha. seeing this made me realise it and fix it!! ty
@@Framer awesome! i almost cried haha
Thank you so much, this video is great for beginners. Only major issue I ran into was that the "appear" animation didn't show up as an option for interactions... scratch that - you've covered it in another comment! Awesome, thank you!
Heyy. How did you figure it out? I can’t find appear too!
Here is the answer Framer had given that helped me: "Hey there. Are you sure you selected the Variant as the source of the Interaction, and not the Text Layer within the Variant? It’s key to select the Variant itself by clicking on either the Layer Panel or on the Title above the icon." If I remember correctly, I had been clicking a component within the component rather than the component itself. Good luck!!@@damiojetunji
@@myanimationchannel thank you so much !
Very easy to follow. I understand minimalistic design is great and all, but would be nice to have more common and realistic website/landing page examples - there aren't many of those on UA-cam.
once you know the basic it's up to you to be creative and create something that looks better, takes practice, find website you find cool and try to reproduce them
Awesome Videol! Thanks!!
42:39 - I've been loving Martel and Martel Sans because of the many weight options, but there is no italic. Instrument and Instrument Serif are great options with italics!
Great video. Thanks.
Loved this.
Thank for this awesome tuto
Really simple to learn! :)
Hi Guys! Amazing video! Thank you so much! I just have one question. With what was made the video? Could tell the software you used or if there is any related video to the creation of it?
keep up the good work
Great tutorial thanks
Great tutorial! the copy and paste effect its not working for me. I right click on the effect applied to the logo, and then select the text, hit paste effect and nothing happens.
As a designer who is a Squarespace Expert this is sooooooooooo much better than Squarespace
I have a slideshow component and a few grid components I want to auto scale up and down. You explain how to do so with the video but it isn't working on my website for my slideshow automatically, how come?
Very clear explanation. Thank you.
Is there a way to export the entire design and its elements which we create on the framer app, and then host it on a different hosting provider?
Unfortunately not. Framer is designed to be an all-in-one solution for designing and hosting websites. This means that the design, publishing, and hosting aspects are closely integrated to provide a seamless experience. While you can certainly design your website using Framer, the platform doesn't currently support exporting your design to be hosted elsewhere. The hosting is built into Framer and is part of the value it provides. However, you can still use your own domain with Framer. You can connect a third-party domain you own to your Framer project and set up the DNS records for it in your domain provider. This way, even though your website is hosted by Framer, it can still be accessed through your own domain.
Great job!
The padding parameter under layout, when you select the primary layer, is not changing anything. The video is still touching the borders on the other breakpoints. Did I miss something or is this a bug?? Ty!
Best video!
Does anyone know which browser is that?
Awesome ❤
اريد اعلق
I'm at 21:27 in and when I try to preview the page, the video doesn't play. How do I troubleshoot this? Thanks.
22:00 min, If i resize my website, then Animator text changed its place. But Why? Could you please explain that for me?
I'm following along... I tried to change the font but it won't select it.
Hey! the tutorial is great! But i couldn’t "copy style" of text and paste to another text. why is that?
Thank you
thanks you😊 for your explanation
Hello please he is recording with which software ?
Nice! But in a practical use case, the navigation on mobile is supposed to change to hamburger menu.
What minute do you Talk about pages creation? :(
@40:55 I do not see "Appear" as an option under interactions. Any alternative ways of adding it?
I have the same problem, please help us @Framer...
00:14:30 is where they teach you how to make a button adapt to the text that's being added to the button!
bummer that my "Material Symbols Rounded" font does not work. Thanks Framer!
I cant find the appear animation preset in the dropdown
amazing vedio, really like this one
I don't see the "Appear" trigger. Windows 11, Latest version. Downloaded from Framer website
How do you add links to content on the same page? E.g. a button saying 'Portfolio' and then once you click it scrolls down the page?
I don't see the "appear" under interactions, what am I doing wrong?
I think its very interisting video for info
Thanks
why does it say rows hen you slect eleents and add stack, in my verison it says stack
literally i've followed along as you've done yet the little slick trick of using the frame tool to create the "spacer" won't work at all it just does it above the whole thing n not between to create the space intended as you have done...so ....how do I fix this? i've been replaying and doing exactly that but it won't stay between the Indx and the social media handles.... ;(
The layout option doesn't appear for me
th buttons for lining up my text don't work
Hello I have an issue with the components parts. When I want to link them with the "appear" option, "appear" doesnt show sometimes. Im confused. But thank you for the tutorial :)
This can happen if you select the inner Text layer instead of the outer Variant itself. You can select the Variant itself by clicking on the title on the Canvas. Connecting from there should always give you the Appear option!
thks !
@@Framer
When I create the color style from the button an then I apply it on the icon, the icon becomes little. And there's no way to make it bigger again. I don't get what I'm doing wrong...
happened to me as well, found any solution??
40:56 i am doing the exact animation that is showing at this pont. but seems to be "Appear"is not found in the interaction session
this is my first-day using framer. Any one please respond.
If you try to create the interaction from the element inside the component it won't be there, but create an interaction from the component then it'll work. Tell me if more explanation is needed.
26:00 mine doesn´t convert to stack :(
Video not showing when previewing
in latest version where can i find FIX content?
Same place. You can only fix content that is directly nested in the page though. Can’t be wrapped in any other element
For me some features in this video didnt work out:
-I coudnt create components from an object but only an empty one.
-when i wantetd to connect two variants of a component the "on appear" option didnt show up.
Are these features not included in the free version or did I maybe made some mistakes?
Just trying Framer out & I'm not getting "on appear" for all variants.
Ran into this as well. This is from the link they posted a few days ago: For anyone who’s reading this and facing this issue, the “appear” interaction can only be applied to the “Variant” layers, NOT the object layers.
@@chaedotstudio Exactly! Someone over in support noted this. Working now.
I mentioned there that it seems to make more sense when clicking on a variant to select it, that it first selects the VARIANT itself rather than its contents.
@@androidfarmer8863 Yeah, I agree. It's more intuitive that way.
@@chaedotstudio Thank you for this info. I was already going crazy. The way clicking on variant works now is rather confusing.
00:03 Creating a website in Framer from scratch
02:58 Navigate the canvas using pan, zoom, and selection tools.
08:47 Creating and customizing a button in Framer design
12:02 Framer automatically nests layers for efficient design
17:49 Select accent color style and make final tweaks
20:33 Customize video properties and make site responsive
25:21 Convert entire page to stack-based layout
27:50 Adjusting spacing and responsiveness for a site on different breakpoints.
32:48 Design a site layout with consistent styling
35:14 Customizing link styles and adding links to navigation
40:11 Creating a looping animation using components
42:49 Customizing header and button elements in Framer
48:03 Add unique animations to elements
50:41 Experimenting with properties in Framer for impactful changes
40:53 Don't see an appear option. What might be the reason?
You most likely have the Text Layer selected instead of the Variant itself (parent layer).
@@benjaminnathandenboer I indeed have selected the text layer instead of Variant layer. Thank you for a prompt reply. And thank you for a great tutorial!
@@kerimakmurzayev4718Happy to hear!
Do i need coding experience to be a web designer 😢
Figma and webflow had a baby)
Is framer free of chrage?
plase, how use in spanish
My name is Benjamin todo! Good video
Sup benjamin
Hello there, thank you for the tutorial! I'm New to Framer: when applying a colour style (Accent in the video) 17:43, it's reducing font size and doesn't allow me to increase or decrease it afterward. I have no clue why as it's a colour style only (not a text style). Anyone faced that issue?
Are you sure you're just applying a color and not an entire text style?
@@Framer Thank you for taking the time to reply to my issue. I am going to have a second look at it but the steps I did are: select the button, click on the color background, click on "create style".
@@Framer Same issue here...Not really sure why this is the case.
@@Quarttzzzz Will take a look!
@@4zqS Any chance you could paste a remix link here? So I can reproduce (Benjamin)
anyone having trouble pasting effects?
Good ❤
alt + scroll wheel to zoom!
Yo whatsup Benjamin, my name is Max!
i cant export file from framer why?
What type of file? you can export images using the desktop app. framer.com/downloads/
Oh really 🤔 so I can't export using chrome browser?
Appear option in variants doesn't show.
I'm on the desktop version.
@@Atseo Hi, I had the same issue! Pasting from a previous comment that answered this same problem:
This can happen if you select the inner Text layer instead of the outer Variant itself. You can select the Variant itself by clicking on the title on the Canvas. Connecting from there should always give you the Appear option!
@@millidesignux Gotta give a try thanks milli
Learners if anyone writing notes or creating a detailed timestamps do post it in comment section.
🗣🗣🗣 yooooo my name is Benjamin 🗣🗣🗣
Great bbb
24:23
25:40
29:11
31:02
Far to small writing you should make it bigger so you can read what is going on
Adding the video does nothing...it doesn't function at all, doesn't show up...nothing...that includes trying to reload it and view it.
Can i make a shopify E-Commerce Site with framer?
Yo my name is supri ai from australia.❤
I am no expert or frontend developer and I have never made a website. I wish I could make one but it seems so difficult. This tutorial only touches the surface. It is just a landing page with minimal design. If you want to build a real website with multiple pages it would take months to do it. I wish there was a tutorial and integrations to use for example relume for wireframe then go directly to framer and automatically design all the pages with AI or use existing design from figma to framer plugin and add multiple pages. Or start completely with framer AI and build all the pages but using effects and other animations. So far framer AI has certain templates and you still need to do all the work to include effects and other nice stuff.
I hope all this comes one day and you can build it easily with few clicks and not spent weeks. Of course if you spent months learning how designing works it will be way easier to build it from scratch.