---
title: "Figma Basics: Frames, Auto Layout and Components"
url: "https://insideuxdesign.com/en/blog/figma-basics-frames-auto-layout-and-components"
language: "en"
description: "New to Figma? Learn frames, auto layout and components step by step, build your first reusable component and stop fixing every screen by hand."
published: "2026-05-13T09:00:00+02:00"
updated: "2026-10-15T00:40:03+02:00"
---

# Figma Basics: Frames, Auto Layout and Components

Frames, auto layout and components are the three building blocks of Figma. Learn step by step how they work together and build your first reusable class card.

Picture this: you are designing your first screens in Figma for a small booking app, say for a yoga studio. After one evening you have twelve screens, each with a few buttons and a list of class cards. Then the first piece of feedback arrives. The button should no longer say “Book” but “Reserve a spot”. The text is longer, the button has to get wider, and on every screen the elements next to it refuse to move along. You click through twelve screens, nudge rectangles by hand, and notice along the way that your buttons don’t even look the same. One has a corner radius of 8 pixels, another one 6.

This is exactly the problem three core building blocks in Figma solve: frames, auto layout and components. Frames give your elements a container. Auto layout makes elements arrange themselves when content changes. And components turn a button into a part you design once and reuse everywhere. Once you understand these three tools, you stop working in Figma as if it were a drawing app and start working with a construction kit.

This article is for anyone who has just opened Figma or has mostly dragged rectangles and text onto the canvas so far. No prior knowledge required. The running example is the booking app from the scenario above, specifically a class card with a title, a time and a button.

## Before you start: Figma in five minutes

