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, export, or deploy your final project from Locofy to production.
Duration: 9:59