---

In the morning, you will first be introduced to the brand new Figma variables – how to set them up, use them, and when to use variables vs styles. Next, we will delve into advanced components, exploring their setup, transforming them into component sets with variants, and the incorporation of component properties to enhance alignment with code. Additionally, we will cover the integration of variable modes for features such as light and dark mode, as well as automated variant swapping.

The afternoon will be dedicated to a deep dive into responsive design with Figma. We will explore constraints, auto layout, and, most importantly but often overlooked, how to handle breakpoints in Figma to test and document responsive behavior. We will examine both a traditional responsive setup and an advanced setup incorporating variables for breakpoints and automated variant activation.

This workshop focuses on understanding the technical aspects of establishing your design, which will ultimately enhance communication, documentation, and collaboration between design and (front-end) development.

Throughout the session, we will engage in a balanced mix of theory and hands-on exercises, with plenty of opportunity for you to ask questions.

Who Is This For?

Ideal for beginner/intermediate-level UI Designers or those switching from graphic design to UI Design who are eager to understand a little more about UI design’s technicality.

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 from the other side.

You should have basic knowledge of Figma and be able to set up a design, but no need to be an expert.

What Will Attendees Learn In This Workshop?

At the end of the course, you will have gained an in-depth understanding of:

• Professional file setup with Figma
• Understanding when and how to use the new Figma variables
• Setting up and working with components and keeping them organized
• When and how to use variants and component properties to add an extra layer of structure to your designs
• How to create nested, responsive components and even entire responsive pages with auto layout and constraints
• Understanding the limitations of constraints and auto layout and when to use what
• The new variable modes, their advantages and limitations
• How to test responsive components and pages with breakpoints in Figma
• Different approaches to documenting and sharing your work with the development team
• And of course, some advanced techniques, tips, tricks and hacks you will love

At the end of this class, you will have the perfect setup for your design to get coded the way you imagined it to be. As a developer you get to feel the magic of designing in Figma. And as a designer, your developers will probably love you a little bit more.

What Hardware/software Do You Need?

To get the most out of the workshop, you’ll need to bring a laptop.

In this workshop, we’ll explore:

Morning

• New Figma variables, how and when to use them
• Variables vs. Styles
• Overriding do and don’t
• Component sets and Variants
• Nested components and instance swap
• Component Properties

Afternoon

• Responsive design and responsive components intro
• What are constraints, and how to use them
• When constraints are not enough: Intro to auto layout
• Setting up auto layout frames
• Basic and advanced auto layout settings via the menu
• Spacing with variables
• Resizing behavior
• Nesting auto layout
• The new min, max and wrap features
• Absolute positioning in Figma
• Creating more advanced components and entire pages
• Understanding auto layout limitations
• Understanding breakpoints
• Responsive design with the new variable modes
• Responsive testing and documenting

About Christine Vallaure

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

Time & Location

This full-day workshop will take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Wednesday, September 6.

Schedule for Wednesday, September 6

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 EUR when signing up for the conference and a workshop!