Figma Auto Layout Masterclass 🇺🇦
- Your instructor
- Christine Vallaure
Workshop includes:
- 🔖 Figma techniques
- 👷♀️ Tips and tricks
- 📺 Workshop recording
- 🎤 Dedicated Q&A time
- 🏅 Smashing Certificate
Workshop, 1×3h • Mon, March 27 2023
09:00 AM – 12:00 PM PT • 18:00 – 21:00 CET • Check your time zone ⏰
Auto layout driving you bananas? Scared about what will happen with your design in the browser? Then this deep dive workshop is perfect for you.
We will learn everything about how to set up responsive design with Figma. This will be a deep dive into constraints, auto layout, and, most importantly but rarely discussed, breakpoints for your UI Design. Combining those tools will allow us to really test and document your designs and components in line with the actual code settings.
All proceeds from this workshop will be donated for humanitarian aid in Ukraine.
Want to join this workshop? Donate 35 USD or more — all proceeds from this workshop will be donated to humanitarian aid in Ukraine. Thank you! 💙💛
In this workshop, we’ll explore:
We will start with constraints:
- What they are
- How to apply them correctly
- How they are a total lifesaver when it comes to working with grids
- Combining constraints and auto layout
Auto layout:
- What is?
- How and where to apply?
- Understanding the auto layout menu
- Spacing and stacking
- Build a responsive card and learn about the power of resizing
- Play with the mighty power of nested auto layout frames
- Absolute positioning
- Create more complex card setups
- Set up an entire page in auto layout
- Learn about different stacking options
- Fixed aspect ratio with images
We will then learn how to deal with breakpoints in Figma:
- What are they?
- How do components and pages adapt
- How do breakpoints and media queries work in CSS
- Which breakpoint values should I use for my design
- How to set up breakpoints in Figma
- How to test pages and components with breakpoints
- Documenting the findings
- Responsive typography
Who is this workshop 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 other software like Sketch and XD.
And, of course, a special welcome to developers who want to improve the collaboration between design and code and better understand the responsive setup in Figma.
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 UX/UI learning platform. Christine firmly believes designers and developers should understand each other’s tools to enable constructive dialogue.
Schedule
8:45 AM ET
Virtual doors open, registration, chat and introductions.
9:00 AM – 11:30 AM
Deep dive into Figma responsive design, deep dive into constraints, auto layout, and, most importantly but rarely discussed, breakpoints for your UI Design.
11:30 AM – 12:30 PM
Q&A with Christine on the day’s material. Networking!
You can always re-watch the session at a more convenient time and follow the webinar at your own pace.
What hardware/software do you need?
To view the webinars, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.