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.
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.
In this workshop, we will explore the following topics. (This might be slightly adapted, depending on new releases):
- 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
Who teaches the class?
How much does it cost?
Can we join in as a company?
Stay informed about future workshops
Sign up and be the first to know about new releases, workshops, and articles.