Sana Q.
Sample Grid auto layout explained well
I had avoided the grid flow because it felt confusing. The comparison with nested frames helped me decide when to use it.
Figma auto layout, variables and components in practice
Build flexible components with auto layout, component properties and variables, then use them to design a responsive dashboard
Created by Tomas Novak
- Updated September 2026
- English
- Intermediate
What you will learn
- Build components that resize correctly with hug, fill and fixed settings
- Use wrap and grid auto layout for responsive collections
- Expose text, boolean and instance swap properties on components
- Decide when to use variants and when to use properties
- Set up colour and number variables with light and dark modes
- Assemble a responsive dashboard from your own components
- Publish a library and manage updates safely
Course content
Auto layout properly
Advanced auto layout
- Article: Wrap for tags and chips 8 min
- Article: Grid auto layout 11 min
- Article: Min and max sizes in practice 8 min
- Article: Absolute position inside auto layout 7 min
- Article: Spacing scales and consistency 8 min
Component properties
- Article: Text properties 8 min
- Article: Boolean properties for optional parts 8 min
- Article: Instance swap and preferred values 10 min
- Article: Variants or properties 9 min
- Article: Exposing nested instance properties 8 min
Variables and modes
- Article: Collections and variable types 9 min
- Article: Primitive and semantic variables 11 min
- Article: Light and dark modes 10 min
- Article: Number variables for spacing and radius 8 min
- Article: Scoping and code syntax 7 min
Assembling the dashboard
- Article: Sidebar and navigation 10 min
- Article: Data table rows 11 min
- Article: Responsive dashboard screens 12 min
- Article: Final polish and stress testing 8 min
Libraries and maintenance
- Article: Publishing a library 8 min
- Article: Reviewing and accepting updates 7 min
- Article: When to detach, and when not to 7 min
- Quiz: Final check 6 min
Requirements
- Comfortable with Figma basics: frames, text, styles and simple components
- A Figma account; some library features need a paid plan
Description
Once you know the basics of Figma, the difference between a slow, fragile file and a fast, flexible one comes down to three features: auto layout, component properties and variables. This course teaches all three in depth, with the habits working product designers use to keep files tidy as they grow.
What you will build
You will create a small set of components for an analytics dashboard: buttons, inputs, table rows, stat cards, a sidebar and a top bar. Then you will assemble them into responsive dashboard screens that adapt to content and switch between light and dark themes with a single mode change.
- Auto layout with direction, gap, padding, wrap and grid flows
- Hug, fill and fixed resizing, plus min and max widths
- Component properties: text, boolean, instance swap and variants
- Variables for colour, spacing and radius, with light and dark modes
- Publishing and updating a shared library
Who this is for
This course assumes you can already create frames, text and simple components in Figma. If you have finished a beginner course or designed a few screens, you are ready. Designers moving into design systems work, and developers who want to understand how designers structure files, will both get a lot from it.
Every lesson uses the current Figma interface. Where a feature depends on your plan, such as publishing team libraries, I say so and show a workaround that works on the free plan.
Who this course is for
- Product designers who want faster, more flexible files
- Designers starting to work on a design system
- Front end developers who want to understand modern Figma files
Instructor
Tomas Novak
Product designer teaching Figma the way working design teams use it day to day
- 4.4 instructor rating
- 23 reviews
- 8,650 students
- 3 courses
- Sample
I am a product designer who has worked on web and mobile apps for over a decade, and Figma has been my main tool since it replaced my old desktop setup. I design screens, build component libraries and prepare files that developers can pick up without a meeting.
I teach Figma from the ground up and then into the features that separate tidy files from chaotic ones: auto layout, components and variants, variables and modes, and prototypes that behave like the real product. I care a lot about file structure and naming, because a design file is shared work, not a private sketchbook.
My courses are project based. You build real screens alongside me, and every section ends with a file you can keep and reuse.
Student reviews
Rosa F.
Sample Resizing finally clicked
The hug, fill and fixed lesson explained in ten minutes what I had been fighting for a year. My files are so much cleaner now.
Arjun S.
Sample Cut our button variants in half
We refactored our button set using booleans and instance swap the week after the component properties section.
Tobias K.
Sample Excellent on variables
The primitive and semantic structure with modes is exactly how our developers set up tokens. Handoff conversations got much shorter.
Leah W.
Sample Very practical dashboard project
Building real components and then assembling screens kept everything grounded. The table rows lesson was especially useful.
Maya C.
Sample Great but assumes the basics
Make sure you know Figma fundamentals first. Once you do, the pace is right and the explanations are precise.
Felix N.
Sample Wanted more on libraries
The auto layout and variables content is strong. The library section felt short for a team setting with many files.
Victor A.
Sample Clear, calm explanations
The CSS comparisons were helpful as someone who also codes. Good stress testing advice at the end.
Keep exploring
All Figma courses
More in Figma
$54.99
Enroll now