Learn how to build an incredibly sophisticated website without a single line of code. This is the full design that we're going to make. It's fully responsive, it works on mobile, has incredible animations with 3D interactions, scroll transforms. We will import a full design from Figma. This course is beginner-friendly. We'll start with the basics. Start it with templates and pre-made sections, interactive components made by an active community. You will learn how to work with stacks and grid layout and will work with Framer effects. Then you'll learn how to generate designs with AI. This course will be possible without Framer sponsorship. And that's why I'm offering you for free. You can take the entire course including the Framer designs and Figma files that allows you to follow this course entirely. If you don't know what Framer is, it's one of the easiest ways to create beautiful functional websites. If you're familiar with Figma, you'll feel right at home in Framer. It has the same features including components and variables. A lot of other tools focus on replicating CSS. Figma vs.

Framer makes it incredibly easy for a Figma designer to quickly turn their designs into full-blown websites. What makes Framer so unique is that it allows you to create these components that you are so familiar with in Figma and then add CSS code to them. You can use overwrites and property controls the same way you would use inspectors in Figma. And then you can use React which is one of the most popular frameworks for developing websites. So whatever you build right here, a lot of developers in your team will already understand how it works. So this really facilitates collaboration between designers and engineers where designers are familiar with Figma and developers are familiar with React and CSS. Let's not forget that Framer can do AI so we can generate these beautiful layouts, explore different types of designs for inspiration, customization, and quickly change the color, palette, the fonts, the text using AI and languages. Then you have team collaboration and CMS which makes it seamless to work with your team. What's amazing is that Framer is actually free so you can try with all the features.

You will be able to follow this course entirely. Now if you want to have all the premium features, more visitors and CMS collections and unlimited pages, then it's worth getting the pro version. But again, you can do everything as a free user. Now don't take my word for it, let's create some designs and see for yourself how Framer can make your workflow more efficient and you can do stuff that was not possible before. So with that said, let's get started. This course is beginner friendly. You don't need prior code knowledge or web design experience. Everything is explained step by step from a beginner mindset. However, it is recommended that you know a little bit about computers and basic HTML and CSS. This is going to really help you. Now the first thing that we're going to do is to go to the final website.

You're going to find the URL in the description and here you're going to see the final result that you can use for reference. Anytime that you're building something, you can compare to the final site. If you haven't already, you should sign up on Framer.com. You're going to need an account to be able to duplicate the remix file, to follow the course and of course to create your awesome website. Next, you will also find the remix link. This is where you're going to be able to duplicate the actual project. So you're going to copy this into your account. Now in this template, you're going to find all the final pages that we created for this course. And then you also have the different experimentations from using the different sections and premade components, but also using AI to generate these layouts. And then you have the starting templates for some of the sections in the course. So that if you choose not to copy from Figma, then you can just directly use this and skip those steps. Now I actually think that a major part of this course is to learn how to take your Figma designs and make them work for Framer.

And so the Figma design and template is provided. And I'm going to walk you through the steps of taking this pretty advanced layout and turn that into a functional layout in Framer. Now this is using the design code UI design system and it's a fairly standard system. You don't actually need it to follow this course and you can get the free version of it. So if you want to play with it and learn the system, feel free to do so. Keep in mind that you can build your website using the browser or you can download the Mac app or the Windows app. Then once you're inside Framer, you will be prompted with a tutorial, which I definitely recommend you to take. But otherwise you're going to find all your projects here. So we're ready to start a new project. Now as you take this course, I highly recommend that you check the Framer Academy.

This is a link that you're going to find at the footer of Framer.com. And you're going to find a bunch of beginner tutorials along with guides on specific features of Framer. Also, I have made another course around Framer, so feel free to use this one as well. Additionally, you're going to find a lot of extra resources and tutorials and support by using the Framer community, where you can communicate with fellow creators just like you. Framer has a number of templates that you can use for your next project. There are hundreds of free and paid templates all with varying degrees of details and styles. Now for inspiration, you can also go to Gallery to see what professionals in your field are building using Framer.

With all the preparations done, now we're ready to learn the basics of Framer. And then build your very first layout by learning about the editor, the sections, the components, and all the essential tools to get your first site up and running in no time. So I'll see you in the next section. As you create your first Framer project, you will be welcome with the Insert menu. This is where you can insert pages, sections, navigation menus. These are all pre-made that you can use for your project right away. There's also the option to paste from Figma or from the web using the Chrome extension. But we're going to learn about these a little bit later. Now the simplest way to get started is to look at the different page templates. And here we're going to select the sidebar. So this is your first page.

It's already adaptive. You can use Command Minus and Plus to zoom in and out. Then you have the menu on the left side, which is really important to understand. By default, you're going to see the different pages in your project. But most likely you will want to go to the layers. And then for layers, you have one for desktop, tablet, then phone. So when you're using a template, this is already set up for you. Now at the very top, you're going to find the Insert menu. And on the left of that, you're going to find all the different tools and settings for Framer. And then on your top right, you're going to find your profile settings. But most importantly, Preview. This is where you can preview your website and pressing Escape, I can get out quickly. Then when you're ready, you can publish it. After publishing, you're going to get a unique Framer URL. And you can share that with anyone, it's public.

This is your website running in the browser. Now let's go back to Framer. And we're going to focus on the desktop. Typically, that's the first thing. And most important canvas on your site, because every change that you make here will affect the rest, including the tablet and mobile. You're going to zoom in at 100%. And that's typically the resolution that you work the most with. And as you select elements such as a text or an image, you're going to find the inspector. And you'll see that this is extremely familiar. If you come from the world of Figma, you have your layers in the left side. Then looking at the inspector, you will already be familiar with the alignment, the position, the size of the layout and constraints as well as the styles, including the fill. And so let's click on fill. This is where you can change to a flat color, a gradient, different styles of gradient, as well as the image. Here, there's even an extra feature that's built in, which is called unsplash.

If you're not familiar with unsplash, it's one of the biggest resources for finding stock photography that are free to use. And we can just search for mountains, then select one, and it's going to automatically fill the image that you have here. So this is extremely convenient. And as I click on the second image, I can just fill with more images. As you can see, when I change the left side, it also changes on the mobile and tablet versions.

All right, so we're ready to create another page because typically a website is composed of more than one page. Now, I'm going to go back to pages and right now I have home. This is the first page that you're going to lend to when you go to the main URL. But we can also insert a new page by going to insert, then pages again. I'm going to find the first one. It's really important that you understand the best practices of creating a website, especially nowadays. So typically you have a landing page, but also in the landing page, now going to the layers, you will find that you have multiple sections. So this is very standard.

Most landing pages will have a header and a place to put logos, features, FAQ, and so on. But it's more important to understand the structure of a page because it's not just one giant canvas where you can place elements as you want. You have to compose your page with sections and then inside the sections, you will have the content. You will have the background and so on. Furthermore, it's really important to understand that you can have new sections. This is where the sections come in. So for example, you can decide before the logos you want to showcase a bunch of features.

And likewise, you might want to remove sections. So you can just select and delete. So far, it's very easy to select elements regardless of their containers. And quickly make the necessary change. On top of that, you will notice that most of these sections are using the layout feature, which if you're familiar with auto layout in Figma, it's pretty much the same. So for example, if I have this section here, I can just select one part of that section and move left or right, depending on the direction of the layout. But we'll definitely dive deeper later in the course. Additionally, you can select the section. You can use the up and down arrows to move across the page. Cool. So this is very nice. But what if you want to start a completely blank page? You can do that as well.

We're going to go to pages. Then we're going to click on the plus sign, click on new page. So now we have a blank page to create the same breakpoints. You can just go to breakpoints, select tablet, and then select phone. So you can quickly preview how your design is going to look like on all of these breakpoints. Additionally, when you select on desktop, you can insert a new section.

So we're going to start with a text and image. Then we'll scroll down a little bit. And here we're going to add the logos. So you're noticing that we have a bunch of new sections that were not available in the pages. So for example, we have the bento layout, which is very popular nowadays. And then one that you find pretty much on every product landing pages is testimonial, as well as pricing. And why not add FAQ as well. And then we're going to go to navigation. And we're going to add the second menu. So you have multiple choices. You can even choose the dark mode version. And you can use the up and down arrows to move the menu to the very top. And as you do that, you can see how your page looks like across the different breakpoints. It's interesting to note that the sections that you add are already adaptive across those breakpoints automatically. So that makes our life a lot easier.

Alright, as we get more familiar with Framer, let's dive deeper into the insert menu. Because we have a lot more elements that are pre-made, including creative media, forms, and so on. In this case, I want to focus on what's already in the content. For example, I have logos. So let's insert. I'm going to find one that I like, which is called logo. So I click on it, and sometimes it's going to insert outside or inside of the layout. So I'm going to cut the logo, and I'm going to select this specific portion where I can find the list of logos. And I'm going to paste it. In this case, I'm going to need five logos. So I'm going to do command D four times, so that now we have five logos. As a result, I'm going to remove the ones that are already present. And here, what is interesting is that this is a pre-made element. This is actually interactive. It has its own features. As you learn later, these are components that are specifically made for their purpose.

In this case, it's a logo, but it automatically searches for what logo that I want to use. So the first one is Framer. But the second one, I can use Apple, then Google, Spline, OpenAI. So this is really cool. I'm able to change the logos dynamically by using a keyword. As we learn later, this is the power of code. When you create code components and you can use React to inject dynamic data from, let's say, an API.

But for now, we just need to know that these are dynamic components that are pre-made for us. Let's go back to the Insert menu and maybe we can explore more media elements such as YouTube. And here, one thing that I love to do is again, Command X to cut. But also, I like to use Command Shift V to paste directly. This is something that I do a lot in Figma and it saves so much time. It seems that the element is larger than the container. So one thing that I can quickly do is select the container and go scroll to the styles. And you're going to find overflow. If you know CSS, this should be familiar, but if not, it's like masking in Figma. So here, I'm going to select the container and set it to overflow hidden. So this is going to mask for the mobile version and tablet version. Next, let's go to Insert again. This time, I'm going to use Search and type Maps.

I'm going to use Google Maps. So I'm going to cut again and select Navigation, Command Shift V, and Perfect. We were able to make it adaptive from the first try. So now I'm just going to finish the rest of the layout by quickly changing the images by going to Fill. And then one thing that I want to show you is that you have the ability to upload your own image, but also you can go to Type and change to Tile.

And this is where you can have a bunch of preset patterns that are really useful for your backgrounds. All right, so I'm going to go and switch back to Fill. And this is where I'm going to use Unsplash again and get my beautiful mountains. I'm going to select this one. Keep in mind that you can keep this window open and you can just keep using it across your interface. And likewise, I'm going to do the same for the avatars. So here I'm going to search for Face and I'm going to select them one by one.

And voila, now we have our beautiful website ready with content that we're happy with and we're going to publish it. But this time as we finalize the publishing, we should also configure the site settings. Now by default, it's going to set the page settings for the selected page, but it's also important to change the general site settings. This is the main page where people are going to land to and typically it's the home page. And the main result on Google search, this is what we call SEO, search engine optimization, and the title, description and thumbnail are super important. I'm going to set my site title, which is the name of the course and also the description, as well as a thumbnail for my course.

And again, you can use any image that you want for your website. So these are the most important settings. And of course, you can set titles and description for all the pages of your website. If nothing is set, it's just going to use the general settings. While we're here, we're just going to click the title and rename to the name of the project.

In this case, I'm just going to name it Framework Course. And that's it. This is the page that we have created so far. It's fully responsive, and it has some of these awesome elements. And we managed to make it more dynamic by using, let's say, a video, a map, as well as a dynamic component for logos. Also keep in mind that you have sub pages. You will find that your main page is before the forward slash, and then you have the name of the sub page. In this case, it's page two, just the same way that I named them in Framer. So we've learned the basics of Framer. And in the next section, we're going to learn how to generate a full site using AI and also customize the color palette and fonts, and use AI to come up with different texts and translate the content.

So I'll see you in the next section. In this section, we're going to learn how to generate layouts using AI. So here we have a number of layouts that are created using a prompt from Framer AI. And what is cool about this is that you're going to be able to shuffle the colors, regenerate the prompts, and the font as well. This is going to be useful for inspiration, and especially as beginners when you want to experiment and see how creating a layout work, using pretty good conventions and adaptive layout, as well as colors and typography that may work for your design. Now back to where we were. We have generated so far a bunch of layouts using premade sections and templates. Now we're going to try to do it using AI. So you can go to command K, and this is called the quick actions menu. You can reach that from the top left icon and click on quick actions. Here you can find your components, your elements, a bunch of commands such as generate page using AI.

So we're going to do exactly that. Now for your design, you can use one of these premade, for example, the ones that are looping, and you can just press tab to generate using exactly that. Now I do want to teach a little bit about how it works and typically what you're supposed to be prompting. For example, it's good to have some names and have some context about what this website is about.

So this is going to influence the content and how AI is going to generate the web design. Once your layout is generated for the first time, you can select the desktop, and this is where you're going to find the prompt that you use. And you can always make changes to it. I definitely suggest to do that before making the subsequent changes to the fonts and the color palette. For example, you can change to your name and you can set your city, for example, then the context, then you can start again. It's going to regenerate the page. As you can see, the layout is completely different and it has different colors, different palettes and fonts. So it's important to do this only if you want to restart from scratch. Next, we're going to look at how we can customize the layout. If you're happy with the direction, then you can make incremental changes. For example, you can change the color palette.

You can also change the different fonts or you can shuffle the choices and change them accordingly. Now, if you select it again, you can shuffle between the fonts. This is going to automatically try to pair the title font with the text font. So this is pretty good. Again, I can go into the more detailed version like previously and select just the text font or just the title font. Then pressing escape, you're going to be back to the main inspector and we can shuffle the colors also. Or we can go into the detail mode where we can find all the selection or refresh that selection again. Keep in mind that you can click multiple times the same color palette. So they have variation of the same colors. So it's going to switch between the background colors and foreground colors using the same color palette. The AI and Framer doesn't just help you generate layout. It can also help you write text. If the text is longer than a few words, it's going to have this little sparkle icon next to it.

And when you click on it, it's going to regenerate the text. So you can see it's not going to work for a short text, but it's going to work for a longer text. So this FAQ title, I can regenerate, but if it's shorter, I'm not able to. Now don't mistake it with the icon on the right side. This is going to regenerate the colors just the same way that we're able to shuffle the colors. Another area that AI can really help you is with translation. So you can add languages to your website. And on the top right, you can go to the globe icon, click on it, and then you can set the default language. In this case, English, Confirm, and you can add another language. So I'm going to add French. Then you can set the region as well as a name and a fallback.

And if you have a pro account, you can set the style. So to give more context on how it should write the translation. So if you add that, you're going to find that for all the text that you have in your site so far, you can translate it to multiple languages. And you can do so by using AI. For example, I can translate the description and the title one by one. If you scroll down a little bit, you're going to find the different pages. So we're going to find page three, which is the AI site. And then we can translate the content to French. I'm going to do a few. There's also the option to do all at the same time, but keep in mind that you need a pro account for that. So pressing escape, I'm back to my AI generated layout, and I can change the language and boom, all the text that I translated using AI has changed. It's also going to show me a progress of all the translations that I have done so far.

So this is pretty neat. And now I'm switching back to English. As you can see, AI can be really powerful in Framer. And you can generate a lot of different types of layout and find inspiration as well as experiment with ideas, text, font style, colors and different layout styles. So I hope you found this useful and spend some time with AI and of course customize it with your own designs and your own content and create something that you would like. Now in the next section, we're going to learn how to create a custom layout from scratch. It's going to be really useful to learn the basic techniques and how to use important features such as textiles, color styles, and how to use more of the interactive elements in Framer.

So I'll see you in the next section. In this tutorial, we're going to build a custom layout with animation. This is fairly simple. It has text animation, path animation, including some of the pre-made components that are already available in the creative section, but also in the community. So we're going to use a lot of simple techniques such as textiles and color styles and bringing a bunch of elements so that we can quickly build this layout. Now, while it seems that we have a lot of stuff going on, in reality, it's a fairly easy layout to create. At the same time, we're going to learn how to use basic elements such as text, buttons, interactive elements, and basic layout styles that really doesn't depend on the template or pre-made section. So these are all custom.

So we're going to put everything together in a very organic fashion. I'm going to show you how to connect elements, how to set up properties so that we have something that looks good quickly. In Framer, we're going to create a new page. Now we're going to insert the most basic element, which is the text. So you can press here or you can press T, then you put that into the layout, and I'm going to write the title. In this case, Craft Stunning User Interfaces. And here, just like in Figma, I can drag and center it, snap it to different sections of the layout using the guides.

On top of that, we have the Inspector, in which I'm going to scroll to the text properties, where I'm going to set the font, which is inter by default. The weight, I'm going to set to medium because for titles, typically it's either medium, semi-bold, or bold. And it needs to be big, so I'm going to set it to size 60. And because it's a title, typically you want the letters to be closer to each other. So this is called the kerning or letter in the Framer. And we're going to set it to minus 0.04.

