Framer Tutorial: Make A Site From Scratch

[@Framer]

If you have any question about this video remember to join our Community! → www.framer.community/

[@eudesjonathas2051]

good

[@karlschopf]

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?

[@KunalDeo]

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.

[@MuhammadZeligUtt]

Yeah, I think so. UI in Framer is better compared with webflow

[@marcusgardner316]

That's one of the best training videos I've seen to date. Simple concepts, explained clearly and concisely. Well done

[@phase4485]

Excellent video. This is by far the best tutorial I have seen on Framer. Thank you and keep them coming.

[@NoodleAnimate-1]

FRAMER IS THE GOAT ITS SOOOOOOO OVER POWERD AND YOU DONT HAVE TO ADD A SINGLE LETTER TO A CODE SUCH A W

[@pranithatallada9701]

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

[@lindltailor]

Yo my name is Benjamin!

[@mohammedkennedy4213]

Best intro speech

[@ryanhurtt4074]

I immediately thought of Ryze Hendrick and the persona he created named: Benjermin. bahahaha

[@BrentLagerman]

good name bro

[@weekend.writer]

Yo, yo. Ben is jammin' .

[@Ezbeatslevels]

Nice Benjamin!

[@divye.ruhela]

Such a nice, basic tutorial to get started, that does not skip any basic details. Probably one everyone should watch before going deep into other Framer tutorials and resources.

[@almighty.saumya]

Wow I picked up this tool today and the ease of use is surprising

[@emsvincoffee5184]

Big KUDOS to Framer team! Amazing job 🙌🏼 Keep it up!

[@rainbowgoosey]

Been waiting for something like this for you guys for a while, VERY helpful, thank you!

[@LazyDesigner-23]

Words fail me to describe how apt this was. Thank you so much Benjamin, Thank you Framer

[@toyindaniel-oluwagbiyi411]

Thak you for considering complete beginners, expecting more videos like this

[@myanimationchannel]

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!

[@damiojetunji]

Heyy. How did you figure it out? I can’t find appear too!

[@myanimationchannel]

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

[@damiojetunji]

@@myanimationchannel thank you so much !

[@muhammadehsan6490]

This is really simple and best tutorial for beginners who wants to learn Framer Basics.🤩🙌

[@paulvartmusicdaily7784]

Extremely easy to follow along, really simple steps

[@kev4310]

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 KZbin.

[@nordstrom451]

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

[@komatmaeda]

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.

[@Framer]

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.

[@komatmaeda]

@@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!

[@ab-cl2wu]

I had the same issue as you but the comment from @Framer addressed it. Thanks!

[@sunnasuman]

I had this same issue. I made the same mistake haha. seeing this made me realise it and fix it!! ty

[@simonpetrus3089]

@@Framer awesome! i almost cried haha

[@pastorjosephshonubi3038]

this is the best video I have come across so far. kudos

[@captainstarman8724]

As a designer who is a Squarespace Expert this is sooooooooooo much better than Squarespace

[@JesseMoffett]

This is by fr te best beginner Framer introduction, very clear, very straight forward, LOVE it! Who made this tutorial, I want to follow them. Do they have more?

[@r5toijr913]

Wow! So far this is the best tutorial on framer! Thanks!

[@Pablox2495]

Loved every minute of the tutorial, thank you so much Framer team!

[@eamonshields2754]

Dropped at the perfect time, thanks

[@hyo2109]

It was amazing, learning through this tutorial. love it!

[@HarifaKhan-y6i]

Good Dear I Love You. I am from Pakistan. I have just passed intermediate exam. I am 17 years old I will learn quickly by watching your videos and become eligible to earn something 🥰🥰🥰🥰

[@arafatgfx21]

Love this ❤ Great Explanation!

[@LouiseFerreira]

thanks for the tutorial

[@zzuji]

very simple to follow step by step, thanks!

[@andriyageorge8571]

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.

[@ashwinibhagwatkar2364]

Thank you so much for this video, much needed. it helps me to start web design again.

[@amndnb]

Love this! Thank you for this super clear tutorial!

[@imagineArtsLab]

I like the animation properties in Framer. Pretty Creative tool.

[@salmanlp]

Your voice ❤ and great explanation.

[@雪鷹魚英語培訓的領航]

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!

[@delistacks]

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!

[@fabiangomez8349]

Have you solved this, bro? I have same mistake

[@eYuP5]

Thank you so much for this great tutorial 🙏

[@rakupang]

This is very easy to understand and follow. Thank you so much!

[@DavidSmitt]

Thank you for learning and thank you for sharing.

[@ankitasaurav2350]

Amazing tutorial. Thank You

[@petez4608]

Wow. Framer looks amazing. Does it integrate with Shopify in any meaningful way?

[@noirflakes]

41:07 Why does my "appear" option gone after I do the first one. The next time I navigate the icons to other one it's doesn't show the option "appear".

[@carofang3203]

