Figma: Using Auto Layout
51mIntermediate2024-05-31
Authors
Tetiana Gulei
UX Designer | Teaching Figma and UX Design
Course details
Auto-layout empowers designers to create responsive elements that adapt seamlessly to various screen sizes. In this course, UX designer and instructor Tetiana Gulei dives into the concept of auto-layout and explores its practical applications, including crafting flexible buttons, dynamic lists, and comprehensive interfaces, and demonstrating the efficacy of auto-layout in ensuring user-friendly design. Explore the advantages of learning and using auto layout for designing user interface elements in Figma.
Skills covered
Layout and CompositionFigmaInteraction DesignUser ExperienceGraphic DesignDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - What is auto layout in Figma
1. Auto Layout Fundamentals
- 02 - Adding auto layout
- 03 - Resizing dimensions
- 04 - Working with spacing
- 05 - Setting padding
- 06 - Layouts and alignment
- 07 - Rearranging objects
- 08 - Other auto layout settings
- 09 - Absolute positioning
- 10 - Challenge - Image gallery
- 11 - Solution - Image gallery
2. Advanced Auto Layout
- 12 - Exploring nested auto layout
- 13 - Designing a contact card with auto layout
- 14 - Creating a table with auto layout
- 15 - Challenge - Design a recipe card with auto layout
- 16 - Solution - Design a recipe card with auto layout
Conclusion
- 17 - Final thoughts on Figma auto layout