Now we're going to scroll up a little bit to find the size. And for the width, we're going to set it to 510. So this is going to set a bounding box instead of having a fit text. And then we can go ahead and center the text within the bounding box. Here for the letter spacing, it's important to set it to 0. This is perfect for body text, but for titles, you want to make it more condensed. Next, we're going to create a simple button. And I'm going to show you the easiest way to do so. First, we're going to start with the frame, so pressing F. This is typically used for a container where you can put elements. And if you've done CSS, that's basically how you create buttons as well. You have a container, and then you have the text inside. So you can just press Enter, and then you can start writing. I'm going to put Start Free Trial.

And then change the size to 190 by 44. Notice that when I set the frame with the text inside, it automatically set the layout for me. This is similar to auto layout. You just need to know that this is more dynamic, meaning that I can use CSS Flex. I can align elements within it, but also I can insert, for example, an icon, because that's really useful for buttons. So I can go to Icons, and I can insert a feather icon. This is going to create one outside, and I can just cut and paste right here. Of course, I need to make it smaller. Typically, you want to set it to roughly the same size as the text. So in this case, 2016 or '24 are pretty good sizes. And then I'm going to customize my icon element. I'm going to use the Chevron right, and then I'm going to change the color to black, just like the text. And for the text, I'm going to select it, and I'm going to put it to medium, because for button, you want to make it a little bit more readable.

They're typically more important than the rest of the content. So as you can see, even though it's a frame, we have a text inside. We have an icon, and we have the layout set up. And you can move left and right, because we have the layout. And then I'm going to select the container, which is a frame, and I'm going to add a corner radius, which is very standard for buttons. So I'm going to set it to 10. Then I can finish by setting a consistent distance of 30. It's important to be consistent with the alignments, the distancing between elements. So if you choose 30 from the title and the text, then we're going to do the same for the button and the text. Okay, now we're going to get into the color styles. As you've noticed, I've been using the dark mode, and there is a button right here at the bottom of Framer, where you can switch between the two themes quite easily.

Now, it's important to note that this not only affects the UI of Framer, but also affects the color of the design. So for example, if you set the color styles, in this case, I'm going to select the text, and I'm going to go to color, and here I can set a style. A style allows you to reuse that color across your design consistently. I can create one, and I'm going to name this one foreground, and you can see here, this is for the light mode version, and right now it's black.

But I can switch it to the dark mode version, which I can set it to white. So now I'm going to create, it's going to set my color to foreground, which is the name of the style. Likewise, I can select on the desktop, so this is going to be my background, and for the fill, I'm going to select it, and then create a style called background, then switch to dark mode, and this time I'm going to name it black. So let's create it, and voila. Now, when I switch between the two modes, it's going to also affect the design, not just the UI. And I'm going to do the same for the text, so going to color, I'm going to select one of the color styles that I have created so far. If you want to learn more about color styles, you can go to the Design Code UI Design System, or to any design system such as Microsoft, Apple, and Material Design, and then typically you're going to find the color styles for light mode and dark mode, as well as the buttons and the gradients for the background.

So typically you have primary, secondary, tertiary for the foreground, which is for the front elements such as the text, and then you have the container, as well as sometimes you would have gradients for the text such as titles. Likewise, for buttons, you would have the text, the background of the button, and then different states for the button such as hover state, selected, and inactive. For typography, you will also have different titles, different body text, and then the smaller text. As you can see here, usually when the title is bigger, you can afford having less space between the letter, and typically it's going to be bolder because of visual hierarchy. It's one of the first things that people are going to read. And then you have the body, you have more space between the letters, and then you have the small text such as caption and footnote, where because the text is even smaller, you will typically make it medium to make it more readable.

On top of that, you will want to have the mobile versions of the titles especially, but the body text can be the same. Back to Framer, I'm going to show you how to set a color style. Let's select the title, and I'm going to go to styles. This is where I'm going to create a new style.

So let's set heading one, which is for title one, and then we're going to edit this. When you create it, it's going to take the same values that you already have in your design. So if you remember, we have size of 60, letter spacing, and foreground color, as well as the weight, medium. Now let's focus on the breakpoints because this is really important. It's going to save you time. So for example, I can set the breakpoint. So large means desktop, medium is for tablet, and then small for the phone. So if you go to medium, it's going to have a smaller size, and then for small as well. Now you can set the breakpoint width, which is going to take the default values of breakpoints in Framer.

So in this case, 1200, 810, and 394 mobile. But in this case, they just set it to zero. Now let's do the same for the body. So by default, it's going to already have one, but I already set up my own body style. So let me just delete this one and create a new style so that it's going to take the same values that I already created, and then set to paragraph.

So this is for the body text. Again, it's going to take the same values. I don't need to set breakpoints for the body styles because typically all breakpoints use the same body styles. So at this point, you're going to find the body styles and the color styles in the assets. At this point, you're going to find the color styles and text styles in the assets tab, and you can add more styles for your design system. You can definitely use the design code UI as an example to set your body styles. And then in the future, you're going to be able to quickly reuse the same styles to be more consistent and not having to manually set all of those values all over again. So that's about text styles. Now let's talk about interactive element. I'm going to press I to insert, and here I'm going to go to creative where I can find a number of really cool components that I can use to spice up the layout. For example, something a little bit more dynamic, such as the time and date.

So this is really cool because by default, I have the numbers, but since this is a custom component, I can change the format and it's also going to get the date of today automatically. So I'm going to change to date instead of time. And now I have today's date. Next, we're going to insert an element that is going to require connections. So let's go to interactive and I'm going to get the ticker one, which is really useful for moving images or components.

So here I'm going to set the size to take the full width and I'm going to set the height to 300. Then when you see on the right side the little dots, that means that it needs to connect to the content. In fact, it says in the text right here. Now I'm going to show you how to do that. First of all, I'm going to zoom out to make it easier to see, but these elements that you can connect can be any types of element. It can be an image, a video and so on, but you should know that it can also be a frame or a complete UI. So for example, I can go to menus and I'm going to bring a menu split right here. And then I'm going to select my component, connect that to my menu and boom, I have the pixel perfect menu element.

And I can add as many as I want. So I'm going to go and get the menu mix and then menu rows. So let me align them nicely. And I'm going to connect to the second menu as well and to the third menu. This is a good way to showcase your UI for your product and I can go to the ticker properties. I can increase the gap so you can click one by one or you can use shift to increase by 10. So I'm going to set to 30. I'm also going to align to the top, just like this. All right, let's add a countdown just for fun. So I'm going to go to creative and drag and drop a countdown. I'm going to put this at the bottom of the page and let me just select everything. I'm kind of centered within the page using the smart guides and I'm going to move this a little bit lower. It's always nicer to have more element, especially because you're setting a visual hierarchy. So for example, the title is bigger and it nicely introduce you to the page.

And then you have something that accompany the title to make it more balanced. You have a call to action. You have a smaller title or subtitle. And then you have some extra smaller element that can be useful information. But on top of that, you have an area of focus that is animated or visually pleasing. In this case, we have the UI, which is a ticker. Now let's play this and see what it looks like. And you can see I have a pretty nice landing page. It's scrollable, it's easy to scan, and it's also visually pleasing on top of being interactive because I was able to connect interactive components as part of the ticker component. So that's really nice. Now we're going to spice up our layout a little bit because when you make your layout stand out more, you're going to get more people who are interested in your product.

And it's not so much like every other website and it's going to really draw their attention. So we're going to go to framer.supply. And this is where we're going to find even cooler components that we can use. And I really want to show you this because they have motion text, which is used in a lot of modern websites.

They have this really cool art text as well as a color cycle or gradients for your titles, a globe that we're going to use later in the course. But also you can morph shapes and animate your shape or add a grain animation. So we're going to use quite a few of these to spice up our design. I'm going to show you how to use third-party components like from framer.supply, which by the way is created by the framer team. So we're going to start with the framer text. I'm going to go to copy it and then go back to framer. And this is where I'm going to paste it using command V. Now when I do that, you're going to see the element being inserted just like this. If I do nothing and I play, you can see that my text is animated within the frame. And I can always reload to see the animation over again. Now I'm going to press escape and I'm going to set to the same size as my title right here.

But I'm going to split that into two texts. So we have the first two words and then the second line. So let's go to inspector and I'm going to put the same title craft stunning. Then press enter. Now this works differently from a text. So I'm going to have to set manually the size of my text. Let me set it to roughly 500 and I'm going to set the color to white. Set the font to even bigger. This time I'm going to set it to 80. Then I want to make sure that the text fit within the bounding box. So I'm going to set the letter spacing to minus four. Again, this works differently from the values of the normal text. So just try to make it as similar as possible. For the weight, I'm going to set it to 500. And let me put this to the left side. I'm going to duplicate it. This time I'm going to change it to user interfaces.

And I'm going to make it a little bit bigger to 529. Since we're replacing the old title, I'm just going to delete the old one and then play. So this is what I have so far. I think it looks pretty good. I just need to add some delay to the second line. So let me go select the second line and then going to the motion text. I'm going to set the transition. And for delay, I'm going to set to 0.5.

So this should be a little bit better. And I have my sequence animation synchronized. So previously we were centering all of the content, but you can really play with your layout and work with different alignments. So for example, you can center it, but you can also left align it. And if you do so, make sure that everything is really aligned with each other.

So for example, now I want to add some sort of a right layout that is going to complement my main layout really nicely. And I'm going to add some animation, some gradient on the right side. So let's try and do that. But as I adjust things, I'm going to move to align them together. So I'm going to move this second body text and I'm going to left align this text just like this. I'm also going to align my button as well as my date and the countdown.

So it's really nice to be able to use the smart guide. We also have these really helpful gap that shows up when I need them. And now I'm going to insert from Frameware Supply the easing gradient. This is similar to just creating a frame and adding a gradient fill, but I'm going to use this one. It's going to give me more control. So let's set that to the top right set to a size of about 500.

And then I'm going to fill the entire screen. So 1080 for now, but I can also resize my screen if I want to make it taller. So let me set it to 1200 as well as the width and resize this accordingly. Now for the ticker, let me resize this to fit exactly the left side. And going back to the easing gradient, now I'm going to look at the different options that I have. So I'm going to use a purple gradient starting with a purple color and I'm going to use another purple tone that you can just copy the code and voila. I'm also going to change the angle to 225 and set the stops to 25. Again, you have so much control over this. You have different color, you have different presets, radius and so on that you can play with. My layout is starting to look more unique and I'm going to insert something that is going to fill this empty space here.

So let's press I. This is available in both Framer supply and in the creative section. So let's bring the arc element and then we're going to make this really big. So 1200 on both width and height. And then we're going to align it to the gradient background and I'm going to set the content to use all caps, the same words as the title. Then I'm going to set the color to white with a 20% opacity. I will also change the font to be 17. Instead of medium, I'm going to set it to regular and then I'm going to add some really quick animation by simply going to effect, which we're going to explore a lot deeper later, but you can just click on a plus sign and then click on loop.

So by doing this, it's going to rotate onto itself infinitely and then I can set the transition timing. In this case, it's a little bit too fast, so I'm going to set it to 30 seconds instead. So now I can just play and voila, I have a really nice looping circular animation for the text and it adds a unique touch to the design. Oftentimes people use a circular text to add meaning to the website, to a logo and large typography is used a lot on modern websites. Next, we're going to add some grain animation quickly using the Framer supply. And in this case, we're going to scroll down a little bit. We're going to find the grain animated or we can also use noise if you don't want it animated. This is really nice for adding texture to your design to make it feel more tangible. If you notice on a lot of Apple products, especially when they use these aluminum textures, you're going to see those grain that gives that really nice feel to the design.

So I'm going to copy the grain animated and then go back to Framer and then I'm going to paste into the design. Then I'm going to align it to be to feel the same space as the gradient. And then I'm going to set the opacity to 0.5 by using shift click to make it faster. And then the opacity of the grain, I'm going to set it to 0.1. So if you play this, you have this really nice grain animation. And then you can also move it underneath the architects if you want. There's a shortcut for that is its command square brackets left or right to go up and down. Now I do want to show you another really cool technique, which is the animator.

So we're just going to copy this animator component, paste that into our design. We're going to set it to 800 by 800. And then I'm going to move this to the right and center it. Then as you notice, this requires a connection. So let's create what we call a graphic in Framer. So you're going to press G. This is how you create a vector. We're going to set this one to 200 by 200. And then only in the graphic that you can create custom shapes that are vector.

Think of it like an SVG asset. And in Framer, it's separate from the main UI. And it's treated just like an image asset or a video asset. It also has its own options and styles. In this case, I'm going to try one of the shape, which is the hexagon. And I'm going to create it using the Shift key. I can make it into a perfect shape. I'm going to set it to 160 by 160. And I'm going to center it within the graphic. Now, in this case, to make it work with the animator, I need to use the outline.

So I'm going to remove the fill and I'm going to add a stroke. Also, I'm going to set a radius of 20 to make it more rounded. Then for the color, I can also use the eyedropper to use one of the color, like the purple in my design. And I'm going to set the width to 20. So this is my shape so far and I can animate it using the component. So selecting animator, I'm going to connect this to the graphic and voila. Now, it's not represented properly in terms of sizing, but if you play it in the real website, you're going to see that it takes the full space of the design.

So let me put this underneath everything. You can do so by dragging and dropping or a quick way to do it is just to go to move and then send to back. This is going to go to the very background of the UI. So when I play this, it's pretty much in the back and I'm going to add opacity. So pressing three is going to be 30% opaque. I'm going to add one last thing to my design, which is an animated asset, and this is called a Lottie file. So basically, this allows you to bring these vector animations that are using a JSON format, so very lightweight. And then you can take one of the free animations in their community. Just keep in mind that you're going to need to create an account and then save it to your workspace.

Otherwise, you're able to customize the colors and the different settings for the animation. Once you have this in your workspace, this is where you can go to handoff and then you can copy the asset link. So now you can bring that Lottie animation directly into Framer. So I'm going to go to media and then click on dot Lottie. This is where I have a default animation. I'm going to remove the backdrop, setting it to a transparent background. Again, this is vector, so it's infinitely scalable but animated. And then I can just replace the link with what I had from my Lottie file. So this is a free animation in their library that you can use. And I'm just going to bring that to my design, aligning it to the right and then center. But I just want to see half of it, so I'm going to put it like this.

And I'm going to resize it to 500 by 500 and then let me just realign it again. So this is going to show the animation when you play and it's really nice. You can have your own Lottie animation. There are many tools such as Lottie file and also LottieLab, which is really popular. Alright, so let's do some final touches such as I'm going to align all of these to about 60 from the left. And let's set it to 160 from the top. Let me just set my spacing properly. So 20 from the date and then 60 from the left and 60 from the bottom.

Now normally when you align things, it's going to do a pretty good job. But in this case, you can see that it can use some work. So I'm going to show you quickly about constraints even though we're going to go deeper later in the course. But just pay attention to these dotted lines. This basically means that it's going to stick to those borders. So for all of these elements, they're great. It's also good to double check. For this one, I want it to stick to the bottom.

So I'm going to go to the constraint and switch to the bottom instead. If the number is not correct, I'm going to set it to 60. Now let's take a look at the arc and where it sticks. So I'm going to stick it to the bottom as well and it's going to resize accordingly. I'm going to do the same for the grain as well as the ease ingredient. This is where I see I have a problem, especially seeing my dotted line. So I'm going to put it to the bottom right and remove the one from the left. And then let me make sure that my Lottie file is also correct.

Here it's sticking to the top. But if I want to align it, I can just remove the top one and it's going to automatically vertically align. So if I select play and I resize this, it's doing a really good job at being adaptive. Of course it's not perfect. It's not going to work for mobile. This is something that we're going to learn later in the course. But at the very least, I can show you the basics of constraints and how to make your layout responsive. And so this is looking pretty good. One final thing before we go is to make sure that the button matches the gradient that I have here. So I'm going to set a gradient for my button and set the first color using the eyedropper. I'm going to take the lighter purple and then for the bottom color, I'm going to take the darker purple.

And typically you want to make sure that your text and icon is going to contrast well with your background. So in this case, I'm going to set it to white. I also need to test the dark mode and you can see that it's doing a pretty good job except for the title. And in this case, all I need to do is to set my color to foreground. So this is going to use the color style and it's adaptive. So voila. Finally, let me just align the box properly and set this to 30 between each.

I'm going to switch back to dark mode. If your site is supposed to support light and dark mode, it's definitely very convenient and a good practice to quickly switch the theme like this in Framer. Now we're going to publish this. In this case, it's simply going to update because we already published it in the past. All right, this is the result of the layout that we have created so far with a lot of new techniques and really cool components that we use. So we can really experience the flexibility and power of Framer. Now in the next section, I understand that a lot of designers use Figma to create their layouts, myself included. So I'm going to show you how to take a pretty advanced layout and bring all of that working perfectly to Framer.

