Learn Framer in 20 Minutes (Crash Course)
Summary
TLDRThis tutorial introduces viewers to Framer, a powerful design tool, by guiding them through the process of building a stylish burger website from a Figma design. It starts with importing background colors and components for navigation, emphasizing the importance of understanding Framer's basics for customization. The video covers the use of stacks for layout, how to animate text and images for a dynamic presentation, and the implementation of responsive design principles. By creating a button component and adjusting its hover state, viewers learn to maintain consistent styling. The tutorial aims to equip beginners with the skills to design and animate websites in Framer, encouraging them to explore its full potential.
Takeaways
- 👋 Introduction to Framer, a powerful tool for building responsive websites and web applications.
- 🎨 Step-by-step guide to building a cool burger website using Framer in about 20 minutes.
- 🔄 Covers the basics and fundamentals of Framer, including components, layouts, and styling.
- 🎥 Demonstrates how to import design elements from Figma and customize them in Framer.
- 🍔 Walks through creating navigation menus, adding text animations, and incorporating images.
- 🖼️ Explains the concept of 'stacks' for layout management, similar to flexbox or auto-layout.
- 💻 Shows how to create and style reusable button components with hover effects.
- 🎬 Introduces Framer's built-in animations and effects for smooth transitions.
- 🏗️ Discusses the importance of responsive design and how Framer simplifies the process.
- 🔍 Provides insight into the differences between Framer and Webflow, two popular design tools.
Q & A
What is Framer?
-Framer is a design and prototyping tool that allows users to build interactive websites and web applications with a focus on motion and animation.
What type of website is being built in the tutorial?
-In the tutorial, a burger website is being built, focusing on the first few sections including the hero text, hero image, and hero info.
What is the purpose of using components in Framer?
-Components in Framer are reusable elements that can be used across multiple pages, allowing for consistency and efficiency in the design process.
What is the concept of 'stacks' in Framer?
-The concept of 'stacks' in Framer is similar to auto-layout in Figma or flexbox in web development. It allows elements to be stacked either vertically or horizontally, making it easier to manage layout and responsiveness.
How is the hero text animated in the tutorial?
-The hero text is animated using a pre-built component called 'Motion Text' from the Framer Supply, which allows for word-by-word or line-by-line animation of text.
What is the purpose of turning the button into a component?
-Turning the button into a component allows for reusability, making it easier to maintain consistent styling and behavior across multiple instances of the button, even with different variants or states.
How is the hover effect for the button achieved?
-The hover effect for the button is achieved by creating a separate 'hover' variant within the button component, allowing for changes in background color, shadow, and other properties when the user hovers over the button.
What is the difference between Framer and Webflow?
-The instructor mentions having made a separate video discussing the differences between Framer and Webflow, two popular design and prototyping tools, but does not provide details in this particular script.
What additional sections or features are mentioned for future development?
-The instructor mentions that turning the design into a fully responsive layout and adding the remaining sections of the website are beyond the scope of this particular video, suggesting that there are more features and sections to be developed in the future.
What is the overall goal of the tutorial?
-The overall goal of the tutorial is to provide an introduction to Framer, teach the basics and fundamentals of the tool, and guide viewers through building a cool burger website in about 20 minutes, focusing on understanding the core concepts rather than just copying and pasting pre-made designs.
Outlines
🎥 Introduction and Setup for Building a Burger Website with Framer
The video provides an introduction to Framer, a tool for building interactive websites. The goal is to build a cool Burger website in about 20 minutes. The speaker mentions that Framer has a plugin to import Figma designs with a single click, but in this tutorial, the focus is on teaching the basics and fundamentals of Framer so that viewers can understand how it works and can customize and build whatever they want, not just copy and paste without fully comprehending the process.
🌈 Setting up Background Color, Menu, and Layout
The first step is to bring in the background color, which is a dark gray. The speaker then adds a navigation menu from Framer's components, which is already responsive with a hamburger menu on mobile. The menu is customized by changing the background color, font, and text styles. The concept of stacks, similar to Flexbox in CSS, is introduced for layout. Stacks allow elements to be stacked either vertically or horizontally, making it easier to create a consistent and responsive layout.
🎨 Adding Animated Text and Hero Image
The speaker uses Framer's Motion Text component, which allows for animating text word-by-word or line-by-line. The actual text for the website is added and styled with the desired font, size, and color. The layout is set to stack the text in the center. The hamburger image is then added and animated with a scaling effect, delayed by half a second after the text animation. A new section with a green background is introduced, and the layout is set to have two columns side by side. Padding and spacing adjustments are made to ensure proper alignment and visual balance.
🍔 Adding Buttons as Components and Responsive Design
A button component is added to the website, and the speaker explains the importance of using components for reusable elements like buttons. The button is styled with a background color, font, padding, border, and shadow. A hover variant is added to change the button's appearance when the user hovers over it. The video concludes by mentioning the next steps, which involve making the design responsive and adding other sections, but those topics are beyond the scope of this tutorial. The speaker invites viewers to provide feedback and expresses interest in exploring more about Framer and its differences compared to Webflow in a future video.
Mindmap
Keywords
💡Framer
💡Figma
💡Components
💡Stacks
💡Responsive
💡Animation
💡Supply
💡Variant
💡Layout
💡Styling
Highlights
Framer allows you to build cool websites in a short amount of time, like the Burger website in this tutorial.
Framer has a plugin to import your Figma design with one click, but this tutorial focuses on teaching the basics and fundamentals.
Adding a background color and using the shared color palette makes your work more efficient.
Framer has pre-built navigation components that make it responsive with a hamburger menu on mobile.
Components are elements that you want to reuse across multiple pages, like the navigation element.
You can edit components separately from the page as a master, and changes will reflect on all instances.
Framer uses a concept called Stacks, similar to Figma's Auto Layout or Webflow's Flexbox, for responsive layout.
Framer has a Supply of ready-made components like Motion Text, which allows you to animate text nicely.
You can set a maximum width and align text to ensure it's always centered or aligned properly.
Framer allows you to easily add animations and effects like scaling and delaying elements.
You can create components like buttons and reuse them with different variants, like changing color or hover state.
Framer makes it easy to add responsive design and additional sections to your website.
Framer and Webflow are two popular tools for building websites, each with their own strengths.
This tutorial provides a comprehensive introduction to building a website using Framer's features.
Framer allows you to quickly create engaging and responsive websites with animations and reusable components.
Transcripts
there's lots of hype about framer at the
moment people are building some really
cool stuff so today I want to give you
an introduction to framers so that you
can get started for free we're going to
build this cool Burger website in about
20 minutes let's dive right into it
we're building this burger website that
I have here on figma we're not going to
build the whole thing just the first few
sections and if you want to try this
along and build the whole thing
duplicate the figma file below this
video now before I get started I want to
mention that framer does have a plug-in
to import your figma design with one
click and you can do that and it's going
to save you time but in this tutorial I
want to teach you the basics and the
fundamentals so you understand how frame
will work so that you can actually
customize and build whatever you want
and not just copy paste and not sure how
to handle it once it's there so let's
build this from scratch first thing I
want to do is I'll bring in the
background color so I'm going to pick
the page for the home page I'm going to
go here into the Styles and I'm going to
paste it then but also here from the
shared caller I'm going to add this in
and I'm going to call this dark gray
just just so that I have this because
I'm going to be reusing the colors and
this will make my work more efficient
now the next thing I want to do is bring
in this menu here now framer already has
these kind of components so I can go
here into navigation and I have a dark
one here and I can just drag it now the
good thing about this is this will make
it already responsive with a hamburger
menu on mobile and this will save me a
bunch of time now you can see that when
I'm clicking on this it's purple if I go
here you get this icon which tells you
that this is a component now if you're
familiar with figma or webflow you
already know that components are
elements that you want to reuse again
and again over multiple pages so this
makes sense in in a navigation element
and often double click it if I'm going
to double click it I'm going to go into
the components and now you can see that
I can edit it separately from the home
page so this is the master and I can
edit it from here and it will change all
of the different elements that are
reusing this and you can also see here
that it's already set up for the tablet
and the mobile when it's clicking and
and so it's already set up for me so
let's go ahead and edit this so
basically what I want to do is I'm going
to select this one change the background
color to the color that I already have
let's go ahead and change change the
fonts so I'm going to select all the
fonts that I have here framer about
contact and even in the button sign up
and let's go here into the fonts
and basically not select a style but
just bow Bowie one this is a Google font
that we're using here so this is nice
it's already set up for these ones I
actually want them to be
um capital letters so I'm going to go
here into the text Styles and transform
them into uppercase this is great for
the button as well we're going to dive
into buttons a little bit more down the
line where we're going to talk about
them as components but for now I'm just
going to select this and set the
transform for uppercase as well so
basically now we have them maybe we want
to change the color of the the style of
the these to this beige color so let's
take this badge color
my God now I'm gonna have to give this a
name and I don't know how to spell Bash
so um let's call this brownie or
something like this I don't know brownie
brownie
all right so I've got this color and for
the button the button is actually purple
so let's do this
let's remove the round corners that we
have on this button so selecting the
button here it has round corners where
is the round corners
where are they Gap wrap
radius eight I'm going to change that to
zero all right so the corner radius is
back and the color is this purpley which
we're gonna add another as another color
purple
and basically
we're done we have the navigation done
we can of course change how it looks on
mobile but actually everything looks
pretty nice right now and I'm back to
the home page we've got our navigation
now we've got the text okay first before
we're talking about the text let's talk
about layout and how we're going to set
up the layout in general here so the
concept that framer have created they're
calling it stacks and if you're familiar
with figma auto layout or with webflows
flexbox it's exactly the same actually
when it's going to be turned into code
they are actually using flexbox so if
you're familiar with that that is a
great concept and if you're not
basically let me show you how this works
basically it's it has an element that
either Stacks element one on top of
another or one next to each other so
let's bring in rows because basically
that's that's what we have here right we
have a few few rows actually we can see
this as one row second row and third
rows right so we have here let's say
frame number one frame number two let's
copy and paste this so that just so that
you can see uh that we have here
that we have as you can see one two
three elements here so these are going
to be our sections right and you can see
that they're stacked one on top of
another they have a gap which is the
space between them and the reason this
is useful is that you can see we can
change the direction of the stack so now
we can take columns and turn them into
you know just rows and this helps to
make things
um easier when we're turning this into a
responsive and it just helps to make the
layout more consistent and easier to
yeah to lay out stuff so the first fact
I'll actually let's give this names for
clarity so this is going to be hero text
the first frame hero text and the second
one is going to be the hero image
and then the third thing is going to be
this let's call this uh hero info
whatever hero info so these are the
three sections that we have here uh
let's just make sure that this Frame
here is actually all the way from end to
end we can also go here into size and
set it as a hundred percent and this is
going to make it you know uh responsive
when the screen size changes which is
great okay so now basically for this
text I can just put in a text element
from here however I want this to animate
in a very cool way now here's a nice
thing about framer they have this Supply
which is kind of like ready-made
components which you can just paste into
your project and they have this really
nice thing that's called motion text
which allows you to animate text nicely
so let me copy that and actually use
that instead of just a normal text
element so I'm coming in into the hero
text and I'm pasting after I've copied
it from the supply thing and now you can
see that we have this hello world thing
now just for Let's test this out let's
play this around
and you'll be able to see this hello
world thing is animating word by word
right hello World
um and we can from the settings panel we
can go here and see here's the text
that's animating and it's animating by
letter we can do by word or by line
let's actually bring in our actual text
and put it in here
now we can go here and also change the
the fonts and stuff and we we will do
that in a second but what I want to show
you is right now it's kind of like a
design software where you can just place
it whatever you want that's not what we
want in a web we want it to always be
either a line somewhere or centered so
to make sure that this text is always
aligned the way that we want it to be
aligned I'm going to go here into the
hero text which is the frame in the web
design we're calling it wrapper because
it wraps it contains everything that is
inside of it and I'm going to turn this
into a stack as well right I'm going to
go here into the layout add a layout and
basically now this is a stack now it's
it doesn't really matter because I have
just one element if it's stacked
horizontally or vertically but I just
want to make sure that it's centered and
aligned Center so now you can see I
can't move this thing around it's always
going to jump into the center which is
exactly what I want now for this motion
text I don't know why it's so small
actually let's go ahead and set this up
to maybe 90 of the width so that it's
quite like this let's also go and change
the font for this so from inter we can
use this Bowery forgot the name of this
font Bowery one
uh we can use something bigger like I
don't know 70 or maybe even 75 here
we can make sure that this is something
like one and what is the color the color
is the normal color that we have
here this brownie also we don't need the
background color that we already
originally have for these frames so for
a hero text I'm just going to go ahead
and remove the fill and this looks quite
well actually maybe we just want this
this is three lines so maybe we want to
make this a little bit bigger so let's
go ahead and make this yeah something
like this looks pretty good all right
now let's play this around you can see
that it's already animating pretty cool
right so this this was easy and very
nice now let's change this to animate by
line I think this will be more
appropriate so now we have this really
nice intro animation for the text that's
great all right for the hero image let's
go ahead and bring in this hamburger
image so right inside of it I have my
image right here I'm just going to drag
it in inside
and we need to basically do the same
thing that we have done previously where
is the the burgers I'm going to put it
inside of this hero why can't I see it
oh for some reason it's really down here
below
which I'm not sure why
maybe I dragged it below okay but again
I want this to always be centered just
like we had here so let me go here into
the hero image and turn that into a
layout that's going to stack it in the
center I also do not need the background
image here and I want this image to be
as big as I can so let's turn it into a
hundred percent width maybe 90 right
something like this okay so this looks
good also maybe if I try to
resize these elements a little bit
I wonder if I can get them to
yeah go a little bit on top of it which
is pretty nice all right okay so we've
got the image here
actually let's animate the image as well
the the burgers as well right because
now we have the burgers and the text is
animating so let's do that the text is
animating and then the burgers come on
top this is really easy to do I'm going
to select the burger image and I'm gonna
add here an effect and this effect Let's
do an appear effect and let's do yeah
when it appears scale in
um let's try scale in or scale in button
I don't even know what that means but
let's let's test it out let's play it
around
let's reload this and you can see that
yeah it is appearing now same way but
maybe let's try to delay this a little
bit right so we're in the effect we can
uh maybe just
go ahead and see the spring and delay it
by half a second so that first the text
will show up and then the burgers will
show up let's see how that looks
alright so that's better right text is
showing Burger is showing looks pretty
good all right the next section that we
have is we have this burger yellow uh
not yellow greenish section with some
text here let me grab the green color so
here for this one actually it's a good
idea to have this uh to have this fill
color but let's just change it to this
green
and let's call it green
and also this section probably needs a
corner radius because we can see here
that there's some corn radius so let's
go here I'm just going to play this by
eye something like this
and uh what else this this thing has
right so it has a little bit of spacing
I think we should probably go here into
all of these rows and add a tiny bit of
Gap maybe between these elements or
maybe this for this Hero Burger uh maybe
we can add a little bit of padding from
the top just to push it so on the layout
front you can see that we have padding
here I'm going to just add padding from
the bottom so this is bottom yeah I can
push it around like this a little bit
and let's just space things out so
that's more yeah nicely and for this
hero thing maybe let's set the size to
maybe just 90 percent
something just like this all right so
now that we have this Frame this Frame
you can already see that it has two
columns inside of it what that basically
means is that we're going to turn that
into a layout that stack things one next
to another right so let's add some
frames inside let's add a layout frame
in here and let's copy and paste that so
we have two frames here let's make sure
that the frames are actually trying to
fill in as much of the space that they
have so that we have here like split
screen so now we have the layout of this
section actually that we can go ahead
and add a little bit of padding just to
make sure that there it's spaced nicely
which is what we need here and we can
add a little bit of space between these
elements all right so we've got the
element now we just need to add the
content so for this one we can add text
so let's add the text Burgers a ball of
above all Burgers let's add this in here
and of course we want to First style it
now in this case it's good idea to use
these styles that are already here so
that we can reuse them H1 was probably
this and we didn't use this because we
used the component but this one let's
use an H2 and make sure that it's the
font that we want
um the size that we want maybe it's like
35 or 40 something like that
um
actually that was a size sorry
um what else do we have here I want to
make sure that it's aligned and I want
to make sure that it's not too big as it
is right now right so I'm going to add a
maximum maximum width of a hundred
percent right so that it's not too big
and for this Frame how do we align stuff
we add a layout and we make sure that
it's yeah it's centered maybe to the top
so now we have this nice thing it's not
all caps so we can go into the text
uh style and we can change that to
uppercase so this is nice probably maybe
I need it to be bigger right so the text
should be bigger that would be easy to
change just the size and we don't need
the background of this Frame that we
have here so I'm going to remove the
fill color and basically going to do the
same thing for this element actually you
know what it's probably going to be
easier to just duplicate this row that
we already have here and this just
change from the H2 to a paragraph which
we can of course also edit the font
[Music]
um
edit the font maybe select a dark dark
gray this is actually not the font that
I want here so here we do need something
like inter
and add some kind of Allure ipsum font
that we can use
maybe bigger a little bit bigger I guess
let's make it a little bit bigger
and maybe I'm kind of like a semi-bold
thing all right the last thing that I
want to add is this button here and use
this as a way to introduce buttons as
components so let's bring in a button I
can search here for a button component
and just bring it in here now I want to
turn this thing into a component and why
because a button as you can see on this
website we're using it here and here
we're reusing this element but at
different variance right sometimes we
change the in the the color or the hover
situation so we want to be able to reuse
this and maintain the same stop
so I'm going to click right click create
a component
um yeah let's call this button and now
we can go ahead and style this in this
case The Styling that we want is for
this variant uh
for the main variant is let's do the
brownie thing for the text inside I'm
going to use
um
the the brown the bowlery font we're
going to make it dark so we basically
uh stylus whatever we want we don't want
a radius color I don't want a radius
Corner maybe I want a little bit more
padding from the sides so left and right
I'm going to add a little bit more
padding here on the layout panel so
that's going to give a little bit more
spacing here now here's what I really
wanted to show you I also actually want
to add a border so I'm going to add a
black border
and also going to add a shadow
because we have this kind of like a drop
shadow harsh drop shadow here so let's
go ahead and do that
not blurry we don't want any any blur to
this so zero blur a little bit of spread
one spread and then maybe like four and
four all right so we've got the button
but now I want to design what happens
when people hover on top of it and I do
that by adding another variant which is
the over one so in this case what I want
to happen
is let's say I want the uh the
background to change to maybe purple and
I want the the shadow to kind of like go
back inside so it looks like I've
actually clicked it so let's go into the
Shadow and change the distance to zero
and zero all right so now let's see how
that looks so basically you can see here
that I have the button let's play this
around
and I have this button which is
animating on the hover State now the
next step would be to turn all of this
into responsive and add the other
sections but that's beyond the scope of
this video so let's conclude it let me
know if you're interested to learning
more about framer and if you want to
learn about I hear a lot of discussion
about what's the difference between
framer and webflow which one of them
should I check I made a video on the
topic so you want to check it out here
I'll see you in the next video peace out
foreign
[Music]
浏览更多相关视频
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 6
Framer Tutorial: Smooth Scrolling Links with Scroll Targets
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Master Figma UI Design in 15 Minutes | This Tutorial Is For You!
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 8
5.0 / 5 (0 votes)