Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we’ll start from scratch to create this beautiful design using Figma. You’ll learn how to make layouts that are easy to use and work well on any device. We’ll cover key concepts and tools to help you master responsive design in Figma.
15 Topics
All techniques are explained step-by-step in a beginner-friendly format, so you can easily follow along in a cohesive and structured way.
1. Intro to Responsive Layouts
Master essential Figma techniques for building flexible and adaptive designs across various devices.
Duration: 3:10
2. Resizing, Spacing, and Alignment
Learn the fundamentals of Auto Layout, resizing, alignment, spacing, and padding to create adaptable and responsive UIs.
Duration: 15:01
3. Wrap, Min & Max Width, and Padding
Understand Auto Layout directions, wrapping behavior, and how to set min/max widths and padding to build a responsive landing page.
Duration: 11:05
4. Absolute Positioning and Constraints
Design complex cards using absolute positioning and constraints within nested frames, then refine your landing page with final touches.
Duration: 9:14
5. Adaptive Design, Breakpoints, and Grid Systems
Learn to create adaptive layouts using grid systems and breakpoints to ensure your designs are responsive across all screen sizes.
Duration: 12:38
6. Figma Handoff Introduction
Build a strong foundation for an efficient design-to-development handoff process.
Duration: 4:30
7. Responsiveness
Transform static designs into fully responsive layouts by applying best practices.
Duration: 4:44
8. Creating a Responsive Desktop Design
Convert static layouts into responsive desktop interfaces using advanced Figma techniques.
Duration: 15:34
9. Dark Mode
Implement dark mode with Figma’s color variables and best practices for accessibility and consistency.
Duration: 9:16
10. Tablet and Mobile Versions
Design responsive tablet and mobile versions of your layouts directly in Figma.
Duration: 12:22
11. Locofy Introduction
Get an overview of what you’ll learn in this design-to-code course using Locofy.
Duration: 3:01
12. Conversion with Locofy Classic
Follow a step-by-step guide to converting your designs using Locofy Classic.
Duration: 15:24
13. Lightning: One-Click Design to Code
Discover how to instantly convert your designs into code with Locofy Lightning.
Duration: 7:19
14. Locofy Responsiveness
Use media queries and Locofy tools to apply responsive styling to your designs.
Duration: 9:18
15. Exporting Your Project to Code
Learn how to sync, exp
