Design Champs+

Plus members get access to this course and dozens of other exclusive courses, live events, community channels, and discounts on cool stuff.

Design Champs+

Plus members get access to this course and dozens of other exclusive courses, live events, community channels, and discounts on cool stuff.

Design Champs+

Plus members get access to this course and dozens of other exclusive courses, live events, community channels, and discounts on cool stuff.

Design Champs+

Plus members get access to this course and dozens of other exclusive courses, live events, community channels, and discounts on cool stuff.

Details

3

lessons

20 Minutes

of content

Beginner

difficulty

Future updates

Private community

Monthly live UI design events

Topics

Framer

Instructor

Fabio Nobile

What is this course about?

This course breaks down one of Framer’s most important - and in the beginning most confusing - layout concepts: the difference between Frames and Stacks. Learners will learn when to use each, how they behave, and how to leverage them to create clean, responsive designs. I’ll do a hands-on demo, share slides for the “theories” (I’m thinking of doing some sort of mini poster to print out as a reminder), and a starter file. The goal of this course is to help Framer beginners design with more confidence and clarity.

Requirements

No real prior experience is required. A very basic understanding of how Framer works and familiarity with the canvas interface is helpful but not necessary. I’ll start with a very quick overview of Framer’s UI to get everyone on the same page.

What you'll learn
  • The core differences between Frames and Stacks

  • When to use Frames vs when to use Stacks

  • How to build responsive layouts using Stacks

  • Common layout mistakes and how to fix them

  • Best practices for clean, responsive and scalable design

  • How to combine Frames and Stacks effectively

Who is this course for?

This course is perfect for designers and learners who are new to Framer or want to sharpen their layout skills. Whether they’re coming from Figma or Sketch or haven’t used a design tool before. This course is aimed to build the fundamentals and the understanding of Frames vs Stacks which is a key skill for building consistent, responsive layouts in any tool.

Browse more courses

New

Soft Skills

AI Image Generation

4

lessons

29 Minutes

Beginner

This micro-lesson explores how to harness AI image generation with MidJourney using the web interface, rather than Discord.

New

Soft Skills

Figma Dev Mode

4

lessons

7 Minutes

Beginner

This course is a practical, designer-focused guide to using Figma’s Dev Mode as a powerful tool for cleaner handoffs, tighter team collaboration, and smarter product delivery.

Soft Skills

Communication for Creatives

4

lessons

16 Minutes

Beginner

Creative professionals need to know how to effectively communicate their design decisions, work, and ideas to stakeholders, clients, and team members. This course focuses on developing clear, concise, and confident communication skills specifically tailored for designers and creative professionals.

New

Soft Skills

AI Image Generation

4

lessons

29 Minutes

Beginner

This micro-lesson explores how to harness AI image generation with MidJourney using the web interface, rather than Discord.

New

Soft Skills

Figma Dev Mode

4

lessons

7 Minutes

Beginner

This course is a practical, designer-focused guide to using Figma’s Dev Mode as a powerful tool for cleaner handoffs, tighter team collaboration, and smarter product delivery.

New

Soft Skills

AI Image Generation

4

lessons

29 Minutes

Beginner

This micro-lesson explores how to harness AI image generation with MidJourney using the web interface, rather than Discord.

New

Soft Skills

Figma Dev Mode

4

lessons

7 Minutes

Beginner

This course is a practical, designer-focused guide to using Figma’s Dev Mode as a powerful tool for cleaner handoffs, tighter team collaboration, and smarter product delivery.

New

Soft Skills

AI Image Generation

4

lessons

29 Minutes

Beginner

This micro-lesson explores how to harness AI image generation with MidJourney using the web interface, rather than Discord.

New

Soft Skills

Figma Dev Mode

4

lessons

7 Minutes

Beginner

This course is a practical, designer-focused guide to using Figma’s Dev Mode as a powerful tool for cleaner handoffs, tighter team collaboration, and smarter product delivery.

Get started with Design Champs today

Get access to valuable resources, tutorials, and a supportive community to help you grow and excel in your design skills.

Get started with Design Champs today

Get access to valuable resources, tutorials, and a supportive community to help you grow and excel in your design skills.

Get started with Design Champs today

Get access to valuable resources, tutorials, and a supportive community to help you grow and excel in your design skills.