Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Mastering Autolayout in Figma - for Web and UI Design
Rating: 4.2 out of 5(15 ratings)
67 students

Mastering Autolayout in Figma - for Web and UI Design

Master Auto Layouts in Figma to create responsive, scalable web and UI designs with hands-on practice files included
Last updated 9/2024
English

What you'll learn

  • How to use Autolayout in UI Design?
  • Designing Responsive UI Cards in Figma with Autolayouts
  • When and where to use Auto Layouts in UI Design
  • Creating whole Website Section with Autolayout
  • Creating Autolayout Components in Figma

Course content

2 sections11 lectures1h 26m total length
  • Introduction to the Figma Auto Layout Course1:42

    Auto layouts has been always a bigger issue for most designers when they start learning Figma.

  • 02 Explaining all autolayout Controls and alignments9:29

    Basics of Auto Layout controls and alignments in Figma

  • Download Course .fig source files0:06

    This the Figma file for the course. Please import it into your Figma and learn from it

  • 03 Text alignment Heading subheading combo with autolayouts8:55

    Text Alignment using Autolayouts in Figma

  • 04 Card Design with buttons and icons in Autolayout7:37

    Design a UI Card in Figma with buttons and icons using Autolayout

  • Create Auto Layout Figma Buttons Set
  • Create a Responsive Auto Layout UI Card in Figma
  • 05 Complex responsive Autolayouts with absolute position13:31

    Using Absolute positioning in Auto Layout in Figma

  • UI Card with Absolute Positioned background elements Figma AutoLayouts
  • 06 Perfect Responsive Form Input with Figma Autolayouts8:12

    How to create responsive form text inputs in Figma using Auto Layouts?

  • Responsive Text Input for forms in Figma using Auto Layout

Requirements

  • Just a beginner level usage of Figma

Description

Unlock the full potential of your web and UI designs by mastering Auto Layouts in Figma. This course is designed for beginner to intermediate designers who often feel overwhelmed by the complexities of Auto Layouts.

We break it down into easy-to-understand steps, showing you how to create responsive designs that adapt seamlessly across different screen sizes. Whether you’re building websites, mobile apps, or wire frames, this course will teach you how to use Auto Layouts efficiently to save time and boost your productivity.

You’ll dive deep into the core features and advanced techniques of Auto Layouts, enabling you to create dynamic, responsive components. With hands-on lessons, you'll learn how to build scalable design systems that are clean, flexible, and easy to maintain. From creating buttons and forms to complex layouts, this course equips you with practical skills that will elevate your design workflow.

What’s more, we’ve included exercise Figma files so you can practice along with each lesson! By the end of this course, Auto Layouts will no longer feel like a challenge, but rather an essential tool in your design toolkit. Get ready to transform the way you approach UI and web design in Figma!


Let's unlock the secrets of using Auto layouts in Figma!

Who this course is for:

  • Web Designers who wants to master Figma Auot Layouts
  • UI Designers who need more productivity and time saving with Auto Layouts
  • UX Designers who wants to master Figma Auto layouts