So I'll see you in the next section. It's no secret that most designers nowadays use Figma. So we are going to focus a lot on how to take your design from the Figma design tool and bring that to life in Framer. If you're not familiar with Figma, it's one of the most ubiquitous design tools out there. Most design teams have that part of their workflow. And most importantly, they have really good collaboration tools and resources and plugins, including the one that we're going to use, which is called Figma to HTML with Framer. So essentially, you just need to copy your Figma design and then paste that into Framer. It's just that simple.

It's good to know that Framer also has a Chrome extension that allows you to quickly copy any element from any website to Framer. Make sure that you have the Figma file downloaded and open, and you're going to find exactly this template. So we're going to focus on very small elements. And in fact, you can quickly install any plugin in Figma by simply going to this option where you can find the plugins tab.

And this is where you can search for Figma to HTML with Framer, and then you can use it. So we're going to select this title right here. And if you want to run it again, command forward slash Figma to HTML with Framer, it's going to copy the element. Instead of copying the entire layout, which is overwhelming, I'm just going to start with a very simple element. Then in Framer, we're going to create a new page. So here we have a new desktop canvas. And then since we're working directly in dark mode, we're going to set the background to black. And then we can paste the element that we copied from Figma. Now it's really cool that I was able to get all of the styling of my text, including the font, content, size, letter spacing, and so on. Now I'm going to go back to Figma and let's copy the next element, which is the body text.

So command forward slash again, enter, it's going to copy really quickly. Here we have some variables. We're going to see how that goes. So we're going to paste and it was able to get all of the same values raw without variables. And I think that is to be expected. But once it's in Framer, you can see that it has all the options that Framer offers, including AI rewrite. But this saves me so much time in term of setting all the color values, opacity, and font values.

Okay, now we're going to challenge it a little bit. So going back to Figma, we have two buttons and these have pretty cool styles that I would say is challenging even to do that in CSS. So for example, we have the outline style we have in your glow and some designers in Figma even use gradient for their stroke. It's important to note that Framer is not going to be able to support that. So here, as you can see, I have a linear gradient for the stroke, but I also set a fallback using a white color with 7% opacity.

So this is my fallback because I know that Framer is not going to take into consideration the linear gradient. So let's give this a try and copy this. And then I'm going to bring that to Framer. And voila, I have almost exactly the same style. And you can see that if I look at the styles, I'm going to find the border, but I'm not going to find the gradient on that border. And this is something that I can obviously do that later in the code using CSS overrides. But for now, we're going to focus on what is feasible, how to set these fallbacks, and what to expect in term of what works and what doesn't work.

This brings us to our next issue, which is the icon. And so when you copy an entire layout or a button, you will have all of these glyphs and logos that will not be rendering properly. So there's a quick solution for that, which is you're going to select them individually. Then you're going to copy as SVG. When you do that, back to Framer, you're going to be able to paste it. And then going to the layers, you can see that my new vector is much more accurate than the last one. So I'm going to delete the vector, and I'm going to keep the graphic that I just pasted by copying the SVG in Figma. Now we're going to bring the second button. So in Figma, I'm going to copy the second button. Let's see if it brings auto layout as well.

Now this is very similar to the first button, and I'm going to paste it right here. It does have the background blur, which is really nice, but I can see straight away that it has auto layout from this icon right here. So I'm just going to move it and notice that sometimes when you paste, it's going to go outside of desktop, but when you move it around, it's going to automatically move inside of desktop. As you get used to Framer, it's really important to take note of all of these structured details. Now this button has the same icon, so I can just copy the same graphic and then command shift V to replace the old one.

Or I can go back to Figma if it's a different icon and just copy as SVG and paste to Framer. And also because this is using a layout, I can just move my icon left and right. Now looking at the styles, you're going to see that it has a flat border. It has multiple shadows, including the glows. So when you see that it's a white shadow with opacity, that's more likely to be a glow. But when you see that it's dark, then it's a drop shadow. In this case, we have four of them in a lot of modern designs, especially with a specific style. It's not uncommon to see multiple shadows. All right, now we're going to copy the rest of the UI. So let me go to Figma. I'm going to zoom out a little bit and here I can find that I have multiple elements that I want to copy, including the Browse app. And I'm going to use Command, hold it, select the main card as well, the progress ring and the score.

Then I'm going to copy those to Framer. So it copied over 500 layers and going back to Framer, I'm going to zoom out a little bit and paste those. It's definitely going to take a little bit more time, especially when you have more elements. And boom, I was able to copy pretty much everything with all of the effects. And I'm just going to align this properly and I'm going to move my first four elements a little bit more to the top. And I'm going to align everything together later on. But as you can see, everything is really nicely done. And that's also because I have prepared the Figma file accordingly based on those rules, such as the stroke gradients with the fallback, but also some of the more complex vectors, some of these advanced stroke. So one thing you can do in Figma is to flatten some of the vectors that are a little bit too complex or where the options won't translate well to Framer.

And this definitely requires a lot of experimentation. But at the end of the day, it's important to keep in mind that not every option is available in Framer, although most of them are. And for those that are not, you need to flatten the vector or use the SVG version or set a fallback. Now I'm going to organize my background and set my gradient in there. First, I'm going to create a frame pressing F and I'm going to fill the whole space. So let's resize to the whole width and height of the entire canvas. And then when you create a frames, it's definitely going to group a lot of the elements where you drew that frames. So make sure you pay attention to that. I'm going to put the elements that were inside out of it. And I'm going to move the background and the lines to be inside that frame. And that frame, I'm going to call that background. So let's do center back again. So now I'm going to set a radial gradient.

Then I'm going to set a blue for the center to be as close as possible to what I have in my design. I'm going to use this color code. Feel free to use it. I'm going to set the center color to be 50% and then the outer color of the circle to be 0%. This circle gradient, I'm going to make it a little bit smaller, so 0.4 roughly. Then I'm going to remove the other blur that I had before. And voila. At this point, we should just organize our layers to be as close as possible to the Figma design. So I'm going to center the top button. Then the position from the top, I'm going to set to 140, which means that the title should also be centered with a distance of 20 from that button. Then I'll move the description 20. Then I'll bring the button. And sometimes you're going to see this where when you have a giant frame that surrounds everything, as you drag and drop stuff, it's going to go inside it. So one thing you can do is you can move it outside.

And also you can lock any layer so that you don't have to interact with them anymore. So command L to lock it, which means that when I move stuff around, it's never going to try to go inside that huge frame anymore. And notice that it did the same with the title and description. So I'm going to move that out, then center my button, set a spacing of 20. Now for the main layout, this is where you can have a lot of difficulty selecting the parent container. Typically, you can go to the layers list and you can make sure you're selecting the right container. Or another thing you can do is you can command click. This is going to make your job a lot easier. And typically when you command click, it's going to select the parent container. So for the browse app, I'm going to move it to the center and then 40 from the button. And then I'm going to select progress ring and I'm going to move that roughly to the top left of it. For the main card, I'm also going to move it to the top right of it.

Make sure it's outside of the browse app and then command click again for the score. I'm also going to use the keyboard arrows to make it easier to move around without affecting the structure. So that's another way to do it. You don't have to have exactly the same position that I have and use whatever technique feels best for you. At the end of the day, you're going to have a layout that looks roughly like this and that follows the Figma design. And that's it. This is what we have so far and it took us just a few steps. Of course, I went one by one, but I could have just taken the whole group or the whole layout all at once and it would have been a lot faster.

Now you can use this opportunity to practice copying the SVG icons, fixing the layout as you see fit, but also experiment with your own design to see what kind of problems you can run into and how to fix them. In the next section, we're going to focus on making everything adaptive. So we're going to learn about stacks, fit, fill, which are going to be really useful for creating a responsive layout. So I'll see you in the next section. In this part, we want to make the layout adaptive by using constraints. As you can see, this is not working properly. We haven't really paid attention to those details.

Also, we want to use stack. So essentially auto layout in Figma to make the whole layout and alignment so much more consistent and also giving us access to some of these really useful options such as gap, distribution and padding. I'm going to select these four elements. So the button, the title, description, and also the glass button. And here you can either put that in a frame, which is not going to have stack, but you can also do command option, enter.

And this is going to create the stack automatically. So let me make sure that this is at the front. And then I'm going to set the width to 510. The height, notice that this is a fixed height. And that's not the goal because we want the container to adapt to the content, which means that we should use fit content. As a result, if I had an additional element, it's just going to automatically resize the whole container. And likewise, if I want to increase the gap, which is what we had before to 20, it's going to resize the stack.

Furthermore, you can align all of the items just like in CSS flex or auto layout. You can use direction, but this is going to break because I have a fixed width. Then we can also set the padding, which is really helpful for buttons. But in this case, we're going to leave it to zero. One thing to note as you create your stack or frame is you have this cutoff here, especially when you have glows or any background that really sticks out of the frame. And this is going to puzzle a lot of designers as they start using Framer but also CSS.

This is similar to the option called clip content in Figma. And the name is very different, which is why it can be confusing to a lot of beginners. This is definitely using more the standard of CSS. And in this case, it's called overflow. So we're going to set this to visible instead of hidden to not cut off the overflowing styles and elements. All right, now let's talk about constraints. We have our stack here and we want to center it, but we want to stick it to the top at the distance of 140. And also it's important to use the option key to always measure to make sure that everything is centered properly.

Because even though you set your constraints, it doesn't mean that it's properly centered. As you can see here with the real values from the position, the left and the right side don't have the same values. So constraints work really well with alignments. And I would recommend that you always use alignment first. So in this case, I'm going to center horizontally. And as you can see, this sticks to the top, but it's not stuck to the bottom, the left or the right. And if it's not, then it's going to automatically center when you resize the screen. As you can see here, it's going to always stay in the center.

Next, we're going to make sure that every element is going to roughly follow the same principle of sticking or centering. So in this case, 532 from the top, but no sticking to left or right or bottom, which means it's going to center. Then the progress ring left 30, top 460. Then the main card top 490, right 80. And I'm going to disable the left constraint. Then the score top 800, right 30, disable the left constraint. So when I play this, you can see that it does a fairly good job at following those sticky places. Sticky places using constraints. Let's take a look at the background. This is already setting zero from all sides. It's going to stick, which means that they're going to resize based on the container, which is a desktop. And also for the line, it seems to have negative value because the element itself is bigger than the actual size of the container. When I preview, you're going to see that it's going to resize not only the gradient, but also the lines. And that's not what I want. So what you can do here is just to center it.

I'm going to click from the middle and it's going to center. So this is going to solve the problem with the lines. Now for the background itself, the solution is just to create a separate gradient element. And so one thing you can do just like in Figma, you can copy the fill property. Then I'm going to create a frame outside of everything. I'm going to bring that inside the background, set it to 1000 by 1000, center it. Then for the fill, I'm going to paste it. Now I have two backgrounds, which means that for the background frame, I can just remove the radial background that I had before. Now for this specific gradient, just make sure that it's centered instead of using constraints on all sides. So now when I play this, it should be working perfectly. Next, what if you want to have some elements that resize based on the size of the browser? So for example, I would like to have the main UI here to resize. And then I want these to follow the size of that container.

And let me fix this as well. So let me select this one and make sure that it's on the right side and not from the left constraint. But also, I'm going to create a new frame where I'm going to put everything together, including these four UI elements. So first of all, I'm going to select the Browse app and then I'm going to use Command Enter to create a frame. Let me rename this to UI. Then I'm going to move the score main card and progress ring to that UI as well. Notice that it's going to cut off, so let me set overflow visible. And also, you see that the constraints for each of these elements have changed drastically in term of value, but still remains the same top and left or top and right. So this is great because it's essentially following the container.

So it's important to note that constraints always follow the container. Now I'm going to select the UI and I'm going to go to constraints and I'm going to set it to 112 on the left side, but also 112 on the right side, which means that it's going to grow horizontally. So let me try this and boom, it's growing. And the elements are following that growth, which is really neat. Let's talk about constraints that are within stacks because by default, everything is pretty much using the normal frame in Figma or in a lot of design tools. But in CSS and especially when you're using auto layout, sometimes you're going to have an element within auto layout that is floating. In CSS, this is what we call position absolute and it's very, very common. For example, in my design in Figma, you're going to see that some elements are using the position absolute, including the icon on the top right. In Figma, this is very common.

You're going to set a absolute position inside of a stack. Well, in Framer, it's going to be the same thing. Let me just hide this UI to make it a little bit more clear, set visible to no, and it's going to make the layer transparent. Now, you can see that everything in this layout here is using auto layout from Figma, which translates really well to Framer.

But when you bring that to Framer, the absolute positioning within auto layout, it's not going to work properly, especially in the case of this icon right here. So what you can do is to select the container of that logo, and it cannot be a graphic, otherwise you cannot use the same position type. But if it's a frame, you can switch from relative to absolute. And from here, I'm just going to remove the current constraints, and I'm going to set top 20 and right 20. So you can see I can freely position my element, even though I'm inside a layout. Next, we're going to bring the navigation bar. So I'm going to select this one, copy it, then selecting desktop, I'm going to paste it. Now, what you're noticing is that it's bigger than my canvas. So I'm going to fix this by setting constraints your left and right as well. And then my distribute option is not set properly. Now, as part of auto layout, you will have the option to distribute and to align.

This can be a bit confusing, and it really depends on the direction of your layout. So in this case, I'm going to set it to center, and it's going to center horizontally, but the alignment is for vertical alignment. If it was a vertical direction, you're going to see that the alignment is going to switch. But what is really neat is that the icons actually change to really help you visualize what alignment goes with what direction. As you work with a navigation menu, it's very common for the menu to float.

And so when I scroll, you're going to notice that it's not going to stick at the top. And there's a very quick way to do that. So selecting the navigation menu, I'm going to set the position type to fix instead of absolute. So now when I play, you're going to see that as I scroll, it's going to stick to the top. And because I have a background blur, it creates this super nice glass effect. Let's fix some details before we go, including the logo itself. I'm going to copy as SVG. Then I'm going to select the logo stack in Framer. I'm going to paste that, and I'm going to move it to the left side and remove the old one. Now at this point, feel free to replace all of the glyphs that might not look perfect and use copy as SVG instead.

In my case, I'm going to do them one by one, but also feel free to use the template and just copy the entire stack and replace that to the main Framer design. Now I'm going to make sure to remove the effects because we're going to learn that later. Let me set the desktop height to 1440 for the background. I'm going to change the frame for the gradient and rename that to gradient. But this is what we have so far, and that's the power of stacks. Now in the next section, we're going to make our layout even more responsive by using breakpoints and min max. So I'll see you in the next section. In this section, we're going to learn about responsive layout and specifically about breakpoints so that we can have a layout or element that takes the full width but that has a minimum size or maximum size instead of a fixed size. And with breakpoints, you can set different font sizes as well as conditions for your design elements. In order to make this layout really work across different devices, we need to set the breakpoints.

So we're going to go to breakpoints on the top right and I'm going to add a tablet. And also we're going to add a phone. So you can see that it's broken for the tablet version as well as for the phone version. Now these are the default size, 390 for the phone, 810 for the tablet and 1200 for the desktop. But feel free to use the resolution that you're using in Figma. It's also really important to see the range at which this is going to activate this breakpoint. For example, the tablet is going to activate between 810 and 1199. So anything lower than 810 is going to activate the phone breakpoint. Now we can quickly set a different font size for the phone and then test that. So I'm going to set 44 in terms of size and then I'm going to click play and you're going to see that below 810, it's going to activate that font size. It's important to understand how overrides work when you work with breakpoints. For example, when I make a change to the phone, it's not going to affect the tablet and the desktop.

But when I make a change to the desktop, it's going to affect to the tablet and the phone. So basically all lower resolutions. Currently, the entire layout is using constraints. And that works for some layouts, but for most layouts, we're going to set stacks everywhere. So that it's going to grow regardless of the size, the font, the language, and even having the flexibility to set the layout direction. For example, now we're going to turn everything using stacks so that our layout can grow. And it's going to allow us to add new section in the future without breaking the website. So the landing page is going to have multiple sections. And the one that we're working with right now would be called the hero section. I'm going to select the stack, the UI and the background, and I'm going to put that inside a frame first.

So command enter. Now luckily we already organized the background and it's taking the full size. But again, this is using constraints and we're going to turn that into a layout instead. So as soon as we set the height to fit content or we click on the layout, it's going to turn into a stack. Let me try to set the height to fit content. As you can see, it's going to turn the whole section into a layout. And when you have a layout, everything is going to distribute. The content is really spreading vertically, starting with the background first, stack, and then UI. Now typically you want your background to be always floating in the back. And that's why we're going to use the absolute positioning. And because it's using absolute positioning, it's going to rely on constraints to really adapt. And in this case, you want your background to have zero on all sides. So basically it's going to fit to the size of the section. I'm going to name my section here hero. Now because this is a stack, it's going to rely on padding instead of constraints to set the negative spacing.

