Build a 3D Site Without Code with Framer - Crash Course

Today we're gonna build a fully functional 3d site without code, and it's all done in Framer. We have a full landing page with animation and parallax, as well as multiple types of components and layouts. Then we have multiple pages and layout styles with effects and appear animations, and it's all responsive, meaning that it's gonna work on any resolution, including with a hamburger menu that is very common and you can switch between the pages from here. Framer has forms, which means you can col

lect information from users using services like MailChimp. So we're gonna use stacks pretty much everywhere so that we can add new components easily, and it's going to adapt to the new content and we're going to use break points to adapt the layout to different devices. Now framer feels like a design tool. You have the navigator, you have the layers and then you have the inspectors and all the styles, as well as the size and positioning and effects and typography works pretty much the same way a

s in Figma and it's going to be so familiar thanks to the component system, as well as the overrides and the interactions. And as I design, you can see that I can edit everything on the fly and I can embed fully functional elements, such as this 3d asset by using an embed component. Now what makes framer so unique is that I can insert a lot of types of pre-made components, such as layout elements, navigation for menus, isolated elements, such as cards, dropdowns, and indicators and all the icons

that you see here are using a premade component that have access to hundreds. Then there's the CMS part. So we have a collection and it's very easy to create your own data so that your teammates, especially editors and managers can enter that information and it's going to populate your layout. So this is a full course. We're gonna learn all of that, how to create a basic layout and content that are dynamic, how to work with components, interactions, and animations. We're going to build multiple

pages and add break points to make your layout responsive, work with forms and all types of dynamic components, such as icons, social, utility, etcetera. This is a full course, and we're going to learn everything step by step, all the assets and the design files will be provided and you can also copy my project to your documents and fully inspect, edit everything. This is a template that you can use for your own site and build from there. Now, this course is entirely free thanks to Framer spons

orship, which means that you can share it to your friends and then they can learn with you without having to pay. Framer has been a top design tool for designers for many years and they've been focusing on framer sites, which allows you to create a fully functional site using all the familiar design tools. In fact, they have many free templates that you can start with. And there are many top design teams that use framer to launch their website. To follow this course, going to need to create a fr

ee account and you have access to all of the features and you can even publish your website for up to a thousand monthly visitors. In fact, I built all of this by using the free account so you can follow along and build everything without having to pay anything. You will also need to download the assets file, which include the images for the logos, the backgrounds and wallpapers. So with this, I hope you're excited to build a 3d site without writing a single line of code. So let's get started. L

et's start with the basics. In Framer, you can edit from the browser or you can also download for the Mac which is a little bit more convenient and they have a version for the apple M1 chip. Once you have created an account and inside the app you have a bunch of basic tutorials that you can go through. But otherwise let's create a new project. This new project comes with a basic template, including the top bar and a few pages about contact and 404. You can preview the website by going to the pla

y button on the top right and here you can navigate to each of those pages and see how they respond two different devices. Let's exit this. And I'm going to go back to home. Then I like to start from scratch. It's also better for learning. So we already have the canvas, which is the desktop version. And here we're going to create a frame. If you used Figma before, you're going to be familiar with creating this pretty much everywhere. I am pressing F and I'm drawing a rectangle. This is great for

grouping elements. So basically a container, or it can also be an element by itself for images, backgrounds and stacks. So for this rectangle, I have the position, the size and the layout features as well as the styles I can decide to change the feel and go to image then upload from the assets folder. So I'm going to pick hero BG. So I can drag this around and resize it, or I can use constraints. By setting zero from the top and Left and right. And set the height to 600. And so far, this is how

a design tool works. I can also switch between pages and layers and assets. Now you can see that we have the text styles as well as the links. So when you start a new design, it's really good to have a bunch of text styles so that your design is consistent across. Framer it already comes with four text styles but typically we have a few more such as footnote and caption. I like to model a lot from some of the best practices from apple and material design from Google so we can pretty much cover

any range of layouts that we need. Now I'm going to go back to layers. I'm going to create a title by using the T. And here I'm going to type mixed 3d and 2d design with framer. So going down a little bit in the inspector, I have the text options, but I should definitely select one of the preset textiles. And here I have one which is called title. It's typically very large and I can edit this. The font that we're going to use for the entire project is called Manrope. And this is actually from Go

ogle fonts so it's free. You can see here from the logo. So with Framer, we have access to all of the Google fonts on top of the custom fonts that you may have installed. Since my website is mostly a dark mode website I'm going to change the color to white. Then for the size I'll set to 60. Let me move this to the left a little bit. And here we have the option to select between large, medium, and small. And what this means is that if the resolution is 1200 and plus, then we're using this size an

d for the medium is 810 to 0 then we have small. For medium I'll sit 2 48 and for small let's set it 2 38. So what this means is that if I play this. And I resize to a smaller resolution. You can see that the font size is changing based on that. As well as the constraints for my image that responds to the browser size. Let's add another text. So press T and here I'm going to paste a long text. You can use any text that you want. Again, I'm going to select styles. This time, I'm going to select p

aragraph. Let's edit this. I'll change to regular then set it to white. And what I'm noticing is that I don't have break points for this one. So what I can do is to add them and we have these preset numbers. For medium 13 is a little bit too small. So I'm going to set to 14. And small 14 as well. Let me move this text right here. And now I want to show you how to set break points, not just for texts but also for your layout, this is going to be super useful for making it adaptive. I'm going to c

lick on break point and you can see, we have pretty much the same numbers of 1,208, 10. So tablet. I'm going to zoom out a little bit. And add another one for phone. These are the most common resolutions when you're designing a website. And what you're noticing right away is that my constraints are working. Meaning that the size of the image is going to zero, zero from the sides and the text styles also adapt. And for every page it's really helpful to have these break points. Let me focus back o

n the desktop. Now, I'm going to say like both texts and resize the with. To four 60. Let me just. Place them a little bit and also after selecting the two of them I'm going to group them inside a frame and the shortcut is command enter. So let's learn a little bit about constraints because this is what every design tool have. And it's also good to see the results in real time, especially across multiple resolution. It's going to help you understand. You can already see the problem where this is

cut off. Also the second text is from the bottom and we have a lot of gap here. So let me select the container and I'm going to set to one 30 from the top and 50 from the left. Like this, we have consistent spacing from the left and top across the break points. Secondly, it's also good to inspect the constraints for each. So we can see that the title is top left and right. But the text is bottom. But we can switch that to top instead. However. However that is not solving our problem because for

the small resolutions. We still have that gap. Now, this is where I love to use the stack feature. And this is more how CSS works, meaning that the content will Stack one after another. So Figma also has this feature and when I go to the height I have this option called fit content. What this means is that is going to detect the size of the content on any resolution at any text size and it's going to automatically set the height of the container to fit that. And voila that solves our problem. N

ow the way that break points work is that whatever is changed on the main template, which is the desktop is going to apply automatically to tablet and phone, but you can also change on the phone and it's only going to apply for the phone. Meaning that if I select the container for the text on the phone, And I change it to a size of 300 it's not going to affect the other resolutions. Likewise for the constraints I'm going to set to 40 from the left. Then you also need to pay attention to what has

a fixed size, a fit size or a fill size. So we've learned that fit is going to fit the size of the content. But you also have fill which means that it's going to take all available space. I'm going to select both texts. And set the width to fill. Meaning that if the container is smaller. Then it's going to fill that space. Now we have an adaptive layout. Let me just put "and" to another line. And this is what we have so far. So before we go, I want to show you how to embed a 3d element in your

design because I think 3d is really cool and so much more accessible nowadays. Now right now, we have a frame that is using a background. And instead of using a background, I'm just going to remove that by pressing on the X and instead I'm going to go to insert and go to utility and we have a really neat embed component that we can insert. So here I'm going to set it to the full size using constraint, zero on all sides. And I'm going to use my 3d asset from spline by pasting the URL from spline.

And there you go this is a 3d asset that is fully interactive that I can use for my website. So just like in design tools, we need to prioritize some layers, putting some above others. So I'm going to put the embed after meaning that now my content is on top. In design is very important to make the text easy to read. And here we're lacking a little bit of contrast, especially for the smaller resolution and because of the background. We can solve that by clicking on the text and adding a text sh

adow. So I'm going to set Y to 10. And blur to 20. And also the color. I'm going to increase because with a darker UI, you should set the drop shadow a little bit darker and it's going to be fine. Another thing that I can do to increase the contrast is to add a mask using a gradient. So let's add a frame. I'll set the height to 400. And the constraint to zero from left and right, as well as bottom. Now I'm going to go to Fill and set a linear gradient from black 0%. Then for the other side, I'll

select it first and set it to black 50%. Just make sure that this is after the content. Now, if you play this, you can see that I have my 3d element then, if I resize, it's going to adapt automatically, but also I'm noticing that I don't have the interaction at the bottom. And this is easy to fix by going to styles. What you see in the inspectors are the most commonly used styles, but you can also have more by clicking on the plus sign and here we have styles such as blur, blending and the one

that I want is called 0.2 events, and I'm just going to set it to none. What this means is that this element, which is the mask I'm going to rename it to mask is not going to be in the way of the interactions. So I can just mouse over right here. So let's rename the frame and this is the hero section. Also, we should rename the project to my 3d site or whatever name that you have for your site. And that's it. We managed to design a very basic Hero section with a 3d asset. We're going to dive dee

per into the stacks and adaptive layout features. So far, we've played a little bit with fill and fit content. And when you set a container to fit content, it will automatically use the layout feature, which is essentially a stack. And you can see here that just like CSS flex or Swift UI stacks, we have the direction, the distribution, the alignment, the wrapping, as well as the gap and the padding. And that's typically how you would design your layout in CSS or in Swift UI. So stacks are gonna

make your life so much easier. Personally. I like to use stacks everywhere because when I add new content, it's going to adjust automatically. So for example, I'm going to set the entire desktop to a stack. So I can either click on the plus sign on the layout, or as soon as I set a height or width to fit content, it's going to automatically use that. Now, keep in mind that when you change an existing element to a Stack, sometimes it can affect the inner elements. So in this case, it's very impor

tant to pay attention to the next container inside in this case it's hero. So make sure to select that and we're noticing that it has a fixed size across the resolution so we need to set that to Fill to take the full space. To avoid having to readjust some of the elements it's definitely best to start with stacks from the start. And when you have a Stack, you can add more columns or rows depending on the direction. So in this case, I'm going to add a new section to my landing page, and we have a

gap here. So I can set the gap to zero. And now in my new section, I'm going to change the feel the 0 7 0 8 18. So this is my background and I'm going to start right away with a Stack, but notice that I don't have fit content if I don't have any child element. And if I don't have a container, it's not going to show the option for Fill. So for now, I'm just going to set layout and the direction is going to be vertical. Then I'll add a new text trusted by 8,000 companies worldwide. And here I'm g

oing to select one of the styles which is section title. Edited set it to white. The size is going to be 22. And then add break points, medium 20 and small 20. Notice that inside a Stack it's going to center automatically and that's because the container itself controls the alignment, distribution and so on. Let's add a new text and this time you can copy from the content. So I'll create a new style and name this one, footnote create. Here, I'm going to edit set the font, to Manrope weight mediu

m white 70% opacity. Then the size 16 medium 14 and small 14. Let me exit this and I'm going to set the width to a fixed size of four 60. And text alignment to center. Now looking at the different resolution. You can see that I have some issues for the phone resolution. And what you want to do for small resolutions is to set the, width to fill. As long as you have a container, this is going to work. And then we need to add some extra padding. So let's select the container. First, I like to make

sure that the height is set to fit content. And I'm going to use padding instead which is the best practice. A number that I like to use to have enough negative spacing is 100. But the problem with having 100 all around is that it doesn't work well for mobile. Instead of using on all sides, I'm going to customize the sides. For top and bottom, leave it at 100. But for left and right. I'm going to set it to 30. So it looks much better here. In fact, the standard for tablet and desktop is about 30