Figma is a design tool for creating interfaces for websites and apps. It runs in the browser and as a desktop app, and several people can work in the same file at the same time. You’ll also find a short overview of the tool in our resources under [Figma](https://insideuxdesign.com/en/ressourcen/figma).

A Figma file consists of one or more pages. Each page is an infinitely large workspace called the canvas. On the left you see the Layers panel, which lists every object on the page. On the right sits the sidebar with the properties of whatever you have selected: size, color, typography or, indeed, auto layout. Almost everything in this article happens in that right sidebar.

For learning, the free Starter plan is enough. According to the Figma Help Center, it gives you unlimited drafts, meaning files you don’t move into a team folder. The team space allows three design files in total, version history goes back 30 days, and there are no team libraries. What that means for components is covered further down. The differences between the paid plans are explained in detail in [Design Tokens in Figma](https://insideuxdesign.com/en/blog/design-tokens-in-figma-define-colors-and-spacing-once-with-variables). Current prices are listed on Figma’s pricing page.

## Frames: the container for everything

A frame is a container for other layers such as shapes, images and text. That sounds unexciting, but it is the most important foundation in Figma. Nearly every feature in this article only works with frames: auto layout, layout grids and constraints, which are rules for how an element behaves when its container gets bigger or smaller.

### Creating a frame

You’ll find the Frame tool in the toolbar, or press `F` (or `A`). While the tool is active, the right sidebar shows presets for common formats such as Phone, Tablet and Desktop. One click on a preset and you have a frame sized for a smartphone screen.

Frames that sit directly on the canvas are called top-level frames. They are usually your screens and appear in bold in the Layers panel. Frames can also be nested: a frame inside another frame is both a child and a parent. That’s exactly what you’ll need for the class card. The screen is a frame, the card inside it is a frame, and the button inside the card is a frame again.

If you already have elements on the canvas, select them and press `Ctrl + Alt + G` (Mac: `Cmd + Option + G`) to wrap them in a frame.

### Frame or group?

Beginners often mix up frames and groups. Both combine several layers, but they behave differently. A group (`Ctrl + G`, Mac: `Cmd + G`) has no size of its own. Its bounds come from the elements inside it. Move an element and the group grows or shrinks with it. A frame, on the other hand, has its own independent size.

That leads to a simple rule of thumb, which also follows from Figma’s documentation: groups work well for things that should always scale together, like a logo made of several shapes. For anything that has structure and should react to content, such as screens, cards, buttons and lists, use a frame. Only frames can have auto layout, layout grids and constraints for their contents.

### Hiding overflow with “Clip content”

In a frame’s properties you’ll find the option “Clip content”. When it’s on, Figma hides anything that extends beyond the frame’s edges. That’s handy for screens where a long image shouldn’t spill past the edge of the display. If you ever wonder why an element is suddenly half gone, this setting is often the reason.

### Stay organized from day one

Two habits pay off immediately. First, name frames after their purpose: “Class list”, “Class card” or “Button” instead of “Frame 247”. Double-click the name in the Layers panel to change it. Second, once your page fills up with screens, sections help. They group several screens on the canvas, for example every screen in the booking flow. That way you’ll still find your way around the file weeks later.

## Auto layout: elements arrange themselves

Back to the opening scenario. The button gets wider because the text is longer, and everything next to it should move along. Without auto layout, that means manual work. With auto layout, it happens on its own.

Auto layout is a property of frames. Elements inside an auto layout frame are arranged by fixed rules: in one direction, with a set gap between them and padding to the edge. When content changes, Figma recalculates the arrangement. If you have worked with CSS before, you’ll recognize the idea behind Flexbox. If not, you don’t need to know it to use auto layout.

### Adding auto layout

Select a frame or several layers and press `Shift + A`. The shortcut is the same on Mac and Windows. Alternatively, click “Add auto layout” in the right sidebar. Figma guesses whether the elements are meant to sit below or next to each other. You can change the direction at any time.

According to the Figma Help Center, there are four flows:

- **Vertical:** elements stack from top to bottom.
- **Horizontal:** elements sit side by side, from left to right.
- **Wrap:** elements sit side by side and move to a new row when they run out of space. Useful for tags or filter chips.
- **Grid:** elements are placed in rows and columns and can span several cells.

To get started, vertical and horizontal are what you’ll use most. They cover a large share of all interfaces.

### Gap and padding

Two values decide how airy an auto layout frame feels. The gap is the distance between elements. Padding is the space between the frame’s edge and its content. You can set padding equally on all sides, separately for horizontal and vertical, or individually for each side.

For the class card’s button, that might mean: horizontal auto layout with the text inside, 12 pixels of padding top and bottom, 16 pixels left and right. If you later add an icon in front of the text, set a gap of 8 pixels and icon and text line up neatly. Which spacing values make sense, and why many teams use a fixed scale of multiples of 4 or 8, is a topic of its own. For now, it’s enough to repeat a few values consistently.

### Hug, fill, fixed: how big an element gets

Possibly the most important part of auto layout is how an element’s size behaves. Figma offers three settings, separately for width and height:

- **Hug contents:** the frame is exactly as big as its content plus padding. If the text gets longer, the frame gets bigger. This setting is only available for auto layout frames.
- **Fill container:** the element takes up all available space in its parent auto layout frame. This setting is only available for children of an auto layout frame.
- **Fixed:** the size stays the same no matter how the content changes. As soon as you type in a width or height manually, Figma switches to Fixed.

On top of that, you can set minimum and maximum values, for example so a button never gets narrower than 120 pixels.

Here’s what the difference looks like in the example:

> **Before:** The button is a rectangle with a fixed width of 100 pixels and a text layer on top. “Book” becomes “Reserve a spot” and the text sticks out past the rectangle. You drag the rectangle wider, re-center the text and repeat that on twelve screens.
> 
> **After:** The button is an auto layout frame set to “Hug contents” for its width. You change the text and the button grows on its own, with the padding staying the same.

### Nesting: the class card

Auto layout really shines when you put frames inside each other. Every nested frame keeps its own direction, gap and padding. The class card can be built in three levels:

1. Innermost is a vertical frame with the class title “Vinyasa for Beginners” and below it the line “Monday, 6:30 pm”, with a gap of 4 pixels.
2. Next to it is the button. Both sit together in a horizontal frame. The text area gets “Fill container” for its width, the button gets “Hug contents”. That way the text takes all the free space and the button stays as narrow as it needs to be.
3. The outermost level is the card itself: a frame with 16 pixels of padding, a background color and a corner radius.

The class list is then just a vertical auto layout frame with several cards stacked 12 pixels apart. Add or delete a card and the others move up or down automatically. If the screen gets wider, say for a tablet, and the cards are set to “Fill container”, they stretch along with it.

### Exceptions to the rule

Sometimes an element needs to break ranks, like a small “Fully booked” badge floating in the top right corner of the card. That’s what the “Ignore auto layout” setting is for, formerly called “Absolute position”. The element stays inside the frame but is no longer arranged with the others. Only elements like this can be positioned with constraints inside an auto layout frame. For all other children, auto layout is in charge.

## Components: build once, use everywhere

With auto layout, the button adapts to its text. That leaves the second problem from the scenario: twelve screens hold twelve copies that gradually drift apart. This is where components come in.

A component is a reusable element, such as a button, an icon or the class card. You design it once and then use it as often as you like. Components are also the building blocks of every [design system](https://insideuxdesign.com/en/glossar/design-system), a shared collection of rules and parts for a product.

### Main component and instance

Every component has an original, the main component. Every copy of it is an instance. Instances are linked to the main component: when you change the main component, all instances pick up the change. So if you switch the button’s corner radius from 6 to 8 pixels once, it’s updated on all twelve screens.

To create a component, select the layers, for example your button frame, and press `Ctrl + Alt + K` (Mac: `Cmd + Option + K`). Alternatively, choose “Create component” from the right-click menu. In the Layers panel, components are marked with a purple icon. You create an instance by copying the main component or dragging it from the Assets tab in the left panel onto the canvas.

### Customizing instances with overrides

Of course, not every button should say “Reserve a spot”. That’s why you can change individual properties in an instance without breaking its link to the main component. These changes are called overrides. Typical examples are different text, a different color or a hidden icon. According to the Figma Help Center, instances can also adjust the padding and gap of an auto layout frame. What you can’t do in an instance is add or reorder layers.

Worth knowing: overridden properties stay overridden. If you manually set the button color to green in one instance and later change the main component’s color, that one instance stays green. It keeps inheriting every property you haven’t touched. That’s intentional, but it can be surprising. If an instance doesn’t behave as expected, check the right sidebar. You can also reset overrides there.

### Variants: one button, several states

A button rarely comes alone. There’s a primary button for the main action, a secondary one for less important actions, and a disabled state for when a class is fully booked. Instead of creating three separate components, you combine them as variants.

Variants group similar components into a shared container called a component set. Each variant is described by properties and their values. For the button, that could be the property “Type” with the values “Primary” and “Secondary”, and the property “State” with the values “Default” and “Disabled”. Each combination may only exist once, but you don’t have to create every possible combination.

To set them up, select several components and click “Combine as variants” in the sidebar. Then give the automatically generated properties meaningful names. Figma uses the variant in the top left corner of the set as the default. When you drag the set onto a screen, that variant appears, and you switch between variants using the dropdowns in the right sidebar. “Primary, Default” becomes “Primary, Disabled” in two clicks, without hunting for another copy.

### Component properties: switches instead of variants

Not every difference needs its own variant. For smaller differences, Figma offers component properties, which according to the Figma Help Center are available on all plans:

- **Text:** makes a text layer editable right in the sidebar, such as the button label.
- **Boolean:** an on/off switch that shows or hides a layer, for example the icon in the button.
- **Instance swap:** lets you swap a nested instance for another component, for example a calendar icon for a heart icon.
- **Slot:** a flexible area in a component where you can add and arrange your own content in an instance without detaching it. Figma introduced slots as an open beta in March 2026.

For the button, that means: instead of one variant “with icon” and one “without icon”, a single boolean switch does the job. That keeps the component set small and easy to manage.

### Hands off the detach button

Sooner or later you’ll come across the “Detach instance” option (`Ctrl + Alt + B`, Mac: `Cmd + Option + B`). It turns an instance into a regular frame. The element looks exactly the same as before, but it’s no longer linked to the main component. Future changes to the component will never reach it.

Detaching is tempting when an instance can’t do exactly what you need right now. But every detached instance is one more spot that has to be maintained by hand later, which is exactly the problem from the beginning. It’s better to extend the main component with a variant or property, or to deliberately create a new component.

### Where main components live

Leaving main components scattered across different screens quickly leads to chaos. That’s why many teams create a dedicated “Components” page in the file and keep all originals there. The screens only contain instances. And if you accidentally delete a main component, its instances remain, according to the Figma Help Center, and the component can be restored.

If components should be available across several files, you publish them as a library. That requires a paid plan. On the Starter plan, components stay within their file, which is perfectly fine for your first projects.

## Step by step: the class card as a component

To wrap up, here’s the whole process in one go so you can rebuild it right away:

1. Press `F`, pick a smartphone preset to create a frame and name it “Class list”.
2. Type the text “Reserve a spot”, select it and press `Shift + A`. Give the new frame padding, a background color and a corner radius. Set its width to “Hug contents”. Name the frame “Button”.
3. Turn the button into a component with `Ctrl + Alt + K`. Create a second version for the disabled state and combine both as variants.
4. Type the class title and time, select both and wrap them in a vertical frame with `Shift + A`.
5. Select this text area and an instance of the button and add auto layout again, this time horizontal. Set the text area to “Fill container”.
6. Give the outer frame padding, a background and a corner radius, name it “Class card” and turn it into a component as well.
7. Place several instances of the class card in a vertical auto layout frame, set the cards’ width to “Fill container” and adjust title and time through overrides.

Now try changing the corner radius in the class card’s main component, or the text in the button. If every card updates and nothing shifts out of place, you’ve got the three building blocks down.

## Common beginner mistakes

A few stumbling blocks trip up almost everyone who starts with Figma. The good news: all of them are easy to fix.

**Groups instead of frames.** If you group everything with `Ctrl + G`, you’ll eventually wonder why you can’t add auto layout and why elements get distorted when you scale them. For UI elements and layouts, frames are almost always the right choice.

**Fixed sizes everywhere.** Typing in widths manually quietly switches the element to “Fixed”. Then the button doesn’t grow after all. For elements that should react to content, check whether “Hug contents” or “Fill container” is set.

**Rectangles as backgrounds.** Putting a rectangle behind a text layer to build a button is a habit from classic graphics software. In Figma, the frame itself gets the fill color. That saves a layer and makes sure the background always matches the size.

**Too many variants at once.** It’s tempting to create every conceivable state right away: hover, pressed, focused, icon left, icon right, in three sizes. That quickly adds up to dozens of variants nobody maintains. Start with the states your screens actually need and use component properties for small differences.

**Detaching as a shortcut.** As described above, every detached instance is a copy you’ll have to maintain yourself later.

## Where to go from here

Frames, auto layout and components are the foundation. The next step is to define even the smallest design decisions, like colors and spacing, once in a central place instead of typing them into every component. How that works with Figma variables is shown in [Design Tokens in Figma](https://insideuxdesign.com/en/blog/design-tokens-in-figma-define-colors-and-spacing-once-with-variables), which builds directly on the basics covered here.

If you want to understand how individual components grow into a system, take a look at [Atomic Design](https://insideuxdesign.com/en/glossar/atomic-design) and the article [Design Systems for Small Teams](https://insideuxdesign.com/en/blog/design-systems-for-small-teams). And if you’re still wondering whether Figma is the right tool at all, the comparison [Sketch vs. Figma in 2026](https://insideuxdesign.com/en/blog/sketch-vs-figma-in-2026-which-one-you-should-choose) helps you decide.

## Conclusion

Figma only gets really fast once you stop drawing screens and start building them. Frames give every element a container with its own size. Auto layout makes content arrange itself and grow when text changes. Components turn recurring elements into parts you maintain in one place and use everywhere.

In the opening scenario, that means changing “Book” to “Reserve a spot” takes seconds. You change the text in the main component and all twelve screens follow, without anything shifting out of place. Start small, with one button and one card. Once those two work cleanly, the rest follows almost on its own.

## Checklist

- Create screens, cards and buttons as frames, and use groups only for things like logos.
- Name frames after their purpose and organize screens with sections.
- Add auto layout with `Shift + A` to anything that stacks content or places it side by side.
- Set gap and padding using a few recurring values.
- Choose sizes deliberately: “Hug contents” for buttons and labels, “Fill container” for elements that should fill the space, “Fixed” only when something really needs to stay fixed.
- Turn recurring elements into components with `Ctrl + Alt + K`.
- Group states as variants and handle small differences with component properties.
- Customize instances with overrides instead of detaching them.
- Keep all main components on a dedicated page.

## Sources

- [Figma Help Center: Starter plan overview](https://help.figma.com/hc/en-us/articles/13838684089751-Starter-plan-overview)
- [Figma: Pricing](https://www.figma.com/pricing/)
- [Figma Help Center: Frames in Figma Design](https://help.figma.com/hc/en-us/articles/360041539473)
- [Figma Best Practices: Groups versus frames](https://www.figma.com/best-practices/groups-versus-frames/)
- [Figma Help Center: Guide to auto layout](https://help.figma.com/hc/articles/360040451373)
- [Figma Help Center: Guide to components in Figma](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma)
- [Figma Help Center: Create components to reuse in designs](https://help.figma.com/hc/en-us/articles/360038663154-Create-components-to-reuse-in-designs)
- [Figma Blog: Feature highlight, component overrides](https://www.figma.com/blog/figma-feature-highlight-component-overrides/)
- [Figma Help Center: Create and use variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants)
- [Figma Help Center: Explore component properties](https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties)
- [Figma Help Center: Create and use slots](https://help.figma.com/hc/en-us/articles/38231200344599-Create-and-use-slots-to-build-flexible-components-in-Figma-Design)
- [Figma Forum: Slots is rolling out in open beta](https://forum.figma.com/product-updates-3/slots-is-rolling-out-in-open-beta-51584)
- [Figma Help Center: Detach an instance from the component](https://help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component)