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
Introduction
- What is auto layout in Figma
Auto Layout Fundamentals
- Adding auto layout
- Resizing dimensions
- Working with spacing
- Setting padding
- Layouts and alignment
- Rearranging objects
- Other auto layout settings
- Absolute positioning
- Challenge - Image gallery
- Solution - Image gallery
Advanced Auto Layout
- Exploring nested auto layout
- Designing a contact card with auto layout
- Creating a table with auto layout
- Challenge - Design a recipe card with auto layout
- Solution - Design a recipe card with auto layout
Conclusion
- Final thoughts on Figma auto layout