So I'm going to go to padding, then I'm going to set to 100. Now it's important to note that you can set specific paddings, meaning that you can customize top, right, bottom, and left individually. So for the top, I'm going to make it a little bit larger, so 140, and likewise for the bottom. And then I want my gap for the elements to be 40 between each. Right now I have two elements, including the stack and the UI. Now let's deal with the background. It's important to understand that because we're using position absolute, that is going to be above every other element.

And so we have to deal with the z-index. If you're not familiar with the z-value, it's in a different plane in the 3D space versus the x and y values. So in this case, this is where you're going to have elements in front or in the back. And typically when you set a position absolute, it's going to be in the front. And you can see that when you play and you try to select the text, and it's not allowing you. That's because it's been blocked by the gradient or whatever element that you have in your position absolute. As a result, you're going to have to set a lower z-index, so I'm going to set it to zero. And then this should be fixing the issue. Let me fix the background constraint. Here I'm going to set the bottom constraint to be zero instead. Next we're going to deal with the padding using overrides. So for desktop we have 140 and 100. But for tablet, you're not going to have such a large padding.

So you'll want to set overrides. We will select the hero in tablet, and I'm going to set the padding right and left to 40 instead of 100. Then for the phone, I'm going to set it to 20 for right and left. This is going to be useful when I have my content take the full width. As you work with a lot of overrides, you're going to see what has changed in those breakpoints by noticing the blue text. When you work with responsive layout, it's really common to use fill and fit. But also you're going to start using a lot of min and max. Let me give you an example. In this case, I don't want to use too many overrides, and so I'm going to set this stack to have a fill width. As a result, it's going to be perfect for mobile and tablet, depending on the amount of content, but it's not very good for desktop. However, I managed to not use any override. To solve this issue, I can use a max width paired with fill and set it to 510. But if I press enter, it's going to use percentage.

One thing I can do is instead of the percentage, I'm going to use PX, and it's going to automatically change to fix instead of relative, which means that it's going to use the pixel values. As a result, my text is always going to look the way I intended it to for large resolutions, including the tablet. But for the phone, it's going to adapt to the screen size and utilize the padding that I set earlier for left and right. Now you will see that when I resize it, it's going to really hug the borders. Likewise, I'm going to do the same for the navigation menu and specifically the container, which seems to have a fixed width, and I'm going to change that to fill.

Now obviously, it's going to be too large for the desktop, and so I'm going to add a max width of 768 PX, and voila. Next, let's select the UI and make it responsive. First, we're going to set the width to fill. You will see that it's using the paddings, which is great. But at the same time, you can see that not everything fits in the tablet and the phone layout. So one thing you can do is to simply make those extra columns to be not visible. And here you can use visible no, and I'm going to do the same for the phone.

Just make sure that you're selecting the columns and not elements inside them. So for mobile, I'm going to select the second and third columns and set to visible no. Now because this is a layout element, I can select the sidebar and just make it a little bit smaller to make space. For the right side. Now for this UI, I want to have a min width so that it's going to take the full width of the phone.

And also it's going to have a max width so that for larger screens, it's not going to exceed a certain size. So let's select the UI container, and then I'm going to add a max width of 1100 PX. And also I'm going to set a min width of 390 PX. So as a result, it's going to take the size of the phone. And now I have more space for my content. Let me just arrange the sidebar a little bit more so that it can really fit everything without breaking the layout. And then what elements that don't fit, I'm simply going to make it not visible. So far, this is my layout and you can see that the UI as well as the title and text really fits nicely with a min and a max width. And all that's left is to deal with the extra elements that are floating on top of the main UI. So let me go to desktop, to hero and UI. I'm going to show back the main card and then we just need to make sure that the score is in front.

And then for the tablet, we want to move the main card to be centered and at the bottom instead. Also, I'm going to use my keyboard arrows to move it down a little bit without exceeding the bounds. Then I'm going to select the progress ring and just move it so that it's visible, likewise for the score. Then for mobile, I'm going to do the same. So center bottom and then move a little bit. Then the rings, I'm going to place it next to the main card. And then the score, I'm going to place it slightly at the bottom of the main card to the right. Let's not forget the main navigation. So here it's very common to hide some menus when you are on mobile.

Later on, we're going to add a hamburger menu, but for now a quick fix is to hide the menu. So you can also use the lead key to hide it quickly instead of having to turn off visible in the inspector. But keep in mind that this will only work for overrides, meaning that otherwise if you are doing that in the main desktop, it's going to delete the entire thing. So again, override, for example, in the tablet is going to hide it as you can see by the transparency, but when you are in desktop, it's going to completely delete it. Finally, as you work with stacks everywhere, it's equally important to set the desktop itself, so the main canvas to also use layout. So I'm going to add that, and then we're going to change the height to fit content. Now before we go, I'm just going to add some padding to the container in the navigation menu, and I'm going to set to 8 for right and for left. Awesome, we managed to create a responsive layout that really reacts to different breakpoints. We managed to hide elements, then we use min/max to make sure that it doesn't grow beyond a certain size, and we're minimizing the amount of overrides that we're setting in our interface.

So I hope you found this useful. In the next section, we're going to start working with components. So I'll see you in the next section. For a lot of web designs, you start using components as soon as you want to reuse elements, such as for buttons, and in Framer, you can create animations such as hover states, and you can also have multiple variants of the same buttons and apply variables, so that when you reuse them, you can customize the content, the icon, and so forth. So that's exactly what we're going to learn in this section. To create our first component, we're going to select the glass button inside desktop, and here you can right click on it and then create component. The shortcut key is option, command, and K, and when you do that, it's going to ask for a name, so we're going to create the glass button. As a component, you can reuse this in multiple places, and any time that you make change to this component, it's going to apply to all of the instances.

And also, you can easily create a hover interaction, so I'm going to press here and click hover. For beautiful hover styles, you can simply play with the opacity, the color, or the strength of the fill, border, or shadows. In this case, I'm going to play with the border and set the opacity to 50%. I'm also going to change the glow, so the white color using 10 and 40. I'm going to make it stronger to 30%, because again, this is a dark mode design, so I'm going to play more with the glow and the outline. Now, what is also common is to change the color of the text and the icon, so you can definitely play with the opacity. And also one unique technique in Framer is that you want to move the arrow and the text a little bit when you mouse over. So a really cool technique that you can do is to play with the padding and the gap. In this case, I'm going to set to 14. It's going to make my button bigger, and I don't want it to change in size, so I'm going to compensate by removing the two points, so setting 29 for right and 29 for left.

And now that I have my hover interaction, I can play directly in the component and I can just test on this specific component. I have a really nice glow and outline as well as my text and icon are moving nicely. Once you're done with your component, you can go to the breadcrumbs menu and you can exit the component by pressing on the page where you're from. Now I'm going to focus on the navigation menu buttons, and these are going to be reused multiple times, so we're going to have to use variables. I'm going to select one of the buttons, then create component, and then I'm going to name this button, then create. Now I'm going to create my hover state, so hover, and this time I want to add a border. But the thing is by default it doesn't have a border, and if you add the border directly to the hover state, you're going to have a problem with the mouse out interaction. It's going to appear in and out too suddenly.

So let me undo and go back to my primary, and this is where I'm going to add my border. Similarly to the way breakpoints work, where the desktop applies to the tablet and the phone, the same works for primary and hover state as well as primary and different variants. Now for the primary, I'm going to set to a white color of 0%. Then for hover, keeping this open, I'm going to set it to 20%. So when you do this, the border still exists in primary. As you can see here, it's not empty.

And then when you play this, you're going to see that it has no longer that transition problem that we had before. Components can have overrides. In this case, we call them variables, meaning that when you create instances of that component, you're going to be able to customize those overrides. Now if we select the text, in the inspector, you're going to find that we have a number of possible overrides, including the content, which is going to be text, the color, the size, which is a number. And then we also have overrides such as links and toggle such as visible, yes or no, as well as component variants. So we can have nested components with their own properties. But let's start with a simple text. I'm going to go to content and I'm going to click on it, create variable. I'm going to use a plain text instead of a formatted text.

The formatted text is going to be richer, meaning that it can hold styles and even links. So let's create a plain text variable and you can name the variable. And in this case, I'm going to name it text. So you can set the default value and then you have more options such as the placeholder and text area. Now I'm going to click outside, then we're going to exit. Now you're going to notice that this is purple compared to the non-component elements that are blue. And in this case, I'm going to duplicate two times and I'm going to use components instead. And if I go to the inspector, I can customize the text and set to pricing for the second one, change log for the third one.

As a result, I can delete the previous ones. Let me do the same for login. And in this case, I'm going to copy first and then select login command shift V to replace. Then I go to the text variable and change it to login. For the sign up button, notice that it's a similar style to the rest of the buttons, but also similar to the new components button. So we can use variants for that. What I'm going to do is to right click on it and then copy the style. So I'm going to go back to my component, then zoom in and add a new variant. Now when you add a variant, it's going to share the same elements that you had in your primary variant. And this is a good practice because when you change on primary, it's going to affect the rest, including also the hover state. In this case, I just wanted to keep everything, but I want to customize the styles.

So let's right click on it and then paste the style. Notice that the variable is already set up. I don't have to change anything else. Then I can set a different hover state. This time I'll go to the border and I'll set the opacity to 15%. And then the glow for 122, I'll set to 20%. I'm ready to go back. So now I can copy my login and then replace the sign up button, change the text to sign up. And I have a new option called variant. And so I can change to variant 2 and it's going to have that style that I had before. On top of that, it now has a hover state for all of these buttons that are using the same component. Next, what if I want to use the same component, but I want to add the option to have an icon that is customizable. So let's do that. Let's double click on it to enter the component. The text is already customizable, but now we're going to add an icon. So in this case, I'm going to insert a feather icon.

Let me cut this and paste that to variant 1 so that all my buttons can have an icon. And I'm going to change to 16 by 16. Then I'll change the color to white. Then I'll change the name to Sharon Wright. Now at this point, I want to make the icon customizable. So I'm going to create a variable. Let's name that icon. And this is going to use the different variants of the feather icon, which is essentially another component with hundreds of variants.

So now my icon is customizable, but I also want the ability to show or hide it. So I'm going to go to visible, create a variable, and then name this show icon. And I'm going to set it to no by default. Let's exit the component. And here I'm going to copy the button and replace using command shift V. So now I have the ability to show the icon, to change the icon, and also to change the text. So new components. That's pretty awesome. Let me just put it back to Sharon Wright. Before we go, I just want to create a simple component for the logo and then create. It's very common to make the logo interactive so that you can click on it and go to the home page. And so I'm going to create a hover state and then I'll set the opacity to 0.6.

And that's it. That's how you create components with hover states with different variables as well as variants where you can have nested components with customizable icons. This is a really powerful feature in Framer and we'll definitely explore more in the future. But for now, you can really create an interactive interface by using components. In the next section, we're going to learn about effects, which is going to allow us to create a really beautiful, a pure animation on the landing page. So I'll see you in the next section. In this section, we're going to learn about the effects in Framer. This is one of the most fun and easy to use tools for creating beautiful and interactive animations such as the simple sequence, a pure animation on the landing page, but also when you mouse over and when you press. So we're going to explore the appear, hover and drag effects in Framer. Appear animations are extremely common for a lot of websites.

You see a lot of text animation that appears using fading or a slide that is very slow and it's visually pleasing. Now to create that in Framer is actually really simple. You're going to find individual elements in the front of your UI. So for example, we have the button, title, text, call to action. And on top of that, we can synchronize with the rest of the UI. And in this case, we have four more elements, including the main UI, the progress ring and the main card. So we're going to select all of them. Let's go to desktop hero. And then we're going to open the UI and the stack. Just make sure everything else inside are close. It's important to be able to select them properly. I'm going to start with a button and using the command key, I'm going to select them one by one. This is why organizing your layers can save you a lot of time, but also can lead to less confusion when it comes to planning your animations.

Now with this selected, we're going to go to the inspector and we're going to find the effects. And if you click on a plus sign, you're going to see a bunch of options. Now the one that we're going to start with is appear. So let's click on it. When you do that, it's going to apply the appear animation on all the elements that you have selected. Now the trigger is the event at which it's going to trigger the animation. In this case, it's when it appears, but you can also switch it to scroll or when it's in view, meaning that when it's seen within the viewport. Let's focus back on appear and then we have a bunch of preset animations that you can use. Fade in being very common, but also you have scale, flip, slide, and so on. Keep in mind that you can use these as a starting template. I like to keep it simple, especially for custom animations. And so I'm going to start with fade in.

Then I'm going to go to enter and this is the start of the animation. So I'm going to set the Y position to 20 and keep the opacity to zero. Now it might be helpful to show it just to be able to play with scale and rotate. But once you're done, don't forget to put it back to zero. Next, we're going to get into the transition. This is the timing of your animation. By default, it's going to set to spring. The spring animation is definitely more lifelike and you can see the preview of the animation as you change the values. The animation that is a lot more common and especially for appear animation is ease. And here we have ease in and out. As the name implies, ease is the slow part.

So when we say ease in, it means that at beginning it's going to start slowly and then in the middle, faster. At the end, it's going to be slower as well. Additionally, for those who are more advanced can use the Bezier curve and there are tools for that, such as cubicbezier.com where you can play with the animation, get the Bezier curve, but also you can select one of the presets and see the preview.

These are highly customizable and there are so many presets that you can find out there. Now, switching to the time, I'm going to make this slower. At 0.3, it's typically made for something like a hover interaction. Then we also have the delay, which allows you to set a sequence animation for your text. This is going to add a very nice touch to the animation. So I'm going to set to 0.1 for all of them. And then I'm going to plan to have subsequent element to set to 0.2, 3, 4, and so on.

Let's keep this window open and then I'm going to select the second one. And this is where I'm going to set to 0.2, 3, 4, 5, 6, 7, 8. Once you're done, we can just click out of the zone and here you're going to see when you have an effect, it's going to show this icon next to it. Then we're going to go to preview and voila, this is the beautiful, up here animation.

Next, let's add a hover animation to these UI elements. So I'm going to select the four elements inside UI and then I can add a second effect. In this case, I'm going to add a hover. Then in my hover effect, I'm going to change the scale to 1.02, then set the Y position to -10. Now for the transition, I'm going to go to ease again. Now there's one basic curve that I use a lot of times. This is really good for hover effects on buttons, but also on UI elements and it's 0.2, 0.8, 0.2 again and then 1. Then I'm going to change the time to 0.8. These values are really popular on a lot of websites, especially inspired by Apple and the Stripe website. As you can see when I customize the Bezier values, it's going to set the ease to custom.

So let's give this a try. I'm going to click play and now when I mouse over, it's going to resize the element using the custom ease that I set. Additionally, you can also change the background color when you do the hover interaction. So let me select the main card and go to hover and only on this one, I'm going to add a fill color. So let me set this to white and then 10%. Now this is not going to work on every element because sometimes you don't have a fill. However, for this card, it's going to look really nice. There you go. It's a really nice effect. As you can see, it takes so little time to create effects in Framer and you can really experiment quickly with different types of animations and interactions. Let's go to the button here. Even though it's a component, I can still add effects. I'm going to click on it and this one, the press effect is especially good for buttons.

Here by default, which is already good, it sets to a scale of 0.9. And if I test this, you can see that when I press on it, it does the scale animation and it bounces back. All right, let's play with the loop effect. We've tried that in the past, but we're going to do it again for fun. Let's insert the arc, click on it and here I'm going to put a long text that repeats itself that just says performance.

I'm going to set this to with 136, then 136 for height. Let me set the color to white, 20%. I'll change the font size to 6. And then I'm going to cut this element and bring this to my score. So with the frame selected, I'm going to paste it. Let me just center it. Then I'll set an effect using loop. So by default, it correctly uses the linear animation timing, which is perfect for this type of rotation animation. Then it rotates on itself 360 degrees. The only thing that I'm going to change is the timing. So I'll set 60 seconds for time. And there you go. You have a really nice loop animation for that circular text. Let's quickly play with the last one, which is the drag effect. I'm going to open the card, then focus on the cards inside video. Then I have two tickets. So let me select these two and I'm going to make them dragable. So I'm going to go to inspector, effects, add drag.

Again, we have really nice default values, meaning that we can move freely and it's going to snap back when we release the card. This time is going to use the spring animation, which is really good for physics based animation. And in this case, when we're dragging something, it feels more tangible and therefore the spring animation is fitting. There's just one last step is that we need to set the overflow for the main card to be visible.

Otherwise, it's going to cut off. Also, make sure that every container, including the cards container and the video container has also overflow visible. In this case, the video has hidden, so I'm going to change it to visible. And voila, I'm able to drag and when I release, it comes back. Then it does this bounce animation. As you can see, it's so incredibly easy to add a peer animation, hover animation, press animation, as well as drag. And on top of that, we played with the loop animation using effects in Framer. So I hope you found this useful. In the next section, we're going to work with the scroll interactions, which are really awesome as well. So I'll see you in the next section. In this section, we're going to learn how to create a parallax effect using scroll interactions in Framer.