, but for mobile, it's actually 20 on left and right. So we have as much space as possible for the content. I also want to make sure that the title is going to be centered. Great. If you play this, you can see that it adapts really well to the content as I change the resolution. So, what about the hero? What if I want to use a Stack instead of constraints, because it's far more responsive when I do that. Now the thing is we added two elements that are supposed to use constraints such as the mask

, as well as the embed element, which is the background. So we need to do a little trick here and adjust our elements. And I'm going to show you that. Let's go to the hero container and I'm going to turn this. Into a Stack. But you're going to notice a big problem. And I think it's important that we face these big problems. It's going to happen a lot, especially if you switch between constraints and stacks. So, what is happening here is that each element that you see inside this Stack is spread

horizontally, meaning that we have the 3d embed, the mask and the rows in that order. So, what I need to do is to make sure that these two elements that are using constraints I should keep using constraints, even though it's part of a Stack and this is a really neat feature in framer. So I'm going to select both of these. And I'm going to set the position type to absolute. As a result, it's no longer part of the Stack and you can see that by having my content completely centered within the Stack

. So I just need to adjust the constraints of these two extra elements. For embed, I'm going to set zero on all sides like before. And for the mask I'm going to set to zero. On left, right. And bottom like before. Now when you using absolute positioning within a Stack, sometimes it's going to take priority in term of being above the other elements. So to fix this we have this concept, which is very common in swift UI and CSS, which is the Z index and the higher, the more it's going to be above,

so lower meaning going to the back. I'll set the mask Z index to zero. As well as the embed Z index to zero. And voila, you can see that the content itself is now above. Another thing that you'll notice when you turn an existing element using constraints into a Stack. Is that it's going to affect the different break points. So we can just repeat the same steps. So zero on all sides. And sometimes you also have the ability to right click and reset overrides, meaning that it's going to take exactl

y the same values as the original ones in desktop. Okay. So we learned a lot about how stacks work, how it affects the inner elements and how to turn an existing element with constraints into a Stack then deal with the problems. So now I'm going to go to hero and because it's using a Stack I should definitely use height. With fit content. Then use my magic numbers for the padding which is 100 3,130. I also want to align my content to the left by default it's centered by using distribution. I can

set it to start. So start depending on the direction, it means left if it's horizontal or top, if it's vertical. So depending on the size of your titles. I do feel that sometimes with really big titles, you need even more spacing. So the bigger, the elements the bigger, the spacing. So I like to use 54 desktop in some cases. But for tablet definitely set to 30 left and right. And for the phone, I'm going to set it to 20. Perfect. While I'm here I want to make sure to select the title, but notic

e here that I cannot select the title and this again will happen if you're using absolute positioning again which can also take priority over the selection of the elements. And one trick that I found was that you can lock those elements. So the embed element and a mask as a result, they won't be selectable anymore. This is useful for backgrounds that don't need to be changed all the time but keep in mind that once it's locked you need to go back to the layers list to be able to select it again.

While I'm here, I'm going to select the rows container and set the gap to 30. And for the title I like for it to be consistent across the resolutions. So I want to make sure that with is with the word framer. And so I'm going to put this from the desktop to make sure that it affects every single resolution. Now a really good practice for mobile is to take the entire width of the phone. I'm going to select the rows for mobile specifically and set the width to fill. Perfect. So previewing this, yo

u can see that the layout is far more responsive to the resolution. Okay. Let's focus back on the second section. I'm going to set the gap to 30. Then I'm going to add some logos underneath. Let's go to the images folder. Copy all the company logos. Then paste in the second section. And allow. Now I'm going to move this back to the rows container. And I have my logos. Then I'll group inside a frame command enter. I like to start with fit content on both width and height and then set the Stack t

o horizontal. Let me use the down arrow on the keyboard to move it down. And in this case, I'm going to set the width back to fill, to take the entire space. And then we're going to play with the distribution. So we can use start, which is left center or end to right, depending on the direction. We can also use space between which is going to push the first and last to the far end. Or you can use space around and evenly to think of each element as a box and centered within the boxes meaning that

now we have a little bit of padding at the start and at the end, but in this case, I like to use space between. And the items as I did before I can move it quite easily in the order that I want by using the keyboard arrows, I'm going to check for mobile it doesn't fit the screen so one thing that I can do is to resize the logos first because remember that the text styles also resize based on the resolution. So I'm going to select all of these logos and I'm going to resize them manually to rough

ly 38 in term of height. And for mobile, I'm going to resize to about 36 in term of height. This is still not enough to fit every logo. So what I can do is to enable wrap. Then I want to set to center for the logos. Let me add a little bit of gap to 20 and there you go. So, this is what we have so far and I think that looks pretty good. Now before we go, I want to add a few new elements, including the divider. So let's create a frame. Set the height of one, and a width, we can use a percentage s

o 25% which becomes relative instead of fixed. Let's change the fill color to white and the alpha to 10%. Then I'll add a new text. Publish a site in minutes. Change that to section title. And here we're going to use a really cool plugin which allows us to have access to hundreds of icons. So we're going to insert going to icons. And the one that I really like is called phosphor. And so this is what we have. I'm going to move it down. Change the size to 32 by 32. And you can see that it's a cust

om component. And it has its own section for the inspector. And I can quickly change from hundreds of icons. If I want to have the full list I can go to their website. And I can search for the icon. So in this case, I'm going to search for Pen and I'm going to use this one. So let's go to the dropdown change to Pen. Then I'll add a new text after that. Flexible component. Create a new textile, which is going to be very close to the footnote. And instead of creating from scratch, I can duplicate

the footnote. Rename this to caption 2. 2 because I want to set it in caps. So select it. And edit it. I'm going to set it to bowl and transform, upper case because I want everything in caps. To create a different style of a title or a subtitle. And I'm going to set the size to 14 in large and 13 for small and medium. So the color, let me just set it back to a hundred percent. Then I'll add a new text which is roughly the same size as the caption 2. So I'm going to duplicate caption 2. And this

one is just going to be caption. Select it. Edit it. Set it back to none. I don't want this uppercase. As for the weight, I'm going to set it to medium. White. 70% opacity. And we're going to keep the same size because it's caption and caption 2. Okay. So what I want to do is select these three and put that inside a container. So select these three elements, command and enter. Width to 2 50. And height to fit content. I'll set the padding to 30, 20, 30, and 20. Now, oftentimes when you create a

frame. The inner elements are going to be fixed so what you can do, especially for the text is to set them to fill so that they fit the container. And then set the alignment to center in this case. So I want to add a border. So I'm going to go to styles and ad d a border white to 10%. Then the corner radius to 25 and the Fill, set it to black 40%. And voila, I have my container, it's all in stacks and it's super adaptive. Every time that I add a new element, it adjusts the frame automatically an

d that's why stacks are so powerful in framer. In fact, this is a feature that is available in all the design tools and designers are learning to use this more and more. But in framer is just to another level because we're building a fully working site. Before we go I just want to make sure that I rename this Stack to feature and this section to features. I hope you learn a lot about stacks and fit and fill content, how to adapt to different break points. And most importantly, how to deal with t

he difficult task of turning an existing element with constraints to a Stack that is far more adaptive and responsive. These are concepts that are universal to every single platform, including CSS in Swift UI so you're going to carry this knowledge with you regardless of the platforms. In this section, we'll learn about components, which have super powers in framer because we have so many features packed with it. Now when you designing, as soon as you have an element that is meant to be reused m

ultiple times you want to create a component. So I'm going to select this feature Stack here. And I'm going to create a component using option command and K. And I'm going to call that feature, then create. So here we have the component view. And we can create new variants as well as a state. In this case, it's a hover or a pressed state. But let's start with variables essentially they are overrides, which means that you can make your component customizable as you create many instances. So for e

xample, You want to make sure that you can customize the icon, the title and the text. And to create variables it's very simple. Each of these values that you see in the inspector, including the styles and the plugin properties can be variables. So for example, you want to make sure that the name of the icon is customizable. So I'm going to click on plus name. I'll rename this to icon and press enter. And voila I have my first variable. I'm going to do the same for the title. Text content create

a variable, it's going to be of type plain text. And it's simply a title. Then we have the text content create variable, plain text and it does a pretty good job at auto-filling the name of the variable. So as a result, I can exit my component by going to the breadcrumbs menu here, click on home and we're back. Then I'll duplicate this command D two times. Go to the second one and notice that my component has overrides. I have the icon title and text, and I can change them as I wish. So you can

use any content that you want or from the content text. That I'm going to copy and paste. I'll select the third one. Change the content. And also change the icon, this one to image. And select the third one icon to layout. Title copy and paste. And voila, this is how you create components. This is how you set variables and you replace the overrides. Now let's set the layout I'm going to select these three elements. Create frame, command enter. Set width to fill and height to fit content. As soo

n as I have fit content is going to set the layout which allows me to set the direction to horizontal. Distribute to center, then gap to 20. And I also want to make sure that each of these elements are going to use the full width. Because notice that in tablet, it doesn't really fit well. And to make it more responsive, I'm going to set the width to fill. So it's going to distribute proportionally depending on the available space. Now after changing the elements to fill in term of height, you're

going to notice that it's going to affect the height. Of the container. And it's become fixed. So make sure to adjust that back to fit content. Then for mobile I want to set the direction to vertical. Now let's test this in the preview. And I want to show you a different problem. You can see that when I go at this resolution before the tablet. It's becoming really, really large. And likewise, when I go to desktop and I go really large. These elements, including the logos are becoming too large.

So there's one technique that I love to use and it's called max width. So for any container or any element I can set the min-max values. In the inspector I can select a max width and I'm going to set it to 800 px which is the fixed value, especially if you're switching between percentage and fixed value. The same for the logos. I'm going to add a max width of 800 PX. So that it doesn't become too large. And the same for the phone. I'll set the max width to 400. Now let's take a look. And you ca

n see it doesn't exceed that 400. And likewise for the desktop. You can see that it's quite manageable. Okay, let's talk about components and variants because they are necessary in order to create buttons and states. In this case, I'm going to add a button and I'm going to make a hover interaction for that button. Let's start with the text, which is get the app and I'm going to select styles. I'm going to use footnote 2, which means that I'm going to duplicate this first change the name. Create

and selected. Let me edit it. I'll change the color to white a hundred percent and transform because it's footnote 2, to uppercase. For the weight, I'm going to set it to semi bold. Let me close this and I'm going to put this inside a frame. So command enter. Rename it to button. Set the width to two 20. Height to fit content. Direction, horizontal padding. I'll set it to 10. Now, I'm going to go to the field and I'm going to use one of the gradients so linear and here you can use one of the pre

set gradients I'm going to use the last one, or you can use any color. And then I'm going to change the angle to 1 35. If you use shift is going to snap to a more precise angle. For the color code, you can see it's B 1 75 F F two 1 C 14 F F. Okay. For the corner radius, I'm going to set it to 24. But the thing is I want to customize one of the corners so I can go to the specific corner which is bottom right and set it to zero. So now I have a very different style. I'm also going to add an icon.

So I'm going to go to insert and again, icons phosphor. The color is black. And then in phosphor, there's a neat style called duotone which has an additional shade. The icon itself, I'm going to change that to device mobile. Awesome. Now I'm going to select the button and I'm going to create a component, option command and K. Create for the name button. So when you have components, it's also very common to have different variants, especially when you have a different style spacing structure. So

you want to create a new variant for that. And I just need to click on plus variant. It's going to create one. And from here I have exactly the same layers. I can also have new layers or hide existing layers. So it's very flexible. Now, if I'm using the same layers and properties, I want to be consistent with those properties. So for example, here, I'm using a gradient. So I want to make sure that every new variant, if I'm using the same properties, I'm also using a gradient as well. So, let me

go to styles. Even though I want to use a flat color I still need to use linear gradient. So the first color and the second color is going to be black. Opacity 50% and likewise for the second color, black 50%. Then for the icon, I'm going to change this to play. And change the color. To F F 8 8 AA. Now I will also change the variables so if I'm using the same layers, I can just go from Varian one is going to apply to all the other variants. I'm going to start with the name of the icon name that

