Rated excellent by 900+ students
Components
·
11:26
·
with Ryan Hayward
Follow-along build
Watch Ryan, pause the video and build it step by step.
Your first real component
Understand it inside and out instead of just dragging one in.
Submit your build
Share your finished button as part of the Fundamentals course.
draw the button frame
Hit F, draw a 120x40 frame, give it a background and 8px corners, then centre a text label.
add hover and pressed states
Lighten the background on hover.
Darken it and scale to 0.98 on press.
Button
make it reusable
Add label, colour and size variables so every copy can be different.
FROM FRAME TO COMPONENT
Follow Ryan from a blank frame to an interactive, reusable button. Pause the video as you go and build each step yourself.
Turn it into a component: Select the frame and text together, right-click and choose Create Component.
Connect the interactions: Default to Hover on hover, Hover to Pressed on tap, and Pressed back to Default on release.
Add your variables: Bind Label to the text and Color to the fill, then add Size if you want small, medium and large.
03:10
BUILD A BUTTON COMPONENT FROM SCRATCH
Know exactly what’s inside it, from the frame and label to the component itself.
04:46
ADD HOVER AND PRESSED STATES
Use variants and interactions so your button responds when people use it.
05:50
REUSE IT ACROSS YOUR WHOLE PROJECT
Change the label, colour and size of each copy right from the properties panel.
HANDS ON PRACTICE
Drop a few copies of your button onto the canvas. Change the label, colour and size on each one and check they all behave as expected.
BUTTON COMPONENT BUILD
You’ll need a fresh Framer project and the Overview of components lesson. When every box is ticked, submit your button.
Follow-along
CHECKLIST
Button frame drawn with a text label
Turned into a component
Hover and pressed variants added
Interactions connected
Label and colour variables bound
Tested a few copies on the canvas
TRY IT OUT
Cesar Rodrigues
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
