What we’re doing:

Time to build your own button component, not one you drag from the Insert menu, but one you understand inside and out. We'll wire it up with variants and variables so it’s interactive, reusable, and tweakable. This is your first real component. Let’s go!

What you’ll end up with:

• A button that changes on hover and tap (yep, fully interactive).

• Lets you change the label, color, and size right from the props panel.

• Is totally reusable across your whole project.

This is a follow-along build:

• Watch Ryan

• Pause the video

• Build it out step-by-step

• Make it your own if you want

What You’ll Need

• A fresh Framer project

• Light Image

• Access to Overview of components

• Headphones, coffee (or both)

Steps:

1. Draw the Button Frame

• Hit F, draw a frame, something like 120x40 works great.

• Give it a background color (black is classic).

• Round the corners (8px feels nice), and center everything.

2. Add a Text Label

• Press T, type something like “Click me”.

• Center it in your frame.

• Make the font readable (medium size, semi-bold, white text).

3. Turn It Into a Component

• Select the frame and text together.

• Right-click → Create Component.

• Congrats, you're officially building your first real component.

4. Set Up Variants

• With the component selected, hit the + to add new variants.

• You want three:

  • Default

  • Hover

  • Pressed

Customize them:

• Hover → Lighten the background a little.

• Pressed → Darken the background, maybe scale it down a bit (like 0.98) for that pressed-in feel.

5. Add Interactions

• Hook them up:

  • Default → Hover (on hover)

  • Hover → Pressed (on tap)

  • Pressed → Default (on release)

Framer handles the rest, smooth transitions and all.

6. Add Variables

Now let’s make it flexible:

• In the properties panel, add:

  • Label → Text

  • Color → Color

  • Size (optional) → Enum: Small, Medium, Large

Connect these:

• Bind Label to the text layer.

• Bind Color to the background fill.

• If you added Size, adjust padding or font size based on the selection.

7. Test It Out

• Drop a few copies of your button onto the canvas.

• Change the label, color, size (make sure each one behaves as expected.)

Bonus Tips:

• Use auto width and padding instead of fixed sizes (way more flexible)

• You can even add an icon if you’re feeling spicy.