icon. And the text which is already set in this case. Now for the variables I already have the title for the text. Just make sure that both of them have those variables. And for the icon, I'm going to select both and set the name which is icon. Now, because these are variables, you're going to notice that it's going to take the default value everywhere. And we're going to customize that when we're outside of the component. So I'll duplicate the component. And the first icon again is DeviceMobile

. And for the second icon it's going to be play. But here because I have a new variant, I have a field called Variant that I can customize to variant two. Let me just change the text to watch the video. Perfect. Now I'm going to select both of these components. Create frame command enter. Width Fill height fit content. Then direction horizontal. Then gap 20. Let me look at the different resolutions. And here, I noticed that for the phone, I should set the layout to vertical. And at the same time

, I should align to the left. So I could also use a border color for the second variant. So let me do that. And go to styles and border using white and 20% opacity. Perfect. Now we want to add a hover state and this is very common for web design is to have the mouse over interaction, a little bit of transition animation. So we're going to do that through the hover state. So I'm going to press on plus hover. Select hover. And here for the transition animation, I can change any value that are alre

ady set and existing. So for example, I can select the title. And I can change the opacity to 0.6, which is 60%. I can also increase the gap to 20, which means that it's going to animate the gap. 40 icon I can animate the rotation. So let's say 90 degrees. Now the real icon is the device mobile. And I don't have the correct preview here. So one thing you can do is for your variable, you can select a default value that you want. So device mobile. And voila. Now, one thing to note is that when you

're creating a transition, make sure that the original variant has that value. So for example, if I want to animate a border, well, make sure that the border already exists originally, otherwise the animation is not going to look good. It's going to look instant. So I'm going to add a border of white. And I'm going to set it to 0% opacity so that it's not visible. And I'm going to animate that to 20%. And likewise for the variant 2, I'm going to create a hover state. So gap 20. Then for the bord

er, I'm going to set to 30% opacity. And the Fill color, set it to 20%. Now you can preview the interaction from the component itself, or to make it more accurate, you can preview from the website. Now another thing that you can do is to change the animation timing. So you can select variant 2, and for the transition we can change from spring to the popular ease. And here we have the ease in out with the animation timing that I want. You can also customize the animation timing and the Bezier. So

you have a lot of control over the timing of your animation. So here I have spring and here I have ease in out as 0.3 and I can preview that. So. This is how it looks like with a little bit of spring. And this is how it looks like with ease in out. All right, we're going to finish by creating the third variant for the button. And I want to show you how powerful variants can be by changing even more of the structure. So let's create a third variant. So for the width, I'm going to set it to fit c

ontent this time and for the padding, I'm going to set it to 4 from the top, 16, 4 and 16. The icon is going to be much smaller to 16 by 16 changing it to white and the text is going to be caption. Now you can double click on the style to go to the list of text styles. I'll select caption. Let me select back the container and I'll change the radius to all around 20. The border is white 20%. For the background, I'm going to set both colors to white 10%. Then I'm going to move the icon to the righ

t side instead. Now you can see that I changed the structure of the component completely for variant three. And I'm still using the same layers, but with different styling. So now I'm going to create a hover state, set the gap to 20 and I'm going to go to fill. Set both to black 10%. Then the border to white 30%. Let me exit the component. And I'm going to insert the component. There's a shortcut for it, which is command forward slash. This is where you're going to see your team components. If y

ou have a team or you can go home and you have your project component. So I'm just going to drag and drop the button right here. Change to Varian three. Set the width to fit content. And I'm going to change the container to align to the left. Select the component and for the title is going to be updated. iOS 16. For the icon, arrow right. And voila. So let's preview this again. And we have the beautiful small button that is a third variant of our component. And that's really cool. Let's zoom out

a little bit to make sure that everything is well adapted for all resolutions and everything seems to work great. So we can see that the components are really powerful in Framer, and I haven't even shown all the features yet. In the next section, we're going to create a custom top bar with a background blur and also a beautiful hamburger menu animation. So I'll see you in the next section. In this section, we're going to create a top bar animation, which is one of the most important elements in

a website because it's the main menu and it's also adaptive to mobile so we have a hamburger menu along with a smaller size menu that is going to animate on top. So along the way, we're going to learn how to work with the background blur and how to create a sticky header. Now, let me zoom in a little bit and I'm going to select the desktop. And insert a frame. So this frame, I'm going to put that outside of the hero. I'll set the width to fill and the height to 60, which is a typical size. The

background I'll change to black 30%. Right now it's taking its own section, but I can also choose to make it fixed, which is a positioning value that is very common in CSS as well. Now, because this is fixed, it's going to have to use constraints. So I'm going to set it to zero left and right. And if I preview this and I scroll, you can see that it always sticks to the very top. Let me rename this to top bar. And I'm going to zoom out to make sure that it works across resolutions. I'm noticing t

hat sometimes, especially working with absolute or fixed positioning, it's going to affect some of the resolutions. So I'm going to select the top bar right-click and reset overrides. One thing to keep in mind is that when you add a top bar that is on top of the content. You need to add an extra top padding to compensate for it. Otherwise sometimes it's going to hide some of the valuable content. So in this case, I'm going to go to the hero section. And I'm going to add 60 to the top. So 1 60. A

nd I'm going to do the same for mobile. And there you go. Now let's talk about background blur because if I select this and I go to style, I click on the plus because it's not available in the inspector. I see that I don't have that value anywhere. In Framer, it's pretty hidden. And you're going to need to find that in the options here, go to view. And at the very bottom, you're going to have the option for show background blur. Once you have that, you can now use that inside your project anywhe

re there's a style. So we're going to add that option right after blur which is BG blur. And I'm going to set the strength to 40. And there we go, so scrolling with this, we have this beautiful blurred sheet. Let's create a button inside the top bar. Let's start with the logo. I'm going to create a frame and it's going to be 24 by 24. Then I'll go to fill, change the image and upload logo DC. Typically you want your clickable area to be different from the asset itself. Sometime the asset is not

exactly the size that you want. A good size universally is 44 by 44 which is great for mobile and desktop as well. You can even go to 36 by 36 or 24 by 24, especially for desktop. So I'm going to create another frame to surround it and I'm going to set it to 44 by 44. Let me just remove the fill and I'm going to select the logo itself. Then it's going to be centered. You can also use the alignment tools to align middle or left if you wish. This is nicely coordinated with the constraints. Now I'm

going to select the frame and create a component called logo because I want to hover interaction. So let's create the hover. And it's going to be very simply set to opacity 0.6. And that's it. Let's click on the top bar and we're going to set the layout, direction horizontal. Next we're going to create the menu using the text. Press T, components text style footnote. And now we're going to create a component because we want this to be duplicated multiple times. And another thing is, if it's not

a frame the component will take care of the frame. So in this case, this is a text element. And I'm going to create a component, which is button small. And you can see that my component has created a frame, which is the variant itself. As a result, I can set the width to fit content as well as the height to fit. And then I'm going to set the padding to 8 from the top 16 from the sides. Remember that for the transition to be smooth, we want to set the fill and the border if we want to animate th

ose values. So I'm going to set the fill to black. And opacity 0%. And the border to be white. Again, opacity 0%. Also I'll set the corner radius to 10. Now I can set my hover state. Go back to the fill. And set to 20%, likewise for the border. Great. Let me go back to home. And now I have my component. And both have the hover interaction and it's really smooth in term of transition. Let me duplicate this two times to create more items. The second component, notice that the value was created aut

omatically, especially because we have the text selected. So it's pretty smart like that. I'm going to change to pricing for the second and updates for the third. I will also create a frame from these three button small. Command enter. Then fit content for both width and height. Set the gap to 50. And now for the container which is the top bar. I'm going to set to space between to push everything to the sides. I'm also going to use my spacing rules of 8 for bottom and top, and 30 for left and ri

ght. Now, if I add another element inside my Stack, it's going to push this text menu to the middle. So, let me start with a text which is sign up. Set it to footnote 2. Create a component. I'll call that button 2. And we'll set the padding here, but first, fit content for width and height. Padding 8 and 16, so repeat those. Now for the radius, I'm going to set it to look like my buttons and it's going to be 24, 24, 0 24. Then I'll add a border color. And I'm going to use the color code 6 1 9 3

F F. Then said a simple hover state. Which is going to change the border color to white. Now, I'm going to go back and you can see that from here since I have three elements in my Stack and I'm using space between it's going to push two to the extreme and one to the center. All right. So now we're ready to create the hamburger menu animation. And also the top bar typically should be a component because we're going to have multiple pages. So it's going to be reused. So I'm going to select the top

bar and create component, name it top bar. So, this is a nice trick. Where you want to use a variant for the phone resolution. So I'm going to create variant 2 and I'm going to name that phone so this name is going to help us a lot when it comes to applying for the different break points. And typically the phone we're going to set to a resolution of 3 90. And we can hide certain elements. So I'm going to select the middle menu and go to visible no. Also, I want to use my rule for phones, which

is the padding of 20 left and right. Another thing that I want to do is to replace the logo with a hamburger menu icon and we're going to draw that from scratch. First of all, we're going to hide the logo as well and we're going to insert a new frame which is 44 by 44. No fill. Then inside this frame, we can zoom in to make it easier. We can draw three rectangles. The first one is going to be 22 in term width and 2 in term of height. Then I'll set a radius of one. And the color is going to be wh

ite. Now in term of positioning, I'm going to set it to 12 from the top. And 11 from the left. The goal is to make sure that it's centered. And I'm going to duplicate this two times. The middle one is going to be 12 by two from the left. And the third one, 30 from the top and a width of 22 as well. Now, there you go. This is the hamburger menu icon that we have created from scratch. And now we have the freedom to animate this the way we wish by using the transition inside the component feature.

So I'm going to select the frame and rename this to hamburger. I will also move this to the left. Then I'll create a new variant which is called phone expanded. And here I'm going to set my animation. Since these are essentially states you can do the rotation movement and it's going to transition for you. Let's select the first line. And set the rotation to 45 degrees. Also, I'm going to align middle center vertically. And then for the second line again, 45. And then center, both vertically and

horizontally. Also, I'm going to change the opacity to zero so that it fades nicely. For the third line, it's going to be rotation minus 45. And then center vertically. And that's it. This is going to get us the animation that we want. We can test this by going to home. Now, I'm going to try to say the top bar, but we have the hero in the way. So, let me just readjust the top bar to be after. It's going to be easy to select. So going back to phone, select it and I'm going to change the variant f

or phone. So now when we have the phone resolution, it's going to switch to that specific variant. And I can select the phone. Then preview, just the phone from here. Now I just need to set the connection. So I want to make sure that when I tap on the hamburger menu icon, it's going to go to phone expanded. So there's this little lightning icon that I can just connect to phone expanded. It's going to do all the transition for me. And from the close icon back to phone. And with this, I can go bac

k to the preview. And I will be able to tap on it and I have my really nice hamburger menu icon just like that. Next we're going to add the actual menu when the menu is expanded. So I'm going to create a rectangle outside first to take care of the styling. Then I will set the fill to black 60%. Corner radius 20. And then border white 10%. And also I'm going to add background blur. So this is going to be 40. Next, I want to add a text content. Components. Using the text style caption 2. And then

I want to have a hover animation. So I'm going to create a component first. Call that menu button. This one is going to have a fixed size of 300 by 44. Then I'll select the text, align that to the left and vertical center. For the animation, I'm going to use the fill color as well as the border color. For the fill, I'm going to set to white 0%. And I also want to have a border. Now we have a neat feature for border where you can set the size for each side. So in this case, I want zero on all sid

es except bottom to one. And the color is going to be white 10%. Let's create a quick hover state. So change to fill color to 10%. And I also want to move the text by 20 pixels. So using shift and right arrow, I can move by 10 pixels two times. Great. Now I'm going to go back to the top bar and here for this frame I'm going to use fit content with a padding of 30 and gap zero. Then I'll duplicate this six times to get seven menu items. Starting with home, then components, then pricing, updates,

