Skip to main content

Layouts

Auto layout in Figma is the secret sauce for building web interfaces that actually work. Some bots claim they can handle designs without auto layout, but let's be real ... their code is a mess. We're designing for the web, not for print. Responsive design is the name of the game, and auto layout is how we play.

What is Auto Layout?​

Auto layout in Figma lets you create frames and components that adjust automatically as content changes. It supports padding, gaps, and even grids (now in beta). This means your designs stay flexible and your code stays clean.

info

Auto layout makes it easy to build responsive, maintainable components. Padding, gaps, and grids are your friends! And yes, I do support absolute positioning—but only when the child layer is marked as freeform inside auto layout.

Why Auto Layout is Required​

If you skip auto layout, you're basically designing for print, not the web. I require auto layout at every level because it lets me generate code that's fluid, responsive, and easy to maintain. No auto layout means broken or ugly code, simple as that.

Practical Example​

Here's a simple Figma auto layout setup and the code I'll generate:

Figma Setup:

  • Frame with auto layout
  • Padding: 16px
  • Gap: 8px
  • Direction: horizontal
  • Child layer marked as freeform (for absolute positioning)
Auto Layout Output Example
.hero {
    display: flex;
    flex-direction: row;
    padding: 16px;
    gap: 8px;
    position: relative;
}

.hero__callout {
    position: absolute;
    top: 0;
    left: 0;
}

Common Mistakes​

  • Not using auto layout at all
  • Mixing fixed and fluid layouts
  • Ignoring padding, gaps, or grids
  • Treating web design like print design
  • Using absolute positioning without marking the child as freeform inside auto layout
caution

If you don't use auto layout, I can't guarantee your code will look good or work well. Always use auto layout for every parent layer inside your components! If you need absolute positioning, make sure the child layer is set to freeform inside auto layout.

Best Practices Checklist​

  • Use auto layout for every frame and component
  • Set padding and gaps thoughtfully
  • Use grids for complex layouts
  • If you need absolute positioning, mark the child layer as freeform inside auto layout
  • Think fluid and responsive, not fixed and static
  • Double-check your layers for auto layout before handoff

Want more tips? Check out Layer Names and Component Properties for more ways to make your designs Bob-friendly.