Learn Framer in 20 Minutes (Crash Course)

Summary

This 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

00:00

🎥 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.

05:00

🌈 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.

10:02

🎨 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.

15:04

🍔 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.

Keywords

💡Framer

Framer is a design and prototyping tool that allows users to build interactive websites and applications. It is the primary focus of the video, which aims to introduce viewers to Framer and guide them through building a simple burger website. The script mentions that there is a lot of hype surrounding Framer at the moment, highlighting its popularity and potential.

💡Figma

Figma is a collaborative interface design tool mentioned in the video. The presenter states that they have a Figma design for the burger website they want to build, and they mention that Framer has a plugin to import Figma designs with a single click. However, they choose not to use this plugin for the tutorial to teach the fundamentals of Framer and ensure viewers understand how to customize and build projects from scratch.

💡Components

Components are reusable elements in design tools like Figma and Framer. The script explains that components are elements that you want to reuse across multiple pages, like the navigation menu. The presenter demonstrates creating a component for the navigation menu and editing it as a master component that affects all instances of that component in the project.

💡Stacks

Stacks are a layout concept in Framer that allows elements to be stacked either vertically or horizontally. The presenter compares them to auto-layout in Figma or flexbox in web development. Stacks help create consistent layouts that can easily be made responsive by changing the direction of the stack. The script demonstrates using stacks to align and position various sections of the burger website.

💡Responsive

Responsive design is a key concept in web development and design tools like Framer. It refers to creating layouts and interfaces that adapt to different screen sizes and devices, typically using techniques like media queries and flexible grids. The video emphasizes making the burger website responsive by using stacks, setting width percentages, and ensuring elements are centered and aligned properly.

💡Animation

Animation is the process of creating the illusion of motion by displaying a sequence of images or frames. The video script highlights Framer's animation capabilities, showing how to animate the text and images on the burger website using effects and motion components. The presenter demonstrates animating the hero text word-by-word and making the burger image scale in with a delay.

💡Supply

Supply is a feature in Framer that provides ready-made components that users can copy and paste into their projects. The presenter uses the Motion Text component from the Supply to easily add animated text to the burger website. This feature helps streamline the design process by providing pre-built, reusable components.

💡Variant

A variant is an alternative state or version of a component that allows for different styles and behaviors. The script demonstrates creating a button component and designing variants for its default state and hover state. Variants enable designers to define how a component should look and behave in different contexts or interactions.

💡Layout

Layout refers to the arrangement and positioning of elements on a page or interface. The video emphasizes the importance of layout in Framer, using stacks and alignment options to ensure elements are positioned correctly and consistently. The presenter adjusts padding, spacing, and alignment to create a visually appealing and well-structured layout for the burger website.

💡Styling

Styling refers to the process of applying visual properties like colors, fonts, and effects to elements in a design. The video script walks through styling various components of the burger website, such as setting font styles, background colors, border radii, and shadows. Proper styling is crucial for creating visually appealing and cohesive designs.

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]