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?
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.
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 RUclips.
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
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?
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
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!
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!
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?
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.
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!
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.
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.
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...
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?
@@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".
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?
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.... ;(
Sorry, but that hack with the empty frame in the navbar is too sloppy for you guys to teach. You can easily achieve this effect using "space between" in the stack, which is how a developer would do it using flexbox
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.
@@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!
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?
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.
Excellent video. This is by far the best tutorial I have seen on Framer. Thank you and keep them coming.
Wow I picked up this tool today and the ease of use is surprising
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!
Thak you for considering complete beginners, expecting more videos like this
Big KUDOS to Framer team! Amazing job 🙌🏼 Keep it up!
Your voice ❤ and great explanation.
Been waiting for something like this for you guys for a while, VERY helpful, thank you!
thanks for the tutorial
Wow! So far this is the best tutorial on framer! Thanks!
Loved every minute of the tutorial, thank you so much Framer team!
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 RUclips.
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
As a designer who is a Squarespace Expert this is sooooooooooo much better than Squarespace
Big Thanks for the tutorial!!
Dropped at the perfect time, thanks
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?
very simple to follow step by step, thanks!
Thank you so much for this great tutorial 🙏
That's one of the best training videos I've seen to date. Simple concepts, explained clearly and concisely. Well done
Love this! Thank you for this super clear tutorial!
Thank for this awesome tuto
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
Amazing tutorial. Thank You
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!
thank you we need more tutorials or schools!:D
Well-explained tutorial 👍
thanks you😊 for your explanation
Thank you, what a perfect guide
Really thanx a lot
Really simple to learn! :)
Can Framer be integrated with dropshippers to create an e-commerce store? (Printful, Merchize, Printify, etc.)
Nice! But in a practical use case, the navigation on mobile is supposed to change to hamburger menu.
@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...
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!
Loved this.
I think its very interisting video for info
Great job!
I'm following along... I tried to change the font but it won't select it.
00:14:30 is where they teach you how to make a button adapt to the text that's being added to the button!
amazing vedio, really like this one
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?
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.
@@anshikapundir7616 Thanks that’s really helpful! Do you know why that happens though?
Great video. Thanks.
My variant component interactions are not the same as yours. Why is that?
bummer that my "Material Symbols Rounded" font does not work. Thanks Framer!
In components I can't find Tap or Appear?
Awesome ❤
اريد اعلق
Awesome Videol! Thanks!!
My name is Benjamin todo! Good video
Sup benjamin
I don't see the "Appear" trigger. Windows 11, Latest version. Downloaded from Framer website
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
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.
Thank you
🗣🗣🗣 yooooo my name is Benjamin 🗣🗣🗣
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.
I cant find the appear animation preset in the dropdown
Best video!
Estaria genial uno en Español
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??
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)
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?
22:00 min, If i resize my website, then Animator text changed its place. But Why? Could you please explain that for me?
Hello please he is recording with which software ?
What minute do you Talk about pages creation? :(
The layout option doesn't appear for me
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?
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.... ;(
26:00 mine doesn´t convert to stack :(
good video, but please talk faster I had to put to 3x speed to be able to bare it
how to export files?
Sorry, but that hack with the empty frame in the navbar is too sloppy for you guys to teach. You can easily achieve this effect using "space between" in the stack, which is how a developer would do it using flexbox
Does anyone know which browser is that?
Good ❤
Video not showing when previewing
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.
select autoplay in the video settings
Do i need coding experience to be a web designer 😢
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.
Is framer free of chrage?
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!
@@itscozymilli Gotta give a try thanks milli
Can i make a shopify E-Commerce Site with framer?
anyone having trouble pasting effects?
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.
Yo my name is supri ai from australia.❤
plase, how use in spanish
my animation did not work
(it worked in safari)
Learners if anyone writing notes or creating a detailed timestamps do post it in comment section.
Great bbb
The voice of AI
En español
Hmm strugling here. The text etc is not responsive!
"Desmond Benjamin"
44:23
Magyarúl kérem a magyarázatot
Am I the only one to watch at a x2 speed?
the slow speech is an adhd nightmare :(
1.5 x RUclips is easy. Don't be anoob
this is hack!!!!!!!!!!!!!!!!!!!11111
Great video, but pathetic audio... No concept of punctuations!!
Can I hear in Telugu language
wow