Specifically, we're going to use the scroll speed, the scroll animation, as well as the scroll transform. This is going to be a fun one. So let's get started. Now, scroll parallax is extremely common on a lot of modern websites such as the Framer site or the Apple landing pages. And when you have a small website like this one, and when you don't have a lot of content yet, one thing that I can suggest you to start with is to set the canvas with a padding bottom of 1000. So this is going to allow us to test our scrolling, even though we don't have a lot of content. Parallax works really well when you have front elements and background elements that is going to move at different speed. Think of it as when you are in a moving car, you look at the landscape and you will see that objects in the background, such as the mountains, are going to move slower versus trees in the front will move faster.

So we're going to replicate this effect, which means that we have these two floating progress rings that are going to be faster. And then the main card kind of in the middle, then you have the background element, which is the main UI that is going to be moving slower. First of all, we're going to select these four elements, and we're going to add a scroll speed. Now, all we need to do is to change the values for each of those elements. So with this window open, and with the background browse app as the baseline speed of 110, I'm going to switch to the main card and set it to 115. Then I'll select the score and progress ring and change to 120. And that's it.

With this, you're going to have your parallax effect. Now, keep in mind that the preview in Framer might be slower compared to testing it on your browser. Next, we're going to play with scroll transform. It's important to note that when you have elements that might have multiple effects, it can really break your animations. So that's why you want to avoid having too many transforms on the same element. And in this case, I'm going to apply the transforms on the columns of my UI. Let me select this content, and we have three columns right here. I'm going to select all of them. And then I'm going to go to effects and select scroll transform.

Here, I'm going to set from, then change the scale to 0.9. And I'm going to add a 3D perspective by using rotate 3D. And when you do that, you can use a 3D perspective exactly what we would have with CSS. And you're going to change the different axes. In this case, I'm going to change the x-axis. Finally, I'm going to go back and add a transition with a default spring. And that's the only option that I have anyways. I'm going to test this. As you can see, when I start scrolling, it's going to transition using transform. It has a little bit of 3D, and again, it's going to be a lot more performing in the browser.

It's also good to note that with scroll interactions and transforms, sometimes you want to activate it earlier. And it also depends on where you are inside the page. So when you're at the top, it might not activate as early as you want. So you can definitely play with layer in view. When I do that, you're going to see it's going to finish its transform much earlier as I scroll. Next, we're going to work with scroll animation. But this is very similar to the appear animation that we had. The only difference is, appear is going to always appear regardless of where you are in the landing page. It could be hidden or not, and it's going to play the animation right away when the page loads. So typically, you're not going to use appear animation when it's not visible right away as you load the page.

However, as you scroll the page and you want to activate something like appear animation, but only when you see the element, then you're going to use scroll animation. So as a result, it's not a good idea to apply scroll animation at the top of the screen on the elements that we have right now. Now we're going to go to the Figma file and we're going to bring a new section. You can find that below the hero section, and this time we're going to copy the entire section. So I'm going to forward slash Figma to HTML and it's going to copy over 400 layers. So because I have everything set up properly in the past with adaptive layout, now I have my desktop and I can just select it and paste.

And voila, I have the second section almost perfectly rendered. The only thing is because I'm pasting the entire section and I work with a different resolution, I think it would be a good idea to change my default resolution for desktop to 1440. And I'm going to just move that a little bit to make it cleaner. Keep in mind that you can always go back to the framework template and then find the start for steps. And these are already copied and pasted from Figma.

So back to our project. I'm going to deal with the UI issues a little bit later. For now, let's focus on the scroll animation. Let's start with a very simple scroll animation in the step section. So I'm going to select the content in steps and then I'm going to go to effects to add one for scroll animation. This is already set to layer in view, which is great because I don't want it to activate when it appears or when I start scrolling. I only want it to activate when I scroll and then it reaches to a point when this is visible in my browser. So I'm going to go to enter, then I'm going to set the opacity to one, scale to one, rotate 3D using the X value to 10, and then the offset to minus 100. For the transition, I'm going to change to easy now and I'm going to set the time to one.

So now I'm going to preview and you can see that the animation is only going to apply when I scroll to the element. Now let's open the flight UI and here inside UI, I'm going to select the three rows and I'm going to animate them using scroll animation. Let me select all of them at once. Then I'll go to effects, add scroll animation, layer in view, effect, opacity zero, scale one, and then Y 50. The spring animation switch to ease and this is where I'm going to use a delay. Similarly to the appear animation, I'm going to set to delay 0.1 and then select the second element, change that to 0.2, 0.3. Now when I do that, I have this really nice appear animation with a different delay on subsequent elements. While we're here, we should definitely add some more transform animation in the steps section. So I'm going to select UI and score. Then I'm going to go to effects, scroll transform, then I'll set to layer in view, the from effect set to opacity one, scale 0.9 and 3D set to X 10.

Then I'm going to select just the score and I'll change the scale to 0.8 and the X to 20. So I just want to make sure that because of the size and the perspective, I want the smaller element to fit in the 3D space compared to the bigger element. So as a small tweak, I'm going to change to offset 50 and then I'm going to select the score and UI again.

Then I'm going to add a transition with a default spring and this is great. So at this point, I want to discuss about how to fix the elements that we imported from Figma. We have a few issues, including the backgrounds and this is caused by the background blur. In the styles, if you have a background blur and there's no fill, it might work differently compared to Figma. So I'm going to remove the BG blur and also I'm going to remove the shadows. Next, let's take a look at this layout here. In Figma, we had the wrap layout. So this is not going to set by default and as a result, you're going to have to go to layout and set wrap to yes.

Furthermore, the element inside in Figma, I had a min width. So in this case, it's going to need a width in order to use the wrapping properly. So I'm going to set to 150 and I can arrange the size to make sure that it fits. Now for the floating element, so position absolute inside the stack, you're going to need to set that manually as well. So here I'm just going to center within the UI. Now for the icons, I'm going to have to copy to SVG individually from Figma and then paste here. So when you have everything fixed, including the icons, I'm going to paste from the template and it's going to look a little bit like this. So the icons are fixed, the layout, the background blur and the wrapping. Next, let's repeat the steps that we've learned to make our layout adaptive for tablet and mobile as well.

Let's start with the cutoff here. I definitely recommend that you try to fix everything yourself first and then you can compare to the steps that we have here. To fix this cutoff, we're going to go to overflow, visible. We're going to make every section to be a stack. So right now it's using constraints, so I'm going to add a layout and it's going to break the distribution of the elements until we go to the blur and then we set the type to absolute. So I'm going to center the background, then I'll make sure to put that in the background. Let me just zoom back. Next, my flight UI here should not be part of the content and that's because it's floating. Sometimes it can be cut off, so a good idea is to change this one to position absolute. And therefore, when I select the steps, I'm going to align the content to be start, so on the left side instead. Now for tablet and mobile, I need to make sure that the width is filled.

Now let me add some padding to make it brief. So I'm going to go to padding and set it to 100 and then to the specific paddings and for top, I'm going to set to 140 and for bottom, 140. Now make sure that the height is set to fit content. At this point, I want my flight UI to have some constraints from the left side. So I'm going to change instead of right, setting to left and change it to 750. Then I want to make sure that the padding for tablet and mobile are going to be less than desktop. For tablet, I'm going to set to 40 right and 40 left. For mobile, I'm going to set it to 20, right, 20 left. Next, we're going to go to content and we'll make sure to use the fill and max width trick so that we can avoid having too many overrides.

So I'm going to set width to fill and set a max width to 580 pixel. Like this, my content is going to fit nicely for the mobile version. Now I just need to make sure that the title and the content inside is not going to have a fixed position. This can happen a lot of time when you import from Figma. So let's set it to fill and likewise for the content, I'm going to select them one by one and set this to fill. And likewise for the container, which is called features, I'm going to make sure that it's also filled. So your final result should look a little bit like this and everything is going to fit nicely. It's just going to grow vertically. Then we just need to select the title and change the size to 44 for mobile.

Now for the background blur, as I mentioned before, you can just reuse the gradient and then I'm going to go to steps inside desktop and replace the blur. Make sure that when you replace, set back to position absolute and then center it. In this case, I'm going to make it a little bit bigger by using option shift to make sure that I'm always resizing using a perfect square.

Another shortcut that I find useful is option L to minimize every single element and it's going to keep your layers panel much cleaner. So this is the final result of our effort so far. As you can see, we have the scroll speed parallax. We have the scroll animation as well as the transform and it's just super smooth and it makes your website stand out amongst a sea of websites that are so similar. Now in the next section, we're going to learn how to make an element sticky as you scroll. But also, we're going to work with scroll variants so that when you scroll, so that as you scroll, it's going to activate the second or the third part of the features element.

So I'll see you in the next section. This is going to be fun. We're going to learn how to apply a sticky element so that when we scroll, you can see that it stays here and then we can change the content. And also, we're going to learn about scroll variants so that we can switch between these variants inside this component here. A lot of useful techniques, so let's get started. In Framer, we're going to set the sticky element. Now I'm going to select this part of the step section, which is the content, and I'm going to make it sticky. So I'm going to go to position type and I'm going to set it to sticky. Then I'm going to set the spacing from the top when it sticks to be 140. Now for this to work, a few things need to happen. First of all, every parent container of this sticky element must have in styles and overflow to visible. So for the step section and also for the desktop. And so for desktop, I will also set the visible.

Then just as important, we need to make sure that the step section has enough space for us to scroll. Meaning that the direct container in which the content is going to stick depends on that parent container and not on the desktop. So it doesn't matter how much space that we have to scroll in the desktop. What matters is the height. What matters is the height of the section, which is the parent container of the content that is sticky. So let me select the steps and then I'm going to go to height, then set to 2000. As a result is going to align it to the center and instead I'm going to go to align and set it to the top. Again, these icons are really crucial to understanding alignment versus distribution depending on the direction. So if you play this, you should be able to see a sticky element as you scroll until it reaches the size of the section. So in this case, we have set a 2000 height. As we set the overflow to visible for desktop, it's going to introduce some new issues.

For example, now any element that exceed that size of the screen is going to show and it's going to introduce the horizontal scrolling because it's not going to cut off anymore. As a result, anything that exceeds the size of the desktop will have to have its own parent container. So in this case, we have the flight UI and so we're going to create a new frame inside steps and this is going to be position absolute. Then I'm going to set a zero constraint on all sides. Now let me remove the background and let me make sure that the overflow is hidden. With this, I'm going to rename this to background and I'm going to put the flight UI inside that frame. As a result, you can see that it's masking and when I preview, I don't have that horizontal scroll anymore.

I will also align my flight UI to be at the top instead. So I'm going to set the top constraint to 130 and write minus 300. I'm also going to put the gradient inside background and then align that to the top. Next, let's create the scroll variance so that when we scroll, it's going to switch between the first title, then the second and the third. Let me open the content and this is where we have the features. So I'm going to select the three content elements and then command K and I'm going to create a component. Let's name this list and it's going to automatically create the container for us, which is the variant one. And now we just need to create two more variants. So variant two and then variant three. Let me zoom out and I'm going to apply the same styles as variant one, but for the second text. In this case, what I'm using is opacity. So the inactive titles will have opacity 0.3 and the active ones will have one. Now selecting the two, I'm going to set to opacity one and selecting the first one.

Let me set it to 0.3. Let me do the same for variant three. And there you go. Now I'm going to exit and I'm going to set my scroll behavior. So in order to make this happen, you have to select that component and add an effect called scroll variant. Here I'm going to select section in view instead of layer because I want the whole section to trigger the component change. Now let's go to section. As you can see, we cannot select any section and that's because we haven't set them up. I'm going to close this and I'm going to set my sections. In order to do that, I'm going to select my steps. Then I will plan how I'm going to divide my sections. So essentially any element can be a section. For example, the steps itself or as we divide the steps, we're going to want three sections for the scroll variants.

So right now the height is at 2000. So we're going to change that to 3000 instead and we're going to divide into three sections, which means that each section is going to have a height of 1000. Now the first section is going to be the content. Let me select this and then I'll go to the scroll section in the inspector and add a name for section one. I will create two new sections by using a frame. I will create two new sections by using a frame. Then I will move this outside of the background and move this after the content, which means that the direction of the step should be vertical and not horizontal. And then back to my frame, I'm going to set 1000 width and height 1000.

Let me remove the background. And then I'll go to the scroll section and add name section two. Let me duplicate it and change to section three. So these frames alongside with the content will be used as a trigger for the scroll variants. Now going back to the content, let me go to the list and change my scroll variant effect. And then where it says section, I'm going to choose section one to variant one. Add another section, section two to variant two, section three to variant three. Just one last thing to adjust. It's the viewport. So the section will activate when you reach the top, middle or bottom. It's probably going to work best in the middle, but depending on your layout, feel free to adjust. I'm going to play this. And as you can see, when I reach roughly in the middle, it's going to activate the second variant.

And at the bottom, it's going to activate the third one. Again, feel free to play with that alignment to see what works best with your design. Before we go, let's add a little falling star to our variants to make it more fun as we scroll. So here inside variant one, I'm going to create a frame. Then I'm going to set the width to two, the height to 76. Then I'll change the constraint to top four, left minus 12.

Since this is outside, it's going to be hidden. I'm going to make sure that the variant container is going to have overflow visible. Now going back to my frame, I'm going to scroll down to the styles, set a radius of one, and then change the fill to have a gradient. This is where I'm going to put white, 0% to white, 50%. And there you go. It's a very simple falling star. I just need to make sure that it's going to move when I change the variant. As you can see, when I add it to the first one, it's going to add to the other ones as well. I just need to change the position. For the second variant, I'll change the top to 128. And for the third one, to 50. Let me exit this and let's see how it looks like. So as I scroll, it also moves with the star, which is really cool. Let's fix some of the layout issues for tablet and mobile. First, we're going to select the flight UI in tablet. We're going to change the constraint from the right, remove the right one, and set the left one to 700.

For mobile, I'm going to set the left to 320 and remove the right one. So again, it depends on your UI and how you want to arrange it. Then we're going to take a look at the list from the desktop. Right now, you can see that the width is fixed. So I'm going to change this to fill instead. Focusing on the mobile, we do have an issue where the container doesn't grow based on the content. And the reason why is because when we created this variant, we didn't set the layout.

So let me go to the variant. I'm going to set the container and add layout instead. I will change my direction to be vertical, then set my gap to 40 and change my height to fit content. Now let me select the star and we want to make it float inside a stack. So we're going to need to change the position type to be absolute instead. Let me set the top constraint back to 4 and the left constraint to -12. Making sure that the following star aligns well with the text. Now I'm going to exit and voila, it's fitting nicely for mobile as well. In just a few steps, we managed to apply a sticky element within a scroll. And we also have a variant that responds to the scroll section and we managed to make it work for mobile as well.

In the next section, I want to show you how to add that beautiful earth and interactive stars in the background, along with a 3D embed from Spline. It's going to look really cool. So I'll see you in the next section. We're going to learn how to add an awesome earth background with these interactive stars and also with a custom cursor. Now this earth is interactive. It's part of Framer Supply which means that it's free to use and you just need to copy the component. And on top of that, we're going to learn how to embed a 3D asset from Spline.

So this is also fully interactive and absolutely beautiful. So let's get started. This is our step section where we have the scroll variants and we have quite an empty space here where we can put beautiful backgrounds that are interactive. And thanks to Framer, it's going to be really easy to do so. So the first one that we're going to add is from Framer Supply and it's the globe. It's really popular, customizable and it's absolutely gorgeous. So I'm going to copy this and go back to Framer. Now in the steps in desktop, I'm going to paste that.

Let me zoom in and at the beginning, it's very small. So I'm going to change that to 800 by 800. Let me set the constraint. So I'm going to center vertically and also I'm going to align right which is going to automatically set my constraints. So right zero and then I'm going to go to the globe and I'm going to customize it. First of all, you can make the backdrop completely transparent. It's going to make it look better with any background. Now I want my globe to have a little bit more opacity, so 0.5. And then I'm going to change the glow to be using roughly a dark blue. Also, with this globe, I have so many options that I'm not going to play with all of them, but you can play with the positioning, with the diffusion and also the amount of sample. In this case, I actually want to put it to the maximum and I think it looks really good like this. Let me adjust the diffuse to five as well and then we're ready to add the particles.

So let's go back to Framer Supply and then we're going to scroll down to the particles and copy it. It's not obvious right now, but you can use stars instead of rainbows. So let me copy this inside the background just like the globe. Then I'm going to go to Vertical Alignment, set to a width of 100% and a height of 1000. Now this is where I'm going to go to the particles and I'm going to set my background to black as 0%.

Then for the size, I'll set it to 0.5. Now we have something. Again, you can customize so much more in terms of density, opacity and so on. And that's it. Thanks to the power of components, I have a really beautiful background that goes really nicely with the globe. Now because the globe is interactive, you're going to need to put that in the front, which means that the particles should be in the back.