support, community and sign up. Now notice that the last item has a bottom line and we don't want that. So a solution that you can use is to create a second variant. And for this one, we can disable the border. So I'm going to set it to zero. And I need to repeat the hover interaction which has a fill of 10%. And there you go. So going back to the top bar for this one, I'm going to set to variant two, and now I have a good looking menu. So zooming out, I'm going to move this menu right here to t

he variant one. So when I do that, it's going to exist on pretty much all of them. So opening the variant one, then I'm going to change the position type to absolute set the top to 60 and left to zero. So this is the position that I have. I want to add some padding, so I might want to use an extra frame. So command enter. And this one, I'm going to set the height to fit content and the width to relative a hundred percent. Then I'll add a padding of 20. So what I want is the size of the menu to t

ake the full width as well. I'm going to change the width to fill. Now that we have this, we can set what is visible at which resolution. So the variant one, we can set this to not visible. For the phone selecting the columns, we're going to set this to visible. And likewise for phone expanded. Columns, we're going to set it to visible. Since this is outside of the bounds. We're not going to see it. So, what I can do is change this feature called overflow hidden to make it to visible. What this

means is that it's not going to clip anything outside of the bounds of this content. I'm going to do the same for the phone. Set it to visible. And also I'm going to set the opacity to zero. So we have some fade animation going on. Lastly, I can animate the constraints to get from left to right. And I'm going to select the columns and use left to minus 20. So let's get out of this and we can preview. It's nicely adaptive now with beautiful hover interactions on the buttons, but notice that the b

ackground blur doesn't always work well in the preview. So to make sure that you're showing this correctly, you might want to publish the website. And in order to do that, you just need to click publish, and it's going to generate the URL for you. You click on it. And there you go this is the website that you have built so far. And you can resize to see the menu animation. We're noticing one problem. And that has to do with overrides. So we can easily fix this by setting all of these menu button

s to fill as well. It takes a bit of practice to work with overrides, especially because sometimes you're working with copies and you're not sure if it has applied everywhere. One tip that I can give you is to mostly always work with the original. So if you do it like this, it's always going to apply to the variants or the break points. But keep in mind that this is not bulletproof. Sometimes you have a little bit of inspection to do as with coding or design. This is just part of the practice. I

t is important that you learn how to achieve these results and how to troubleshoot some of these problems. And there you go. We learn how to create the top bar that is sticky. And we also made this adaptive and responsive with a beautiful hamburger menu animation as well as the interactions on the menu buttons. So I hope you enjoyed it. In this one, we're going to cover the scroll parallax, which typically takes a lot of steps to install and a third party library. But with framer, this is done w

ith just a few clicks. Also, we're going to continue creating more layout components and learn a lot of techniques in between. So let's go to the desktop. And the first thing that we want to animate using scroll is the embed element. Since this is locked, we need to select this manually from the layers list. We have this section about effects. So we're going to click on it and set scroll speed. We're just going to change it instead of 110% to 80%. And that's it. So if I play this, you're going t

o see that when I start scrolling the image itself is moving slower, which means that the next section is covering more of that. And of course you can change the speed. To get a more dramatic effects such as 50%. And it feels even faster. Now I'm going to put it back to 80%. And then I want to show you how to use a scroll parallax on multiple elements so that they move at different speed. So to make your life easier, we're going to select all of these items at once. Starting with a button title,

text, and then the column of two buttons. So we have four items in total and then I'm going to add scroll speed. Then set to 95%. Like this, I'm applying to all the elements. And from here, I can just select them one by one and change the value. So selecting the title, I'm going to set it to 90%. Then the text 85. And the column to 80. If I preview this, you're going to see that it's moving at different speed. We just need to set the overflow, not to hidden so that we can see outside of the bou

nds. And this will also fix our drop shadow issue. So often you're going to have the container that has the overflow hidden. And you can just set it to visible, to show outside of those bounds. Play again, and this should solve our issue. We can see different elements moving at different speed including the embed element. The texts that are moving further apart from each other and it creates this really nice effect. We're going to create more scroll parallax after the content, but first we need

to create more content. So I'm going to select on desktop, and I want to show you that you can insert multiple types of layouts. So for example, here, if you go to layout, we have hero sections, features, et cetera. And so sometimes to help you with a basic structure especially if you're blocked creatively or if you want to save time, it's a pretty good idea to use one of these pre-made components. So I'm going to use this one, which is the gradient. And it's going to add here so I'm going to mo

ve this outside of features. And move this down. Let me select it and set the width to fill. If I want to start editing, I'm going to double click on it. It's going to turn blue. And now I have my elements. Now, all of these elements are fully customizable. I'm going to start with fill and change that to an image I'm going to upload wallpaper one. And I'm going to change to my text styles. So selecting the title, I'm going to change that to subtitle. But I need to edit the properties. So the wei

ght is going to be extra bold, I'm going to set it to white with a size of 50. I'm also going to add break points, which gives me pretty good numbers already. So in the text property, I'm going to center this and change the text to one of my own. Then for the second text, I'm going to change to grow auto width, and I'm going to change the text to my own. Then for the button, I can right click on it. And I can replace with one of my own buttons. So going to project, I'm going to select button and

here I can change to Varian to. Also change the icon to cards. And the text to learn more. As you design more and more, you're going to see that there are many patterns to create a layout. And they're usually comprised of the same elements. That's why you don't always have to think too hard about where to start and what is the first step. Sometimes you can just use one of the template and really learn how to customize to your own style or to the theme of your website. And that is such a good sk

ill to have. In this case, I'm going to add an extra icon to the top. Insert Phosphor icon, but that to the top. And I'm going to change to rocket. Then I'm going to add a divider by using a line. This is going to have a 50% width and one in term of height. For the fill color is going to be 10% white. Also, I'm going to add another text. Change this to caption. Let's zoom out a little bit to see how it looks like and typically what you want to do is to set all the texts to width Fill. And when y

ou do that, it's going to adapt nicely. But just make sure that you center the text. As well. Then for the section itself. We want to have fit content. And set the magic paddings so 130, 130. And then for phone. It's going to be 80 20 80. 20. Let me adjust that for the other sections as well. 84 top and bottom. So it's essentially 20 less. So we can also use operations. So minus 20. It's one 40 and then minus 20 is 80. The goal is to use the space properly depending on the device. What feels rig

ht in term of information density. When you have a bigger screen, you have to fill the space more and the negative spacing helps breathe, but when it comes to the phone, you need to make sure that the negative spacing is not at the cost of usability, meaning that you need to have enough information density. Smaller fonts, images and spacing. So in this layout, I want to set multiple columns and I'm going to select all of these elements. And create a frame. So command enter. Then I'll set it to f

ill. With a height of fit then a max with of 400 pixel. It's going to affect the inner elements. I'm going to select all the texts again and set them to fill. We have these break points that is always available to us to see. And we can see what goes wrong and how to fix this. Now let's talk about the scroll parallax because it's slightly different if you have a section that is not at the very top of the page, because you have to think about the positioning of the scroll. So in this case, I want

to make sure that I'm not using a background. If I want to use a scroll parallax on the image. So I'm going to go to styles and I'm going to remove that image. Instead, I'm going to create a frame. And remember that by default, it's going to add to an element. And so what I need to do is to set this to absolute. Set the constraints to zero on all sides. And then change the fill to that image that I wanted which is wallpaper one. Then we need to make sure that it's underneath. Then let's rename i

t. And we're going to set the Z index to zero. Again, when you're changing things around. It's definitely going to affect your break points. So make sure to reset overrides if you need to, or to change those manually. Awesome. Now that I have my background that is essentially an image I can apply the scroll parallax to it so I'm going to select scroll speed. Change the speed to 90% and instead of setting scroll to current. I'm going to set it to scroll. But first, let me show you why. So I'm goi

ng to play this and you're going to see that even before I get there, the scroll position is already affected dramatically. So in order to fix this, we're going to go back to scroll speed. And we're going to select scroll and here's only going to start moving when the bottom of the visible area is touching the top of the section. So you're going to see I'm here. And it hasn't moved yet, so I don't have that white space. And of course, depending on the positioning of my image, I can change the va

lue. So in this case, I'm going to set it to 500. So now it starts a little bit later but again, depending on the image here, I can simply set a background to fill the space. So that it looks seamless. So let's go back to the hero gradient. And instead of having a white fill, I'm going to set to the same color as this blue background, I can use the eyedropper to select that color. And when I try again you can see that I no longer have that problem, but I do have my scroll parallax effect. Let's

create more content for the layout. Let's start by creating a frame of 300 by 300. Now, what you're noticing is that sometimes when the image is a frame, whatever you draw is going to be inside that frame. So you might want to take it out. And if you don't want this to repeat again, You might want to lock that layer. Let me put this to the front. I'll set to 300 by 300 with a corner radius that is specific. So 40 0, 40 and 40. Then I'm going to change the fill and I'm going to go to image and th

is is where we're going to use a really neat feature and that's Unsplash. So if you're not familiar Unsplash is a service where you can find a lot of free photos that you can use in your design. So we're going to search for 3d render and you get a lot of nice images that you can use for your site. And this service is available on most design tools via plugin. And in this case, it's directly embedded into the image feature of framer. So I'm going to search for 3d render and I'm going to scroll a

little bit to find the one by Javier. Click on it. And it's going to apply to my element. So let's create another frame. With a height of 1 20 and I'm going to set the constraints to zero left right and bottom with a Fill of black 20%. Then the border it's going to be white 10%. Now we want the border to be shown also for the corner radius. So we're going to use the same corner radius value, which is 40. And then we're going to use a background blur sheet, which is really nice when you have an i

mage in the background. So if your design style has a lot of backgrounds, and shapes and colors that are behind, the background blur is going to really help set the depth for your design and top of that, whatever content that you have above it is going to be much more legible instead of using the traditional gradient mask using black opacity. So I'm going to add background blur, set it to 40. And from here, I'm going to use layout. Set the padding to 20. And distribute to start, which means I'm

going to align everything to the left. Now I'm going to create a text. Coit tower. Which is footnote to. Then duplicate this I'm going to use. Caption and again, Duplicate and then caption 2. So let's change the text for the second text to 30 minutes ago. And the third text. 3000 zero 54 steps. Then select the container. I'm going to set to direction vertical, and now I can use a line instead. So depending on the direction distribute and align can apply differently. But lucky for us. Everything

is visual. We can easily play with these values and we can understand what's going on. And the same concepts apply to CSS. Next, I want to add a button to the top right. And also a text to the bottom right. I could of course create a frame for these three elements and another frame for these two elements, but I can also use absolute positioning which is going to have less containers. So both methods are good. I'm going to use a second one so that we can practice with absolute positioning. Now I'

m going to insert my component, which is going to be button 2. And then with this selected, I'm going to set to absolute. Then the position of 20 from the top and 20 from the right. Perfect. So for the bottom right text, I'm going to use the same text as the third one. And then apply absolute again, 20 from the right, 20 from the bottom. Then I'll change the text to 3% higher. Now one of the key rules in design is to make sure that texts are well aligned with each other. Most often we're going t

o align with a baseline. There are two ways to go about it. One is to use space between or a height of fit content. So the height is going to depend on the content. Otherwise, if you absolutely want to have that height of one 20, which is fixed. We can always use space between and it's going to push this to the far end. Now that we have the card created, we're going to create a component and have multiple variants. So I'm going to name this one card. And then I'm going to create a second variant

. This time, I'm going to remove the image and then replace that with a solid color, which is going to be white 10%. Then I'm going to add a border. Of white 10%. Also, I'm going to use a background blur to fit nicely with whatever background that I have. Right click here, background blur, set it to 40. Then I'm going to add some text content in the middle. So set this to layout with a gap of 20. Now I'm going to add a title, which is going to be closer rings which is going to use section title.

I'm going to move that to the top. Duplicate this. Then add some text. And here I'm going to use caption. Then center the text. Then I'll set the width to fix, and it's going to be two 60. Now I want this to hug the bottom and the right. I'm going to change the width to fill. And also, I want to make sure that this container is going to fit the content. I also want to have some padding from the top. So I'm going to use specific padding from the top to 20. Then oftentimes you want to add an icon

