---

Variables, Components and Responsive Design

In this deep-dive workshop, we will tackle one of the most essential yet tricky parts of UI design using Figma: truly responsive, component-based UI Design.

€499^.00 Register for this workshop → Get a single workshop, or bundle with another workshop.

---

In the morning, we will cover basic to advanced components, exploring their setup, using variables in components, transforming them into component sets with variants, and incorporating 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.

This workshop focuses on understanding the technical aspects of establishing your design, ultimately enhancing 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 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
• When to use one-dimensional layouts versus Grid, and how to combine them effectively.
• Understanding the limitations of constraints and auto layout 
• Variable modes, their advantages and limitations
• 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

By the end of this class, you’ll have the ideal setup for coding your designs exactly as you envisioned them. You’ll be able to communicate with developers more effectively, with a clear understanding of what belongs in Figma and what belongs in the browser. As a developer, you’ll experience the magic of designing in Figma. And as a designer, your developers will probably love you a little bit more.

In this workshop, we’ll explore:

Morning

• Setting up components and instances
• Overriding do and don’t
• Component sets and Variants
• Nested components and instance swap
• Component Properties
• Using variables with components
• Keeping components organised
• Variable modes and components (light and dark mode & variant swapping)

Afternoon

• Responsive design and responsive components intro
• Setting up auto layout frames
• Understanding the difference between one and two dimensional layouts
• Aligning with CSS: Comparing Flexbox,CSS Grid and Figma.
• Resizing behaviour
• Nesting auto layout
• Automating auto layout
• Setting min, max and wrap features
• Creating more advanced components and entire pages
• Creating content with the Figma AI
• Understanding auto layout limitations
• Understanding breakpoints between CSS and Figma
• Responsive design with the variable modes
• Responsive typography with modes

What Hardware/software Do You Need?

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

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.

Location

Situated in a bustling area of central Madrid, our workshop location Good Rebels offers a professional and friendly workshop space. The workshop room is bright and modern, and we’ll offer delightful workshop refreshments and lunch during the day.

Time

This full-day workshop will take place at Good Rebels . The workshop will be running from 9:30 AM to 5:30 PM on Wednesday, November 19.

Schedule for Friday. September 5.

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 EUR 200 when signing up for two workshops!