And also as you work with third-party components, it's possible that the preview is not going to work perfectly on top of the fact that the performance is not the same. So let's test it in the browser and you're going to see that I have my beautiful Earth with just a few steps. And this is completely interactive along with the particles that follows the movement of the mouse. So this is really awesome. Let's experiment with custom cursors. I'm going to select the particles and here you're going to see next to styles a cursor. And I'm going to add a web cursor.

Just make sure that your current element does not already have a cursor. For example, this globe here already has one when you drag. Now currently this is for the particles. And so I can change to any of the web cursors and I'm going to choose the move cursor to indicate that I can affect the stars as I move. But again, feel free to choose any that fits your design. Now you can also add custom cursors. So let's select the globe. As I mentioned, the globe already has a web cursor when you drag. But I can add a custom cursor next to it. So let me click on custom cursor and here it's going to ask for a component, which means that I can use the button, for example, and I can select which variant it's using and I can also make it follow instead of replacing.

So let's do that. With this option, you have the positioning, the alignment and the offset. As you test your website, you can see that when I move and then when I go to the globe, it shows the component that is moving on top of the cursor that comes with the globe. So this is pretty cool. And of course we can change to any component that we want. So let me create a component real quick for my cursor. And I'm going to copy this one using the Framer plugin in Figma. Back in Framer, I'm going to paste the element that I copied from Figma. And then I'm going to create a component.

Let's name this one cursor. Now I'm going to keep it like this and then exit. We don't need this here. It doesn't need to be present anywhere in the UI. So I'm just going to delete it and go back to my globe. And this is where I'm going to select the custom cursor and change my component to be the cursor instead. So again, we have follow and then we have the alignment. And on the website, we have this awesome cursor which comes from the component that we just created. It's no secret that Spline is one of my favorite tools. It's easy to use and it reminds me of Figma. You can create really awesome backgrounds with it. They have a community with amazing files that you can use for your project as part of the background of your website. To use this Spline background, it's really simple. You can remix any file or take any 3D from the library. Create your own or start from scratch. Now the one that I'm going to use is in the community.

You can search for it using particles. And it's this one created by Jeff Insam. And then you can just remix it. This is going to go to your files. Once you're inside the 3D file, you can play to see how it looks like as a background. And then once you're done, you can export using your own URL. And you can copy the link and bring that to Framer. So back to my Framer file, I'm going to select the background and I'm going to insert Embed. And here I'm going to select Embed. Then using this element, I can enter the 3D embed from Spline that I just copied. So when I press enter, it's going to play that 3D background. Now this is the one from the community, but I also customize it using an F. It takes just a few minutes to do it. If you know a bit of Spline and a design code, we actually have three courses already made. And so you can follow them to see how to use Spline so that you can customize your 3D from the community files.

Now I'm going to take this element here and cut it. And we're going to bring that to the background. So select the background and then paste it. And here I'm going to set it to 800 by 800. Then I'll use the alignment to align to the right and to the bottom. So if I scroll down a little bit, it should have its own space. And it should also set the constraints automatically for me. And really that's all you need to do to embed a 3D background from Spline. Before we finish, I just want to fix the adaptive layout for the tablet. So for the flight UI in the phone, I'm going to set it to 390 instead of 320. Also for the globe, I'm going to set for the phone to be relative at 100%. I'm going to do the same for the embed for the phone. So again, 100%. Now we're ready to publish it. And voila! In just a few simple steps, I was able to add an awesome interactive globe, a custom cursor, and also the particle background along with a 3D Spline asset, which is also completely interactive.

And all of this is adaptive. So everything works just nicely even for mobile. I hope you found this useful and you had a lot of fun. In the next section, we're going to learn about the grid layout and the bento style. So I'll see you in the next section. Today, we're going to learn about grid layouts and bento layouts in Framer. By now, you must have seen a lot of grid layouts in the past. They're pretty much everywhere and they usually have rows and columns roughly at the same size. But recently, there's been an emergence of bento layout inspired by the Apple presentations on websites such as Framer, Linear, and of course on Apple.com.

And there are many presentations. So this is all using the grid layout and we're going to demystify the technique behind it. Let's start with the Figma template. And we're going to copy the feature section and play with it. So let's copy using the Figma plugin for Framer. In Framer, we're going to create a new page. And here, I'm going to select the desktop and then paste from Figma. Now, it's going to have some issues. So we're going to take a look at that. Also, we should make sure that the background is black because we're designing in dark mode. Now let's go to the layers list and I'm going to select the desktop.

Let's make sure that it's about the same size as the canvas in Figma. So 1440 by 1440. Then I'm going to open the features, select the background, and here we have a problem with the position. Right now, it's set as relative, but it should be absolute. Now let me set the constraints to zero from all sides. And right now, you can see that the features is using a layout and it's set to fit content. And for now, I'm going to make sure that the overflow is set to visible. Likewise for the background, because we have a cutoff, I'm also going to set it to visible. Also, even though the background is set in the back, it's using position absolute, which means that it's going to be on top of the content.

To avoid that, we're going to set the zindex to zero. It's still in the way of the selection of the layers. So it's going to be really difficult to select elements. So we should definitely go to background and command L to lock it. Now I can select the layout container. Now let me zoom in and I'm going to change the layout to wrap. So that is going to be the same as in Figma. So let's set the layout wrap to yes and we're going to center it by using distribute center. Now, as you can see, even though we're not using the grid layout, we're still able to use the bento layout without using grid.

However, it's not going to be as adaptive as we want. Every single element needs to be perfectly sized with a fixed width in order to fit nicely inside a grid. But if you're using the grid layout, it's going to be a lot more automatic. And I'm going to set it to grid instead. And now you can see that every card is going to fill the space. And if I change the width of my container, which is the layout, I'm going to set it to max width 1000 and the cards will automatically adapt based on the container. So as I resize the grid, the cards will fit nicely within a system of columns and rows. I can also create more columns or less and it's going to follow that system. Now, if I didn't have the grid system and I wanted to resize, you can see that it's behaving very differently. So let me put it back to grid and set one of the column to take more space or less space.

In order to create the bento layout, all we need to do is to select one of the cards and go to the size span. And this is where you can set it to take two columns or two rows. In this case, I'm going to set it to one row and one column. However, you're noticing that even though I want to set it to two columns, it's going to take the entire space. And the reason why is because the container itself needs to have its own limit of columns. So in this case, let's say I want to have one third for the first column and two thirds for the second card.

Then I need to set my layout to have three columns. As a result, I can go to the second card and set the span to two columns. And voila! I'm going to go to the third card and set columns to two. And that's the magic of bento layout. Now let me just put it back to 100%. Now let's see how this looks like for different breakpoints.

I'm going to go to the breakpoint and add a tablet as well as a phone. Let me go to the desktop as a priority. Here you can see that the section is definitely too large for all of the breakpoints, which means that there is a fixed size somewhere. I'm going to select the features in desktop and here we have the culprit, which is the width fix. And I'm going to set it to relative 100%. Now looking at the padding, we have 200 top and bottom, but we have zero on right and left. So we're going to set it to 40 instead.

And furthermore, the layout is not taking the full space of the canvas. So I'll make sure that my desktop is going to set a height of fit content. Now that looks much better. Now for tablet and mobile, we have less space, therefore we should have different paddings and gaps. So I'm going to select the features in tablet and here I'm going to set 30 for left and for right. And for phone, I'm going to set it to 20. Now for the layout itself, I'm going to set a gap of 30 for tablet and for phone, a gap of 20. However, it's very common for the mobile version to switch layout. And in this case, we should just use the stack one and spread vertically instead. Next, we're going to take a look at the text. Oftentimes when you import from Figma, a lot of these elements will have a fixed size and therefore despite our best efforts to make it adaptive with a width of 100%, if the inner elements use a fixed width, it's not going to be better.

So in this case, we're going to set the width to fill. However, it's going to be too big. Therefore, we're going to set a max width of 800 pixel. Then I'm going to select all of these texts inside the cards. This has to be in desktop and I'm going to set the width to fill. This should be growing nicely. Awesome. We're going to fix also the title here, which has a fixed width. So I'm going to set it to fill instead. And for the title in mobile, it's a little bit too big, which is very common. So I'm going to make it much smaller to a standard iOS size of 34. Then for the icons inside the fourth card, I'm going to set the wrap to yes.

Because when you use wrap in auto layout in Figma, it's not going to keep that feature in Framer. Finally, we're going to fix the title image right here called lines. And this is supposed to use position absolute, but also oftentimes when you work with vectors, even though it was a frame in Figma, it's going to turn into a graphic. And a graphic cannot have position absolute. We're going to have to put this inside a frame, so command enter.

And then we can change the position type to absolute. Now we're just going to position this properly by selecting the frame again and then moving up shift up arrow three times. So by 30 points. Then let's also fix the alignment of the content. Here I want this to not have an empty space at the bottom. So I'm going to push everything by selecting the container and changing the distribute to space between. So this is going to ensure to push the content from the gaps. Then we're going to try to align some of these inner elements inside the card to be centered across the different breakpoints.

For example, the phone, I'm going to set it to center. Then selecting the play, I'm going to center from the middle instead. Likewise for the symbol, I'm going to center from the middle. So it's going to follow the alignment of the middle, which is the phone, and adjust accordingly depending on the available space. Now I'm also going to fix this avatar here and make sure that you're selecting the image. And then I will simply center it vertically and horizontally. Sometimes it's going to set the wrong constraint so we can just select from the middle twice to make sure that you have this circle here. And that's it. This is definitely an opportunity for you to learn about the different layout options and play with the design elements.

For example, this card, even though it's working for desktop, it doesn't push correctly for tablet. So you can select the desktop one and use distribute space between. It's also a good idea to test your layout. So let's do that and resize. And here we can see an issue where the card is not using a fill width. So this is going to be a very quick fix. So I'm going to go to mobile, select all the cards and change the width to fill. And there you have it. This is your bento layout using grid and it's fully adaptive for mobile, tablet and desktop. Now in the next section, we're going to work on the hamburger menu for the mobile experience. And we're also going to add an overlay menu along with the icon animation that comes with that menu. So I'll see you in the next section.

In this section, we're going to learn how to create a hamburger menu in Framer. Now this is a menu that is going to activate when you reach the mobile size. So you're going to find it in the top right and we're going to learn about icon animation and how to apply an overlay. It's a really useful technique and a lot of websites use it. So let's get started. In Framer, we're going to create a new empty component. Now make sure to not have anything selected. And we're going to do option, command and K to create a new component. We're going to name this one hamburger and then create. With the component selected, we're going to change the width to 32 by 32. Then I'll remove the background to make it transparent and then I'll zoom in at about 800%. Let's create a frame and the size is going to be 16 by 2. Now I'm going to set the corner radius to 1 and I'll change the color to white.

Then I'll duplicate using the option key with the distance of 5. I'll do it again to the bottom with the distance of 5 as well. Now this is where we're going to set a new variant by selecting the first variant. Let me zoom out a little bit and click for the second variant. And so between these two, they're going to use the same layers. And then we're going to create a transition and it's going to animate between 1 and 2. So we'll make sure to turn variant 2 into an X, which means close. So we're going to scroll down to the styles and rotate by 45 degrees. Then make sure to use the alignment to center it. We'll do the same with the third one and set a rotation of -45 degrees. And then we'll also center it both horizontally and vertically. For the line in the middle, let's set the opacity to 0% and also set a rotation of 45. Next, we're going to create the interaction and transition.

So selecting the first variant, we have this little icon which looks like a bolt. So I'm going to click on it and drag to variant 2. This is where I can set my interaction and I'm going to set to tap. Then I'm going to do the same from variant 2 to variant 1 using the tap interaction as well. So here you can preview the animation between the two using the interaction. So if you do it correctly, you should be able to see a very neat icon animation. Now that we have our hamburger menu icon, we can implement that to the navigation menu. The navigation menu is part of the last UI that we created and right now it's not a component yet. So with the menu selected, I'm going to do option command and K to create a component.

Now with this component, I'm going to create a new variant just for mobile. Now we're going to resize the width of the variant 2 to 390. This is definitely going to break the menu. And what we're going to do is to make sure that we hide the menu and keep the logo. So I'm going to go to styles and set to visible no. Likewise for the buttons, I'm going to use the lead key to hide it.

Just make sure that you're inside the variant and that you're not removing it completely. So now I can go to assets and this is where I can drag and drop the hamburger menu that I just created right in my mobile menu. Awesome. Now it's time to create the overlay menu and it's more simple than you think. So with the hamburger menu selected, we're going to go to the inspector where it says overlay. I'm going to click on it. Now I'm going to take a look at the options, including the position and the alignment. I'm going to set to right and the offset to 20. Here I wanted to make it clickable so that when I tap on the icon, I'm going to summon it.

And when I tap outside or on it again, it's going to dismiss it. One last step is to go to the overlays where it says unopen. I'm going to set to variant 2. Now we can preview just this menu. When I tap on the icon, it's going to open the overlay and when I tap it again, it's going to dismiss it.

It also works when I tap outside. Now we're going to work with the design and the styling. So I'm going to go back to layers and this is my overlay design. I haven't prepared the design in Figma, but thankfully I have a bunch of designs that are available in Framer. So I'm going to take the dark mode version, select the menu icons, and I'm going to drag and drop directly into the menu. So at this point, you might need to realign it again. So I'm going to set it to right align and Y position to 20. At this point, the goal is to set the same menu items as what you had in your navigation menu. So I'm going to set this to product, teams, change log. Then for the icon, again, I'm going to use feather icon, then drag and drop into my menu item. Let me remove the previous one and then change the size to about 20 by 20.

Let me go to the style, including the color to white. Then I'll copy the icon and paste it into the other menu items. I'm going to move it to the left and I'm going to remove the previous icons. Then I'll change the second icon to globe and the third one to list. Feel free to use what icons works for you. One important skill that you learn as a UI designer is to know how to adapt different designs into different styles. So you'll understand what makes it more consistent. You'll keep in mind a lot of the same styles, colors, outline, gap values and so on. So in this case, we like to use roughly 20 as a gap and so we'll make sure that the height is set to fit content. Then for the colors, we're going to go to fill and set to white 10%. For the border, we will also set to white 10%. Now we have a style that fits nicely to the dark mode design that we have. I'm also going to change the padding to 20 and I'm going to set the width to 180 to make sure that the text is going to fit, even if it's a little bit longer.

Then we're going to deal with the animation. So as you can see from this icon here, this means that we do have an animation and so we're going to go to effects and we have an appear animation. Right now it's only using fade in and so we're going to customize that. Click on enter. Then we'll set the scale adjustment to 0.9. Now if you want to preview it as we work, we can do so as well. We can set the opacity to 1 and then I'll change the rotate 3D using x20 and then y-20. So it creates this super nice perspective. I will also use a y position of -20. Now another thing that I want to add is a background blur to my menu. It's going to still be readable on top of any content. And when you work with background blur, especially with transitions, you want to avoid the spring animation. Instead we're going to use easing out. Perfect. Now I'm going to add a style and in this case I don't see the background blur option.

So what I'm going to do is to go to the plus sign and this is where you're going to find extra styling options, including filters and here we're going to select BG blur. Then I'm going to set a blur of 10. One final thing that I should do is to set back my opacity to 0. One more thing that I forgot to adjust was the dismiss option. It should be set to click. So I'm going to play and now I have my super nice animation. Now that my menu is done, I'm going to rename my variants so that I don't get confused. First let me exit and for variant 2 I'm going to rename this to mobile, variant 1 to desktop. Then I'm going to exit and then zoom out, find the menu for the phone and when I select my menu, I'm going to change the variant to mobile. And that's it. I was able to create my hamburger menu with icon animation.

Now when I resize and I get to the mobile resolution, I can see that the menu appears and I can tap on it. It has this super nice animation along with the background blur and I can have the same menu items as when I was in desktop. In the next section, we're going to learn how to create code components so that we can add CSS styles and react code using style components and we can copy CSS code directly from Figma and apply some really custom styles to Framer. So I'll see you in the next section. In this section we're going to learn how to make a super simple code component so that we can apply custom CSS code copied from Figma in just a few steps. Looking at the design provided in Figma, you will notice that in Framer, not everything is possible as we've learned by copying items from Figma to give you some examples, the outline gradient or the custom hexagon shape with a background blur.

Now code components are there to fill the gap so that we can create really custom components using CSS and react. Since it's a react component, you can essentially put any HTML code as well and use Framer motion to animate if you wish to. But in this lesson, we're going to focus on very simple CSS code that you can copy and paste directly from Figma. Now the first thing we need to do is to copy the customer's section and then we'll try to implement that in Framer. In Framer, let's go ahead and create a new page. We'll name this to Customers and then change the background to black. Then I'll set the same size as in Figma which is 1440 by 1440. Now let's go to the Layers list and then paste the design from Figma. Here we just need to make sure that all the absolute positioning within a stack is set appropriately in Framer as well. Let's select the background and set to Position Absolute with a Z-index of 0.