, to the left or to the right of the text. So you can just create that right away by inserting. So let's say first Phosphor icon. I'm going to move that to the very top. It's going to be 30 by 30. Set color to white. And the name is person simple. Run. There you go. So afterwards you can easily select both and create a frame. Then fit the content for both with and height, then set the direction to horizontal. So with this technique, it's very easy to have additional content and stacks. You can j

ust select the elements that you want and then put that into a frame, then change to fit content. Now let's create a third variant where we're just going to have this bottom part. So I'm going to remove the content. Then go to styles and remove the border as well as the fill. And also the extra padding that I had at the top. Now I'm going to add some drop shadow here and it's going to be a little bit more dramatic. There's a really neat feature called realistic drop shadow. Instead of creating m

ultiple drop shadows and organize that, we have only one realistic drop shadow, and here you can play with the Y position as well as the diffusion to create the effect that you want. You can see that this looks very much like in real life which normally, if you were to do that, using the traditional drop shadows, you would have 3, 4, 5 layers. So, this is very nice. I'm going to set the Y to 100 and diffusion to one. Again, if you apply to the main variant, it's going to apply to the secondary v

ariants as well. Next I'm going to set the variables. Of course you can set way more than what I'm going to do because of time. So far we have the image. And then I'm going to set the title. So this is going to be a plain text name title. And I can even add a text. So content here and plain text named text. Now I'm going to exit this and create multiple instances of this component. The second one, I can set San Francisco. And change the image to again, Unsplash 3d render. I'm going to scroll a l

ittle bit to find the one by Polina. And there you go. We have a nice background blur on top of this element creates a really nice shade. I'm going to select the whole container. And then set the direction to horizontal. And I want to have three columns. So these two is going to be part of one. So select both create frame. Select the layout. Width, height to fit And then direction vertical. Gap to 50. Now we need to make sure that the overflow is set to visible. Otherwise it's going to cut off t

he shadows. So let me duplicate this column right here. And now I'm going to change the variants. So this is going to be variant to. And this one is going to be variant 3. Really nice. So you can see thanks to the background blur. We have some really nice effects on top of the background. And then I'm going to duplicate this one as well. And go back to Variant one change the title to Cupertino. And the image to, again, 3d render and I'm going to scroll a little bit to find the one that I want, w

hich is the one by Simon. Now of course you should definitely use your own titles, texts and images and really play with the layout. I think that's really going to help you get familiar with UI design, but also with framer in general. So, let me select the whole container again. I'm going to set the gap to 30. And I want to show you a really cool technique. So, this is what I have for tablet and mobile. You can see that we have a bit of a problem. Now with just one setting, which is wrapped to

yes, it's going to put the items of a horizontal Stack to the next line when necessary. The only problem that we have here is that we need to make sure that each item has a fixed width. So in this case, I'm going to select this Stack. And instead of using fill, which is very dynamic, I can also use relative which is to 100%, and this is a little bit less dynamic. We don't have a fixed size because it's fill and we have a max width. We can also add a min width to make sure that we do have a range

of size. So I'm going to set to min width 300. And you can see that it's looking pretty good. So in short, when you're using wrap, make sure that the elements inside the Stack has some sort of a size. You can use a fixed size and this is using the component size, or you can use a range of size by using min width and max width. So those are really cool techniques and I'm just going to fix the text style because I find them to be a little bit too small for the phone. So I can go to assets. And he

re I'm going to click on footnote then check for break points. So I'm going to set to 14 for both medium and small. This is going to improve a lot and the same for footnote now. We're good. And also for captions. So 14, 13. Making sure that we have consistent numbers. So 13 here as well. Sometimes the default values when you add break points are a little bit exaggerated. So you might want to customize. But most importantly, you want to be consistent across the way. So if you're using those value

s for caption 2, you should also use the same values for caption because the difference between the two is simply the text transform as well as the font weight. Awesome. I hope you learn a lot about scroll animations and layout. In this section, we're going to learn about appear animation. So basically when you load the website, you're going to see a very nice welcoming animation. And also when you scroll, it's going to fade in nicely. Now in framer, you can use all sorts of values to animate su

ch as the X and Y position as well as scale rotation and 3-d rotation. Now let's start with the basics. So we're going to select these four elements and then we're going to, and then we're going to effects and add appear. So we have a bunch of preset animation, including the scale in, which is a default one. So you can play with this list and preview them. The one that I like to start with, especially because it's highly customizable is fading. So now I'm going to customize that effect. And here

you can see that I have multiple values that I can work with and fade in is going to use opacity. So starting at zero and then going to one. I also have X, Y rotate, rotate X and rotate Y as well as perspective. So these three is for the 3d transform. If you're familiar with CSS animation, they're basically the same as transform. Right now I can use offset Y because I'm already using the scroll speed and the scroll speed is controlling the Y position. So what I'm going to do is to use left-to-r

ight animation by using the offset X. And I'm going to set that to minus five. Then I can also change the transition. Spring tends to work well, if you have a lot of movement and distance. But if it's a small distance, I like to use ease. It's a little bit more predictable and I'm going to set the timing to 0.8 as well as a delay of 0.1. Now I'm going to preview this. And you can see a very subtle. Animation from left to right, as well as opacity. But the thing is we're going to spice it up a li

ttle bit by using delay. So I'm going to go back to layers. And I'm going to start with the button. Then click on appear, by the way, if you have these tool tip enable, you can navigate them and you can switch between the items for their specific settings. And that's really helpful, especially for sequence animations. So button's going to be minus five and then minus 10. And then the third one minus 15. The fourth which is the columns minus. Minus 20. So now we have a little sequence animation.

Let's refresh that. It's very subtle, but that's how we like it. Another thing that I want to do is to set the delay. So I'm going to select this second one. And go to appear, ease in. The second one is going to be 0.2 in term of delay. Third one 0.3. And then the columns 0.4. Now it's even nicer. And at the same time, I also want to animate the embed 3d asset. So I'm going to go and add, appear. Let's repeat the step, fade in. This time, I'm not going to use any positioning. I'm just going to g

o to spring using the timing, ease in out with a timing of one second. And that's it. The problem that we have right now is that the background is white, which does not fit with the embed background. So we can go to the desktop and change from a white background to a black background. So this should be a little bit better. Now let's talk about 3d transform because a lot of people haven't played with these settings yet. I'm going to select these four elements again and go to appear, go to effect.

This is where on top of playing with offset X and Y I can use rotate, especially rotate X, Y and perspective. So to show you, I'm going to set the opacity to one for now. If I play with the rotate X, you can see, this is how it looks like. It's kind of like 3d ish. And if I pair that with rotate Y, you can see that it's really cool. And the perspective gives me the exaggeration or not. But I can keep it to 1200. Now the settings that I will use is 2020. And I'm going to use the sequencing. So t

he second one is going to be 15. 15. The third one 10 10. Then the columns five five. Let's not forget about putting back the opacity. So set it back to zero and we're going to play this. And voila, we have a very unique intro animation for the content and the background. Now let's do the appear animation on this section right here and just like scroll speed, it's going to be a little bit different because it's going to animate when it's visible. So let's do a basic animation. I'm going to selec

t all of these six elements. Then add effect appear. But this time, instead of onload it's going to be on scroll.. The difference is on scro ll is going to animate when it's visible. You don't want to start your animation on load because otherwise you're not even going to see the animation because it's going to happen even if you haven't started scrolling yet. So again, I'm going to start with the fade in and enter. This time I can use the offset why because my elements are not affected by the s

croll speed, which is using the Y position. So I'm going to set to minus five for all six elements and I'm going to go to spring, switch to ease, change the time, 0.8, delay 0.1. Then I'm going to select from the layer. And I'm going to go to the second one and change the delay afterwards. So 0.2. 0.3. 0.4. 0.5 0.6. And also I'm going to change the offset. Great. Now you're going to see that when I scroll and only when I see this, it's going to start animating. Let's do the same with the cards.

Select all five. Set the effect appear, on scroll. Fade in. Enter. This time I'm going to use minus 10 for offset y. Ease. 0.8, then start with 0.1. And select the second one. 0.2. 0.3. 0.4 And then five. Awesome. So you can see that we have a pretty smooth animation on this section. So I'm going to continue with the layout. And what I like to do is to have alternating content. So something that is more complementary. And then something that has a background, a little bit more effects. Typically

, you don't want to have every single section to be heavy and a lot of colors. You want to pair it with something a little bit more neutral. And also it's good to alternate your content. So for example, if the titles are on the right side, maybe in the next section is going to be on the left side. So it makes your design less repetitive. And it also injects a little bit of energy into the scrolling experience. So I'm going to name this section components one. And then I'm going to duplicate this

because I'm going to use fairly similar content. The only difference is I'm going to remove the image. And also I'm going to switch to my other background color. So I drop her and use the same as this one. As I mentioned before, I like to alternate the content. So now the titles are going to be in the left side. And this time I'm going to have two columns instead. I might also want to alternate the button. So I'm going to set to variant one. I'm also going to set the height to 44. And the same

for this button. I find that to be a little bit too slim for the content that I want. And there you go. So without changing anything really I'm able to create a flow that feels natural and interesting. And now we just need to change the content itself. Starting with the title. And also I'm going to change the icon to trophy. Then I'm going to switch the second component to variant three. And now I'm going to show you how to create an interesting circle showcasing a little bit of progress and a b

unch of circles. So I'm going to start with a frame of 375 by 3 75. This frame is not going to have a background. Then I'm going to start with a component that exists from the components list. It's called progress. And it looks a little bit like this. I can insert it and I can customize it. Works pretty similarly to the apple watch ring. Now I'm going to set the width to 180 and height 180. And here I'm going to change the value and you can see that the progress changes based on that. I'm going

to set it to 30%. The animation happens right away on load. And for the color I'm going to set it to white. And the track I'm going to set it to white, but at 30%. Then I'm going to create another frame. One 40 by one 40. Then center it. Radius 100%. So that makes a circle. Let me adjust the progress as well in term of centering. And go back to my circle. So here, I'm going to use the fill and change that to gradient. And change the angle to 1 35. Then I'm going to pick the reddish gradient. And

I'm also going to add a border that is white 30%. Now with a circle, you can essentially duplicate this multiple times to create sort of like a sonar effect. So duplicate it and resize it using option shift. Then I'm going to set it to two 20. Let me send this to the back by using command square brackets. And I'm going to use a different gradient, which is going to be the purple one. Then the border is going to be 50%. Now I can play with the opacity. Let me set it to 0.5. Then I will duplicate

this again. I'm going to set the other one to 300 by 300. If this is not precise, I can always go from here. But just make sure that it's well centered. This time is going to be 0.2 in term of opacity. Then selected duplicated again. And I'm going to take the full width and height. So 3 75, 3 75. Center. I will remove the fill and set the border to 10% and put the opacity back to 100. So this is what I have so far. Obviously you can play with the colors. The sizes to create something a little b

it different from mine. But essentially you want to use the progress which gives the information and makes it dynamic. But otherwise the rest is just to complement your progress. I'm going to rename this frame to circles. And I will move it inside rows. But this time we want to use absolute positioning. Now, I'm noticing that in my circles, I have the big one, which is using constraints. So I'm going to disable the constraints and make sure that it's just 3 75 by 3 75. Sometimes the constraints

set automatically and it can affect if you change the size of your frame. So I'm going to select the circles again. And set overflow visible. And I'm going to move it to the center. Then use Z index zero. So that it's really in the background. Awesome. Sometimes you want to start with an existing component in term of layout and styles, but you don't necessarily want that to be a component. So what you can do is first of all, I'm going to select two variant to let's say this is a little bit more

interesting especially with the background element and I can simply detach instance. Then it becomes a normal element, which means that I can customize it from here. So I don't really need the rows and the description. Now the circles are kind of in the way. So I'm going to lock that. And select back the card. Then I'll set the gap to 10 and padding to 10. I will also insert an image. Now, let me just put the image outside of the columns. And I'm going to set it to fill with a height of 180. The

