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. We will learn about the brand new Figma variables introduced in June 2023 and how they play a key role in this setup.

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.

Dates:

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

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 

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.

Overview

In this workshop, we will explore the following topics. (This might be slightly adapted, depending on new releases):  

Morning

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

Lunch

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 behaviour
• 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