Then I'll go to Content, select the hex cons and set to Positions Absolute and I will center within the frame. Likewise for the background, I'm going to Center. Now that we have the basic layout imported, we're going to fix the rest of the styling later. But for now, let's focus on the hexagon. I'm going to recreate this hexagon. Here you can see that the shape became a graphic. And because it's a graphic, even if I set a background blur, it's going to apply to the entire rectangle and it's not going to be masked by the hexagon shape, which is essentially what I want. So let's remove this and let's create a code component. To create a code component, we're going to do Command + Shift + K. It doesn't matter if you have anything selected. We're going to name this component "hexagon" and then "create". When you do that, it's going to switch to the Assets tab and it's going to create a new file called "hexagon.tsx", which is a TypeScript file.

It's like JavaScript but a little bit stricter. And here you have some sample code. You can play with it. The gray part is a comment, meaning that it's not actual code. It is here to give explanation or instructions. And then you have the component as well as the style. Most people are familiar with CSS, but this is a different way to write CSS. And it can be a little bit difficult for beginners. Essentially, it's a mix of JavaScript and CSS. And what I recommend to most designers, especially working with Figma, is to use style components because then we can just copy and paste the raw CSS code. So I'm going to show you how to create a code component from scratch. Because I find for beginners, it's a lot easier to understand when you start from the beginning. So if I save this, it's simply going to be empty here. And as you know, we're using React for the component. However, nowadays we don't need to import React. So we can just focus on importing other libraries. We're going to import, so type import, style from style components.

Now we're going to create the component. And essentially we can type function, the name of the component, which is hexagon, parentheses, and curly braces. Then we'll write some CSS code. In this case, we're going to use style components so that we don't have to write that inline CSS, which is very confusing. In order to write raw CSS with style components, we have to declare the actual component. So think of it as creating a div or a container. So const component is equal to style.div, backticks, and inside the backticks, we're going to write the CSS. Now let's write some basic CSS properties such as width, column, 141px for pixels. Then don't forget the semi-column between each line of properties. Then we'll set a height, 148px, and a background of red. If you save this, nothing's going to happen yet because we need to return the component inside this function.

So return, open brackets, component, close brackets. And finally, we need to export this component so that we can use it within the entire project. And in React, we need to do export default before the function. With this done, that's it. This is the basic template for creating your code component. And at this point, you can put any CSS that you want. You're going to be able to use it in your framework template. How amazing is that? At this point, you can go to Figma, select the element, and go to Dev Mode. And here, you can essentially just copy and paste the CSS style. So let's do that for the layout. And I'm going to replace what we have so far and go back to the style and do the same and save.

Now we have exactly the same style that we have in Figma. So you can use any CSS code from any element that you have created so far in Figma and bring that to Framer. For the hexagon here, though, we're going to use a special CSS technique that allows us to use masking. And it's called Clip Path. First, let me just fix the indentation. Selecting the code, just press the tab key twice. And then the CSS property that I'm looking for is Clip-PathColon. And then PathParenthesis. Then Single Quotes. Inside the Single Quote, this is where we're actually going to use code from Figma as well. So let's switch to Figma. And you can see that we have SVG code. Most designers nowadays work with SVGs.

And it's good to know that SVG is simply composed of code. So this is the entire code of that SVG. However, we're just interested in one part of that code, which is the Path code. This is what's going to allow us to draw that hexagon shape. So we're going to select this Path code. Make sure to select from start to the end right before the fill property. And copy that. Then back to Framer. We're going to paste that code inside the Single Quotes. And then Save. And voila! This is our hexagon shape using a background blur.

And again, you can use any CSS property that is not available in Framer, such as different filters. And in this case, Clip-Path is simply not available. Now we just need to bring that component to our Framer design. Let's go to the Layers. And then we're going to select the first hexagon. And opening this frame, I'm going to focus on the shape here. So I'm going to bring my code component by using Quick Action, so Command-K. And I can search for hexagon. Then you'll see hexagon.tsx. You can just click on it, Insert. And there you have it. This is our hexagon using a background blur with a Clip-Path that is masking that.

That's pretty awesome. So let me put that above the background. And let's center it using the Alignment tool to make sure that it's right on top of the other one. Now we could have used a custom CSS for the outline stroke, but we didn't have to because we can just use the existing graphic for that border. And because of that, we can decide to put above or underneath the graphic. I'm going to put it underneath. Before we go, let's fix the adaptive layout for the design. Adding a tablet as well as a phone.

Then going back to the desktop, let's select the Customers. Then I'm going to change the top to 100, right 40, bottom 100, and left 40. Also, let's make sure that the width is set to relative 100%. Then we'll set Distribute to Center. Now for the content, we should also set the width to Fill. And we'll make sure that the content itself is going to adapt. But right now we have trouble selecting, which means that we're going to select the background and lock it. Now we can go to the content, then focus on the elements that are not using Position Absolute. So the title and the testimonial. For the title, it seems that it's using Fit. I'm going to use Fill instead.

And then for the testimonial, I'm going to use instead of Fix, Fill. So this is starting to look great for tablet and mobile, but it's too large for desktop. Which means that we can set the content at max width to 652 px. And then we can select the Customers and change the padding to 30 for tablet, left and right. And then the Customers for phone, 20 left and right. Let's focus on mobile and focus on the title. Here we have a stack with a direction that is horizontal. We're going to set it to vertical and then left align. Now it seems that we have an extra container for the number. So let's change the alignment to left. Then selecting the title again, we can reduce the gap to 20.

Let's scroll down a little bit. And here the text is definitely too large. I might as well change that in desktop and making sure that it's set to Fill instead. Finally, it seems that the lines in the background are not properly centered. So let's go to lines in background and set it to Center instead using the circle in the middle. I can also select the desktop and set it to a fit content for height. Like this, if my content is taller, it's going to accommodate that. Now if you want to learn more about code components and code overrides, I highly suggest to look at their documentation. And here they give you more example and options for creating your code components. In the next section, we're going to learn about property controls. Similarly to the components that we've used so far, including the globe or the particles, we'll be able to create our own options just for this code component.

So just like variables, you're going to be able to add number values, Boolean, colors, image, and so on. It's going to be really useful. So I'll see you in the next section. As you've seen from these custom components, these are actually code components. And they can have their own properties. So we would call this property controls and we can add them to code components. Back to the customers page in Framer.

We have the hexagon code component and here if we go to the inspector, you can see that it has no property control. And I'm going to show you how to add them so that you can make your code component infinitely more customizable. Let's click on edit code. At the very top, we're going to import the libraries that's going to allow us to create those controls. So import curly braces, add property controls, comma, control type from Framer. In this case, it's always a good idea to reference the code component documentation and you're going to see a part about property controls.

And this is where you're going to find a list of properties. And when you click on controls, you're going to find a list of properties that you can use. So what are these? Essentially, you can have an array, so a list, a boolean, so yes or no, true or false, color, date, and so on. In this case, we're going to take a look at the color and it's very simple. So we're going to use the add property controls that we imported. Then we apply it to the component that we declared and then we set the name of the property and we apply the type with a default value. So that's fairly simple. Let's copy this code here and we're going to put that code right at the bottom. And all we need to do is to change the name of the component. So in this case, we're going to apply to hexagon. Now as you do that, you're going to be able to see that property directly in your code component.

It's just that it's not going to do anything at the moment. Because we haven't applied the code to the component. So in this case, we need to somehow edit our component, either the styling and if you know react, you can do way more things. But for now, we're going to start simple. In order to apply the property, we're going to receive the props. Then we're going to apply the props inside the CSS.

I'll keep it super simple. Let's apply to a background CSS property. And so in order to use react code, meaning a dynamic value for the component, because normally in CSS, you cannot do that. And that's why we're using style components so that we can actually use react code inside our CSS. So we're going to apply the variable, which is called a prop. It's going to be dollar sign curly braces inside the curly braces props dot background, which is the property that we created here.

And don't forget the semi column after the CSS property. And now you can see that the white default value is applied. And I can change that from here to test it out. By changing to red, it updates the background to red as well. So let me put it back to white and then go back to my hexagon, which use the same name as the one that I set in my property. And then here, because I can control it in Framer, it's going to allow me to customize directly from the visual interface.

So because it's a color, I can essentially set it to light blue. Let me put the exact code that I want. And I'm going to set also the percentage. And of course, you can use the same features such as color styles, which is really awesome. Again, you can add way more property controls. And I highly suggest to really go to the code components documentation and go to property control. Again, I'm using the same code. So you need to import this first and then you need to go to controls where you're going to find the different controls that you can use, including image, which is really good if you are connecting to an API such as Unsplash or number for customizing the size, the position, the unit and so on. And of course, there's a string which allows you to input a text. For example, the icons that we use from feather icons allows you to change the name of the icon and that use a string.

And also the logo component use a string to search for the logo and apply that logo to the UI. All right, so now we're going to create a component for each of these hexagons. We're going to create a system in which we can reuse them. We can add a hover state. And also we're going to create a list of logos that we can change on all of these components. So first of all, I'm going to select the hexagon and then I'm going to create a component. Let's name it hexagon button to not confuse with the code component and then create. Make sure it's the one where you have the code component. And with the variant selected, I'm going to create a hover state. Now one thing to keep in mind is that even if you use the background color from the code component, it's not going to have the transition by default.

Let me try that. I'm going to set this to opacity zero on the main variant. And then on the hover state, I'm going to set it to 30%. And you will see that it's not going to have any transition. Now a way to work around that is go to Figma and then find the blue hexagon. And then we're going to copy this to Framer and paste it directly to the first variant. I'm going to put this below the company logo and I'm simply going to use opacity zero and then for the hover state set to opacity one. Let me just make sure to center everything properly.

And then for the code component, I'm going to make the blue a little bit more transparent since we have the other one, but I'm going to keep it at 5%. And there we go. We have two layers of blue, one that is using opacity and the other one, which is very subtle that appears instantly because of the code component where we are applying a custom color. Next, we're going to create the company logo component. So let me select that from variant one, create component, company logo and then create. This is where we can have a list of icons or list of logos. This is very useful if you have custom assets like this.

It's definitely useful to name the variant in this case. So this one is going to be visa. Then I'm going to bring the other logos from Figma by using copy as SVG, create another variant, paste it, make sure to name it, then hide the other one. So I'm going to create a bunch of them and fast forward this part. And there we have it. We have the list of logos and we can apply that to the hexagon button. Now this is an asset component and I want to control the variant directly from the hexagon button. So I'm going to go to the variant and set a variable company logo. So at this point, I can just go back to the customers page. And then for each of these, I'm going to copy the main component and command shift V to replace with the component and also change the logo to the appropriate one.

So let me do for all of them. Then I'm going to do the empty ones. And voila, they're all using the component that I just made. And it has the code component as well as the hover state. So that's really cool. So if you publish, this is what we have so far. It's really nice. It's adaptive. It has the hover state, but also it has this custom shape using a code component that has a background blur. So in the next section, I want to show you how to use code overrides to apply some custom animations. And we're going to add some really cool scroll transitions to this hexagon layout. So I'll see you in the next section. In this section, we're going to learn how to quickly use code overrides to apply some basic interactions that already come with Framer by default. So we're going to use their pre-made examples. And I'm going to explain how it works and how you can customize it even more.

So let's get started. The first thing you need to know is that code overrides can be applied to most elements except for the graphic. So here you won't see code overrides. But if you select the frame, for example, you will see it in the inspector. Now I'm going to focus on the hexagon. And because I want to apply to all components, I'm going to go inside the component. So let's double click on it. Instead of using the hover state, I'm simply going to do it using the code overrides. So clicking on the main variant, I'm going to scroll down to find the code override. And this is where you have a file. If you made it from scratch, then you're going to find it within this list. But otherwise, you can always use the examples, which are a great way to learn how to use it. Now the examples, you have three main ones, and they're pretty useful. For example, with hover, it's going to apply a hover interaction. So as you can see here, before we didn't have this scale hover, now we do.

And then we can play with random color. This is going to apply to the background. And then rotate is going to do a simple rotation. So let me put it back to hover, and I'm going to show you what it looks like. So now this file is going to be available in the assets. And I can find that as part of examples.tsx. And here we're setting the libraries, including component type, which we need for code override. ChrisTor allows you to save states for your component. And this is useful, for example, if you create a login, if you want to have some information to be persistent, random colors is from their library, which allows you to randomize a color.

Now for many of you, you might not even use this in the future, but I think it's good to know that it's possible. So let's take a look at the store. This simply means that when we are using the random color, it's actually saving that color. So that next time it's going to remember it. Let's give it a test. I'm going to go back to button. I'm going to change to with random color. And you can see that it remembers exactly the same blue color that we had before. And then we have rotate, which is using frame emotion. Now, if you're not familiar with frame emotion, it's one of the most popular animation frameworks for web applications.

And this can be used on any project, even outside of Framer. And it's used extensively on Framer as well, which means that when you see these custom properties on those components, then it's just the way frame emotion is used to animate. So for the code override call with rotate, it's animating using a rotation of 90 degrees. And the transition, fairly similar to CSS, has a duration of two seconds. But then we have with hover, which is the one that we're using. It's using again frame emotion with a scale of 1.05. Now, this is where as a designer, you will want to customize these values and then experiment with it. Because it's fun and it allows you to expand the capability of Framer for your project. So I'm going to set it to 1.1 and you're going to see it's a little bit bigger.

Now, another thing that I want to mention is there's this line here that might puzzle a lot of people. It's the triple dots and then props. What this means is that it's bringing all of the baggage of the component that already exists. Basically, this means that instead of being an empty component, it's going to have all of the existing properties, such as my hexagon button, it has all of that styling and size and so on. So going back to my hexagon button and you're going to see that the scale is a little bit bigger and you can customize it further. Now, you might be asking, "Well, man, I just want to be able to add some simple CSS that I copy from Figma, sometimes not available in Framer, such as the border gradient." Alright, let's do that. Even though the CSS is a little bit complicated, I can at least show you how to create a simple code override for that. In Figma, we often use border gradient for this style of design and unfortunately, that code is not available directly in the CSS.

So you're going to need to remember what those colors are. Otherwise, if you know CSS, you can search for a solution and you can apply that. But in this case, you can just take my code. Now, let's go through the steps of creating a super simple code override with raw CSS. So one thing we can do is to simply create a frame, 120 by 50, then center it. Let's remove the background and as we know, we cannot have a border gradient. As a result, we're going to go to code override and then we're going to create a new file. This file is going to be a new override called border gradient. Here, we're going to start from scratch. I feel that it's easier to follow.

Then we want to import the style components so that we can have raw CSS. So import style from style – components. Save. Then because we want to use code override, we're going to use import type component type from react. Now, again, all of this code is available in the documentation. Let's go to text content. As you can see, we're importing the component type, which we did. And then we export the name of the code override, which usually starts with width. Then we're receiving the component itself, including its props. And this is of type component type for extra type safety. Then you can apply the properties to it.

So export function with border gradient parentheses. Then we're getting the component itself. And it's going to be of type component type curly braces. Then we'll declare the style component so that we can add some CSS. So const style component is equal to style parentheses component and then back ticks. Now, the reason why I'm writing it this way is so that one, it does not conflict with the component that is received from Framer. But also in style component, you can include an existing component and style on top of it by using style parentheses, the component itself. Usually, as you remember, we typically set style.div or style.button. And we're going to style that based on an HTML element.

But in this case, it's an existing component, which is why we're writing it this way. And at this point, you can just add any CSS code that you want like we did earlier. And then finally, we're going to return parentheses props because we have to use an existing component. That's why it's a code override and then return. So equal sign a right bracket, curly braces, return open brackets, style component, close brackets. Now you can see that there's a little bit more code gymnastics that we have to go through. And this is why I decided to teach you code components first. It's because with code override, you need to include all the baggage of the existing component that you're applying your extra style to. And therefore, we also need to set curly braces dot dot dot props. So with this, the style component takes care of the style and then the component itself with a dot dot dot takes care of the baggage.

Before we get into the complicated border gradient CSS, let's just test with a simple background red. And then we're going to go to file, select border gradient. And this is where we're going to select with border gradient and then play. And you can see that it works. Now we're going to apply a super custom CSS code for border gradient. And I'm going to copy and paste the code. Now, this is pretty advanced CSS code, which is why we're not going to write all of this from scratch. You have the simple part which most designers know. So position border radius padding. And then you have the part where it's a bit of a gymnastic to get the border gradient to work using some masking. And then you have the gradient for that border. In this case, we're setting a linear gradient, an angle and then a color and then the beginning color to the end color.

And then we're applying a different color for dark mode. Let's save this. Now, if we play this, it's barely visible, but the border gradient is right there. Let me just tick it up a notch. Let's change this opacity to one. And then I'm going to go back and voila. And now it's a lot more visible. All right. So I just wanted to show you how to apply a custom CSS. This was totally optional. I'm just going to hide it. And then now I'm going to exit. And this is where I'm going to create a component for the entire group of hexagons. So let's right click on hexagons, the frame, and then create component. And let's name that hexagons. So what we're trying to achieve here is to create multiple designs of these hexagon shapes. And so we're going to create another variant. And then we're just going to have fun moving them around.

