Today we're gonna build a fully
functional 3d site without code, and it's all done in Framer. We have a full landing page with
animation and parallax, as well as multiple types of components and layouts. Then we have multiple pages and
layout styles with effects and appear animations, and it's all responsive,
meaning that it's gonna work on any resolution, including with a hamburger
menu that is very common and you can switch between the pages from here. Framer has forms, which means you
can collect information from users using services like MailChimp. So we're gonna use stacks pretty much
everywhere so that we can add new components easily, and it's going to
adapt to the new content and we're going to use break points to adapt
the layout to different devices. Now framer feels like a design tool. You have the navigator, you have the
layers and then you have the inspectors and all the styles, as well as the size
and positioning and effects and typography works pretty much the same way as in
Figma and it's going to be so familiar thanks to the component system, as well
as the overrides and the interactions. And as I design, you can see that I can
edit everything on the fly and I can embed fully functional elements, such as this
3d asset by using an embed component. Now what makes framer so unique is
that I can insert a lot of types of pre-made components, such as layout
elements, navigation for menus, isolated elements, such as cards, dropdowns,
and indicators and all the icons that you see here are using a premade
component that have access to hundreds. Then there's the CMS part. So we have a collection and it's very
easy to create your own data so that your teammates, especially editors and
managers can enter that information and it's going to populate your layout. So this is a full course. We're gonna learn all of that, how
to create a basic layout and content that are dynamic, how to work with
components, interactions, and animations. We're going to build multiple pages
and add break points to make your layout responsive, work with forms and
all types of dynamic components, such as icons, social, utility, etcetera. This is a full course, and we're going
to learn everything step by step, all the assets and the design files
will be provided and you can also copy my project to your documents
and fully inspect, edit everything. This is a template that you can use
for your own site and build from there. Now, this course is entirely free
thanks to Framer sponsorship, which means that you can share it to your
friends and then they can learn with you without having to pay. Framer has been a top design tool for
designers for many years and they've been focusing on framer sites, which allows
you to create a fully functional site using all the familiar design tools. In fact, they have many free
templates that you can start with. And there are many top design teams
that use framer to launch their website. To follow this course, going to need
to create a free account and you have access to all of the features and
you can even publish your website for up to a thousand monthly visitors. In fact, I built all of this by
using the free account so you can follow along and build everything
without having to pay anything. You will also need to download the assets
file, which include the images for the logos, the backgrounds and wallpapers. So with this, I hope you're
excited to build a 3d site without writing a single line of code. So let's get started. Let's start with the basics. In Framer, you can edit from the browser
or you can also download for the Mac which is a little bit more convenient and they
have a version for the apple M1 chip. Once you have created an account and
inside the app you have a bunch of basic tutorials that you can go through. But otherwise let's create a new project. This new project comes with a basic
template, including the top bar and a few pages about contact and 404. You can preview the website by
going to the play button on the top right and here you can navigate
to each of those pages and see how they respond two different devices. Let's exit this. And I'm going to go back to home. Then I like to start from scratch. It's also better for learning. So we already have the canvas,
which is the desktop version. And here we're going to create a frame. If you used Figma before, you're
going to be familiar with creating this pretty much everywhere. I am pressing F and I'm
drawing a rectangle. This is great for grouping elements. So basically a container, or it
can also be an element by itself for images, backgrounds and stacks. So for this rectangle, I have the
position, the size and the layout features as well as the styles I can
decide to change the feel and go to image then upload from the assets folder. So I'm going to pick hero BG. So I can drag this around and
resize it, or I can use constraints. By setting zero from the
top and Left and right. And set the height to 600. And so far, this is how
a design tool works. I can also switch between
pages and layers and assets. Now you can see that we have the
text styles as well as the links. So when you start a new design, it's
really good to have a bunch of text styles so that your design is consistent across. Framer it already comes with four text
styles but typically we have a few more such as footnote and caption. I like to model a lot from some of the
best practices from apple and material design from Google so we can pretty much
cover any range of layouts that we need. Now I'm going to go back to layers. I'm going to create a
title by using the T. And here I'm going to type mixed
3d and 2d design with framer. So going down a little bit in
the inspector, I have the text options, but I should definitely
select one of the preset textiles. And here I have one which is called title. It's typically very large
and I can edit this. The font that we're going to use for
the entire project is called Manrope. And this is actually from
Google fonts so it's free. You can see here from the logo. So with Framer, we have access to all
of the Google fonts on top of the custom fonts that you may have installed. Since my website is mostly a
dark mode website I'm going to change the color to white. Then for the size I'll set to 60. Let me move this to the left a little bit. And here we have the option to select
between large, medium, and small. And what this means is that if the
resolution is 1200 and plus, then we're using this size and for the
medium is 810 to 0 then we have small. For medium I'll sit 2 48 and
for small let's set it 2 38. So what this means is that if I play this. And I resize to a smaller resolution. You can see that the font size
is changing based on that. As well as the constraints for my image
that responds to the browser size. Let's add another text. So press T and here I'm
going to paste a long text. You can use any text that you want. Again, I'm going to select styles. This time, I'm going to select paragraph. Let's edit this. I'll change to regular
then set it to white. And what I'm noticing is that I
don't have break points for this one. So what I can do is to add them
and we have these preset numbers. For medium 13 is a little bit too small. So I'm going to set to 14. And small 14 as well. Let me move this text right here. And now I want to show you how to set
break points, not just for texts but also for your layout, this is going to
be super useful for making it adaptive. I'm going to click on break point
and you can see, we have pretty much the same numbers of 1,208, 10. So tablet. I'm going to zoom out a little bit. And add another one for phone. These are the most common resolutions
when you're designing a website. And what you're noticing right away
is that my constraints are working. Meaning that the size of the image
is going to zero, zero from the sides and the text styles also adapt. And for every page it's really
helpful to have these break points. Let me focus back on the desktop. Now, I'm going to say like
both texts and resize the with. To four 60. Let me just. Place them a little bit and also
after selecting the two of them I'm going to group them inside a frame
and the shortcut is command enter. So let's learn a little bit
about constraints because this is what every design tool have. And it's also good to see the
results in real time, especially across multiple resolution. It's going to help you understand. You can already see the
problem where this is cut off. Also the second text is from the
bottom and we have a lot of gap here. So let me select the container
and I'm going to set to one 30 from the top and 50 from the left. Like this, we have consistent spacing from
the left and top across the break points. Secondly, it's also good to
inspect the constraints for each. So we can see that the
title is top left and right. But the text is bottom. But we can switch that to top instead. However. However that is not solving our problem
because for the small resolutions. We still have that gap. Now, this is where I love
to use the stack feature. And this is more how CSS
works, meaning that the content will Stack one after another. So Figma also has this feature
and when I go to the height I have this option called fit content. What this means is that is going to
detect the size of the content on any resolution at any text size and
it's going to automatically set the height of the container to fit that. And voila that solves our problem. Now the way that break points work is
that whatever is changed on the main template, which is the desktop is going to
apply automatically to tablet and phone, but you can also change on the phone and
it's only going to apply for the phone. Meaning that if I select the container
for the text on the phone, And I change it to a size of 300 it's not
going to affect the other resolutions. Likewise for the constraints I'm
going to set to 40 from the left. Then you also need to pay
attention to what has a fixed size, a fit size or a fill size. So we've learned that fit is going
to fit the size of the content. But you also have fill which means that
it's going to take all available space. I'm going to select both texts. And set the width to fill. Meaning that if the container is smaller. Then it's going to fill that space. Now we have an adaptive layout. Let me just put "and" to another line. And this is what we have so far. So before we go, I want to show you how
to embed a 3d element in your design because I think 3d is really cool
and so much more accessible nowadays. Now right now, we have a frame
that is using a background. And instead of using a background,
I'm just going to remove that by pressing on the X and instead I'm
going to go to insert and go to utility and we have a really neat
embed component that we can insert. So here I'm going to set it to the full
size using constraint, zero on all sides. And I'm going to use my 3d asset from
spline by pasting the URL from spline. And there you go this is a 3d
asset that is fully interactive that I can use for my website. So just like in design tools, we
need to prioritize some layers, putting some above others. So I'm going to put the embed after
meaning that now my content is on top. In design is very important
to make the text easy to read. And here we're lacking a little bit of
contrast, especially for the smaller resolution and because of the background. We can solve that by clicking on
the text and adding a text shadow. So I'm going to set Y to 10. And blur to 20. And also the color. I'm going to increase because
with a darker UI, you should set the drop shadow a little bit
darker and it's going to be fine. Another thing that I can do
to increase the contrast is to add a mask using a gradient. So let's add a frame. I'll set the height to 400. And the constraint to zero from
left and right, as well as bottom. Now I'm going to go to Fill and set
a linear gradient from black 0%. Then for the other side, I'll select
it first and set it to black 50%. Just make sure that this
is after the content. Now, if you play this, you can see that
I have my 3d element then, if I resize, it's going to adapt automatically,
but also I'm noticing that I don't have the interaction at the bottom. And this is easy to
fix by going to styles. What you see in the inspectors are
the most commonly used styles, but you can also have more by clicking
on the plus sign and here we have styles such as blur, blending and the
one that I want is called 0.2 events, and I'm just going to set it to none. What this means is that this element,
which is the mask I'm going to rename it to mask is not going to
be in the way of the interactions. So I can just mouse over right here. So let's rename the frame
and this is the hero section. Also, we should rename the project
to my 3d site or whatever name that you have for your site. And that's it. We managed to design a very basic
Hero section with a 3d asset. We're going to dive deeper into the
stacks and adaptive layout features. So far, we've played a little
bit with fill and fit content. And when you set a container to
fit content, it will automatically use the layout feature,
which is essentially a stack. And you can see here that just like
CSS flex or Swift UI stacks, we have the direction, the distribution,
the alignment, the wrapping, as well as the gap and the padding. And that's typically how you would
design your layout in CSS or in Swift UI. So stacks are gonna make
your life so much easier. Personally. I like to use stacks everywhere
because when I add new content, it's going to adjust automatically. So for example, I'm going to set
the entire desktop to a stack. So I can either click on the plus
sign on the layout, or as soon as I set a height or width to fit content,
it's going to automatically use that. Now, keep in mind that when you change
an existing element to a Stack, sometimes it can affect the inner elements. So in this case, it's very important
to pay attention to the next container inside in this case it's hero. So make sure to select that and we're
noticing that it has a fixed size across the resolution so we need to set
that to Fill to take the full space. To avoid having to readjust some of
the elements it's definitely best to start with stacks from the start. And when you have a Stack, you
can add more columns or rows depending on the direction. So in this case, I'm going to
add a new section to my landing page, and we have a gap here. So I can set the gap to zero. And now in my new section, I'm going
to change the feel the 0 7 0 8 18. So this is my background and I'm going
to start right away with a Stack, but notice that I don't have fit content
if I don't have any child element. And if I don't have a container, it's
not going to show the option for Fill. So for now, I'm just going to set layout
and the direction is going to be vertical. Then I'll add a new text trusted
by 8,000 companies worldwide. And here I'm going to select one of
the styles which is section title. Edited set it to white. The size is going to be 22. And then add break points,
medium 20 and small 20. Notice that inside a Stack it's going
to center automatically and that's because the container itself controls
the alignment, distribution and so on. Let's add a new text and this time
you can copy from the content. So I'll create a new style and
name this one, footnote create. Here, I'm going to edit set the font, to
Manrope weight medium white 70% opacity. Then the size 16 medium 14 and small 14. Let me exit this and I'm going to set
the width to a fixed size of four 60. And text alignment to center. Now looking at the different resolution. You can see that I have some
issues for the phone resolution. And what you want to do for small
resolutions is to set the, width to fill. As long as you have a container,
this is going to work. And then we need to
add some extra padding. So let's select the container. First, I like to make sure that
the height is set to fit content. And I'm going to use padding
instead which is the best practice. A number that I like to use to have
enough negative spacing is 100. But the problem with having 100 all around
is that it doesn't work well for mobile. Instead of using on all sides,
I'm going to customize the sides. For top and bottom, leave it at 100. But for left and right. I'm going to set it to 30. So it looks much better here. In fact, the standard for tablet and
desktop is about 30, but for mobile, it's actually 20 on left and right. So we have as much space as
possible for the content. I also want to make sure that the
title is going to be centered. Great. If you play this, you can see
that it adapts really well to the content as I change the resolution. So, what about the hero? What if I want to use a Stack instead
of constraints, because it's far more responsive when I do that. Now the thing is we added two elements
that are supposed to use constraints such as the mask, as well as the embed
element, which is the background. So we need to do a little trick
here and adjust our elements. And I'm going to show you that. Let's go to the hero container
and I'm going to turn this. Into a Stack. But you're going to notice a big problem. And I think it's important that
we face these big problems. It's going to happen a lot, especially if
you switch between constraints and stacks. So, what is happening here is that
each element that you see inside this Stack is spread horizontally,
meaning that we have the 3d embed, the mask and the rows in that order. So, what I need to do is to make
sure that these two elements that are using constraints I should
keep using constraints, even though it's part of a Stack and this is
a really neat feature in framer. So I'm going to select both of these. And I'm going to set the
position type to absolute. As a result, it's no longer part
of the Stack and you can see that by having my content completely
centered within the Stack. So I just need to adjust the
constraints of these two extra elements. For embed, I'm going to set
zero on all sides like before. And for the mask I'm going to set to zero. On left, right. And bottom like before. Now when you using absolute positioning
within a Stack, sometimes it's going to take priority in term of
being above the other elements. So to fix this we have this concept,
which is very common in swift UI and CSS, which is the Z index and the
higher, the more it's going to be above, so lower meaning going to the back. I'll set the mask Z index to zero. As well as the embed Z index to zero. And voila, you can see that the
content itself is now above. Another thing that you'll notice
when you turn an existing element using constraints into a Stack. Is that it's going to affect
the different break points. So we can just repeat the same steps. So zero on all sides. And sometimes you also have the ability to
right click and reset overrides, meaning that it's going to take exactly the same
values as the original ones in desktop. Okay. So we learned a lot about how stacks
work, how it affects the inner elements and how to turn an existing
element with constraints into a Stack then deal with the problems. So now I'm going to go to hero
and because it's using a Stack I should definitely use height. With fit content. Then use my magic numbers for
the padding which is 100 3,130. I also want to align my content
to the left by default it's centered by using distribution. I can set it to start. So start depending on the
direction, it means left if it's horizontal or top, if it's vertical. So depending on the size of your titles. I do feel that sometimes with really
big titles, you need even more spacing. So the bigger, the elements
the bigger, the spacing. So I like to use 54 desktop in some cases. But for tablet definitely
set to 30 left and right. And for the phone, I'm
going to set it to 20. Perfect. While I'm here I want to make sure
to select the title, but notice here that I cannot select the title and
this again will happen if you're using absolute positioning again
which can also take priority over the selection of the elements. And one trick that I found was
that you can lock those elements. So the embed element and a mask as a
result, they won't be selectable anymore. This is useful for backgrounds that
don't need to be changed all the time but keep in mind that once it's locked
you need to go back to the layers list to be able to select it again. While I'm here, I'm going to select the
rows container and set the gap to 30. And for the title I like for it to
be consistent across the resolutions. So I want to make sure that
with is with the word framer. And so I'm going to put this from
the desktop to make sure that it affects every single resolution. Now a really good practice for mobile is
to take the entire width of the phone. I'm going to select the rows for mobile
specifically and set the width to fill. Perfect. So previewing this, you can
see that the layout is far more responsive to the resolution. Okay. Let's focus back on the second section. I'm going to set the gap to 30. Then I'm going to add
some logos underneath. Let's go to the images folder. Copy all the company logos. Then paste in the second section. And allow. Now I'm going to move this
back to the rows container. And I have my logos. Then I'll group inside
a frame command enter. I like to start with fit content
on both width and height and then set the Stack to horizontal. Let me use the down arrow on
the keyboard to move it down. And in this case, I'm going
to set the width back to fill, to take the entire space. And then we're going to
play with the distribution. So we can use start, which is
left center or end to right, depending on the direction. We can also use space between
which is going to push the first and last to the far end. Or you can use space around and evenly
to think of each element as a box and centered within the boxes meaning that
now we have a little bit of padding at the start and at the end, but in this
case, I like to use space between. And the items as I did before I can
move it quite easily in the order that I want by using the keyboard arrows,
I'm going to check for mobile it doesn't fit the screen so one thing that I
can do is to resize the logos first because remember that the text styles
also resize based on the resolution. So I'm going to select all of these
logos and I'm going to resize them manually to roughly 38 in term of height. And for mobile, I'm going to resize
to about 36 in term of height. This is still not enough
to fit every logo. So what I can do is to enable wrap. Then I want to set to
center for the logos. Let me add a little bit of
gap to 20 and there you go. So, this is what we have so far
and I think that looks pretty good. Now before we go, I want to add a few
new elements, including the divider. So let's create a frame. Set the height of one, and a width,
we can use a percentage so 25% which becomes relative instead of fixed. Let's change the fill color
to white and the alpha to 10%. Then I'll add a new text. Publish a site in minutes. Change that to section title. And here we're going to use a really
cool plugin which allows us to have access to hundreds of icons. So we're going to insert going to icons. And the one that I really
like is called phosphor. And so this is what we have. I'm going to move it down. Change the size to 32 by 32. And you can see that
it's a custom component. And it has its own
section for the inspector. And I can quickly change
from hundreds of icons. If I want to have the full
list I can go to their website. And I can search for the icon. So in this case, I'm going to search
for Pen and I'm going to use this one. So let's go to the dropdown change to Pen. Then I'll add a new text after that. Flexible component. Create a new textile, which is going
to be very close to the footnote. And instead of creating from scratch,
I can duplicate the footnote. Rename this to caption 2. 2 because I want to set it in caps. So select it. And edit it. I'm going to set it to bowl and
transform, upper case because I want everything in caps. To create a different style
of a title or a subtitle. And I'm going to set the size to 14
in large and 13 for small and medium. So the color, let me just set
it back to a hundred percent. Then I'll add a new text which is
roughly the same size as the caption 2. So I'm going to duplicate caption 2. And this one is just going to be caption. Select it. Edit it. Set it back to none. I don't want this uppercase. As for the weight, I'm
going to set it to medium. White. 70% opacity. And we're going to keep the same size
because it's caption and caption 2. Okay. So what I want to do is select these
three and put that inside a container. So select these three
elements, command and enter. Width to 2 50. And height to fit content. I'll set the padding
to 30, 20, 30, and 20. Now, oftentimes when you create a frame. The inner elements are going to be
fixed so what you can do, especially for the text is to set them to fill
so that they fit the container. And then set the alignment
to center in this case. So I want to add a border. So I'm going to go to styles
and ad d a border white to 10%. Then the corner radius to 25 and
the Fill, set it to black 40%. And voila, I have my container, it's
all in stacks and it's super adaptive. Every time that I add a new element, it
adjusts the frame automatically and that's why stacks are so powerful in framer. In fact, this is a feature that
is available in all the design tools and designers are learning
to use this more and more. But in framer is just to
another level because we're building a fully working site. Before we go I just want to make
sure that I rename this Stack to feature and this section to features. I hope you learn a lot about stacks
and fit and fill content, how to adapt to different break points. And most importantly, how to deal with
the difficult task of turning an existing element with constraints to a Stack that
is far more adaptive and responsive. These are concepts that are
universal to every single platform, including CSS in Swift UI so you're
going to carry this knowledge with you regardless of the platforms. In this section, we'll learn
about components, which have super powers in framer because we have
so many features packed with it. Now when you designing, as soon
as you have an element that is meant to be reused multiple times
you want to create a component. So I'm going to select
this feature Stack here. And I'm going to create a component
using option command and K. And I'm going to call
that feature, then create. So here we have the component view. And we can create new
variants as well as a state. In this case, it's a
hover or a pressed state. But let's start with variables
essentially they are overrides, which means that you can make your component
customizable as you create many instances. So for example, You want to make
sure that you can customize the icon, the title and the text. And to create variables it's very simple. Each of these values that you see in
the inspector, including the styles and the plugin properties can be variables. So for example, you want to make sure
that the name of the icon is customizable. So I'm going to click on plus name. I'll rename this to icon and press enter. And voila I have my first variable. I'm going to do the same for the title. Text content create a variable,
it's going to be of type plain text. And it's simply a title. Then we have the text content
create variable, plain text and it does a pretty good job at
auto-filling the name of the variable. So as a result, I can exit my component
by going to the breadcrumbs menu here, click on home and we're back. Then I'll duplicate this
command D two times. Go to the second one and notice
that my component has overrides. I have the icon title and text,
and I can change them as I wish. So you can use any content that
you want or from the content text. That I'm going to copy and paste. I'll select the third one. Change the content. And also change the
icon, this one to image. And select the third one icon to layout. Title copy and paste. And voila, this is how
you create components. This is how you set variables
and you replace the overrides. Now let's set the layout I'm going
to select these three elements. Create frame, command enter. Set width to fill and
height to fit content. As soon as I have fit content is going
to set the layout which allows me to set the direction to horizontal. Distribute to center, then gap to 20. And I also want to make sure
that each of these elements are going to use the full width. Because notice that in tablet,
it doesn't really fit well. And to make it more responsive,
I'm going to set the width to fill. So it's going to distribute proportionally
depending on the available space. Now after changing the elements to fill
in term of height, you're going to notice that it's going to affect the height. Of the container. And it's become fixed. So make sure to adjust
that back to fit content. Then for mobile I want to set
the direction to vertical. Now let's test this in the preview. And I want to show you
a different problem. You can see that when I go at
this resolution before the tablet. It's becoming really, really large. And likewise, when I go to
desktop and I go really large. These elements, including the
logos are becoming too large. So there's one technique that I love
to use and it's called max width. So for any container or any element
I can set the min-max values. In the inspector I can select a max
width and I'm going to set it to 800 px which is the fixed value,
especially if you're switching between percentage and fixed value. The same for the logos. I'm going to add a max width of 800 PX. So that it doesn't become too large. And the same for the phone. I'll set the max width to 400. Now let's take a look. And you can see it
doesn't exceed that 400. And likewise for the desktop. You can see that it's quite manageable. Okay, let's talk about components and
variants because they are necessary in order to create buttons and states. In this case, I'm going to add
a button and I'm going to make a hover interaction for that button. Let's start with the text, which is get
the app and I'm going to select styles. I'm going to use footnote 2, which
means that I'm going to duplicate this first change the name. Create and selected. Let me edit it. I'll change the color to white a
hundred percent and transform because it's footnote 2, to uppercase. For the weight, I'm going
to set it to semi bold. Let me close this and I'm going
to put this inside a frame. So command enter. Rename it to button. Set the width to two 20. Height to fit content. Direction, horizontal padding. I'll set it to 10. Now, I'm going to go to the field and
I'm going to use one of the gradients so linear and here you can use one of
the preset gradients I'm going to use the last one, or you can use any color. And then I'm going to
change the angle to 1 35. If you use shift is going to
snap to a more precise angle. For the color code, you can see
it's B 1 75 F F two 1 C 14 F F. Okay. For the corner radius,
I'm going to set it to 24. But the thing is I want to customize
one of the corners so I can go to the specific corner which is
bottom right and set it to zero. So now I have a very different style. I'm also going to add an icon. So I'm going to go to insert
and again, icons phosphor. The color is black. And then in phosphor, there's
a neat style called duotone which has an additional shade. The icon itself, I'm going to
change that to device mobile. Awesome. Now I'm going to select the
button and I'm going to create a component, option command and K. Create for the name button. So when you have components, it's
also very common to have different variants, especially when you have
a different style spacing structure. So you want to create
a new variant for that. And I just need to click on plus variant. It's going to create one. And from here I have
exactly the same layers. I can also have new layers
or hide existing layers. So it's very flexible. Now, if I'm using the same layers
and properties, I want to be consistent with those properties. So for example, here,
I'm using a gradient. So I want to make sure that every new
variant, if I'm using the same properties, I'm also using a gradient as well. So, let me go to styles. Even though I want to use a flat color
I still need to use linear gradient. So the first color and the second
color is going to be black. Opacity 50% and likewise for
the second color, black 50%. Then for the icon, I'm going
to change this to play. And change the color. To F F 8 8 AA. Now I will also change the variables
so if I'm using the same layers, I can just go from Varian one is going
to apply to all the other variants. I'm going to start with the
name of the icon name that icon. And the text which is
already set in this case. Now for the variables I already
have the title for the text. Just make sure that both of
them have those variables. And for the icon, I'm going to select
both and set the name which is icon. Now, because these are variables,
you're going to notice that it's going to take the default value everywhere. And we're going to customize that
when we're outside of the component. So I'll duplicate the component. And the first icon again is DeviceMobile. And for the second icon
it's going to be play. But here because I have a new variant,
I have a field called Variant that I can customize to variant two. Let me just change the
text to watch the video. Perfect. Now I'm going to select
both of these components. Create frame command enter. Width Fill height fit content. Then direction horizontal. Then gap 20. Let me look at the different resolutions. And here, I noticed that for the phone,
I should set the layout to vertical. And at the same time, I
should align to the left. So I could also use a border
color for the second variant. So let me do that. And go to styles and border
using white and 20% opacity. Perfect. Now we want to add a hover state and
this is very common for web design is to have the mouse over interaction,
a little bit of transition animation. So we're going to do that
through the hover state. So I'm going to press on plus hover. Select hover. And here for the transition
animation, I can change any value that are already set and existing. So for example, I can select the title. And I can change the opacity
to 0.6, which is 60%. I can also increase the gap to 20, which
means that it's going to animate the gap. 40 icon I can animate the rotation. So let's say 90 degrees. Now the real icon is the device mobile. And I don't have the correct preview here. So one thing you can do is for
your variable, you can select a default value that you want. So device mobile. And voila. Now, one thing to note is that when
you're creating a transition, make sure that the original variant has that value. So for example, if I want to animate a
border, well, make sure that the border already exists originally, otherwise
the animation is not going to look good. It's going to look instant. So I'm going to add a border of white. And I'm going to set it to 0%
opacity so that it's not visible. And I'm going to animate that to 20%. And likewise for the variant 2,
I'm going to create a hover state. So gap 20. Then for the border, I'm
going to set to 30% opacity. And the Fill color, set it to 20%. Now you can preview the interaction
from the component itself, or to make it more accurate, you
can preview from the website. Now another thing that you can do
is to change the animation timing. So you can select variant 2, and
for the transition we can change from spring to the popular ease. And here we have the ease in out with
the animation timing that I want. You can also customize the
animation timing and the Bezier. So you have a lot of control over
the timing of your animation. So here I have spring and here I have
ease in out as 0.3 and I can preview that. So. This is how it looks like
with a little bit of spring. And this is how it looks
like with ease in out. All right, we're going to finish by
creating the third variant for the button. And I want to show you how powerful
variants can be by changing even more of the structure. So let's create a third variant. So for the width, I'm going to set
it to fit content this time and for the padding, I'm going to set it
to 4 from the top, 16, 4 and 16. The icon is going to be much smaller
to 16 by 16 changing it to white and the text is going to be caption. Now you can double click on the style
to go to the list of text styles. I'll select caption. Let me select back the container and
I'll change the radius to all around 20. The border is white 20%. For the background, I'm going
to set both colors to white 10%. Then I'm going to move the
icon to the right side instead. Now you can see that I changed
the structure of the component completely for variant three. And I'm still using the same
layers, but with different styling. So now I'm going to create a
hover state, set the gap to 20 and I'm going to go to fill. Set both to black 10%. Then the border to white 30%. Let me exit the component. And I'm going to insert the component. There's a shortcut for it,
which is command forward slash. This is where you're going
to see your team components. If you have a team or you can go home
and you have your project component. So I'm just going to drag and
drop the button right here. Change to Varian three. Set the width to fit content. And I'm going to change the
container to align to the left. Select the component and for the
title is going to be updated. iOS 16. For the icon, arrow right. And voila. So let's preview this again. And we have the beautiful small button
that is a third variant of our component. And that's really cool. Let's zoom out a little bit to
make sure that everything is well adapted for all resolutions and
everything seems to work great. So we can see that the components
are really powerful in Framer, and I haven't even shown all the features yet. In the next section, we're going
to create a custom top bar with a background blur and also a
beautiful hamburger menu animation. So I'll see you in the next section. In this section, we're going to create
a top bar animation, which is one of the most important elements in a website
because it's the main menu and it's also adaptive to mobile so we have a
hamburger menu along with a smaller size menu that is going to animate on top. So along the way, we're going to learn
how to work with the background blur and how to create a sticky header. Now, let me zoom in a little bit
and I'm going to select the desktop. And insert a frame. So this frame, I'm going to
put that outside of the hero. I'll set the width to fill and the
height to 60, which is a typical size. The background I'll change to black 30%. Right now it's taking its own section,
but I can also choose to make it fixed, which is a positioning value
that is very common in CSS as well. Now, because this is fixed, it's
going to have to use constraints. So I'm going to set it
to zero left and right. And if I preview this and I
scroll, you can see that it always sticks to the very top. Let me rename this to top bar. And I'm going to zoom out to make
sure that it works across resolutions. I'm noticing that sometimes,
especially working with absolute or fixed positioning, it's going
to affect some of the resolutions. So I'm going to select the top bar
right-click and reset overrides. One thing to keep in mind is
that when you add a top bar that is on top of the content. You need to add an extra top
padding to compensate for it. Otherwise sometimes it's going to
hide some of the valuable content. So in this case, I'm going
to go to the hero section. And I'm going to add 60 to the top. So 1 60. And I'm going to do the same for mobile. And there you go. Now let's talk about background blur
because if I select this and I go to style, I click on the plus because
it's not available in the inspector. I see that I don't have
that value anywhere. In Framer, it's pretty hidden. And you're going to need to find
that in the options here, go to view. And at the very bottom, you're going to
have the option for show background blur. Once you have that, you can now
use that inside your project anywhere there's a style. So we're going to add that option
right after blur which is BG blur. And I'm going to set the strength to 40. And there we go, so scrolling with this,
we have this beautiful blurred sheet. Let's create a button inside the top bar. Let's start with the logo. I'm going to create a frame
and it's going to be 24 by 24. Then I'll go to fill, change
the image and upload logo DC. Typically you want your clickable area
to be different from the asset itself. Sometime the asset is not
exactly the size that you want. A good size universally is 44 by 44 which
is great for mobile and desktop as well. You can even go to 36 by 36 or
24 by 24, especially for desktop. So I'm going to create another
frame to surround it and I'm going to set it to 44 by 44. Let me just remove the fill and I'm
going to select the logo itself. Then it's going to be centered. You can also use the alignment tools
to align middle or left if you wish. This is nicely coordinated
with the constraints. Now I'm going to select the frame
and create a component called logo because I want to hover interaction. So let's create the hover. And it's going to be very
simply set to opacity 0.6. And that's it. Let's click on the top bar and we're going
to set the layout, direction horizontal. Next we're going to create
the menu using the text. Press T, components text style footnote. And now we're going to create a
component because we want this to be duplicated multiple times. And another thing is, if it's not a frame
the component will take care of the frame. So in this case, this is a text element. And I'm going to create a
component, which is button small. And you can see that my
component has created a frame, which is the variant itself. As a result, I can set the width to fit
content as well as the height to fit. And then I'm going to set the padding
to 8 from the top 16 from the sides. Remember that for the transition to be
smooth, we want to set the fill and the border if we want to animate those values. So I'm going to set the fill to black. And opacity 0%. And the border to be white. Again, opacity 0%. Also I'll set the corner radius to 10. Now I can set my hover state. Go back to the fill. And set to 20%, likewise for the border. Great. Let me go back to home. And now I have my component. And both have the hover interaction and
it's really smooth in term of transition. Let me duplicate this two
times to create more items. The second component, notice
that the value was created automatically, especially because
we have the text selected. So it's pretty smart like that. I'm going to change to pricing for
the second and updates for the third. I will also create a frame
from these three button small. Command enter. Then fit content for
both width and height. Set the gap to 50. And now for the container
which is the top bar. I'm going to set to space between
to push everything to the sides. I'm also going to use my spacing
rules of 8 for bottom and top, and 30 for left and right. Now, if I add another element
inside my Stack, it's going to push this text menu to the middle. So, let me start with a
text which is sign up. Set it to footnote 2. Create a component. I'll call that button 2. And we'll set the padding here, but
first, fit content for width and height. Padding 8 and 16, so repeat those. Now for the radius, I'm going to
set it to look like my buttons and it's going to be 24, 24, 0 24. Then I'll add a border color. And I'm going to use the
color code 6 1 9 3 F F. Then said a simple hover state. Which is going to change
the border color to white. Now, I'm going to go back and you can
see that from here since I have three elements in my Stack and I'm using
space between it's going to push two to the extreme and one to the center. All right. So now we're ready to create
the hamburger menu animation. And also the top bar typically
should be a component because we're going to have multiple pages. So it's going to be reused. So I'm going to select the top bar
and create component, name it top bar. So, this is a nice trick. Where you want to use a variant
for the phone resolution. So I'm going to create variant 2 and I'm
going to name that phone so this name is going to help us a lot when it comes to
applying for the different break points. And typically the phone we're going
to set to a resolution of 3 90. And we can hide certain elements. So I'm going to select the
middle menu and go to visible no. Also, I want to use my rule for phones,
which is the padding of 20 left and right. Another thing that I want to do
is to replace the logo with a hamburger menu icon and we're
going to draw that from scratch. First of all, we're going to hide
the logo as well and we're going to insert a new frame which is 44 by 44. No fill. Then inside this frame, we
can zoom in to make it easier. We can draw three rectangles. The first one is going to be 22 in
term width and 2 in term of height. Then I'll set a radius of one. And the color is going to be white. Now in term of positioning, I'm
going to set it to 12 from the top. And 11 from the left. The goal is to make
sure that it's centered. And I'm going to duplicate this two times. The middle one is going to
be 12 by two from the left. And the third one, 30 from the
top and a width of 22 as well. Now, there you go. This is the hamburger menu icon
that we have created from scratch. And now we have the freedom to animate
this the way we wish by using the transition inside the component feature. So I'm going to select the frame
and rename this to hamburger. I will also move this to the left. Then I'll create a new variant
which is called phone expanded. And here I'm going to set my animation. Since these are essentially states
you can do the rotation movement and it's going to transition for you. Let's select the first line. And set the rotation to 45 degrees. Also, I'm going to align
middle center vertically. And then for the second line again, 45. And then center, both
vertically and horizontally. Also, I'm going to change the opacity
to zero so that it fades nicely. For the third line, it's
going to be rotation minus 45. And then center vertically. And that's it. This is going to get us
the animation that we want. We can test this by going to home. Now, I'm going to try to say the top
bar, but we have the hero in the way. So, let me just readjust
the top bar to be after. It's going to be easy to select. So going back to phone, select it and I'm
going to change the variant for phone. So now when we have the phone
resolution, it's going to switch to that specific variant. And I can select the phone. Then preview, just the phone from here. Now I just need to set the connection. So I want to make sure that when
I tap on the hamburger menu icon, it's going to go to phone expanded. So there's this little lightning icon
that I can just connect to phone expanded. It's going to do all
the transition for me. And from the close icon back to phone. And with this, I can
go back to the preview. And I will be able to tap on
it and I have my really nice hamburger menu icon just like that. Next we're going to add the actual
menu when the menu is expanded. So I'm going to create a rectangle
outside first to take care of the styling. Then I will set the fill to black 60%. Corner radius 20. And then border white 10%. And also I'm going to add background blur. So this is going to be 40. Next, I want to add a text content. Components. Using the text style caption 2. And then I want to have a hover animation. So I'm going to create a component first. Call that menu button. This one is going to have
a fixed size of 300 by 44. Then I'll select the text, align
that to the left and vertical center. For the animation, I'm going to use the
fill color as well as the border color. For the fill, I'm going
to set to white 0%. And I also want to have a border. Now we have a neat feature for border
where you can set the size for each side. So in this case, I want zero on
all sides except bottom to one. And the color is going to be white 10%. Let's create a quick hover state. So change to fill color to 10%. And I also want to move
the text by 20 pixels. So using shift and right arrow, I
can move by 10 pixels two times. Great. Now I'm going to go back to the
top bar and here for this frame I'm going to use fit content with
a padding of 30 and gap zero. Then I'll duplicate this six
times to get seven menu items. Starting with home, then
components, then pricing, updates, support, community and sign up. Now notice that the last item has a
bottom line and we don't want that. So a solution that you can use
is to create a second variant. And for this one, we
can disable the border. So I'm going to set it to zero. And I need to repeat the hover
interaction which has a fill of 10%. And there you go. So going back to the top bar for this
one, I'm going to set to variant two, and now I have a good looking menu. So zooming out, I'm going to move this
menu right here to the variant one. So when I do that, it's going to
exist on pretty much all of them. So opening the variant one, then I'm going
to change the position type to absolute set the top to 60 and left to zero. So this is the position that I have. I want to add some padding, so I
might want to use an extra frame. So command enter. And this one, I'm going to set the
height to fit content and the width to relative a hundred percent. Then I'll add a padding of 20. So what I want is the size of the
menu to take the full width as well. I'm going to change the width to fill. Now that we have this, we can set
what is visible at which resolution. So the variant one, we can
set this to not visible. For the phone selecting the columns,
we're going to set this to visible. And likewise for phone expanded. Columns, we're going to set it to visible. Since this is outside of the bounds. We're not going to see it. So, what I can do is change
this feature called overflow hidden to make it to visible. What this means is that it's not
going to clip anything outside of the bounds of this content. I'm going to do the same for the phone. Set it to visible. And also I'm going to
set the opacity to zero. So we have some fade animation going on. Lastly, I can animate the constraints
to get from left to right. And I'm going to select the
columns and use left to minus 20. So let's get out of
this and we can preview. It's nicely adaptive now with beautiful
hover interactions on the buttons, but notice that the background blur
doesn't always work well in the preview. So to make sure that you're
showing this correctly, you might want to publish the website. And in order to do that, you just
need to click publish, and it's going to generate the URL for you. You click on it. And there you go this is the
website that you have built so far. And you can resize to
see the menu animation. We're noticing one problem. And that has to do with overrides. So we can easily fix this by setting all
of these menu buttons to fill as well. It takes a bit of practice to work with
overrides, especially because sometimes you're working with copies and you're
not sure if it has applied everywhere. One tip that I can give you is to
mostly always work with the original. So if you do it like this, it's
always going to apply to the variants or the break points. But keep in mind that
this is not bulletproof. Sometimes you have a little bit of
inspection to do as with coding or design. This is just part of the practice. It is important that you learn how
to achieve these results and how to troubleshoot some of these problems. And there you go. We learn how to create the
top bar that is sticky. And we also made this adaptive
and responsive with a beautiful hamburger menu animation as well as
the interactions on the menu buttons. So I hope you enjoyed it. In this one, we're going to
cover the scroll parallax, which typically takes a lot of steps to
install and a third party library. But with framer, this is
done with just a few clicks. Also, we're going to continue creating
more layout components and learn a lot of techniques in between. So let's go to the desktop. And the first thing that we want to
animate using scroll is the embed element. Since this is locked, we need to select
this manually from the layers list. We have this section about effects. So we're going to click on
it and set scroll speed. We're just going to change
it instead of 110% to 80%. And that's it. So if I play this, you're going to see
that when I start scrolling the image itself is moving slower, which means that
the next section is covering more of that. And of course you can change the speed. To get a more dramatic
effects such as 50%. And it feels even faster. Now I'm going to put it back to 80%. And then I want to show you how to use
a scroll parallax on multiple elements so that they move at different speed. So to make your life easier, we're going
to select all of these items at once. Starting with a button title, text,
and then the column of two buttons. So we have four items in total and
then I'm going to add scroll speed. Then set to 95%. Like this, I'm applying
to all the elements. And from here, I can just select
them one by one and change the value. So selecting the title,
I'm going to set it to 90%. Then the text 85. And the column to 80. If I preview this, you're going to see
that it's moving at different speed. We just need to set the overflow,
not to hidden so that we can see outside of the bounds. And this will also fix
our drop shadow issue. So often you're going to have the
container that has the overflow hidden. And you can just set it to visible,
to show outside of those bounds. Play again, and this
should solve our issue. We can see different elements
moving at different speed including the embed element. The texts that are moving further
apart from each other and it creates this really nice effect. We're going to create more scroll
parallax after the content, but first we need to create more content. So I'm going to select on desktop,
and I want to show you that you can insert multiple types of layouts. So for example, here, if you
go to layout, we have hero sections, features, et cetera. And so sometimes to help you with a
basic structure especially if you're blocked creatively or if you want to
save time, it's a pretty good idea to use one of these pre-made components. So I'm going to use this
one, which is the gradient. And it's going to add here so I'm
going to move this outside of features. And move this down. Let me select it and
set the width to fill. If I want to start editing, I'm
going to double click on it. It's going to turn blue. And now I have my elements. Now, all of these elements
are fully customizable. I'm going to start with fill
and change that to an image I'm going to upload wallpaper one. And I'm going to change to my text styles. So selecting the title, I'm
going to change that to subtitle. But I need to edit the properties. So the weight is going to be
extra bold, I'm going to set it to white with a size of 50. I'm also going to add break points, which
gives me pretty good numbers already. So in the text property, I'm
going to center this and change the text to one of my own. Then for the second text, I'm going
to change to grow auto width, and I'm going to change the text to my own. Then for the button, I
can right click on it. And I can replace with
one of my own buttons. So going to project, I'm going to select
button and here I can change to Varian to. Also change the icon to cards. And the text to learn more. As you design more and more,
you're going to see that there are many patterns to create a layout. And they're usually comprised
of the same elements. That's why you don't always have
to think too hard about where to start and what is the first step. Sometimes you can just use one of
the template and really learn how to customize to your own style
or to the theme of your website. And that is such a good skill to have. In this case, I'm going to
add an extra icon to the top. Insert Phosphor icon, but that to the top. And I'm going to change to rocket. Then I'm going to add a
divider by using a line. This is going to have a 50%
width and one in term of height. For the fill color is
going to be 10% white. Also, I'm going to add another text. Change this to caption. Let's zoom out a little bit to see how it
looks like and typically what you want to do is to set all the texts to width Fill. And when you do that, it's
going to adapt nicely. But just make sure that
you center the text. As well. Then for the section itself. We want to have fit content. And set the magic paddings so 130, 130. And then for phone. It's going to be 80 20 80. 20. Let me adjust that for the
other sections as well. 84 top and bottom. So it's essentially 20 less. So we can also use operations. So minus 20. It's one 40 and then minus 20 is 80. The goal is to use the space
properly depending on the device. What feels right in term
of information density. When you have a bigger screen, you have
to fill the space more and the negative spacing helps breathe, but when it comes
to the phone, you need to make sure that the negative spacing is not at
the cost of usability, meaning that you need to have enough information density. Smaller fonts, images and spacing. So in this layout, I want to set
multiple columns and I'm going to select all of these elements. And create a frame. So command enter. Then I'll set it to fill. With a height of fit then
a max with of 400 pixel. It's going to affect the inner elements. I'm going to select all the
texts again and set them to fill. We have these break points that
is always available to us to see. And we can see what goes
wrong and how to fix this. Now let's talk about the scroll parallax
because it's slightly different if you have a section that is not at the very
top of the page, because you have to think about the positioning of the scroll. So in this case, I want to make sure
that I'm not using a background. If I want to use a scroll
parallax on the image. So I'm going to go to styles and
I'm going to remove that image. Instead, I'm going to create a frame. And remember that by default,
it's going to add to an element. And so what I need to do
is to set this to absolute. Set the constraints to zero on all sides. And then change the fill to that image
that I wanted which is wallpaper one. Then we need to make sure
that it's underneath. Then let's rename it. And we're going to set
the Z index to zero. Again, when you're changing things around. It's definitely going to
affect your break points. So make sure to reset overrides if you
need to, or to change those manually. Awesome. Now that I have my background
that is essentially an image I can apply the scroll parallax to it so
I'm going to select scroll speed. Change the speed to 90% and instead
of setting scroll to current. I'm going to set it to scroll. But first, let me show you why. So I'm going to play this and you're
going to see that even before I get there, the scroll position
is already affected dramatically. So in order to fix this, we're
going to go back to scroll speed. And we're going to select scroll and
here's only going to start moving when the bottom of the visible area
is touching the top of the section. So you're going to see I'm here. And it hasn't moved yet, so I
don't have that white space. And of course, depending on
the positioning of my image, I can change the value. So in this case, I'm
going to set it to 500. So now it starts a little bit later but
again, depending on the image here, I can simply set a background to fill the space. So that it looks seamless. So let's go back to the hero gradient. And instead of having a white fill,
I'm going to set to the same color as this blue background, I can use
the eyedropper to select that color. And when I try again you can see that
I no longer have that problem, but I do have my scroll parallax effect. Let's create more content for the layout. Let's start by creating
a frame of 300 by 300. Now, what you're noticing is
that sometimes when the image is a frame, whatever you draw is
going to be inside that frame. So you might want to take it out. And if you don't want this to repeat
again, You might want to lock that layer. Let me put this to the front. I'll set to 300 by 300 with a
corner radius that is specific. So 40 0, 40 and 40. Then I'm going to change the fill
and I'm going to go to image and this is where we're going to use a really
neat feature and that's Unsplash. So if you're not familiar Unsplash is a
service where you can find a lot of free photos that you can use in your design. So we're going to search for 3d
render and you get a lot of nice images that you can use for your site. And this service is available
on most design tools via plugin. And in this case, it's directly embedded
into the image feature of framer. So I'm going to search for 3d render
and I'm going to scroll a little bit to find the one by Javier. Click on it. And it's going to apply to my element. So let's create another frame. With a height of 1 20 and I'm going to
set the constraints to zero left right and bottom with a Fill of black 20%. Then the border it's
going to be white 10%. Now we want the border to be
shown also for the corner radius. So we're going to use the same
corner radius value, which is 40. And then we're going to use a background
blur sheet, which is really nice when you have an image in the background. So if your design style has a lot of
backgrounds, and shapes and colors that are behind, the background blur
is going to really help set the depth for your design and top of that,
whatever content that you have above it is going to be much more legible
instead of using the traditional gradient mask using black opacity. So I'm going to add
background blur, set it to 40. And from here, I'm going to use layout. Set the padding to 20. And distribute to start, which means I'm
going to align everything to the left. Now I'm going to create a text. Coit tower. Which is footnote to. Then duplicate this I'm going to use. Caption and again, Duplicate
and then caption 2. So let's change the text for the
second text to 30 minutes ago. And the third text. 3000 zero 54 steps. Then select the container. I'm going to set to direction vertical,
and now I can use a line instead. So depending on the direction distribute
and align can apply differently. But lucky for us. Everything is visual. We can easily play with these values
and we can understand what's going on. And the same concepts apply to CSS. Next, I want to add a
button to the top right. And also a text to the bottom right. I could of course create a frame for
these three elements and another frame for these two elements, but I can
also use absolute positioning which is going to have less containers. So both methods are good. I'm going to use a second one so that we
can practice with absolute positioning. Now I'm going to insert my component,
which is going to be button 2. And then with this selected,
I'm going to set to absolute. Then the position of 20 from
the top and 20 from the right. Perfect. So for the bottom right text, I'm going
to use the same text as the third one. And then apply absolute again, 20
from the right, 20 from the bottom. Then I'll change the text to 3% higher. Now one of the key rules in design
is to make sure that texts are well aligned with each other. Most often we're going
to align with a baseline. There are two ways to go about it. One is to use space between
or a height of fit content. So the height is going
to depend on the content. Otherwise, if you absolutely want to have
that height of one 20, which is fixed. We can always use space between and
it's going to push this to the far end. Now that we have the card created,
we're going to create a component and have multiple variants. So I'm going to name this one card. And then I'm going to
create a second variant. This time, I'm going to remove the
image and then replace that with a solid color, which is going to be white 10%. Then I'm going to add a border. Of white 10%. Also, I'm going to use a
background blur to fit nicely with whatever background that I have. Right click here, background
blur, set it to 40. Then I'm going to add some
text content in the middle. So set this to layout with a gap of 20. Now I'm going to add a title, which
is going to be closer rings which is going to use section title. I'm going to move that to the top. Duplicate this. Then add some text. And here I'm going to use caption. Then center the text. Then I'll set the width to fix,
and it's going to be two 60. Now I want this to hug
the bottom and the right. I'm going to change the width to fill. And also, I want to make sure that this
container is going to fit the content. I also want to have some
padding from the top. So I'm going to use specific
padding from the top to 20. Then oftentimes you want to add an icon,
to the left or to the right of the text. So you can just create that
right away by inserting. So let's say first Phosphor icon. I'm going to move that to the very top. It's going to be 30 by 30. Set color to white. And the name is person simple. Run. There you go. So afterwards you can easily
select both and create a frame. Then fit the content for both
with and height, then set the direction to horizontal. So with this technique, it's very easy
to have additional content and stacks. You can just select the elements that
you want and then put that into a frame, then change to fit content. Now let's create a third variant where
we're just going to have this bottom part. So I'm going to remove the content. Then go to styles and remove
the border as well as the fill. And also the extra padding
that I had at the top. Now I'm going to add some drop
shadow here and it's going to be a little bit more dramatic. There's a really neat feature
called realistic drop shadow. Instead of creating multiple drop
shadows and organize that, we have only one realistic drop shadow,
and here you can play with the Y position as well as the diffusion
to create the effect that you want. You can see that this looks very much like
in real life which normally, if you were to do that, using the traditional drop
shadows, you would have 3, 4, 5 layers. So, this is very nice. I'm going to set the Y to
100 and diffusion to one. Again, if you apply to the main
variant, it's going to apply to the secondary variants as well. Next I'm going to set the variables. Of course you can set way more than
what I'm going to do because of time. So far we have the image. And then I'm going to set the title. So this is going to be
a plain text name title. And I can even add a text. So content here and plain text named text. Now I'm going to exit this and create
multiple instances of this component. The second one, I can set San Francisco. And change the image to
again, Unsplash 3d render. I'm going to scroll a little
bit to find the one by Polina. And there you go. We have a nice background blur on top of
this element creates a really nice shade. I'm going to select the whole container. And then set the direction to horizontal. And I want to have three columns. So these two is going to be part of one. So select both create frame. Select the layout. Width, height to fit And
then direction vertical. Gap to 50. Now we need to make sure that
the overflow is set to visible. Otherwise it's going
to cut off the shadows. So let me duplicate
this column right here. And now I'm going to change the variants. So this is going to be variant to. And this one is going to be variant 3. Really nice. So you can see thanks
to the background blur. We have some really nice effects
on top of the background. And then I'm going to
duplicate this one as well. And go back to Variant one
change the title to Cupertino. And the image to, again, 3d
render and I'm going to scroll a little bit to find the one that I
want, which is the one by Simon. Now of course you should definitely
use your own titles, texts and images and really play with the layout. I think that's really going to help
you get familiar with UI design, but also with framer in general. So, let me select the
whole container again. I'm going to set the gap to 30. And I want to show you
a really cool technique. So, this is what I have
for tablet and mobile. You can see that we
have a bit of a problem. Now with just one setting, which
is wrapped to yes, it's going to put the items of a horizontal Stack
to the next line when necessary. The only problem that we have
here is that we need to make sure that each item has a fixed width. So in this case, I'm going
to select this Stack. And instead of using fill, which
is very dynamic, I can also use relative which is to 100%, and
this is a little bit less dynamic. We don't have a fixed size because
it's fill and we have a max width. We can also add a min width to make
sure that we do have a range of size. So I'm going to set to min width 300. And you can see that
it's looking pretty good. So in short, when you're using wrap,
make sure that the elements inside the Stack has some sort of a size. You can use a fixed size and this is using
the component size, or you can use a range of size by using min width and max width. So those are really cool techniques
and I'm just going to fix the text style because I find them to be a
little bit too small for the phone. So I can go to assets. And here I'm going to click on
footnote then check for break points. So I'm going to set to 14
for both medium and small. This is going to improve a lot
and the same for footnote now. We're good. And also for captions. So 14, 13. Making sure that we
have consistent numbers. So 13 here as well. Sometimes the default values when you add
break points are a little bit exaggerated. So you might want to customize. But most importantly, you want
to be consistent across the way. So if you're using those values for
caption 2, you should also use the same values for caption because the difference
between the two is simply the text transform as well as the font weight. Awesome. I hope you learn a lot about
scroll animations and layout. In this section, we're going to
learn about appear animation. So basically when you load the
website, you're going to see a very nice welcoming animation. And also when you scroll,
it's going to fade in nicely. Now in framer, you can use all
sorts of values to animate such as the X and Y position as well as
scale rotation and 3-d rotation. Now let's start with the basics. So we're going to select these four
elements and then we're going to, and then we're going to effects and add appear. So we have a bunch of preset
animation, including the scale in, which is a default one. So you can play with this
list and preview them. The one that I like to start
with, especially because it's highly customizable is fading. So now I'm going to customize that effect. And here you can see that I have
multiple values that I can work with and fade in is going to use opacity. So starting at zero and then going to one. I also have X, Y rotate, rotate X
and rotate Y as well as perspective. So these three is for the 3d transform. If you're familiar with CSS animation,
they're basically the same as transform. Right now I can use offset Y
because I'm already using the scroll speed and the scroll speed
is controlling the Y position. So what I'm going to do is to
use left-to-right animation by using the offset X. And I'm going to set that to minus five. Then I can also change the transition. Spring tends to work well, if you
have a lot of movement and distance. But if it's a small
distance, I like to use ease. It's a little bit more predictable
and I'm going to set the timing to 0.8 as well as a delay of 0.1. Now I'm going to preview this. And you can see a very subtle. Animation from left to
right, as well as opacity. But the thing is we're going to spice
it up a little bit by using delay. So I'm going to go back to layers. And I'm going to start with the button. Then click on appear, by the way, if
you have these tool tip enable, you can navigate them and you can switch between
the items for their specific settings. And that's really helpful,
especially for sequence animations. So button's going to be
minus five and then minus 10. And then the third one minus 15. The fourth which is the columns minus. Minus 20. So now we have a little
sequence animation. Let's refresh that. It's very subtle, but
that's how we like it. Another thing that I want
to do is to set the delay. So I'm going to select this second one. And go to appear, ease in. The second one is going to
be 0.2 in term of delay. Third one 0.3. And then the columns 0.4. Now it's even nicer. And at the same time, I also want
to animate the embed 3d asset. So I'm going to go and add, appear. Let's repeat the step, fade in. This time, I'm not going
to use any positioning. I'm just going to go to spring
using the timing, ease in out with a timing of one second. And that's it. The problem that we have right now is
that the background is white, which does not fit with the embed background. So we can go to the desktop and
change from a white background to a black background. So this should be a little bit better. Now let's talk about 3d transform
because a lot of people haven't played with these settings yet. I'm going to select these four elements
again and go to appear, go to effect. This is where on top of playing with
offset X and Y I can use rotate, especially rotate X, Y and perspective. So to show you, I'm going to
set the opacity to one for now. If I play with the rotate X, you
can see, this is how it looks like. It's kind of like 3d ish. And if I pair that with rotate Y,
you can see that it's really cool. And the perspective gives
me the exaggeration or not. But I can keep it to 1200. Now the settings that I will use is 2020. And I'm going to use the sequencing. So the second one is going to be 15. 15. The third one 10 10. Then the columns five five. Let's not forget about
putting back the opacity. So set it back to zero and
we're going to play this. And voila, we have a very
unique intro animation for the content and the background. Now let's do the appear animation
on this section right here and just like scroll speed, it's going to be
a little bit different because it's going to animate when it's visible. So let's do a basic animation. I'm going to select all
of these six elements. Then add effect appear. But this time, instead of onload
it's going to be on scroll.. The difference is on scro ll is
going to animate when it's visible. You don't want to start your animation
on load because otherwise you're not even going to see the animation
because it's going to happen even if you haven't started scrolling yet. So again, I'm going to start
with the fade in and enter. This time I can use the offset why because
my elements are not affected by the scroll speed, which is using the Y position. So I'm going to set to minus five
for all six elements and I'm going to go to spring, switch to ease,
change the time, 0.8, delay 0.1. Then I'm going to select from the layer. And I'm going to go to the second
one and change the delay afterwards. So 0.2. 0.3. 0.4. 0.5 0.6. And also I'm going to change the offset. Great. Now you're going to see that when
I scroll and only when I see this, it's going to start animating. Let's do the same with the cards. Select all five. Set the effect appear, on scroll. Fade in. Enter. This time I'm going to
use minus 10 for offset y. Ease. 0.8, then start with 0.1. And select the second one. 0.2. 0.3. 0.4 And then five. Awesome. So you can see that we have a pretty
smooth animation on this section. So I'm going to continue with the layout. And what I like to do is to
have alternating content. So something that is more complementary. And then something that has a
background, a little bit more effects. Typically, you don't want to
have every single section to be heavy and a lot of colors. You want to pair it with something
a little bit more neutral. And also it's good to
alternate your content. So for example, if the titles are
on the right side, maybe in the next section is going to be on the left side. So it makes your design less repetitive. And it also injects a little bit of
energy into the scrolling experience. So I'm going to name this
section components one. And then I'm going to duplicate
this because I'm going to use fairly similar content. The only difference is I'm
going to remove the image. And also I'm going to switch
to my other background color. So I drop her and use
the same as this one. As I mentioned before, I like
to alternate the content. So now the titles are going
to be in the left side. And this time I'm going to
have two columns instead. I might also want to alternate the button. So I'm going to set to variant one. I'm also going to set the height to 44. And the same for this button. I find that to be a little bit too
slim for the content that I want. And there you go. So without changing anything really
I'm able to create a flow that feels natural and interesting. And now we just need to
change the content itself. Starting with the title. And also I'm going to
change the icon to trophy. Then I'm going to switch the
second component to variant three. And now I'm going to show you
how to create an interesting circle showcasing a little bit of
progress and a bunch of circles. So I'm going to start with
a frame of 375 by 3 75. This frame is not going
to have a background. Then I'm going to start with a component
that exists from the components list. It's called progress. And it looks a little bit like this. I can insert it and I can customize it. Works pretty similarly
to the apple watch ring. Now I'm going to set the
width to 180 and height 180. And here I'm going to change the
value and you can see that the progress changes based on that. I'm going to set it to 30%. The animation happens right away on load. And for the color I'm
going to set it to white. And the track I'm going to
set it to white, but at 30%. Then I'm going to create another frame. One 40 by one 40. Then center it. Radius 100%. So that makes a circle. Let me adjust the progress
as well in term of centering. And go back to my circle. So here, I'm going to use the
fill and change that to gradient. And change the angle to 1 35. Then I'm going to pick
the reddish gradient. And I'm also going to add
a border that is white 30%. Now with a circle, you can essentially
duplicate this multiple times to create sort of like a sonar effect. So duplicate it and resize
it using option shift. Then I'm going to set it to two 20. Let me send this to the back by
using command square brackets. And I'm going to use a different gradient,
which is going to be the purple one. Then the border is going to be 50%. Now I can play with the opacity. Let me set it to 0.5. Then I will duplicate this again. I'm going to set the
other one to 300 by 300. If this is not precise, I
can always go from here. But just make sure that
it's well centered. This time is going to be
0.2 in term of opacity. Then selected duplicated again. And I'm going to take the
full width and height. So 3 75, 3 75. Center. I will remove the fill and set the border
to 10% and put the opacity back to 100. So this is what I have so far. Obviously you can play with the colors. The sizes to create something a
little bit different from mine. But essentially you want to use
the progress which gives the information and makes it dynamic. But otherwise the rest is just
to complement your progress. I'm going to rename this frame to circles. And I will move it inside rows. But this time we want to
use absolute positioning. Now, I'm noticing that in my
circles, I have the big one, which is using constraints. So I'm going to disable the constraints
and make sure that it's just 3 75 by 3 75. Sometimes the constraints set
automatically and it can affect if you change the size of your frame. So I'm going to select the circles again. And set overflow visible. And I'm going to move it to the center. Then use Z index zero. So that it's really in the background. Awesome. Sometimes you want to start with
an existing component in term of layout and styles, but you don't
necessarily want that to be a component. So what you can do is first of all, I'm
going to select two variant to let's say this is a little bit more interesting
especially with the background element and I can simply detach instance. Then it becomes a normal element, which
means that I can customize it from here. So I don't really need the
rows and the description. Now the circles are kind of in the way. So I'm going to lock that. And select back the card. Then I'll set the gap
to 10 and padding to 10. I will also insert an image. Now, let me just put the
image outside of the columns. And I'm going to set it to
fill with a height of 180. The radius 30. Then the image itself. I'll go to Unsplash then I'll
search for 3d abstract then I'll select one of the images. So I'll change the text to choose,
which represents the image. And I don't need an icon here. I have an extra container. So if I want to remove that,
I can always command delete. So this is a shortcut to remove
whatever container that you have. Then I'm going to select components 1. Duplicate this and move this after. Let me rename this to components three. This one will also have two columns. So I'm going to delete the middle one. I will replace the image
by uploading wallpaper 2. Then I'll change the title. And change the icon, which this time
is going to be let's say record. Now, I'm going to use one of
these components and customize it. I'm going to set to variant two first. This is the closest to
what I want and detach it. Let me remove the rows,
which I don't need. Then change the radius to 40 on all sides. Then set the padding to 30. So I'll select the frame. I don't need the icon. So I'm going to remove the frame first. Delete the icon. Change the title. Then add some text. Now there's another cool
plugin, which is called humaaans for creating illustrations. So I'm going to insert that. Go to icons and select humaaans. Now, what is cool about this. Is that it has a bunch of
preset characters, including the colors that you want. And you can customize the
colors of the skin and the hair. So, for example, you want
to have different head. Different hairstyle. And the same for the body. As well as the bottom portion. So you can make the
illustration stand or sit. Direction left or right. So after you're done, you can
move this below the title. I'm going to delete this component. And just duplicate my new custom card
and I'm going to create a new one. This time, I'm going to remove
the illustration and insert the component, which is called progress. Going to move that to the
middle, set it to 1 75 by 1 75. With a value of 30%. Then scroll down a little bit
to change the thickness to 20. And I can change the colors. So white and white 30%. Now, let me change the title. As well as the text. And voila. So it's that easy to create multiple
styles of components and detach. Duplicate existing sections, which in turn
already have those appear animation setup as well as the layout options for mobile,
you might need to adjust a little bit. We need to fix something real quick. So in set speed. Because the background is at
the top and not at the bottom. I need to set the top to zero. And so far, this is what we have. It has nice animations across
all of those new sections. And we managed to create more layout
styles and cards and types of content. In this section, we're
going to make an overlay. And also we're going to
create a signup form. What is an overlay? Essentially you can put any
UI on top of the existing UI. So this is great for a floating menu or
floating button as well as any modal, such as an alert, a message, a sign
up modal as well as a forgot password. Now the overlay needs to
be connected to one of the elements, especially for buttons. So, for example, if I click here,
it's going to show the overlay and I'm going to select the button. Then I have this option called overlays. So if I click on it, it's going to
give me the space to design my overlay. First of all, I can set the
preset animation in this case, I'm going to set to fade in and out. Then change the background to 30% instead. Then I'm going to create my actual UI. So starting with a frame of 500 by 500. Let me center this. Then scroll, get a radius of 30. Background black 30% and border
white 10% with a background blur. I'm going to set this one to 30. And there you go. So the container I'm going
to start setting the layout. The gap is going to be 30. Padding 30 and 60 for the
top as well as bottom. Then direction vertical. Now I'm going to create my title,
which is sign up and I'm going to change that to subtitle. Then I will create a second text. This time, it's a paragraph. And because the text can go smaller
I'm going to set it to fill. Then center. Now let's take care of
the form here in framer. We have a bunch of preset ones. So I'm going to go to the forms and I
have MailChimp for newsletter, Intercom for customer support and chatting. Newsletter again. Collecting with a form with Typeform,
calendar and here we have form spark which lets you collect information so people
can enter their email name and message. This is not going to be a real
sign up form because that would require a database such as Firebase. But if you just want to collect some
light information, you can use form spark. First of all, I'm going to go
to the options and I'm going to hide the message first. Then the layout is going to be vertical. And also for the width I'm going
to set to fill to fit my container. For the height I'm going
to set roughly to 1 90. Then the button color,
I can change the color. to 7 7 5 5 CC. Now I'm going to move the
paragraph right below the title. Then I'm going to add some
disclaimer, text below. Set it to fill. And it's going to be a text style caption. Then I'm also going to center it. So this is my signup form using overlay. And you want to see how it works. You're going to tap on, get the app and
you can see, we have a fade in animation. This is going to be instantly
appearing because the fade in only applies to the background itself. So we should tap outside
it's going to fade out. If you want to have an animation also on
the modal then we're going to use effects. So let me rename this to modal and I'm
going to select it and scroll down a little bit to get to appear effect. Change that to fade in. And I'm going to change also
the offset Y to minus 20. Change from spring to ease in out. And delay 0.1. So now I should have some fade in,
fade out also on the modal itself. And it's going to reverse
the animation when I dismiss. Now what about a custom background? So I'm going to add a background blur
because it's going to blur the background. Gives a nice effect. So I'm going to create a frame first. Then set the constraints
to zero on all sides. Move this below the modal. Then remove the fill. And add a new background blur. Let me set this one to 20. So this background blur is going to be
nicer with the animation as well, so that it fits with the rest of the animations. I'm going to set appear
again, using fade in. And this time I'm going to switch
from spring to ease in out. The timing is going to be one second. So let's test it again. And voila. We have a nice blur animation as well. Now, the only problem is we need
to be able to dismiss the same way. So framer has a neat
function that you can add. So I'm going to go to interaction
with a background selected. And it has the option to close the
overlay on tap and it should be working just the same way as before. And boom. Awesome. When you're done, let's
exit the overlay canvas. And now we're going to build a
new section for the pricing cards. If you have any product that is paid. The pricing card section is a must. And in fact, Framer has a bunch
of these components as well. So for example, You can scroll down a
little bit to find the pricing section. It has a bunch of components that you
can use, but otherwise I'm going to show you how to do it from scratch. So I'm going to have a background that
is going to be aligned from the bottom. And the closest section that I'm
going to use is the components one. It already has all the
animations that I need. So I'm going to duplicate this
one, move that to the very bottom. I'll scroll and then change the image. I'm going to change this
one to wallpaper three. Then select the container and change
the background color to fit this background which is my wallpaper. Now I'm going to remove the
parts that I don't need. So these two columns. And the rows container command delete. Let me rename this to pricing and
do the direction vertically instead. So I'm just going to keep the title text
and line, which means that I can delete the icon, the button and the small text. I'll change the title to ready to start. Then the text as well. Okay, so now we're ready
to create the pricing card. I'm going to start with a frame. Let me size this to 360 to 4 60. The radius 25. Fill is going to be white 60%. Border white 50%. And also I'm going to use a
background blur that is 40. Now I'm going to start with the icon. Insert Phosphor 32 by 32. Set the color to black. And change it to a pen. Now, let me set the layout. So I'm going to set to
fit with a padding of 20. Then I'm going to add a text. Free plan. Which is footnote to. Since the textile is white, I'm going
to have to change manually to black. Then set the price. I'm going to duplicate this,
15 per month using subtitle. Then we have a small toggle and info that
we can use from the button variant 3. So I'm going to insert a button. And set it to varian three. I'm just going to detach. Set the width to fit content. Change pretty much the whole
content to the black equivalent. So you can just move the
color wheel to the black. And for both colors and the
same for the border color. Likewise for the text, I'm
going to set it to black. And the icon, set it to black. Here for the text is going
to be, up to three projects. Then I'm going to change the icon info. Next, we're going to show a
list of features for each plan. So I'm going to start with the
icon that I can copy from here. This time is going to be 24 by 24. I'll change it to globe. Then add a text right below it. Which is going to be. Footnote. Now, selecting both I'm
going to create a frame. Set to fit fit. And change the horizontal. Then duplicate it four times. And change the icons as well
as the text for each feature. Starting with lock. And then password protect. Books and gigs of bandwidth. Then Stack 1000 CMS items. Then person and 10,000 visitors. Keep in mind that these are
just placeholder texts and you should definitely customize that. So now if I want to align everything
to the left, I'm going to select them one by one and put them inside a frame. Again, using fit and fit for width
and height, then align to the left. Next I'm going to add a button. So, let me use the components
again, using the button. Go inside the components because
I want to add two more variants. And I'm going to do that from the
variant 2 so with this selected, I'm going to create the variant. Which simply is going to have no border. And the opacity for black to a
hundred percent on both sides as well as the icon being white. Let me create a fifth one this
time with the colors inversed. So it's going to be white. Then the elements with a black color. So going back, I'm going
to set two variant 4. Change the icon to pen. And text to try for free. And I also would like to have a line
between the button and the features. So I can just copy from this one. And put it here. I'm going to set it to 50% instead. And set the color for
the fill to be black. Awesome. Next I want to add a drop shadow,
and it's going to be the realistic one with a Y of 100 diffusion one. So with this, I can create a component
and create the two other pricing cards. So let me option command and K. Set the name to pricing card. And then I'm going to
create a second variant. Now this one is going
to be the popular one. And you want to make this
stand out a little bit more, so it's going to be taller. And it's going to have a
little tag that says popular. So I'm going to use this small button,
duplicate that, move that to the very top. And just switch the icon to the left. Let me change the icon name to metal. And the text to popular. For the textile, I will
change to caption to. Then this card is going to be in dark
mode, which means that I'm going to inverse the colors pretty much everywhere. So let's start with a small buttons. I'm going to change the fill
t o white on both sides. The border to white as well. And here I can essentially
select all similar elements. So all the texts. Change it to white. And likewise for the icons. All similar icons. And change the color all
at once, which is neat. And then the line set it to white. For the background of the container
I'm going to change it to black 40% and the border to white 10%. Then for the button, I'm going
to change it to variant five. Now the goal here is to make sure that
when I'm going to center the three cards. This is going to align perfectly. Button to button and text
to text in term of baseline. I already tested and the padding that I'm
going to want is for the bottom to be 68. And then I have the third
card for the pro or the team. So selecting the first variant and I
realized that I have an extra variant, I must have been trigger-happy. So I'm just going to delete this. And it's not going to change anything. So we have variant one and variant two. And now from Variant 2 I'm
going to create Varian three, because it's the same colors. So I'm just going to remove the
extra element as well as the padding, which is 20 on all sides. Then change the background to black 90%. So what's left is to customize
the content a little bit. And also I forgot that I do
have an extra line in between. The tag and the rest of the content. Some duplicating that
and moving this here. And I'm going to change the price. This one to 30. This 1, 2 45. Change the text. The middle one is basic
and the right one is pro. Finally, we have the icon. This one is circle. And this one is cloud. Of course feel free to use your
own design and your own content. Then let's not forget about the buttons. So I'm going to set credit card. And the text is going to be subscribe. Now what's cool about Framer that you
shouldn't hesitate to select multiple similar items and edit them at once. It's going to save you so much
time and it's really powerful. Also, we have this small button
that I should change to toggle left. And the text is going to be built yearly. So I'm going to copy that. And change this text as well. So with this, I want to make sure that
we have the right name for the variant. And then we can go back to home. And duplicate this two times. To change the variant to Variant
2 and then variant three. So I'm just going to set it
to be next to each other. So I'm going to create a frame first. Set to Fill for width and height to
fit content, then direction horizontal. Go to overflow and make it visible so
that we can see the extra drop shadows. Now for the gap, I'm
going to set it to 30. And I'm going to zoom out a
little bit to see what it looks like on the other devices. So you can see that we
have a bit of a problem. Now to fix this, remember that when
you create components, They tend to use fit, and it's going to use the size
that you have set inside the component. In this case, it's set to fixed. But all that can be changed
from outside of the component. So for example, I can set it to fill
and if they're all set to fill, then it's going to take the available space. In this case. It looks pretty good, except that I
can even use more space by removing the gap to zero for the tablet. Now, remember that my goal here and
why I added the bottom padding was to align all the buttons and the content
so I can use my ruler from macOS and you can see it's pretty well aligned. And now I'm going to take a
look at the phone resolution and set direction to vertical. So we're going to have the
same problem for the in-between resolution and the large resolution. So we're going to preview
this, for example. And you're going to see. That it gets too large and also in
between the resolution it's way too large. So remember that we fixed this by using
the container and set to max width. Now I'm going to start with the
original, which is the main, so it's going to apply to the rest. And I'm going to set
max with the 1200 pixel. And here as an override
I'm going to set it to 400. And so this should solve
the problem that I had. And it's not going to go larger than this
and as well, the in-between resolution. It's not going to go larger than 400. So that's it. And I think this design is really
nice if you have a background. So we're using the background
blur layer and you can of course change the wallpaper in the back. And it's going to set a completely
different tone because we're using these beautiful sheets. Now I hope you found it useful to know
about the overlays as well as how to use forms and creating a sign up modal
and working on the pricing cards. In this section, we're going to
learn how to create multiple pages for the site and how to link them. Also, we're going to create
more components for those pages. Let's get started. First of all, let me explain. We can switch to the pages tab. And this is where we have all the pages. When we created the file, we
had these pages already set up. So we can delete them because
we don't need them anymore. And we can start from scratch. I think we're going to
learn a lot more this way. Now the pages are based on the
menu that we have in the top bar. We have components, pricing,
updates, and sign up. So I'm going to create another page. This one it's components. Then another one. Or pricing. Then updates. And sign up. Keep in mind that these are not
just names of the pages, but they're also the URL on top of the main one. So in this case, You have a
randomized name before dot framer.app. And then you have slash signup,
slash updates, pricing, components. And this is pretty much the standard
for websites to make it easier to remember and to share those URLs. Now let's copy and paste some
elements into those new pages. So don't so that we don't have
something that is completely blank. What we actually need, and I'm
going to switch to layers is the hero component, plus the tab bar. So I'm going to copy this
switch to the components page. And then paste it. And voila. I'm just going to change the
title as well as the embed. The URL you can find in the content. So I'm going to replace the URLs and this
is what we have for the components page. Now for the pricing page,
I'm going to use the top bar. Plus the pricing component
which is this one. So I'm just going to go to pages. And then paste that. The positioning is a little bit
weird right now, so we might need to use height, fit content and
make sure to set the gap to zero. So I'm going to do the same
for components, select the desktop and set, fit content. Gap zero. For the updates I can start
with what we have in pricing. So let me select the
pricing and on top bar. And there you go. So set to fit content. Yep. Zero. We named this to updates. Remove the pricing cards and
also we're going to change the image to wallpaper five. So each page is going to have
its own wallpaper, which means that I should set the image for
the pricing to wallpaper for. And you can see it sets
a very different tone. Now I'm just going to increase the
contrast a little bit here for the text. So set the color to black. And the line as well. And let's take care of the last
page, which is the signup page. I can also start with what
I have in the updates page. And select the desktop set to fit content. Gap zero. Change the wallpaper to wallpaper six. Now we already created a UI for sign up. We're going to go back to home and we
can find that UI inside the first button. Going to layers. I'm going to go to overlay and
I'm just going to copy the modal. But before that, I might want to
set a component so that I don't have to change across multiple places. So with this component, I can copy it
to the sign up page by selecting the section first and I actually don't need. The title and description because
I already have in the modal. And in term of name. You also want to change
those to be consistent. It's a lot of back and forth of course. But we're creating these
pages really quickly. And that's just how powerful framer is
because a lot of these changes oftentimes are really confusing and time-consuming
when you do them in code, especially if you have a very large code base. So you can see that framer makes it
super easy and instant to not just make the edits that you want, but to
deploy them instantly to the website. Awesome. Now we have five pages and
we can start linking them. Now we already have the top
bar component and it's included across all of those pages. So when we make the changes here,
it's going to apply everywhere. Starting with the logo that is
going to be linked to the homepage. So we're going to go to
interaction and click on open link. And this is going to link to home
and that's it for the linking. So I'm going to do the
same for the other buttons. OpenLink this one components. This one it's going to be pricing. And then updates. Finally we have signup. We can go back to home. And you can preview the pages. Going to components or going back home. But here for the pricing, we
do have an issue and this is related to the scroll parallax. So we're going to have to fix that, but
also we need to put the top bar on top. And this is an easy fix. First of all pricing, I'm
going to put the top bar after. And then for the image, remember
that we have this whole parallax. When you set the scroll is because
it's not at the top of the page, but when it's at the top of the
page, We're going to set it to 80% and current just like the homepage. I also want to make sure that I
do the same for the other pages. So the top bar after and the image. Set it to current 80%. And finally the signup. So the top bar after and the
image set to current 80%. Now I'm going to go back to home. And again, I'm going to preview this. And everything should work as intended. Awesome. Next, we're going to
talk about break points. And in fact, we should have done
this before copying pasting. Otherwise, we need to reset those
overrides for the extra breakpoints. So it's always recommended to have the
tablet and the phone for every page. And this can be a very good
exercise to know what is wrong with your layout and how to fix them. So in this case, when I copy and
paste, it doesn't have the width set to fill or to a hundred percent. And that's why we have this problem. You can easily tell by the
outline what goes wrong. And framer makes it super
visual to allow you to fix these issues across those platforms. Now for the rows, we're
going to repeat this. It's going to be very good practice. We're going to set it to fill. And also we have the padding that
we can set 20 left and right. And then the button to be vertical. And left aligned. Now I understand that we're repeating a
lot of these steps, but keep in mind that the ultimate goal is for you to find these
issues and to try to solve them yourself. Especially if we have already
gone through the motion. Likewise for the animations I didn't take
the time to apply the animation on every single element, every single section. So if you find that perhaps to
be more consistent, we should apply to some other places. Then you should take the
initiative to do those things and it's going to really help you. So let's go to the next
page, which is the pricing. Try to do it before I do it with you. And then see if you're doing it correctly. So we're going to add the
tablet and add the phone. Then we're going to go to layers. And make sure that the
width is set to fill. If you remember we set the gap to zero. And for the phone, we're setting
the direction to vertical. Also, we have a max width 1200. And here we can set to 400 pixels. And voila. At any point, you can test this and see if
it works exactly the way you intended it. Let's go to the next
one, which is updates. Again, breakpoints for tablet and phone. Make sure that the section
itself is set to fill. And we're going to take
care of the content later. Now let's go to sign up
and repeat the steps. Again, the section. Set to fill. Then go to phone and I'm going to
set it to fill for the container. And also the section
padding 20 on each side. Let's give it a test to
see if it works fine. One thing that we can even improve,
especially for the phone is to set less paddings so we have 20 here, but
right now we have 30 for the modal, and we can change that to save space. So I can easily create a new
variant specifically for the phone. And just for simplicity I'm going to set
to 40, 20, 40, 20 in term of padding. So now I have a little bit more space. And then going back here, I'm going to
switch to the variant that is the phone. And if I test this, you're
going to see that I have a lot more space for the phone users. Great. Now we're going to go back to pricing. And we're going to create an FAQ section. And this is going to utilize the
interactions again in components. So we can minimize and maximize
each question and answer. From the pricing page,
I'm going to go to layers. And I'm going to select the desktop. Then I'm going to add a new section. This section is going to
have a black background. And I'm going to start
with a title, which is FAQ. Set the text style to subtitle. Rename this section to FAQ. Set the width to fill and
the height to fit content. The padding is going to
be 100, 30, 100 and 30. And then make sure to set
the direction to vertical. And we will also set the proper
padding for mobile while we're here. So I'm going to set to 80 20 80 20. Now I'm going to set a component
for each question and answer. Let's start with the question, and
this is going to be a section title. Then I'm going to create a frame. With the content fit for with and height. Direction vertical. Padding 20. The radius 25. Then the border I'm going
to set it to white 10%. Now we're going to need an icon
on the right side that shows that we can expand or we can minimize. So we're going to insert a
phosphor icon that is 32 by 32. Color white. And the name is plus. So I'm going to select these two,
create a frame set fit and fit. Then set direction to horizontal. I'm going to move also my
icon to the right side. Let me expand the container
using fill in term of width. And likewise for the columns inside. So I'm going to set this one to fill. Now I want my texts to also take the full
width so it's going to use all available space and it's going to take priority. So set it to fill. Then I'm going to add a frame which
is going to serve as the line. Set it to fill with a
height of one the color. 10%. Then the text which is
going to use paragraph. Again, set it to fill. Now, I'm pretty much ready
to create my component. So command option and K. I'm going to name this one, FAQ. Let's set the variables, starting
with the title and then the text. Now that I have all my elements,
I can create the variant. And so I'm going to rename
the first one to be closed. And the second one to be opened. So what I need to do at this
point is first select the line and the text, set it to opacity
zero, but also set to visible no. And then go to opened. So these two layers, again,
opacity to one and visible yes. A really cool inexpensive icon
animation is to rotate the plus icon into a close icon. So all I need to do is to set
the rotation to 45 degrees. And it's going to animate for me. Now I'm going to set the connection
to open and it's going to be on tap. And likewise to make it easier to
tap I'm going to select the entire thing and going back to closed. Finally, we can add a little hover
state that is very simple, which is simply going to use the border color. And I'm going to set this to 20%. And that's it. So I can preview this. And scroll down a little bit. I can see that I have my
beautiful animation 40 icon. And I can tap on the whole
thing to maximize or minimize. Now I'm going to duplicate three
times to have four questions. Feel free to have your
own questions and answers. I have mine in the content. And voila. So I'm just going to add
a gap of 30 between each. And also I want the first
question to be opened by default. Then I'm going to fix the width. So that, because it's filled, it's
going to become way too large. So I'm going to select all four
components and I'm going to set it to 800 pixels in term of width. But for tablet, I'm
going to set it to fill. And likewise for the phone. So this section for the FAQ, we can
also use it for the page that is home. So, let me just select the
desktop and paste that. We might need to set the overrides again. So set it to fill. And for the phone as well. The padding I'm going to set it to 80. 20. 80 20. And before we go, we can reuse the
components one, two, and three sections. And put that into the components page. So select the desktop. And paste that let's make sure
that they all work fine for mobile and tablet and they do. Depending on the technique
that you're using. Ideally we don't need
to adjust to anything. But nothing beats testing. So we should always preview. Now we have the 3d animation. And we have the sections. Then publish. And test everything in the browser. Especially the new FAQ sections which
looks really nice and all the pages, the pricing , updates and the sign up. You can already see, we have built so much
together, including multiple pages and so many components as well as sections and
animations and working with the 3d embed. We're going to learn something
cool, which is the CMS. So that stands for
content management system. This is great, when you don't want to
go back and edit the layout every single time and changing the content manually. And instead you want to have an admin
panel where you can input a lot of data or you're working in a team
environment and there are a lot of non-technical people such as editors
and managers and they just want to be able to change the content from there. To use the CMS we're going to go
to the CMS tab here on the top, and we're going to add a new collection. We're going to start with something
very simple, which is the testimonials. Then you want to right-click on
it and take care of the fields that you need for your content. So in a testimonial, usually you have
the name, the job and also the text. Basically we can remove the existing
one and create from scratch. So I'm going to start with a plain
text and this is going to be the name. Then another plain text for the job. Then the text. And finally we have the avatar,
which is going to be an image. I'm going to name that avatar. So with this done, I can create my data. I'm going to fill the first one. And then when it comes to the
avatar, you want to go to Unsplash. And we're going to search for face. So it's entirely up to you. I'm just going to select
the first one right here. And then I'm going to create more data. So you can see that this process can be
done by anyone in your team without any technical knowledge of how to create a
layout and how to deal with a website. Let me just enter three more. There you go. So I have four items. Of course I can have hundreds of them. And this is what makes CMS so
powerful, but for the sake of this course, I'm going to keep it simple. We're going to have four items
and we're going to put the testimonials in the pricing page
right after the pricing section. Let me go to layers and I'm going
to duplicate the FAQ section. It's very similar. And it has the same paddings that I want. I'm going to remove the FAQ changed the
color to a color that fits well with the wallpaper that I have up there. And you can use the code,
which is 4, 4 0, 2 19. And I'm going to rename the
title to a more custom title. Such as this one. Set this to feel and center. Then add a text. Set it to footnote. Cool. Now that we have this. We can now insert the
content from the CMS. So I'm going to go to insert and we
have a tab for CMS content and you can see that I have my collection which is
testimonials and I can just click on it. It automatically populates with the
data that I have entered earlier. And now I have a bunch
of options in the right. So I can take care of the order. This is showing the newest first. I can also reverse it. And I can also filter by setting
a condition of what field and what value, but for now, I'm
going to remove the filter. I'm going to show everything. Then I want to customize the style. So to do that, you want to
customize the first item. Likewise for the structure. I want to have a simpler structure, so
I don't need to have the extra Stack. So I'm just going to delete
that using command delete. And I want my container to
have a direction vertical. Align to the left. With a gap of 12. Padding 20. Radius 30. And then border using white 10%. Now you can see that any time
that I changed the first item, it changes all of the items. And that's really cool and dynamic. It works the same way as the component
where if you change the main one, it's going to apply to all of the instances. So I'm going to style
each of the elements. And starting with the avatar it's going
to be 44 by 44 with a radius of 100%. Then I'll set the name first. Which is going to use the section title. Then the job to caption 2. And the text to footnote. Now I'm also going to change the color
to white for both of these texts. Like this. You can also notice that the blue
content is very similar to how variables work in components. So you can definitely switch them
around if you want to, but in this case, it's already the way I want. Now we're going to select the Stack again. And we want to have two
columns and two rows. So if I want, I can use a grid and
choose the number of columns that I want or the number of rows depending
on how much content that I have. If I want the items to take full height. First it's best to use a fixed height. So for example, 400 and that's going
to solve our problem, but sometimes you just want to fill like this. And it's going to work
a little bit better. And also selecting the container. I can set the width to fill. So I'm using the full width. Now I'm just going to fix the gap to 30. And I want to show you the advanced
options specifically for Auto. So I can have a min width for
each of these items and that is especially useful when you use Auto. So this is going to try to fit as
many items as possible with the available space using the min width. So I can set to 300 and whatever
exceed is going to go to the next line. So this is very similar
to wrap using stacks. And by doing this, I don't need to set the
number of columns and the number of rows. Now it's entirely up to you,
but I'm going to use fixed and I'm going to use two columns. Like this. Then set a max width of 800 pixel. Then for the mobile I'm going
to set it to one column. And voila. Then let's make sure that we fix the text. I'm going to set the width
to fill and center it. Now, before we finish the course,
I'm going to do the rest of the contents including the updates
page as well as the footer. And also we're going to make the 3d
embed optional so activate on-click then share the design as a template. So let's go to the page that is updates. And then we're going to
create a layout for it. So far as you've seen, there
are two ways to start a layout. Either you can start with the container
and then drill down into the content, or you can start with the content
first and then get into the containers. In CSS, you do the first method in
SwiftUI, you tend to do the second method. In Framer, I found that
both works quite well. So in this case, I'm going to start with
the content first starting with the text. Which is caption 2. Then the image which is going
to be Fill and height 300. Now it's a little bit annoying
that I always insert at the top. So I'm going to create
my frame right away. Command enter. Set this to fill and content to fit. Then align left. Gap 20 with a padding of 30. Now I'm going to set the
background right away. So go to styles with a fill
black 20% the border white 10%. Radius 30. Let's add a background blur
to 30, and then I'm going to add a realistic drop shadow. Setting to 100 and diffusion one. Now, I want to make sure
that it's not too large. So I'm going to set a
max width of 800 pixel. For the image. Let's readjust that to fill. And I'm going to set
Unsplash to 3d abstract. Let's scroll a little bit to find
this flower here by Simon Lee. Then set a corner radius of 20. Let's continue with the title. This is going to be a section title. Then duplicate it. With a footnote. Now, both the title and the text
I'm going to set it to fill. Then we have a line. Setting to height one. Fill with the color. White. 10%. And also we have a small title. What's fixed. Setting this one to footnote two. Cool. Now we're going to set the little
cards to show each of the fixes. I'll start with duplicating this. And then pasting the
content using footnote. Then the text using caption. Also, I'm going to insert an icon. Just make sure to put that
next to your new text. I'm going to set this to white. 32 by 32. Then move this before the
title and select the three. Create a frame. Set to fill and fit. With the Stack going vertical. Aligned to the left with a padding
of 30, 20, 30, and then 20. I'm going to change the style
with the fill of black 20%. Border 10% white. Radius 25. Now, because I'm going to use this
multiple times, I'm going to create a component out of this called fix
and I'm going to set the values. So the name of the icon. The title. And the text. Just make sure to fix whatever
problems you may have. So I'm going to set the text to fill. And then go back. I'm going to duplicate this and put this. And create frame. That to fill and height fit. Direction horizontal. And also make sure that each of
the component is also using Fill. So there we go. I'm just going to change the icon
for this one to Spade and then change the title as well as the text. Great I'm just going to fix these
text colors to black instead to have a better contrast. And also I'm going to create a new
section for the rest of the updates because otherwise the wallpaper
is going to stretch too much. Let me duplicate this. And I'm going to remove the background. Then change the background
color to let's say black then change the text back to white. Now we can change the content
and also change the image. And there you go. Let's make sure that the updates are
going to work fine for the phone as well. Everything is good,
except for the padding. Which we can set 2 80, 20, 80, 20. Likewise for here 80 20, 80, 20. And then we also want to make
sure that the Stack here for the phone is going to be vertical. And likewise for the second update. We actually didn't need the title
and description in the second part. Now, all that's left is
to create the footer. So I'm going to go to home. And we can see how we can design
a footer that is functional and well-organized and adaptive. So I'm going to go to layers,
select the desktop, create a new section using this plus sign. And here I'm going to
set a background color. First, I'm going to rename this to footer. Said the width, to fill and set to layout. Direction vertical. Gap 30. And then the padding is going
to be 100 30 100 and then 30. A footer is typically comprised of the
links to more of the sections that are normally not included in the top bar,
but also you can have a newsletter and then you have the copyright plus the
links to the terms and the privacy. So we're going to start with
the links and I'm going to insert the icon for each link. It's going to be 30 by 30. Setting it to white. I'm going to use Duotone and
change the icon to Stack. Now I'm going to insert the text which
is to the page components which is going to use the textile caption to. Now I'm going to create a frame
by selecting the two of them. Set to fit and fit. Horizontal. Have a little bit of padding
so I can create a button. 8 16, 8. 16. Radius 10. And fill black. For now. I'm going to set it to 0%
because I'm going to set a hover. But to do that, I'm going
to create my component. Which is going to be called link. Now let's create the hover state. And I'm going to go to the field. And set it to white. 10%. And I'm going to create
five more of these. Make sure to set to fit content. Then I'm going to change the content. But now I'm missing the variables,
especially for the icon. So let's not forget that. So the second one. Pricing, Credit card. Then updates. Using files. And then I'm going to have links
to the social channels, including discord and then Discord logo. YouTube youTube logo. Instagram. Instagram logo. So, let me set this into columns. I'm going to select the first three. Create frame. Fit fit. And then to the left. Likewise for the next three. Fit fit. And then left. Also, I want these links
next to each other. So create another frame. And fill, fit in term of height. And direction horizontal. Now I'm going to center. And I'm going to add a
newsletter component. Let's start with a title. Which is caption 2. Then we're going to use a really popular
service, which is called MailChimp. I'm going to go to forms
and select on MailChimp. Now you can see that I didn't
want to put that inside the rows. So I'm going to put that outside. Then select these two. Create a frame. Set to fit fit. And vertical. Align left. Put the title to the top. Make sure that depending
on the size of your texts. It's usually better to set it to
fill and likewise for the form. So I also want to have a little disclaimer
at the bottom of the newsletter. Just to say that we're not going to spam. Then I'm going to set this one to caption. Now for the container itself,
I'm going to style a little bit. Set it to gap 20. Padding 20. Radius 20. Fill Black 40%. And border white 10%. Also, I want to style the button. So I'm going to use the color. F F 5 2 4 F. Awesome. Now for each of these columns. I can definitely set them to fill. So that they use exactly the same space. Now I'm going to add a little
bit of gap between the columns. Add a divider, height
of one and with of 25%. Then set to white which is 10%. Next I'm going to add the copyright text. It's going to be a caption. Then duplicate and add the terms
as well as the privacy policy. So I'm going to use a
Stack by creating a frame. And set it to fit content. For now I'm going to use
the direction horizontal. And a gap of 30. Let's take a look if this is
working well for the tablet first. And so I can definitely reduce
the size of the newsletter. For example, I'm going to set it to
fill with a max with of 400 pixels. So this fits a little bit
better for the tablet. And we're going to deal with
the phone inside the components. Since we're going to be reusing
the footer across multiple pages. We're going to select everything
and create a component. Then right away, we're going
to create a variant and we're going to set this to 3 90. Now I'm going to set my container to
wrap and I'm going to set the padding to 80, 20, 80, 20 to have more space. I'm going to fix the text at the
bottom first direction vertical. And for these two columns
I'm going to set to fill. So we can definitely fix this by
making sure that the newsletter has a min width of let's say 300. Perfect. Again, there are many ways
to go about this layout and. You can even have two columns. So, for example, you can have another
container for these two columns. And it's going to wrap nicely. But otherwise min with max width
is also a really good option. All right, I'm going to rename this to
phone and I'm going to get out to home. Then I'm going to go to the
mobile and make sure that I'm selecting the phone variant. Then I can copy the footer. And place that inside the other pages. So selecting desktop and then paste that. Set it for the phone variant for phone. Do the same things for the other pages. Perfect. So one final topic that I want to discuss
is about the performance of 3d assets. I do have a course about spline and we
get to learn about the 3d environment and also how to create a mock-up like this. And you can play with the
animation, you can work with the interaction, it's really cool. But the thing is 3d is not made
for all the devices and there are are still a lot of them out there. So performance is definitely a big
issue when it comes to animations. And 3d. When you work with 3d, typically you
want to reduce the amount of polygons as much as you can, but sometimes. There's just a limit to how
much you can reduce that without reducing too much the quality. Already, we can see that these
polygons are not super curved it's a little bit sharp. But it still looks good. The two things that I like to do
is to reduce the shadow quality as well as the detail of shadow. Of course for each polygon you want to
reduce the number of this subdivision. In this case, I'm already at the minimum. Then you have these assets you want to use
low resolution assets as much as you can. And then we have the
blur layers et cetera. So we have to look into
all of these things. So at the end of the day, it
depends on what you're trying to create and how complicated that is. In this case, I do have a blob,
which is fairly heavy, I do have a background blur and multiple screenshots
as well as the interaction itself. A lot of computers can handle
this, but of course there's no denying that older computers can't. One thing you can do is to
go to the embed and create a component and make it optional. If performance is really
important and supporting all the devices is really important. So I'm going to select embed and
I'm going to create a component out of it called 3d asset. And then here, I'm going to set a variant. So I have the second variant,
which is the 3d asset. And then the first one. Instead of showing the 3d
asset, I can just have an image. So I'm going to set the
constraint to zero on all sides. And change the fill set to
image I'm going to upload. Hero background. So, this is what I have
and I'm going to hide. So set, visible to know for embed and for
variant 2 I'm going to do the opposite. So embed yes. And the frame to know. Then I'm going to set a simple
hover state which has a button. That I'm going to insert from components. And it's the button. Then I'm going to set to
variant three width fit content. Change the icon to cube. And change the text to
click to view in 3d. I'm going to set the connection
from the first variant to the second variant using a tab. And from here I should have the
image that shows by default. So it's going to load much faster
and then when I click on it, it's going to start loading the 3d. So like this on first load, your
website is going to feel a lot faster. And not everyone has to
experience the 3-d if their device can't handle the 3d as well. Now, this is a fully working site and
you can even share that as a template. So you can definitely publish it
and share the link and you can also save that as a template. And if you save that as a template,
typically, you're going to need a cover. So the canvas is kind of made for that. So you can say thumbnail. There's a specific resolution of
artwork and here you're going to put the cover for the template. I can just put this image, which
is a screenshot right here. And then I'm going to
set overflow to hidden. And there you go. I'm going to right click on this and
it's going to set as a thumbnail. So once you have the thumbnail, it's
going to show up in your template. So we can move back to the project or you
can save it again, as a template, then you can see the templates that you have. And you can copy the remix link, which
allows people to view the template and copy that to their account. And also you're going to be able
to publish your template make it free or make it paid to the
collection that is on framer.com. So I hope you had a lot of
fun following this course. I have my own template that
you can just copy into your project and work from there. I think we've learned so much about
how Framer works, how to do all of these effects, working with layouts and
parallax effects and animations as well as creating a full site with multiple
pages and 3d assets, really interesting components and CMS data, variables,
overlays a sign up form, and making our website fully responsive and even
creating a custom hamburger menu that is functional and really easy to design. I really enjoyed creating this course. And I think Framer has a magical
tool for creating a website that is familiar to a lot of designers who
are using Figma and framer and sketch. So I hope this experience is going to
encourage you to create your own site. If you create something interesting
give me a shout out on Twitter. And I hope to see you in the next course.