radius 30. Then the image itself. I'll go to Unsplash then I'll search for 3d abstract then I'll select one of the images. So I'll change the text to choose, which represents the image. And I don't need an icon here. I have an extra container. So if I want to remove that, I can always command delete. So this is a shortcut to remove whatever container that you have. Then I'm going to select components 1. Duplicate this and move this after. Let me rename this to components three. This one will al

so have two columns. So I'm going to delete the middle one. I will replace the image by uploading wallpaper 2. Then I'll change the title. And change the icon, which this time is going to be let's say record. Now, I'm going to use one of these components and customize it. I'm going to set to variant two first. This is the closest to what I want and detach it. Let me remove the rows, which I don't need. Then change the radius to 40 on all sides. Then set the padding to 30. So I'll select the fram

e. I don't need the icon. So I'm going to remove the frame first. Delete the icon. Change the title. Then add some text. Now there's another cool plugin, which is called humaaans for creating illustrations. So I'm going to insert that. Go to icons and select humaaans. Now, what is cool about this. Is that it has a bunch of preset characters, including the colors that you want. And you can customize the colors of the skin and the hair. So, for example, you want to have different head. Different h

airstyle. And the same for the body. As well as the bottom portion. So you can make the illustration stand or sit. Direction left or right. So after you're done, you can move this below the title. I'm going to delete this component. And just duplicate my new custom card and I'm going to create a new one. This time, I'm going to remove the illustration and insert the component, which is called progress. Going to move that to the middle, set it to 1 75 by 1 75. With a value of 30%. Then scroll dow

n a little bit to change the thickness to 20. And I can change the colors. So white and white 30%. Now, let me change the title. As well as the text. And voila. So it's that easy to create multiple styles of components and detach. Duplicate existing sections, which in turn already have those appear animation setup as well as the layout options for mobile, you might need to adjust a little bit. We need to fix something real quick. So in set speed. Because the background is at the top and not at t

he bottom. I need to set the top to zero. And so far, this is what we have. It has nice animations across all of those new sections. And we managed to create more layout styles and cards and types of content. In this section, we're going to make an overlay. And also we're going to create a signup form. What is an overlay? Essentially you can put any UI on top of the existing UI. So this is great for a floating menu or floating button as well as any modal, such as an alert, a message, a sign up m

odal as well as a forgot password. Now the overlay needs to be connected to one of the elements, especially for buttons. So, for example, if I click here, it's going to show the overlay and I'm going to select the button. Then I have this option called overlays. So if I click on it, it's going to give me the space to design my overlay. First of all, I can set the preset animation in this case, I'm going to set to fade in and out. Then change the background to 30% instead. Then I'm going to creat

e my actual UI. So starting with a frame of 500 by 500. Let me center this. Then scroll, get a radius of 30. Background black 30% and border white 10% with a background blur. I'm going to set this one to 30. And there you go. So the container I'm going to start setting the layout. The gap is going to be 30. Padding 30 and 60 for the top as well as bottom. Then direction vertical. Now I'm going to create my title, which is sign up and I'm going to change that to subtitle. Then I will create a sec

ond text. This time, it's a paragraph. And because the text can go smaller I'm going to set it to fill. Then center. Now let's take care of the form here in framer. We have a bunch of preset ones. So I'm going to go to the forms and I have MailChimp for newsletter, Intercom for customer support and chatting. Newsletter again. Collecting with a form with Typeform, calendar and here we have form spark which lets you collect information so people can enter their email name and message. This is not

going to be a real sign up form because that would require a database such as Firebase. But if you just want to collect some light information, you can use form spark. First of all, I'm going to go to the options and I'm going to hide the message first. Then the layout is going to be vertical. And also for the width I'm going to set to fill to fit my container. For the height I'm going to set roughly to 1 90. Then the button color, I can change the color. to 7 7 5 5 CC. Now I'm going to move the

paragraph right below the title. Then I'm going to add some disclaimer, text below. Set it to fill. And it's going to be a text style caption. Then I'm also going to center it. So this is my signup form using overlay. And you want to see how it works. You're going to tap on, get the app and you can see, we have a fade in animation. This is going to be instantly appearing because the fade in only applies to the background itself. So we should tap outside it's going to fade out. If you want to ha

ve an animation also on the modal then we're going to use effects. So let me rename this to modal and I'm going to select it and scroll down a little bit to get to appear effect. Change that to fade in. And I'm going to change also the offset Y to minus 20. Change from spring to ease in out. And delay 0.1. So now I should have some fade in, fade out also on the modal itself. And it's going to reverse the animation when I dismiss. Now what about a custom background? So I'm going to add a backgrou

nd blur because it's going to blur the background. Gives a nice effect. So I'm going to create a frame first. Then set the constraints to zero on all sides. Move this below the modal. Then remove the fill. And add a new background blur. Let me set this one to 20. So this background blur is going to be nicer with the animation as well, so that it fits with the rest of the animations. I'm going to set appear again, using fade in. And this time I'm going to switch from spring to ease in out. The ti

ming is going to be one second. So let's test it again. And voila. We have a nice blur animation as well. Now, the only problem is we need to be able to dismiss the same way. So framer has a neat function that you can add. So I'm going to go to interaction with a background selected. And it has the option to close the overlay on tap and it should be working just the same way as before. And boom. Awesome. When you're done, let's exit the overlay canvas. And now we're going to build a new section

for the pricing cards. If you have any product that is paid. The pricing card section is a must. And in fact, Framer has a bunch of these components as well. So for example, You can scroll down a little bit to find the pricing section. It has a bunch of components that you can use, but otherwise I'm going to show you how to do it from scratch. So I'm going to have a background that is going to be aligned from the bottom. And the closest section that I'm going to use is the components one. It alr

eady has all the animations that I need. So I'm going to duplicate this one, move that to the very bottom. I'll scroll and then change the image. I'm going to change this one to wallpaper three. Then select the container and change the background color to fit this background which is my wallpaper. Now I'm going to remove the parts that I don't need. So these two columns. And the rows container command delete. Let me rename this to pricing and do the direction vertically instead. So I'm just goin

g to keep the title text and line, which means that I can delete the icon, the button and the small text. I'll change the title to ready to start. Then the text as well. Okay, so now we're ready to create the pricing card. I'm going to start with a frame. Let me size this to 360 to 4 60. The radius 25. Fill is going to be white 60%. Border white 50%. And also I'm going to use a background blur that is 40. Now I'm going to start with the icon. Insert Phosphor 32 by 32. Set the color to black. And

change it to a pen. Now, let me set the layout. So I'm going to set to fit with a padding of 20. Then I'm going to add a text. Free plan. Which is footnote to. Since the textile is white, I'm going to have to change manually to black. Then set the price. I'm going to duplicate this, 15 per month using subtitle. Then we have a small toggle and info that we can use from the button variant 3. So I'm going to insert a button. And set it to varian three. I'm just going to detach. Set the width to fi

t content. Change pretty much the whole content to the black equivalent. So you can just move the color wheel to the black. And for both colors and the same for the border color. Likewise for the text, I'm going to set it to black. And the icon, set it to black. Here for the text is going to be, up to three projects. Then I'm going to change the icon info. Next, we're going to show a list of features for each plan. So I'm going to start with the icon that I can copy from here. This time is going

to be 24 by 24. I'll change it to globe. Then add a text right below it. Which is going to be. Footnote. Now, selecting both I'm going to create a frame. Set to fit fit. And change the horizontal. Then duplicate it four times. And change the icons as well as the text for each feature. Starting with lock. And then password protect. Books and gigs of bandwidth. Then Stack 1000 CMS items. Then person and 10,000 visitors. Keep in mind that these are just placeholder texts and you should definitely

customize that. So now if I want to align everything to the left, I'm going to select them one by one and put them inside a frame. Again, using fit and fit for width and height, then align to the left. Next I'm going to add a button. So, let me use the components again, using the button. Go inside the components because I want to add two more variants. And I'm going to do that from the variant 2 so with this selected, I'm going to create the variant. Which simply is going to have no border. And

the opacity for black to a hundred percent on both sides as well as the icon being white. Let me create a fifth one this time with the colors inversed. So it's going to be white. Then the elements with a black color. So going back, I'm going to set two variant 4. Change the icon to pen. And text to try for free. And I also would like to have a line between the button and the features. So I can just copy from this one. And put it here. I'm going to set it to 50% instead. And set the color for the

fill to be black. Awesome. Next I want to add a drop shadow, and it's going to be the realistic one with a Y of 100 diffusion one. So with this, I can create a component and create the two other pricing cards. So let me option command and K. Set the name to pricing card. And then I'm going to create a second variant. Now this one is going to be the popular one. And you want to make this stand out a little bit more, so it's going to be taller. And it's going to have a little tag that says popula

r. So I'm going to use this small button, duplicate that, move that to the very top. And just switch the icon to the left. Let me change the icon name to metal. And the text to popular. For the textile, I will change to caption to. Then this card is going to be in dark mode, which means that I'm going to inverse the colors pretty much everywhere. So let's start with a small buttons. I'm going to change the fill t o white on both sides. The border to white as well. And here I can essentially sele

ct all similar elements. So all the texts. Change it to white. And likewise for the icons. All similar icons. And change the color all at once, which is neat. And then the line set it to white. For the background of the container I'm going to change it to black 40% and the border to white 10%. Then for the button, I'm going to change it to variant five. Now the goal here is to make sure that when I'm going to center the three cards. This is going to align perfectly. Button to button and text to

text in term of baseline. I already tested and the padding that I'm going to want is for the bottom to be 68. And then I have the third card for the pro or the team. So selecting the first variant and I realized that I have an extra variant, I must have been trigger-happy. So I'm just going to delete this. And it's not going to change anything. So we have variant one and variant two. And now from Variant 2 I'm going to create Varian three, because it's the same colors. So I'm just going to remov

e the extra element as well as the padding, which is 20 on all sides. Then change the background to black 90%. So what's left is to customize the content a little bit. And also I forgot that I do have an extra line in between. The tag and the rest of the content. Some duplicating that and moving this here. And I'm going to change the price. This one to 30. This 1, 2 45. Change the text. The middle one is basic and the right one is pro. Finally, we have the icon. This one is circle. And this one

is cloud. Of course feel free to use your own design and your own content. Then let's not forget about the buttons. So I'm going to set credit card. And the text is going to be subscribe. Now what's cool about Framer that you shouldn't hesitate to select multiple similar items and edit them at once. It's going to save you so much time and it's really powerful. Also, we have this small button that I should change to toggle left. And the text is going to be built yearly. So I'm going to copy that.

And change this text as well. So with this, I want to make sure that we have the right name for the variant. And then we can go back to home. And duplicate this two times. To change the variant to Variant 2 and then variant three. So I'm just going to set it to be next to each other. So I'm going to create a frame first. Set to Fill for width and height to fit content, then direction horizontal. Go to overflow and make it visible so that we can see the extra drop shadows. Now for the gap, I'm g

oing to set it to 30. And I'm going to zoom out a little bit to see what it looks like on the other devices. So you can see that we have a bit of a problem. Now to fix this, remember that when you create components, They tend to use fit, and it's going to use the size that you have set inside the component. In this case, it's set to fixed. But all that can be changed from outside of the component. So for example, I can set it to fill and if they're all set to fill, then it's going to take the av

ailable space. In this case. It looks pretty good, except that I can even use more space by removing the gap to zero for the tablet. Now, remember that my goal here and why I added the bottom padding was to align all the buttons and the content so I can use my ruler from macOS and you can see it's pretty well aligned. And now I'm going to take a look at the phone resolution and set direction to vertical. So we're going to have the same problem for the in-between resolution and the large resoluti

on. So we're going to preview this, for example. And you're going to see. That it gets too large and also in between the resolution it's way too large. So remember that we fixed this by using the container and set to max width. Now I'm going to start with the original, which is the main, so it's going to apply to the rest. And I'm going to set max with the 1200 pixel. And here as an override I'm going to set it to 400. And so this should solve the problem that I had. And it's not going to go lar

ger than this and as well, the in-between resolution. It's not going to go larger than 400. So that's it. And I think this design is really nice if you have a background. So we're using the background blur layer and you can of course change the wallpaper in the back. And it's going to set a completely different tone because we're using these beautiful sheets. Now I hope you found it useful to know about the overlays as well as how to use forms and creating a sign up modal and working on the pric