[no audio] So this is what we have so far. This is the part where I get a bit of creative and it's not going to have the same design. So now what we can do is to set a hover interaction from one of the buttons. So for example, the visa is going to set mouse enter to go to variant two.

And x is going to a variant three. Then for variant four, we're going to use a simple scroll variant effect. Now we can also make it that when we mouse over again, it's going to come back. And the same for x. Also, I'm going to select all of the variants and I'm going to change your transition to ease instead. And I'll change the time to one second. So let's test this. You can see that everything is transitioning, but the button itself is a little bit fast. So to fix that, we're going to have to go to the hexagon button.

And for the transition, we're going to also set to the same transition of easing out with one second. Now going back, it should be a lot more manageable. And it's really cool. One final thing that I want to set is the scroll variant. So I'm going to select hexagons. I'm going to go to effect and use scroll variant here for layer in view. I'm going to set the start to bottom and from variant one to variant four. So in order to test this properly, I'm going to have to go to desktop. I'm going to change the padding top to 500 and the padding bottom to 500 as well. So I'm going to play this and voila. When I scroll, it's going to change to variant four, but otherwise it's going to go back.

So this is what we have so far. We managed to learn how to create a simple code override, then apply simple CSS. And then we created this awesome hexagon layout, which is animated and also using the scroll interaction. In the next section, we're going to learn about CMS, which is the content management system so that we can add dynamic content that is edited from a control panel. So I'll see you in the next section. In this section, we're going to learn how to use the CMS feature in Framer. The content that you see on this page is actually dynamic coming from the content management system and can be edited by anyone in the team without going manually into the design sections and elements.

So this is far more dynamic and easier to manage in the long run, but also as a team. When working with CMS, it's helpful to know what data that you're dealing with and to do that, we're simply going to look at the design and the posts that are going to be repeated multiple times. In this case, each of these card is going to have its own CMS item. So we have the image, which could also be a component. We have a title and description. That's pretty simple. Now we're going to copy this change lock section from Figma. So copy back in Framer. We're going to create a new page. Then this new page, we're going to name it change log. As usual, we're going to set the size of the design to 1440 by 1440 and change the background to black. With this, I'm going to paste my design and then I'll go into layers. So I'll do some quick fixes such as the background changing to absolute and centering that background. I'm going to set my desktop to a height of fit content.

Let me zoom in and I'm going to select the background and put that in the back. But also since it's position absolute, I'm going to set it to Z index of zero and make sure that the inner elements are also locked. So I can just relock the entire frame and it's going to lock everything all at once. Now let's select the layout because we're going to change this to a grid layout and now we're ready to create the CMS collection. Again, this part can be an image, but in this case, because it's a vector and it has its own layers, I want to make it into a component. So as a field, it's going to be a variant. Now let's go and create the CMS collection. Let's go to CMS and then we'll click on the plus sign to create a changelog collection. Next, we're going to edit the fields. So by default, we have the title, the slug, which is for the URL because when we tap on an item, usually it's going to go to its own page and that page will have a URL.

So the slug is essentially a URL friendly version of that post. Then we have a content and usually you're going to have the text version as well as the rich text version, which can include links, images, and even styling. So let's create another one, which is a plain text called text. And finally, we're going to create one for image. But in this case, I'm going to choose option because that's going to allow me to use a component variant.

Let's select option and change the name to variant and then add variant one, variant two, and then three, and then four. And that's basically it. Once the fields are set up, create a new item. And this is where feel free to use your own content. In my case, I'm simply going to copy from the Figma design starting with the title. And then you can see that the slug is created automatically and it's URL friendly. For the text, I'm going to use a simple text and I'm also going to paste for the content. Now, in the content, I have the option to use the rich text format, which includes styling such as bold, italic, but also you can add links as well as textiles and image, video, and code. So for each one, I'm going to select variant one and then two, three, four. Once you're done, you can just save it.

And now I'm going to create the other ones. And that's it. Once it's created, you're going to have four posts and the variance going to be one, two, three, four. And then we're going to transform that into an actual component variant. All right, now we can exit the CMS and apply that to our layout. So I'm going to go to change log and the collection is going to be on the same level as the layout wrapper.

So I'm going to insert from the collection list and click on it. I can just move this to the change log right after layout. So for now, it's simply going to use some default styling. And then I have the items themselves, which is definitely going to be difficult to recreate all the styling. So I'm simply going to copy the card and select post, then command shift V to paste it. Next, we're going to select the collection list. And then we're going to fix the layout, setting it to the same grid, changing the gap to 20 and set the width to fill. So we have pretty much the same style, except that all of the post items have the same content. This is where we need to make it dynamic. Now let's focus on the first item and then double click until you get to the title. This is where we're going to apply to the content. When you have a plus, that means that you can apply the variable that is already set by the CMS collection.

In this case, I'm simply going to select title, then go to description, again content, set it to text. At this point, I'm going to select the card graphic and then create a frame and put the other graphics inside it. But first I should create a container frame. So command enter, then command shift K to create a component and name it card graphic enter. Here I'm going to create more variants, but first I'm going to set my graphics. So let me go back and copy them one by one. Make sure to copy the entire container for each one.

And then center. And there you go. I'm going to select the other three and command semi column to hide them. Then I'll select the variant one to create three more variants. For the second one, I'm going to hide the first and show the second and do the same for the third and the fourth. And that's it. Now we can go back to change log. We're going to focus on the collection and then go to the inspector where it says card graphic. On the variant, I'm going to set the variable and select variant convert. So here I can set my conditions when variant one set one and have a fallback. I'm going to set more for two, three and four. So two, three and then four. Now you might have noticed that the order is set to the latest first. So what we're going to do is go to the collection list.

And this is where I'm going to set and this is where I can change the sorting to reverse. Furthermore, it's good to know that you can set a filter so that you can match using conditions such as if you want a title to be equal to start with or contain any of the value that you set, then it's only going to show those CMS items.

But in this case, I don't need it, so I'm going to remove it. So at this point, we would like to be able to click on each of these items and go to a detailed page. And that is one of the great advantages of using CMS. So to do that, I'm going to go to pages. I'm going to click on the plus and then new CMS page, change log, detail page. Now you can see that it's going to create the collection detail page inside my change log page and it has the content populated. Now let me set it to dark mode, so the fill to black and also I don't need the text version. So I can delete that and this is the content version as you can see in the inspector. Now I'm going to insert my component called card graphic.

Tap on it and then insert. So let me use the keyboard arrow up to move it to the top. For the title and description, it's already using the heading one as well as the body styles that I said earlier. I'm going to set the breakpoints for tablet as well as phone and you can see it's automatically using the text style breakpoints. I will also change the card graphic to use the variant. So set the variable, variant and convert. And again, I have to set the same condition for two, three and four. So two, three and then four. Let's make sure that the width of the card is set to fill. Now since this is being cut off, it means that in the component, the container, which is the variant one, has an overflow that is hidden. So I'm going to set it to visible. Let me go back and that should fix our issue. Great. Now let's go to pages and then go back to change log. Then go to layers and for the card, this is where I want to change the link and go to the change log slug.

So this is a direct URL that is going to take the item slug, which if you remember, it's a dynamic value that formats the title and make it URL friendly. As a result, when you play this and you go to the collection, you click on it, it's going to go to the detail page. Great. At this point, I'm going to delete the previous one, which is the layout and just keep my CMS collection. Let's deal with the adaptive layout starting with the breakpoint. So let's create the tablet version as well as the phone version. I'm going to start by going to the change log for the tablet and change the left and right.

So let's set it to 30 for tablet, then 20 for phone. Now going back to the desktop, I want to make sure that the title doesn't have a fixed width. I'm going to set it to fill. Next, I'm going to go to the mobile layout and set it to a stack with a vertical alignment. When I do that, it seems that it's setting the height to a fixed height. So what I can do is to go to the card in desktop and change the height to fit content instead.

Now we're going to deal with the content starting with the card. I'm going to set it to fill, then the title as well as the description, set it to fill. And finally for mobile, going to the card, I'm going to set to fill. So at this point, it's possible that your cards might not be completely adaptive. So you're going to have to fix appropriately. For example, in the second variant, the ticket itself, I'm going to change to relative using a 100%.

While I'm here, let me change the distribute to center. Then for each column, I'm going to set it to fill and the text, I'll set it to fill as well. Likewise for these cards, I should make them a little bit smaller so that it doesn't cut off and then center. So this is starting to look pretty great. And you should definitely use this opportunity to practice your layout skills and fix what are visual issues that bugs you.

I'm going to go to the main card in desktop and I'll set the height to fix so that it's more consistent. So 440 pixel and I'll change the distribute to space between. Finally, I find that these cards are a little bit large in desktop. So I'll add a max width of 1000 pixels. And let's go to the change log and set it to alignment center. One final thing is that since my site does not currently support light mode, I should go to assets and then for the heading one, I should not set color styles. So I'm just going to set manually the white color and likewise for the body text, set it manually. And there we go. We managed to create a full page design with CMS content using a collection that you can collaborate with your team and they can edit it without having to play with the design elements.

And this page is also fully responsive and you can go to the detail page and the data is completely dynamic. So I hope you found this useful. In the next and final section, we're going to add a search and we're going to add a navigation to all the links and then we're going to do all the final details on the layouts. So I'll see you in the next section. Welcome to the final section of this framework course. Today we're going to learn how to implement a simple search functionality that's already built in so that you can search across your data from CMS. You can choose that data and also navigate to it. Now this is a simple search that is customizable.

Also, we're going to implement the footer and we're going to finalize the layout across the entire site including including setting the navigation for every single page and having a footer and header consistently across the entire site. So let's get started from the change lock page. We're going to insert the search and then we're going to bring that directly underneath the button. If you focus on the inspector, you're going to find a bunch of customizations, including changing the color of the icon to white and then setting the backdrop color to black at 90%.

So these are some of the options that allows you to customize the styling of the input, modal, results and backdrop. On top of that, you can customize the icon, upload an image and you can also change the scoping of your search. So for example, we're going to select the CMS change log and it's only going to focus on that data. Once this is implemented, you can click play and then you can preview the style. Now to be able to search the actual results, you're going to need to publish the site to search. Next, we're going to implement the footer. So in Figma, in the main section, I can find the footer. So I'm going to copy this. Then in a change log or any page, I can just paste that as another section. Then I'm going to work on making this adaptive. Now, just like the navigation menu, I'm going to create a component out of this. So command option K and then create.

Then I'm going to create a mobile version. So let's name that to mobile and the first one desktop. Here I'm going to set the width to 390 and we're going to work on making it adaptive. Now the footer has two parts. We have the content and then we have the bottom. So for mobile, I'm going to select both and I'm going to set the top to 40, left, right to 20.

Then we're going to deal with direction. So for content, I'm going to set to vertical and likewise for the bottom to vertical. Now we're going to get into menu and this time we can just use wrap, which is really neat because I didn't have to use a direction vertical that would look like this and not utilize all the space. For the bottom part, we don't have a choice. So we're going to set it to vertical. For the bottom, let me change to distribute center and add a gap of 40. So for desktop, let's make sure that we can resize it to a point of the tablet version and it seems to be doing quite well. At this point, I'm just going to fix the logo by using copy SVG. And that's it. We have the footer as a component that is fully adaptive until the mobile resolution at which we're going to switch.

So we're going to go back to change log and here we can see how it's going to look like for tablet. And then for mobile, we're going to switch this one to mobile. At this point, it's time to connect everything and to finalize the details. So I'm going to go to pages and rename the pages that were not named properly. So for example, this one, I'm going to call it features. This one is going to be home. But what I'm noticing is that the home page that I had was more an experiment page. So I do want to change this page to be the new home page. So you have this option where you can set as home page. The previous page is now called old home and we can just call it to first layout. And then page we're going to set to first layout -2, first layout 3, then framer ai. And finally we have custom layout. So I'm going to order the way that I would set my pages.

So I'll move features, then customers and change log. Now in change log, let's copy the footer and go to home. And then I'll select the desktop and paste as a new section. So now my page has a footer and also in home, I don't need the extra bottom padding anymore for scroll. I can just add more sections to my layout. Let's make sure that the mobile version has the mobile variant. And it seems that it does that by default when I copy and paste. So that's really neat. Additionally, I want to add the customers section as well as the features section. So I'm going to find that in pages, I'm going to find that in the layers. And you can just copy the features and you can move them really quickly because the way I set up my design is that I have these sections that use layout and that are automatically adaptive.

So let me copy features and bring that to home. So I'm going to use the up arrow to move up and I'm going to do the same for customers. Now make sure to select the desktop, which is the container. And again, I'm going to move that right after features. You can see that Framier does a really good job at remembering the mobile settings as I copy the section. So that saves me so much time where I don't have to set these breakpoint settings all over again.

The same for the features section. Now here I'm noticing that the background should be centered. So let me select the distorted spiral and then center that. I'm going to use the circle to center. It's going to be more precise. And I want to add a little bit of light here from my design in the footer. So that's fairly easy. Let me find the light here and copy. So now I'm just going to paste it and use position absolute.

Then center and put that to the top. Next, I want to go to my navigation menu and connect to the pages accordingly. So the first thing is for every element that you want to link, you're going to need to set that as a variable. So you're going to need to go to link and then create a variable. And it's going to automatically create one for you. You have the settings to open a new tab and also to set the scroll animation if it happens to be a scroll section.

In this case, it's just a link and I'm going to go back to navigation menu and set the same for the buttons. Luckily for me, a lot of buttons in my design use this component, so I only have to change it once. So I'm going to set my link again and create variable. Now going back to my navigation menu, I will have the option to link. So for the logo, I'm going to link to home, product, link to features, pricing or team. Again, the names don't really matter. I'm going to link to customers and then change log, link to change log. Feel free to do the same for the other links, including in the navigation menu and for the footer. Now that I have all my links, I'm going to make sure that I put the navigation menu on all of those pages. So I can just copy, go to features, bring that in, customers, do the same and change log. Let's move to the footer.

Do that for customers. As a result, we're going to remove the extra padding and for the top, we can keep at 200 for features at the footer and for home, we already have it. Finally, let's talk about the backgrounds. As I mentioned before, you should definitely avoid using large blur and come up with a better solution such as using a gradient. So let me just copy the gradient and replace the blur with that. I can make it bigger and I can also change the color to fit more the design that I had. For the image, I think that's fine. And for the lines as well, because it's vector. I'm going to do the same for the features and this is especially important because it's a homepage.

We have so many sections, it's going to be very heavy to load for first time users. So always put a priority on optimizations as much as possible. If you can use something that is less heavy by using gradient or vectors, do so. Avoid using PNG as much as possible because they don't scale well across the different resolutions such as 2x and 3x. For the phone, form a lot of monitors nowadays, we're using a 2x resolution which is why it's sharper. Now for the backgrounds, I also highly recommend 3D as long as you keep performance in mind and also as long as you don't have too many heavy 3D backgrounds on a single page. So for example, I can switch to the customers page and here I'm going to go to Layers > Backgrounds. And instead of the image that I had before, I'm also going to remove the blur. I'm going to insert Embed and cut that, move that to the background and set that behind the lines.

Then I'm going to set my position to 0 on all sides which is within the customers section. And then in Spline you can find so many of these amazing backgrounds that are really not heavy where you can optimize directly in Spline. And you can see that it's only 37 kV which is really really small. You can customize the colors, the shape, the effects and it's also fully animated which is extremely difficult to do even in CSS. So I'm going to copy this link and I'm going to bring that to my Embed and voila! I have this beautiful page using a 3D background. That's really a dream come true for many designers. But also 3D is something that grabs the attention, it's animated and that's just gorgeous. So once you finalize all the changes, it's always recommended to set the SEO for every single page.

So having different descriptions and titles as well as social images. If this becomes your professional website where you get a lot of customers and client, then it's definitely worth getting the pro version. Which allows you to first of all remove the little sticker that says "Made in Framer". But also you can set your very own domain name. You can create more CMS collections, have more visitors as well as search. For teams then you have advanced features such as more editors, version history, file storage and so on. Now as I mentioned before you don't need this. You can even get a free Framer subdomain. So I'm going to put design code "framer" and it's going to change to that name.

So I can share this URL to anyone. It's going to be a lot easier to remember than the default name. One final thing is make sure to set your navigation menu to a Z-index of more than everything else. Because this is supposed to sit on top. And if you don't do that, you're going to see that elements that have a Z-index of one is going to be above the navigation menu. Let's do one final push and update it. And voila, this is everything we have created together so far. It was a long journey, four hours in total. Keep in mind that I spent the last five months learning Framer, preparing this course, but also working on a full Framer project so that I can fully understand how to work efficiently on this platform.

So check out design code UI if you haven't. It includes the Framer project as well as the Figma file. If you enjoyed this course, I would really appreciate a like and a subscribe. You can follow my journey as a designer on Instagram and TikTok, which I just recently started to learn how to create this shorter format. But otherwise, thank you so much for following this course. And I'll see you in the next one..

Website Setup Service