Step 2

To draw a Frame on the Framer canvas, you first need to select the Frame tool.

Step 3

The Frame tool can be found in the layout menu at the top left. Once selected, your mouse cursor will change into a crosshair, allowing you to draw a Frame.

Step 4

Click and drag on the canvas to set the size, and release the mouse to create a Frame.

Step 5

If you check the layer panel in the top left, you’ll see that the new Frame appears as a small rectangle.

Step 6

This newly created Frame appears as a layer within the panel, confirming it’s been added.

Step 7

As you can see, a Frame is essentially a rectangle. You can copy it by selecting the Frame and pressing Cmd+C and then Cmd+V.

Step 8

You can also duplicate it using the shortcut Cmd+D.

Step 9

If you grab the top-left corner control and drag it inward, the rectangle turns into an oval shape—just like the kind of rounded elements we’re all familiar with.

Step 10

In Framer, pressing the “R” key activates a message telling you to use the Frame tool to draw rectangles. While other graphic tools often have a separate rectangle tool, in Framer, the Frame does it all—rectangles and circles alike.

Step 11

Frames can also be grouped together. If you’ve worked with other graphic tools before, this grouping concept should feel familiar. It’s often used to combine multiple layers or apply the same effect to several elements.

Step 12

In many tools, grouping is done with Cmd+G. But in Framer, grouping also happens using Frames.

Step 13

So instead of Cmd+G, you select multiple layers and press Cmd+Return to group them in Framer.

Step 14

Alternatively, you can right-click and choose “Add Frame” to wrap the selected elements in a new parent Frame.

Step 15

You’ll then see in the layer panel that a larger parent Frame now contains two smaller Frames—one rectangular and one circular—grouped together.

Step 16

When you select the parent Frame, the grouped elements move together, just like a typical group.

Step 17

If you lower the opacity of the parent Frame, the child Frames inside will also fade together.

Step 2

When you select a Frame, a control panel appears on the right where you can fine-tune its settings.

Step 3

We’ll skip the positioning options for now since we’ll go over them again later. But just so you know, when you move the Frame around, you’ll see the position values update, giving you a sense of how they work.

Step 4

The size of the Frame is made up of width and height. Each of these can be set using four different unit types. We’ll revisit this in the responsive design section.

Step 5

Min Width and Max Width are also covered in that same responsive design section.

Step 6

If you click on “Layout,” the Frame transforms into a layout Frame. That means it can act like a Row, Column, Stack, or Grid.

Step 7

This is similar to “Auto Layout” in Figma, and it all starts from a basic Frame.

Step 8

I’ll also explain later on why Framer relies so heavily on the Frame element.

Step 9

For now, we’re not using any layout functionality, so go ahead and click the minus button to remove it.

Step 10

Your Frame will then return to being a standard Frame, instead of a Stack or layout Frame.

Step 2

To add the look you want to any graphic element, you’ll need to use this style panel—it’s where all the magic happens.

Step 3

Let’s start with something simple: opacity. As you might know, opacity controls the transparency of a Frame. A value of 0 means completely transparent, 1 means fully visible, and something like 0.5 makes it semi-transparent.

Step 4

Opacity is useful when stacking layers—it gives that see-through effect. But it’s also handy if you just want to hide a layer temporarily by setting its opacity to 0.

Step 5

There’s also the "Visible" property. It determines whether or not the layer is shown on the screen. You can toggle this between Yes and No.

Step 6

Since "Visible" is used often, there’s a shortcut: press Cmd+; to quickly toggle it on and off.

Step 7

Next up is "Fill"—this defines the color of the Frame. You can change it to whatever you like and completely customize how your Frame looks.

Step 2

To add an image, you can either click "Choose Image" and upload it manually,

Step 3

or simply drag and drop the image onto the canvas—Framer will place it right in for you.

Step 4

Interestingly, even image elements are actually just Frames. So when you add an image, you’re technically just putting it inside a Frame.

Step 5

Since Framer is built for the web, it won’t automatically render your image in full resolution. You’ll need to set the "Resolution" to "Full" if you want it shown in its original quality.

Step 6

That said, most people don’t view websites on super high-end monitors. So by default, the "Auto" resolution setting optimizes the image for the viewer’s device—like a phone or desktop—without slowing down your site.

Step 7

Unless you really need that extra clarity, Auto is generally the best choice.

Step 8

The "Type" setting decides how your image fits within the Frame.

Step 9

If you set it to "Fit", the image scales proportionally to stay inside the Frame without overflowing.

Step 10

"Fill", on the other hand, stretches the image to completely fill the Frame—even if it has to crop part of it.

Step 11

"Stretch" fills the Frame without cropping, but it may distort the image’s proportions.

Step 12

"Tile" repeats the image over the entire Frame area like a pattern—useful for certain effects.

Step 13

That said, Tile is more of a special-use case. You’ll mostly stick with Fill or Fit.

Step 14