ing cards. In this section, we're going to learn how to create multiple pages for the site and how to link them. Also, we're going to create more components for those pages. Let's get started. First of all, let me explain. We can switch to the pages tab. And this is where we have all the pages. When we created the file, we had these pages already set up. So we can delete them because we don't need them anymore. And we can start from scratch. I think we're going to learn a lot more this way. Now

the pages are based on the menu that we have in the top bar. We have components, pricing, updates, and sign up. So I'm going to create another page. This one it's components. Then another one. Or pricing. Then updates. And sign up. Keep in mind that these are not just names of the pages, but they're also the URL on top of the main one. So in this case, You have a randomized name before dot framer.app. And then you have slash signup, slash updates, pricing, components. And this is pretty much the

standard for websites to make it easier to remember and to share those URLs. Now let's copy and paste some elements into those new pages. So don't so that we don't have something that is completely blank. What we actually need, and I'm going to switch to layers is the hero component, plus the tab bar. So I'm going to copy this switch to the components page. And then paste it. And voila. I'm just going to change the title as well as the embed. The URL you can find in the content. So I'm going to

replace the URLs and this is what we have for the components page. Now for the pricing page, I'm going to use the top bar. Plus the pricing component which is this one. So I'm just going to go to pages. And then paste that. The positioning is a little bit weird right now, so we might need to use height, fit content and make sure to set the gap to zero. So I'm going to do the same for components, select the desktop and set, fit content. Gap zero. For the updates I can start with what we have in

pricing. So let me select the pricing and on top bar. And there you go. So set to fit content. Yep. Zero. We named this to updates. Remove the pricing cards and also we're going to change the image to wallpaper five. So each page is going to have its own wallpaper, which means that I should set the image for the pricing to wallpaper for. And you can see it sets a very different tone. Now I'm just going to increase the contrast a little bit here for the text. So set the color to black. And the li

ne as well. And let's take care of the last page, which is the signup page. I can also start with what I have in the updates page. And select the desktop set to fit content. Gap zero. Change the wallpaper to wallpaper six. Now we already created a UI for sign up. We're going to go back to home and we can find that UI inside the first button. Going to layers. I'm going to go to overlay and I'm just going to copy the modal. But before that, I might want to set a component so that I don't have to c

hange across multiple places. So with this component, I can copy it to the sign up page by selecting the section first and I actually don't need. The title and description because I already have in the modal. And in term of name. You also want to change those to be consistent. It's a lot of back and forth of course. But we're creating these pages really quickly. And that's just how powerful framer is because a lot of these changes oftentimes are really confusing and time-consuming when you do th

em in code, especially if you have a very large code base. So you can see that framer makes it super easy and instant to not just make the edits that you want, but to deploy them instantly to the website. Awesome. Now we have five pages and we can start linking them. Now we already have the top bar component and it's included across all of those pages. So when we make the changes here, it's going to apply everywhere. Starting with the logo that is going to be linked to the homepage. So we're goi

ng to go to interaction and click on open link. And this is going to link to home and that's it for the linking. So I'm going to do the same for the other buttons. OpenLink this one components. This one it's going to be pricing. And then updates. Finally we have signup. We can go back to home. And you can preview the pages. Going to components or going back home. But here for the pricing, we do have an issue and this is related to the scroll parallax. So we're going to have to fix that, but also

we need to put the top bar on top. And this is an easy fix. First of all pricing, I'm going to put the top bar after. And then for the image, remember that we have this whole parallax. When you set the scroll is because it's not at the top of the page, but when it's at the top of the page, We're going to set it to 80% and current just like the homepage. I also want to make sure that I do the same for the other pages. So the top bar after and the image. Set it to current 80%. And finally the sig

nup. So the top bar after and the image set to current 80%. Now I'm going to go back to home. And again, I'm going to preview this. And everything should work as intended. Awesome. Next, we're going to talk about break points. And in fact, we should have done this before copying pasting. Otherwise, we need to reset those overrides for the extra breakpoints. So it's always recommended to have the tablet and the phone for every page. And this can be a very good exercise to know what is wrong with

your layout and how to fix them. So in this case, when I copy and paste, it doesn't have the width set to fill or to a hundred percent. And that's why we have this problem. You can easily tell by the outline what goes wrong. And framer makes it super visual to allow you to fix these issues across those platforms. Now for the rows, we're going to repeat this. It's going to be very good practice. We're going to set it to fill. And also we have the padding that we can set 20 left and right. And the

n the button to be vertical. And left aligned. Now I understand that we're repeating a lot of these steps, but keep in mind that the ultimate goal is for you to find these issues and to try to solve them yourself. Especially if we have already gone through the motion. Likewise for the animations I didn't take the time to apply the animation on every single element, every single section. So if you find that perhaps to be more consistent, we should apply to some other places. Then you should take

the initiative to do those things and it's going to really help you. So let's go to the next page, which is the pricing. Try to do it before I do it with you. And then see if you're doing it correctly. So we're going to add the tablet and add the phone. Then we're going to go to layers. And make sure that the width is set to fill. If you remember we set the gap to zero. And for the phone, we're setting the direction to vertical. Also, we have a max width 1200. And here we can set to 400 pixels.

And voila. At any point, you can test this and see if it works exactly the way you intended it. Let's go to the next one, which is updates. Again, breakpoints for tablet and phone. Make sure that the section itself is set to fill. And we're going to take care of the content later. Now let's go to sign up and repeat the steps. Again, the section. Set to fill. Then go to phone and I'm going to set it to fill for the container. And also the section padding 20 on each side. Let's give it a test to s

ee if it works fine. One thing that we can even improve, especially for the phone is to set less paddings so we have 20 here, but right now we have 30 for the modal, and we can change that to save space. So I can easily create a new variant specifically for the phone. And just for simplicity I'm going to set to 40, 20, 40, 20 in term of padding. So now I have a little bit more space. And then going back here, I'm going to switch to the variant that is the phone. And if I test this, you're going

to see that I have a lot more space for the phone users. Great. Now we're going to go back to pricing. And we're going to create an FAQ section. And this is going to utilize the interactions again in components. So we can minimize and maximize each question and answer. From the pricing page, I'm going to go to layers. And I'm going to select the desktop. Then I'm going to add a new section. This section is going to have a black background. And I'm going to start with a title, which is FAQ. Set t

he text style to subtitle. Rename this section to FAQ. Set the width to fill and the height to fit content. The padding is going to be 100, 30, 100 and 30. And then make sure to set the direction to vertical. And we will also set the proper padding for mobile while we're here. So I'm going to set to 80 20 80 20. Now I'm going to set a component for each question and answer. Let's start with the question, and this is going to be a section title. Then I'm going to create a frame. With the content

fit for with and height. Direction vertical. Padding 20. The radius 25. Then the border I'm going to set it to white 10%. Now we're going to need an icon on the right side that shows that we can expand or we can minimize. So we're going to insert a phosphor icon that is 32 by 32. Color white. And the name is plus. So I'm going to select these two, create a frame set fit and fit. Then set direction to horizontal. I'm going to move also my icon to the right side. Let me expand the container using

fill in term of width. And likewise for the columns inside. So I'm going to set this one to fill. Now I want my texts to also take the full width so it's going to use all available space and it's going to take priority. So set it to fill. Then I'm going to add a frame which is going to serve as the line. Set it to fill with a height of one the color. 10%. Then the text which is going to use paragraph. Again, set it to fill. Now, I'm pretty much ready to create my component. So command option an

d K. I'm going to name this one, FAQ. Let's set the variables, starting with the title and then the text. Now that I have all my elements, I can create the variant. And so I'm going to rename the first one to be closed. And the second one to be opened. So what I need to do at this point is first select the line and the text, set it to opacity zero, but also set to visible no. And then go to opened. So these two layers, again, opacity to one and visible yes. A really cool inexpensive icon animati

on is to rotate the plus icon into a close icon. So all I need to do is to set the rotation to 45 degrees. And it's going to animate for me. Now I'm going to set the connection to open and it's going to be on tap. And likewise to make it easier to tap I'm going to select the entire thing and going back to closed. Finally, we can add a little hover state that is very simple, which is simply going to use the border color. And I'm going to set this to 20%. And that's it. So I can preview this. And

scroll down a little bit. I can see that I have my beautiful animation 40 icon. And I can tap on the whole thing to maximize or minimize. Now I'm going to duplicate three times to have four questions. Feel free to have your own questions and answers. I have mine in the content. And voila. So I'm just going to add a gap of 30 between each. And also I want the first question to be opened by default. Then I'm going to fix the width. So that, because it's filled, it's going to become way too large.

So I'm going to select all four components and I'm going to set it to 800 pixels in term of width. But for tablet, I'm going to set it to fill. And likewise for the phone. So this section for the FAQ, we can also use it for the page that is home. So, let me just select the desktop and paste that. We might need to set the overrides again. So set it to fill. And for the phone as well. The padding I'm going to set it to 80. 20. 80 20. And before we go, we can reuse the components one, two, and thre

e sections. And put that into the components page. So select the desktop. And paste that let's make sure that they all work fine for mobile and tablet and they do. Depending on the technique that you're using. Ideally we don't need to adjust to anything. But nothing beats testing. So we should always preview. Now we have the 3d animation. And we have the sections. Then publish. And test everything in the browser. Especially the new FAQ sections which looks really nice and all the pages, the pric

ing , updates and the sign up. You can already see, we have built so much together, including multiple pages and so many components as well as sections and animations and working with the 3d embed. We're going to learn something cool, which is the CMS. So that stands for content management system. This is great, when you don't want to go back and edit the layout every single time and changing the content manually. And instead you want to have an admin panel where you can input a lot of data or y

ou're working in a team environment and there are a lot of non-technical people such as editors and managers and they just want to be able to change the content from there. To use the CMS we're going to go to the CMS tab here on the top, and we're going to add a new collection. We're going to start with something very simple, which is the testimonials. Then you want to right-click on it and take care of the fields that you need for your content. So in a testimonial, usually you have the name, th

e job and also the text. Basically we can remove the existing one and create from scratch. So I'm going to start with a plain text and this is going to be the name. Then another plain text for the job. Then the text. And finally we have the avatar, which is going to be an image. I'm going to name that avatar. So with this done, I can create my data. I'm going to fill the first one. And then when it comes to the avatar, you want to go to Unsplash. And we're going to search for face. So it's entir

ely up to you. I'm just going to select the first one right here. And then I'm going to create more data. So you can see that this process can be done by anyone in your team without any technical knowledge of how to create a layout and how to deal with a website. Let me just enter three more. There you go. So I have four items. Of course I can have hundreds of them. And this is what makes CMS so powerful, but for the sake of this course, I'm going to keep it simple. We're going to have four item

s and we're going to put the testimonials in the pricing page right after the pricing section. Let me go to layers and I'm going to duplicate the FAQ section. It's very similar. And it has the same paddings that I want. I'm going to remove the FAQ changed the color to a color that fits well with the wallpaper that I have up there. And you can use the code, which is 4, 4 0, 2 19. And I'm going to rename the title to a more custom title. Such as this one. Set this to feel and center. Then add a te

xt. Set it to footnote. Cool. Now that we have this. We can now insert the content from the CMS. So I'm going to go to insert and we have a tab for CMS content and you can see that I have my collection which is testimonials and I can just click on it. It automatically populates with the data that I have entered earlier. And now I have a bunch of options in the right. So I can take care of the order. This is showing the newest first. I can also reverse it. And I can also filter by setting a condi

tion of what field and what value, but for now, I'm going to remove the filter. I'm going to show everything. Then I want to customize the style. So to do that, you want to customize the first item. Likewise for the structure. I want to have a simpler structure, so I don't need to have the extra Stack. So I'm just going to delete that using command delete. And I want my container to have a direction vertical. Align to the left. With a gap of 12. Padding 20. Radius 30. And then border using white

