Play
Learn
Build
Learn Framer by actually building your site.
Framer looks familiar but things just don’t click? You’re not alone.
This free learning page gives you the clear explanations and building blocks you need to get started with Framer the right way.
How It Works
About this project
This page is your Framer sandbox. It’s made to help you understand how designing in Framer works.
Every explanation comes with an example you can try right away. You’ll find short and clear sections covering the most essential Framer fundamentals.
But here’s the twist. While learning, you can already start building your own site using the included building blocks.
The author
This project was created by Gábor Balogh, a Framer Expert with 10+ years of product design experience. He runs It’s baked!, a Framer marketplace where he also offers 1:1 mentorship sessions. These sessions are all about learning and building together and this project was born from those real-life experiences.
Many new Framer users get dazzled by flashy designs and templates. The editor feels familiar, almost like Figma or Sketch, and it’s easy to jump straight into building something beautiful. But without understanding the fundamentals, even the best-looking designs tend to break, especially on mobile. It’s not about talent, it’s about knowing how Framer really works.
That’s why this page keeps things simple on purpose. It’s not about fancy tricks. It’s about helping you truly understand the basics. Once you get those down, you can go wild with your design and it will actually work.
It's completely free
Seriously. Remix it, play around, and in just a few days you’ll feel like a Framer expert too. If it helps you, the best way to support my work is to turn your remixed version into a live site. Everyone wins. You level up, Framer gets a new user, and I earn a small commission for helping you get there.
Shall we start?
Working in Framer
Coming soon.
Layout
Sizing
Every screen has a max size, and your site appears inside a browser window. That browser works like the parent: your elements size themselves based on it. And in the end, everything gets calculated in pixels.
That’s important, because every sizing option needs a pixel-based reference to work. Whether it’s a %, fr, or vh, it all comes down to having a size to calculate from.
Remember this: An element’s size depends on either its parent or its content.
Does this matter for responsiveness?
Sure it does! Screens come in all sizes. A phone screen might be 320 pixels wide, while a large monitor could be 5K or more.
On mobile, the browser usually takes up the whole screen. But on desktop, users can resize the window however they want. That means you cannot rely on fixed sizes. To keep your layout working across all screens, you need to pick the right sizing option for each case.
Sizing options in Framer
From fixed to fit to fill this is where you learn what each option actually does and when to use it.
Fixed size (Width, Height)
Simple: you set the size in exact units, and it stays that way no matter what. The content inside will try to fit within that space. If it is too big, it will either overflow or get cut off.
Relative size (Width, Height)
This is defined in percentages. The size of the direct parent stack is always the reference, no matter how that parent is sized. A relatively sized element calculates its size based on the parent, regardless of how many sibling elements are next to it.
So in a parent that is 1000px wide, an element with 50% width will be 500px.
Note that relative sizing ignores the parent’s gap settings, but it does take padding into account.
Fill (Width, Height)
This is defined using fr, short for fraction. The size of the direct parent stack is the reference again, but this time the element fills the available space within it. Fill takes into account the parent's padding and also adjusts based on other elements around it.
It is great for filling leftover space (like placing two fit-width buttons next to each other), or for distributing equal-sized items (like cards) inside a parent. You can even mix and match both approaches.
Keep in mind: Fill respects the parent's gap and padding, and also adjusts depending on what other elements are present.
It is my personal favorite because of how flexible it is.
Fit (Width, Height)
This one is simple too: the element only takes up as much space as its content needs. So in this case, it is not the parent that defines the size, but the content itself.
Fit sizing respects the padding and gap.
This type of sizing is ideal for buttons or tag clouds. Just make sure the parent container has Wrap: Yes turned on when you're building a list. Otherwise, the list might overflow its container.
Viewport (Height only)
This sizing listens to the height of the browser window. It scales similarly to percentage-based sizing, but uses vh as the unit, where 100vh = 100% of the viewport height.
Note that view height ignores the parent’s gap and padding settings. That is why it is a good idea to set the parent to vh height, and place a fill stack inside to handle padding and spacing.
It is great for fullscreen sections, but be aware that it behaves a bit unpredictably on mobile. When scrolling starts, browser UI elements (like the address bar) may collapse, changing the viewport height. That is why you might see small jumps at the start of a scroll on mobile.
Fit Image
If the size of the image matters in your layout, use the Fit Image setting. This new option matches the stack to the image’s aspect ratio. Set one dimension (like Width) however you like for example, Fill and the other will automatically adjust based on the image.
It is especially useful when displaying images of different sizes in a CMS list.
Playground of element size types
Now it’s time to experiment and understand how sizing works in practice. Observe how each type behaves in the browser or better yet, play with them directly in the Framer editor.
Follow the suggestions or tweak them your own way if you feel adventurous. You can’t break anything here.
🔩
Relative size (%)
🤰
Fit
🤰
Fit
🤰
Also Fit
🧱
Fixed size (px)
🧱
Fixed size (px)
🌊
Fill (fr)
🤰
Fit
🤰
Fit
🤰
Also Fit
🌊
Fill (fr)
🤰
Fit
🤰
Fit
🤰
Also Fit
Responsive design is not just about sizing
Even with sizing in place, you are not done yet. You also need to consider properties like Direction, Distribute, and Align in the layout settings. These control whether elements are next to each other or stacked, whether they align left or right, start from the top or bottom, and so on.
Positions
Sizing tells you how big something is. Position tells you where it goes. By default, most elements just follow the layout flow. But sometimes you need more control, like keeping something in place or letting it float above other content. That is where position comes in.
Does this matter for responsiveness?
Yes, especially when things start to move around on different screen sizes. If you use position the wrong way, your layout can fall apart.
The goal is not to fight the layout but to use position when layout rules are not enough. Think sticky headers, floating buttons, or custom placements.
Position options in Framer
Framer supports only standard CSS position types like absolute, relative, sticky, and fixed, and applies them based on how each element relates to its parent and the layout around it.
You might have seen similar options in Figma, but the logic behind them is not exactly the same. So the way you position things in your design file might not translate directly into Framer. It is worth learning how these rules actually behave in a live layout. Let’s break them down.
Relative
This is the default position in Framer. Elements are placed based on their order inside the stack and follow layout rules like direction, spacing, and alignment. The key idea is that a relative element reacts to what is next to or below it.
Absolute
An absolutely positioned element is taken out of the normal layout flow and placed exactly where you want it, relative to its parent. Unlike relative elements, it does not push or pull anything around it.
This means if one element in a stack is relative and another is absolute, the layout can break or collapse. Though sometimes, that is exactly what you want.
To make an absolute element responsive, its parent needs to be responsive too. As the parent resizes, the absolute element will adjust its position accordingly. You can define its position from each edge (top, bottom, left, right) in pixels.
Sticky
Sticky elements scroll along with the page until they reach a specific point, then they stick in place. This only works if all parent stacks are set to visible and if the sticky element has enough space to scroll within.
To use sticky positioning, wrap both the sticky element and the scrollable content in the same parent stack. A common example: the section titles on this page: they stick to the top of the screen as you scroll through the content.
Don’t forget to give your sticky element a higher Z-index than the content so it stays on top. Also add a background color to avoid transparency when it overlaps other content.
Fixed
A fixed element stays in the same place on the screen, no matter how much the user scrolls. It is always positioned relative to the viewport, not to any layout or parent.
What is Z-index?
Even though the left panel in Framer might look similar to the layer panel in Figma or Sketch, it does not control layer depth. Instead, it defines the order of elements in the layout.
Layering is handled by the CSS Z-index property. The higher the number, the higher up the element appears visually.
In Framer, Z-index can be set between 0 and 10, and the default is 0. You will not always see this in the editor by default, but you can find it in the Styles panel by clicking the + icon.
Z-index: 1
Z-index: 2
Z-index: 3
Responsive design
Responsive design means your layout adapts to different screen sizes instead of staying fixed. It is about making sure your content looks good and works well on phones, tablets, laptops, and big monitors.
Design used to have fixed boundaries
Before screens, every design had a fixed size. Think of them like paintings. Leonardo da Vinci worked with a 30 by 21 inch canvas. He filled that space, and it never changed. Everything had a fixed position and size.
Today, our canvas is the screen and that screen can be any size. Your job is to make your design look good on all of them. To do that, you need more than just sizing and positioning. You need to understand the tools that help your layout adapt.
Now we deal with breakpoints
Breakpoints are different screen widths where your layout can adjust.
In the Framer editor, you see breakpoints lined up next to each other. One of them is always the default (usually desktop) and that one affects all others. If you make changes on a smaller breakpoint, those stay local and do not affect even smaller viewports.
You can create as many breakpoints as you want, but honestly, the three that Framer suggests out of the box are good enough for most use cases.
In special cases, like advanced grid layouts, you might want to add a larger breakpoint, for example, if you want to show six columns instead of three above 1600 pixels.
Layout options
You can tweak several values in the Layout panel to get the result you want. Let’s go through them one by one.
Type
What looks like a layer in the left panel is actually a div under the hood. Just a regular HTML element. In Framer, these divs are used to build stacks and grids.
A stack places elements next to or below each other, depending on the direction. A grid arranges them in rows and columns, based on how many you set.
So yes, it looks like layers, but it behaves like structured layout. Makes sense now, right?
Stack
Grid
Direction
Defines whether elements are laid out horizontally or vertically inside a stack. You can switch this per breakpoint for responsive layouts.
You will use this often to control how content flows on different screen sizes.
Horizontal
Vertical
Distribute
This controls how elements are spaced inside their parent, whether they sit at the start, in the center, or at the end of the container. It follows the direction you set above, so distribution happens horizontally or vertically depending on that setting.
There are also some less obvious but powerful options, like Space Between, which pushes the first and last elements to the edges and leaves space between.
Align
Sets how elements align inside the parent. The available alignment options depend on the layout direction. So you will be aligning either horizontally or vertically based on the direction you set above.
Wrap
Lets elements move to a new line if they do not fit in one row. Especially helpful when working with tags, buttons, or dynamic content.
Gap and Padding
Gap controls the space between elements. Padding controls the space inside the container.
While these settings are not required for a layout to be responsive, they make a big difference in how your design feels on different screens. Think of it this way: bigger screens usually need more padding, while smaller screens feel better with tighter spacing. It helps your layout breathe.
Additional layout techniques to keep in mind
Beyond sizing, positioning, and alignment, there are a few extra techniques that help your layout respond better. These include how you control content order, visibility, scrolling, and overflow.
Content order
In the layer panel on the left, you can change the visual order of elements without changing their actual layer structure. This is especially useful when you want to rearrange content for mobile without affecting the desktop version, or vice versa.
1st on Desktop
3rd on Mobile
2nd on Desktop
1st on Mobile
3rd on Desktop
2nd on Mobile
Visibility
Use visible or not to hide or show elements at specific breakpoints. This is useful for showing simpler versions of content on smaller screens.
Overflow
Controls whether content inside a container is clipped, visible, hidden, or scroll.
By default, overflow affects both directions. But if you need more control, you can adjust the X or Y overflow separately using the + button in the Styles panel.
One thing to watch out for: when overflow is set to visible, the browser uses the size of the largest overflowing element to calculate the page width. This can cause the rest of your layout to shrink, especially on mobile breakpoints. If your layout suddenly looks too small, chances are something is sticking out past the edge of the screen.
Am I too much for this container?
Overflow: Scroll
Sometimes you want content to overflow a container, especially on mobile. That’s where scroll comes in.
It lets you scroll content inside the parent, without making the entire page scrollable.
To enable this:
Set Overflow to Scroll
Use the + button to define the scroll direction (Overflow X or Y)
Optionally, turn on Overscroll: Contain to prevent bounce effects
And if you want to hide the scrollbar (like on most mobile designs), toggle Scrollbars: Hidden
Am I too much for this container?
Scroll right
One last thing to remember
On mobile and tablet, your cursor is your finger, which means there is no hover. Even though hover effects can add great UX on desktop, you need to handle them differently on touch devices. Always make sure that hover-only interactions are backed up by something that works on tap as well.
Globals
Colors
Colors are one of the most fundamental parts of any website. You can set them individually on each element, but defining global color tokens will make your workflow much more efficient.
How should I mix colors?
There are plenty of color theory frameworks and shading techniques out there. You probably know the basics already, but here, here, and here are some solid resources worth checking out. Pick the one that works best for you.
Framer supports RGB (meh), HEX (easy to copy), HSL (great for creating consistent shades), and P3 (for modern displays) color models. All of them support transparency.
How to structure your colors
My go-to method is grouping colors by function, not just visual style. But since not every color has a specific purpose, I also create a few flexible, utility-based color groups.
Start by setting at least four base colors:
Text color (usually black or dark gray)
Background color (usually white)
CTA color
A neutral gray
As you build your site in the editor, always assign colors from the global palette. If a new shade is needed, mix it and immediately add it as a new global color so you stay consistent.
Here’s how I usually organize my palette into folders:
Text colors and shades (primary, secondary, muted)
CTA colors and variants (stronger for text, softer for backgrounds)
Functional colors (success, error, warning, etc.)
Neutrals (shades of gray for backgrounds, borders)
Opaques (semi-transparent versions of key colors)
Brand and extras (colors tied to branding, themes, illustrations)
Text Styles
They keep your design clean, consistent, and easy to manage. Instead of styling each text layer by hand, you define once and apply everywhere. It’s best to use them on every text element to keep things consistent across your project. Faster edits, fewer mistakes, and way smoother scaling as your design grows.
Text size matters in responsive design
You can define different font sizes at each breakpoint. While it’s optional, it’s worth doing right. Framer supports two main units for text sizing: pixels (px) and Rem.
Pixels (px)
Every font size is tied to a fixed number of screen pixels. Just make sure not to confuse this with pt, which is also pixel-based but behaves differently in some tools. Pixel sizing is straightforward but can be less flexible across screen sizes.
Root em (Rem)
Rem sizes are based on a root value, usually 16px, and all text sizes are calculated as a multiple of that base. In Framer, you can change the Rem base at each breakpoint, so your whole typography scale can adapt responsively without setting every value manually. Still, for best results, review your Rem sizes per breakpoint. Larger screens often benefit from a wider range than smaller ones.
See Rem in action by tweaking the base value per breakpoint in the Typography settings on the page.
Eg. set Base to 8px or 20px
3rem text
Text size is 3rem on 16px breakpoint base (not global style)
48px text
Text size is 48px (not global style)
How this template keeps text readable on every screen
This template uses Rem-based global sizing, with the following base values defined per breakpoint:
Desktop = 16px
Tablet = 15px
Mobile = 14px
Since text sizes would appear too small on mobile with this setup, I use breakpoint-specific overrides within the styles themselves to make sure everything stays readable. Of course, it is entirely up to you how you choose to configure these values.
Sometimes your visual design does not align with SEO best practices
Search engine crawlers do not care about visual flair. They only understand your content if the headings follow a proper semantic order (like h1 to h2 to h3). But that might not match your design vision. Fortunately, there is a simple trick that helps you get the best of both worlds.
On every text element, you will find an Accessibility section in the right-hand panel with a Tag value. This is set based on the visual style, like H1 for large headings. You can freely change these tags. If something looks like a heading but should not be one for SEO, switch it to a paragraph (p). Or the other way around. This does not affect the design, it only defines the structure for search engines and screen readers.
For even better results, consider applying semantic tags to your stacks as well, such as section, article, or nav. This gives crawlers a clearer picture of your layout and improves both accessibility and SEO.
Vectors
This one’s short and you’re going to love it.
Vectors are perfect for managing icon sets and making variables easier to use. But more than that, any SVG-based element on your site (like logos) should ideally live here.
Why use Vectors?
Vector illustrations stay razor sharp on all screen sizes and pixel densities. They’re tiny in file size and load super fast.
They shine especially when you’re using lots of icons. You can easily drag them onto the canvas or even bind variables to keep things consistent and flexible at the same time.
You’ll find the Vectors panel under the Assets tab in the left sidebar.
Getting started
Use the plus icon in the Vectors panel to create your first set. Then switch to the Layers tab to see the familiar interface. You’ll see three default examples. Keep the first one and delete the rest.
Icons are placed on small canvases inside the set. It's best to give each canvas the same dimensions, and make sure all icons are sized similarly (e.g. same height) with a bit of padding from the canvas edge.
Framer expects SVG files. You can paste or drag them directly onto a canvas. Make sure each canvas holds only one icon.
Quick prep for flexible use
To make your icon set as useful as possible, connect variables to properties like fill (color) and stroke width. This lets you control them directly from the editor, even inside a component.
Using icons on the canvas
Once your set is ready, you can drag it into your page. Set its size, then use the dropdown to pick which icon to show.
If you’ve set up variables, you’ll be able to tweak values right from the component or the canvas.
Need to replace an icon you’ve already used in a bunch of places? No worries. Just update it in the Vector set, and it will refresh everywhere automatically.
Using vectors inside components
For buttons, this setup is especially useful.
Here’s my go-to setup: Create a button component with three elements:
'icon-before - label - icon-after'.
You can connect variables to each. That way, you can customize it per use case: Sometimes you want an icon before the label, sometimes after, and sometimes no icon at all.
With vectors, this stays clean, scalable, and consistent.
Components
In Framer, a component is a reusable, customizable building block. You design it once and reuse it in multiple places across your site. Components are also required whenever you want to create more complex interactions for an element.
Components in your design system
Components in Framer work just like the ones you know from Figma or Sketch. They are reusable building blocks you edit once and use many times. Think buttons, cards, headers, and footers. Make one solid version, then reuse it across your site with small tweaks through variables.
Creating simple components
Take a button for example. You’ll need it in many places, but you don’t want to redesign or update it a hundred times if you decide to change something (rounded vs square corners, for instance).
So you create a component the same way you build anything else in Framer: from stacks, text. Once your first stack or frame is ready, turn it into a component (Right click - Create Component).
This opens a new canvas where you can edit the component just like any other design, with layers and elements. Instead of breakpoints, components use variants.
In the Layers panel, elements are grouped by variant, while on the canvas you’ll see variants displayed side by side. The same responsive rules apply here: edits on the default variant cascade to all variants, but changes made on a variant only stay local to that one.
On the default variant (you can rename variants as you like), build your full design, including all the elements you might need across different versions even those that are not always visible. For a button, that might mean a label plus one or two icons (before and after the label).
Within a component, you can easily add hover and pressed states. These are stored as extra variants. Keep in mind they don’t inherit styles automatically, and you cannot reference one state inside another.
Customizing with variables
Once you create a component, you can make it flexible with variables. Change the text on a button, swap an icon, or apply a different color. All without breaking the structure. Practically anything with a + icon in the right-hand panel can be turned into a variable.
This way, the same component can look slightly different depending on where you use it, but the design foundation stays solid.
For buttons, you can even add the link as a variable. Just be careful not to run into an optimization error by nesting one linked component inside another link.
Components for interaction
Components are not just for consistency, they also make interactions possible. Anytime you want an element to have multiple states, you’ll need a component.
Think of a FAQ item. It has two states: closed and open. In the closed state, you only see the question. In the open state, the answer slides into view. The animation between the two is handled inside the component.
This way, you don’t have to rebuild the logic for every FAQ item on the page, you just reuse the component.
FAQ element
Adding interactions
Inside a component, you can add interactions that switch between states.
For example:
Tap → toggle between open and closed
Hover → change color or show an underline
Click → trigger a variant change with animation
States in Framer live as variants, and you can freely define how they transition. For components, you’ll find this at the very top of the right-hand panel.
Interaction events
Just like visual properties, interactions can also be exposed as variables. This lets you define in the component what should happen on a click or tap, and then connect it directly on the page.
For example, a button component can expose its onClick event as a variable. On the page, you could connect it to navigation, opening a modal, or triggering another action.
This makes your components far more flexible and reusable across different contexts.
Breakpoints in components
Components should be responsive too. You can design different layouts for desktop, tablet, and mobile all within the same component. But breakpoints work a bit differently here: you need to set them up as separate variants. On the page, you can then choose which variant shows at each breakpoint.
It sounds neat, but be careful in your design. A complex interactive component can quickly explode in the number of variants if the base is not designed well.
Think of it this way: if your default variant is a full-width element with three states triggered by interactions, you’ll need to recreate all of them for tablet and mobile as well. That means not three variants, but three times three.
FAQ element
Components for CMS
Now that you understand what components are and how to use them, it’s easy to see how they work with CMS items.
The key here is variables. You can connect variables in your component to CMS fields. When the CMS provides content, it overrides the default values in your component.
For example, in a blog post list item component:
The image is replaced with the post’s featured image
The title text is filled with the post title
Categories or tags are displayed automatically
The link (slug) is applied so the item points to the correct post page
This makes your CMS-driven pages consistent, scalable, and much easier to maintain.
CMS List item
Nested components
A nested component is simply a component placed inside another component. It sounds simple, but it is one of the most powerful ways to build scalable designs in Framer.
Think of it as flexibility: you can swap nested parts without breaking the parent structure. It also gives you consistency: if you update the nested component, it updates everywhere it’s used.
Watch out for links: If you place a component that outputs a link inside another component that also outputs a link, you create nested links. Nested links are not valid HTML. In Framer this will surface as an optimization error when you preview or publish. This is not a Framer bug. It is how the web platform works.
List item + nested elements list
Maintenance and consistency
One of the biggest advantages of components is that you only need to update them once. Any changes you make to the main component flow through to every instance across your site.
This saves you time, but more importantly, it keeps your design consistent. Headers, footers, buttons, or cards will always follow the same rules and styling, no matter how many times you use them.
When your project grows, this becomes essential. Instead of hunting down dozens of slightly different versions, you know that everything is tied back to a single source of truth.
CMS
CMS Collections
Coming soon.
Collection List
Coming soon.
Details Page
Coming soon.