So, generally speaking, Fill and Fit are your go-to options when working with images.

Step 15

If you’re using "Fit", the image’s position becomes important. For example, if set to "Top", it’ll align to the top of the Frame.

Step 16

Set it to "Bottom", and the image moves to the bottom instead.

Step 17

With "Fill", the image can get cropped. If the image is taller than the Frame, part of it will be cut off.

Step 18

Want to show the top of the image? Use "Top Center".

Step 19

Want the middle? Use "Center".

Step 20

Want the left or right? Use "Left" or "Right" accordingly.

Step 21

So Position helps control which part of the image is shown when it doesn’t perfectly match the Frame size.

Step 22

In short: Type (Fill or Fit) is essential, and Position helps you highlight the right part of the image.

Step 2

Let’s duplicate a grouped Frame and place it to the right, then give it a background color.

Step 3

Now imagine the rectangle inside it was meant to shift further to the right.

Step 4

By default, Overflow is set to "Hidden", so anything outside the Frame’s bounds gets cut off.

Step 5

But let’s say that element is really important and you want to show it regardless.

Step 6

To make it visible, change the parent Frame’s Overflow setting from "Hidden" to "Visible".

Step 7

Or, if you want users to scroll to see it, set the Overflow to "Scroll".

Step 8

That’s how scrollable content works—even the Framer Desktop Frame uses this principle when content extends beyond the screen.

Step 9

With Overflow set to "Scroll", go to Preview mode to test it out.

Step 10

Try scrolling inside the red rectangle. You’ll see a scrollbar appear, showing that the scroll view is active.

Step 11

If you leave Overflow as Hidden, content is simply clipped with no scrolling.

Step 2

A Radius of 0 gives you sharp corners. A value like 100 will round them off into a circle.

Step 3

Radius controls how much curve (or rounding) appears on the four corners of your rectangle.

Step 4

You can also give each corner a different radius by clicking the split control for individual corners.

Step 5

This lets you create more interesting shapes and gives your UI a softer, more friendly look.

Step 6

Next is the Border property, which adds outlines to your Frame. Just click "Add" to get started.

Step 7

You can customize the border’s color, thickness, and style. Solid is the most commonly used.

Step 8

And yes—you can set a different border thickness for each side.

Step 9

Now let’s move to Shadows. Click "Add" to apply a default shadow.

Step 10

You can choose whether the shadow appears inside or outside the Frame.

Step 11

You can also customize the shadow color.

Step 12

The X and Y values define the direction of the shadow—how far it shifts horizontally or vertically.

Step 13

Blur controls how soft or hard the shadow appears.

Step 14

Spread determines how large the shadow expands overall.

Step 15

These same properties also apply to inside shadows.

Step 16

You can adjust blur and positioning for inner shadows just like outer ones.

Step 17

Framer recently added a "Realistic Shadow" feature, which creates more natural-looking shadows.

Step 18

It gives you more intuitive control over how the shadow spreads and how focused or diffused it is.

Step 19

Compared to traditional blur and spread, it’s easier to get nice, realistic results.

Step 2

Your website appears just as you designed it, complete with the borders, overflow settings, and everything else.

Step 3

You can share this link with anyone, anywhere in the world, and they’ll see exactly what you see.

Step 4

Here’s a bonus tip: the way your site is displayed is actually based on CSS—the same language developers have been using for years.

Step 5

Search "CSS box-shadow" on MDN, and you’ll see the syntax: X offset, Y offset, blur, spread, and color.

Step 6

That same structure is used in Framer too. When you increase X, the shadow moves right.

Step 7

Increase Y, and it moves down.

Step 8

More blur? Softer shadow.

Step 9

More spread? Bigger shadow.

Step 10

So yeah—Framer quietly converts your designs into real CSS code behind the scenes.

Step 11

Want proof? Open the developer tools in your browser while viewing your published site.

Step 12

From the top-right browser menu, go to More Tools {'>'} Developer Tools.

Step 13

In the DevTools panel, go to the Elements tab.

Step 14

Click the arrow icon to select an element on your page.

Step 15

Select the Frame you styled earlier with a shadow effect.

Step 16

You’ll see the same exact box-shadow code we discussed earlier, applied to that element.

Step 17

This means the styles you created can be passed directly to developers or edited right in the browser.

Step 18

For example, change "20px" to "-20px" to shift the shadow left.

Step 19

Or change the color to something new—live, in the browser.

Step 20

This all shows why Framer puts so much emphasis on Frames: they’re a perfect 1-to-1 match with web code.

Step 21

Frames are used because they map directly to div tags—the basic building block of any webpage.

Step 22

That also makes it easy to export or integrate your design into code.

Step 23

If you know a bit of web dev, you’ll recognize that every Frame = one div tag.

Step 24

And if you want better SEO, you can change the tag from a generic div to something more meaningful—like a button or heading.

Step 25

Just go to the Accessibility settings for the Frame and update the tag accordingly.