Responsive Design in Figma: Auto Layout Deep Dive with Christine Vallaure

Is Figma Auto Layout driving you crazy? Do you want to feel full confidence when creating responsive designs? If so, this deep dive session is perfect for you.

In this Skillshare Live Session, you will learn how to set up responsive designs in Figma step by step — from the basics and behaviour settings to advanced nesting techniques and integrating layouts with grids.

UX/UI Designer Christine Vallaure will guide you through this interactive session that goes from creating single components to setting up entire pages with auto layout. To wrap up, she'll go the extra mile by teaching how auto layout actually translates to code, offering straightforward insights into CSS that will significantly improve your conversation and collaboration with development as a UI designer.

The Live Session Will Cover:

• What is auto layout?
• How and where to apply auto layout
• Understanding the auto layout menu
• Building a responsive card and learn about the power of resizing
• Playing with the mighty power of nested auto layout frames
• Absolute positioning
• Creating more complex card setups
• Auto Layout components and variables
• Setting up entire pages with auto layout
• An overview of flexbox and how it ties to Auto Layout
• Figma constraints and grids
• How to deal with breakpoints
• Hacks, tips and tricks to enhance your workflow
• Great plugins to use in Figma

Who is this for?

This class is suitable for you if you have basic knowledge of Figma or are an advanced Figma user and want to brush up on your skills.

You might also like this workshop if you switch from another software like Sketch and XD.

And, of course, as a special welcome to developers who want to improve the collaboration between design and code and better understand the responsive setup in Figma.

You will need:

• An active Figma account to partipate in the interactive components (a free account will work just fine)
• If you don't have a Figma account, you can just follow along on screen

About Christine Vallaure

Christine is a UX/UI Designer with a passion for code with over ten years of experience. She is the founder of moonlearning.io, an online learning platform for UX/UI design. Christine firmly believes designers and developers should understand each other’s tools to enable constructive dialogue.

All Skillshare Live Sessions are recorded. The recording will be shared with all ticket purchasers within 24 to 48 hours after the session.

We look forward to seeing you there!

-----------------------------------------

What is a Skillshare Live Session?

Join a Skillshare Live Session to create alongside Skillshare’s most inspiring teachers in an interactive, hands-on environment. When you join a Skillshare Live Session, you deepen your creative practice, strengthen your skills, and step fully into your creative potential with the support of the Skillshare community. Skillshare Live Sessions give you the opportunity to engage with your favorite teachers and ask questions along the way. You’ll leave every Skillshare Live Session feeling accomplished, having created something new with the guidance of the best creative teachers out there.

Skillshare's Terms of Service for Live Sessions

Skillshare's General Terms of Service can be found here.