Cool tool, thank you all so much for making this real!!!!!

[@princejamalminhas3271]

Really solid tutorial, well executed.

[@fedeostan]

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?

[@s.sandeep8017]

In the Components section -> The "appear" feature is not available

[@isaiahdelsol]

Framer does not give me the "appear" option for the components. Any advice? Great video by the way!

[@mizanurrahmanhridoy68]

22:00 min, If i resize my website, then Animator text changed its place. But Why? Could you please explain that for me?

[@davidschwan]

thank you we need more tutorials or schools!:D

[@abiolasamuel8092]

Nice! But in a practical use case, the navigation on mobile is supposed to change to hamburger menu.

[@abdulaziz-c8r4w]

any possiblilty to connect framer to with db cause i'm checking if user want user interface+backend access so how they can do that?

[@marvelmarvel-qw1wp]

Thank you, what a perfect guide

[@DatDyme980]

Can Framer be integrated with dropshippers to create an e-commerce store? (Printful, Merchize, Printify, etc.)

[@Maxzis]

I do the entire component step like he says but when I now load my site the icon does not show up. It does show up on the canvas however.

[@JacquiCuff]

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?

[@Spak.motion]

Thank for this awesome tuto

[@maftuna1762]

Well-explained tutorial 👍

[@Dajiee.R]

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.... ;(

[@swordfish84]

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?

[@Framer]

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.

[@izzy27062]

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?

[@BillieLo]

Big Thanks for the tutorial!!

[@angeladao1791]

00:14:30 is where they teach you how to make a button adapt to the text that's being added to the button!

[@evanessayalat]

Loved this.

[@unjali4207]

For some reason, when adding the url for the video, the video is not playing

[@tahysribau9479]

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 :)

[@Framer]

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!

[@tahysribau9479]

thks ! @@Framer

[@marcsintes3167]

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.

[@stacy_isa]

cool tips about animations, thanks

[@smagga007]

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?

[@androidfarmer8863]

Just trying Framer out & I'm not getting "on appear" for all variants.

[@chaedotstudio]

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.

[@androidfarmer8863]

@@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.

[@chaedotstudio]

@@androidfarmer8863 Yeah, I agree. It's more intuitive that way.

[@BartolomeoLipinski]

@@chaedotstudio Thank you for this info. I was already going crazy. The way clicking on variant works now is rather confusing.

[@-The-Golden-God-]

I'm following along... I tried to change the font but it won't select it.

[@jezergirl]

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...

[@uvinduharshana1169]

happened to me as well, found any solution??

[@vitalityeragroup]

Hey! the tutorial is great! But i couldn’t "copy style" of text and paste to another text. why is that?

[@stanley2681]

@40:55 I do not see "Appear" as an option under interactions. Any alternative ways of adding it?

[@martintoto1645]

I have the same problem, please help us @Framer...

[@jasenjahn]

bummer that my "Material Symbols Rounded" font does not work. Thanks Framer!

[@GreyGibson-ot7hy]

Great tutorial thanks

[@marcoferman2005]

I think its very interisting video for info

[@valentinosaincic6839]

My variant component interactions are not the same as yours. Why is that?

[@galaxyglide111]

I don't see the "Appear" trigger. Windows 11, Latest version. Downloaded from Framer website

[@sohaibzaman576]

thanks you😊 for your explanation

[@paulvartmusicdaily7784]

Thank you very much

[@KalpanaAher-h2r]

appear option doesnt appear in interactions , is there any alternative for it?

[@AabirKashif]

Great job!

[@supersaucysupra]

Really simple to learn! :)

[@KZ-lo7bv]

Figma and webflow had a baby)

[@ipushprajyadav]

Awesome ❤

[@منوعاتالعراقيه-ق9ع]

اريد اعلق

[@geekhacksandtricks]

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.

[@anshikapundir7616]

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.

[@atwfk]

@@anshikapundir7616 Thanks that’s really helpful! Do you know why that happens though?

[@martintoto1645]

I don't see the "appear" under interactions, what am I doing wrong?

[@rodrigoangeiras]

Great video. Thanks.

[@guusgeluk3693]

amazing i love this typoe of content! keep it up.

[@sproket343]

Is some of this old? The animation interactions are working differently. Following the tutorial doesn't work.

[@leandrosilva6414]

Awesome Videol! Thanks!!

[@thecutestcat897]

amazing vedio, really like this one

[@bennja_carc]

My name is Benjamin todo! Good video

[@Framer]

Sup benjamin

[@bonnygamesyt7576]

how do i get a link but for a video of mine?

[@viceduv]

What minute do you Talk about pages creation? :(

[@sepehrui]

Thank you

[@mauliidna]

i kept saying awesome during watch this tutorial

[@suniljadhav1889]

Really thanx a lot

[@robertf57]

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.

[@s.sandeep8017]

select autoplay in the video settings

[@viceduv]

Best video!

[@BledarSalliu]

Thanks