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

In the morning, we will learn everything about advanced components. How to set them up, when to turn them into component sets with variants, and how to add component properties for better alignment with code. We will look at different options to document and share components with other team members and development.

The afternoon will be dedicated to a deep dive into responsive design with Figma. We will learn about constraints, auto layout, and, most important but often neglected, how to work with breakpoints in Figma to test and document responsive behavior.

This workshop will focus on understanding the technical aspects of setting up your design to improve the communication, documentation, and handoff between design and (front-end) development.

We will work with a good mix of theory and hands-on exercises and plenty of room for your 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

• Setting up components and instances
• Overriding do and don’t
• Nested components and instance swap
• All about Variants
• Component Properties
• Different ways to document components
• Organizing and sharing components
• Some advanced techniques

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
• Resizing behavior
• Nesting auto layout
• Absolute positioning in Figma
• Creating more advanced components and entire pages
• Understanding auto layout limitations
• Is auto layout flexbox?
• Understanding breakpoints
• Responsive testing and documenting
• A few tips and tricks (aspect ratio, slot components and more)
• Many exercises today as auto layout, is all about practice, practice, and practice