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.

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;
• 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
• 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:

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

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.

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!