10%. Now you can see that any time that I changed the first item, it changes all of the items. And that's really cool and dynamic. It works the same way as the component where if you change the main one, it's going to apply to all of the instances. So I'm going to style each of the elements. And starting with the avatar it's going to be 44 by 44 with a radius of 100%. Then I'll set the name first. Which is going to use the section title. Then the job to caption 2. And the text to footnote. Now

I'm also going to change the color to white for both of these texts. Like this. You can also notice that the blue content is very similar to how variables work in components. So you can definitely switch them around if you want to, but in this case, it's already the way I want. Now we're going to select the Stack again. And we want to have two columns and two rows. So if I want, I can use a grid and choose the number of columns that I want or the number of rows depending on how much content that

I have. If I want the items to take full height. First it's best to use a fixed height. So for example, 400 and that's going to solve our problem, but sometimes you just want to fill like this. And it's going to work a little bit better. And also selecting the container. I can set the width to fill. So I'm using the full width. Now I'm just going to fix the gap to 30. And I want to show you the advanced options specifically for Auto. So I can have a min width for each of these items and that is

especially useful when you use Auto. So this is going to try to fit as many items as possible with the available space using the min width. So I can set to 300 and whatever exceed is going to go to the next line. So this is very similar to wrap using stacks. And by doing this, I don't need to set the number of columns and the number of rows. Now it's entirely up to you, but I'm going to use fixed and I'm going to use two columns. Like this. Then set a max width of 800 pixel. Then for the mobile

I'm going to set it to one column. And voila. Then let's make sure that we fix the text. I'm going to set the width to fill and center it. Now, before we finish the course, I'm going to do the rest of the contents including the updates page as well as the footer. And also we're going to make the 3d embed optional so activate on-click then share the design as a template. So let's go to the page that is updates. And then we're going to create a layout for it. So far as you've seen, there are two

ways to start a layout. Either you can start with the container and then drill down into the content, or you can start with the content first and then get into the containers. In CSS, you do the first method in SwiftUI, you tend to do the second method. In Framer, I found that both works quite well. So in this case, I'm going to start with the content first starting with the text. Which is caption 2. Then the image which is going to be Fill and height 300. Now it's a little bit annoying that I a

lways insert at the top. So I'm going to create my frame right away. Command enter. Set this to fill and content to fit. Then align left. Gap 20 with a padding of 30. Now I'm going to set the background right away. So go to styles with a fill black 20% the border white 10%. Radius 30. Let's add a background blur to 30, and then I'm going to add a realistic drop shadow. Setting to 100 and diffusion one. Now, I want to make sure that it's not too large. So I'm going to set a max width of 800 pixel

. For the image. Let's readjust that to fill. And I'm going to set Unsplash to 3d abstract. Let's scroll a little bit to find this flower here by Simon Lee. Then set a corner radius of 20. Let's continue with the title. This is going to be a section title. Then duplicate it. With a footnote. Now, both the title and the text I'm going to set it to fill. Then we have a line. Setting to height one. Fill with the color. White. 10%. And also we have a small title. What's fixed. Setting this one to fo

otnote two. Cool. Now we're going to set the little cards to show each of the fixes. I'll start with duplicating this. And then pasting the content using footnote. Then the text using caption. Also, I'm going to insert an icon. Just make sure to put that next to your new text. I'm going to set this to white. 32 by 32. Then move this before the title and select the three. Create a frame. Set to fill and fit. With the Stack going vertical. Aligned to the left with a padding of 30, 20, 30, and then

20. I'm going to change the style with the fill of black 20%. Border 10% white. Radius 25. Now, because I'm going to use this multiple times, I'm going to create a component out of this called fix and I'm going to set the values. So the name of the icon. The title. And the text. Just make sure to fix whatever problems you may have. So I'm going to set the text to fill. And then go back. I'm going to duplicate this and put this. And create frame. That to fill and height fit. Direction horizontal

. And also make sure that each of the component is also using Fill. So there we go. I'm just going to change the icon for this one to Spade and then change the title as well as the text. Great I'm just going to fix these text colors to black instead to have a better contrast. And also I'm going to create a new section for the rest of the updates because otherwise the wallpaper is going to stretch too much. Let me duplicate this. And I'm going to remove the background. Then change the background

color to let's say black then change the text back to white. Now we can change the content and also change the image. And there you go. Let's make sure that the updates are going to work fine for the phone as well. Everything is good, except for the padding. Which we can set 2 80, 20, 80, 20. Likewise for here 80 20, 80, 20. And then we also want to make sure that the Stack here for the phone is going to be vertical. And likewise for the second update. We actually didn't need the title and descr

iption in the second part. Now, all that's left is to create the footer. So I'm going to go to home. And we can see how we can design a footer that is functional and well-organized and adaptive. So I'm going to go to layers, select the desktop, create a new section using this plus sign. And here I'm going to set a background color. First, I'm going to rename this to footer. Said the width, to fill and set to layout. Direction vertical. Gap 30. And then the padding is going to be 100 30 100 and t

hen 30. A footer is typically comprised of the links to more of the sections that are normally not included in the top bar, but also you can have a newsletter and then you have the copyright plus the links to the terms and the privacy. So we're going to start with the links and I'm going to insert the icon for each link. It's going to be 30 by 30. Setting it to white. I'm going to use Duotone and change the icon to Stack. Now I'm going to insert the text which is to the page components which is

going to use the textile caption to. Now I'm going to create a frame by selecting the two of them. Set to fit and fit. Horizontal. Have a little bit of padding so I can create a button. 8 16, 8. 16. Radius 10. And fill black. For now. I'm going to set it to 0% because I'm going to set a hover. But to do that, I'm going to create my component. Which is going to be called link. Now let's create the hover state. And I'm going to go to the field. And set it to white. 10%. And I'm going to create fiv

e more of these. Make sure to set to fit content. Then I'm going to change the content. But now I'm missing the variables, especially for the icon. So let's not forget that. So the second one. Pricing, Credit card. Then updates. Using files. And then I'm going to have links to the social channels, including discord and then Discord logo. YouTube youTube logo. Instagram. Instagram logo. So, let me set this into columns. I'm going to select the first three. Create frame. Fit fit. And then to the l

eft. Likewise for the next three. Fit fit. And then left. Also, I want these links next to each other. So create another frame. And fill, fit in term of height. And direction horizontal. Now I'm going to center. And I'm going to add a newsletter component. Let's start with a title. Which is caption 2. Then we're going to use a really popular service, which is called MailChimp. I'm going to go to forms and select on MailChimp. Now you can see that I didn't want to put that inside the rows. So I'm

going to put that outside. Then select these two. Create a frame. Set to fit fit. And vertical. Align left. Put the title to the top. Make sure that depending on the size of your texts. It's usually better to set it to fill and likewise for the form. So I also want to have a little disclaimer at the bottom of the newsletter. Just to say that we're not going to spam. Then I'm going to set this one to caption. Now for the container itself, I'm going to style a little bit. Set it to gap 20. Paddin

g 20. Radius 20. Fill Black 40%. And border white 10%. Also, I want to style the button. So I'm going to use the color. F F 5 2 4 F. Awesome. Now for each of these columns. I can definitely set them to fill. So that they use exactly the same space. Now I'm going to add a little bit of gap between the columns. Add a divider, height of one and with of 25%. Then set to white which is 10%. Next I'm going to add the copyright text. It's going to be a caption. Then duplicate and add the terms as well

as the privacy policy. So I'm going to use a Stack by creating a frame. And set it to fit content. For now I'm going to use the direction horizontal. And a gap of 30. Let's take a look if this is working well for the tablet first. And so I can definitely reduce the size of the newsletter. For example, I'm going to set it to fill with a max with of 400 pixels. So this fits a little bit better for the tablet. And we're going to deal with the phone inside the components. Since we're going to be reu

sing the footer across multiple pages. We're going to select everything and create a component. Then right away, we're going to create a variant and we're going to set this to 3 90. Now I'm going to set my container to wrap and I'm going to set the padding to 80, 20, 80, 20 to have more space. I'm going to fix the text at the bottom first direction vertical. And for these two columns I'm going to set to fill. So we can definitely fix this by making sure that the newsletter has a min width of let

's say 300. Perfect. Again, there are many ways to go about this layout and. You can even have two columns. So, for example, you can have another container for these two columns. And it's going to wrap nicely. But otherwise min with max width is also a really good option. All right, I'm going to rename this to phone and I'm going to get out to home. Then I'm going to go to the mobile and make sure that I'm selecting the phone variant. Then I can copy the footer. And place that inside the other p

ages. So selecting desktop and then paste that. Set it for the phone variant for phone. Do the same things for the other pages. Perfect. So one final topic that I want to discuss is about the performance of 3d assets. I do have a course about spline and we get to learn about the 3d environment and also how to create a mock-up like this. And you can play with the animation, you can work with the interaction, it's really cool. But the thing is 3d is not made for all the devices and there are are s

till a lot of them out there. So performance is definitely a big issue when it comes to animations. And 3d. When you work with 3d, typically you want to reduce the amount of polygons as much as you can, but sometimes. There's just a limit to how much you can reduce that without reducing too much the quality. Already, we can see that these polygons are not super curved it's a little bit sharp. But it still looks good. The two things that I like to do is to reduce the shadow quality as well as the

detail of shadow. Of course for each polygon you want to reduce the number of this subdivision. In this case, I'm already at the minimum. Then you have these assets you want to use low resolution assets as much as you can. And then we have the blur layers et cetera. So we have to look into all of these things. So at the end of the day, it depends on what you're trying to create and how complicated that is. In this case, I do have a blob, which is fairly heavy, I do have a background blur and mu

ltiple screenshots as well as the interaction itself. A lot of computers can handle this, but of course there's no denying that older computers can't. One thing you can do is to go to the embed and create a component and make it optional. If performance is really important and supporting all the devices is really important. So I'm going to select embed and I'm going to create a component out of it called 3d asset. And then here, I'm going to set a variant. So I have the second variant, which is

the 3d asset. And then the first one. Instead of showing the 3d asset, I can just have an image. So I'm going to set the constraint to zero on all sides. And change the fill set to image I'm going to upload. Hero background. So, this is what I have and I'm going to hide. So set, visible to know for embed and for variant 2 I'm going to do the opposite. So embed yes. And the frame to know. Then I'm going to set a simple hover state which has a button. That I'm going to insert from components. And

it's the button. Then I'm going to set to variant three width fit content. Change the icon to cube. And change the text to click to view in 3d. I'm going to set the connection from the first variant to the second variant using a tab. And from here I should have the image that shows by default. So it's going to load much faster and then when I click on it, it's going to start loading the 3d. So like this on first load, your website is going to feel a lot faster. And not everyone has to experience

the 3-d if their device can't handle the 3d as well. Now, this is a fully working site and you can even share that as a template. So you can definitely publish it and share the link and you can also save that as a template. And if you save that as a template, typically, you're going to need a cover. So the canvas is kind of made for that. So you can say thumbnail. There's a specific resolution of artwork and here you're going to put the cover for the template. I can just put this image, which i

s a screenshot right here. And then I'm going to set overflow to hidden. And there you go. I'm going to right click on this and it's going to set as a thumbnail. So once you have the thumbnail, it's going to show up in your template. So we can move back to the project or you can save it again, as a template, then you can see the templates that you have. And you can copy the remix link, which allows people to view the template and copy that to their account. And also you're going to be able to pu

blish your template make it free or make it paid to the collection that is on framer.com. So I hope you had a lot of fun following this course. I have my own template that you can just copy into your project and work from there. I think we've learned so much about how Framer works, how to do all of these effects, working with layouts and parallax effects and animations as well as creating a full site with multiple pages and 3d assets, really interesting components and CMS data, variables, overla

ys a sign up form, and making our website fully responsive and even creating a custom hamburger menu that is functional and really easy to design. I really enjoyed creating this course. And I think Framer has a magical tool for creating a website that is familiar to a lot of designers who are using Figma and framer and sketch. So I hope this experience is going to encourage you to create your own site. If you create something interesting give me a shout out on Twitter. And I hope to see you in t

he next course.