Do you have some (Figma) design skills but are not an expert yet? Like to be able to design better responsively? Want to find out about new features like variables and dev mode and generally feel like you could optimize your Figma workflow? This Figma Masterclass is just right for you!
In this course, we will learn how to push your design from a pretty picture to a working and scalable UI, embracing all of Figma's impressive features.
We will look at aspects such as general file setup, color and typography, components, variants, component properties, a loooot of auto layout and responsive design, and prototyping.
This course 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. Let’s demystify all the issues you never fully understood!
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 intermediate-level UI Designers or those switching from graphic design to UI Design who are eager to understand a little more about Figma 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 to intermediate knowledge of Figma and be able to set up a design, but no need to be an expert.
A detailed day-by-day overview. This might be slightly adapted, depending on new releases.
Day 1 – The basic and the new
- General setup in Figma
- Structuring with girds
- Styles and variables
- Spacing concepts
- Colours and Typography in Figma and UI Design
Day 2 – All about components
- Setting up components and instances
- Overriding do and don’t
- Nested components
- Component sets and variants
- Component properties
- Interactive components
- Variable Modes
Day 3 – Responsive Design: Constraints, Auto Layout and Variable Modes
- 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 behaviour
- Nesting auto layout
- Absolute positioning, min/max width and wrapping in Figma
- Creating more advanced components and entire pages
- Understanding auto layout limitations
- Is auto layout flexbox? When to use what?
- Responsive testing and documenting
- Responsive design with variables and modes
- A few tips and tricks
- Many exercises today as auto layout is all about practice, practice, and practice
Day 4 – Prototyping with Figma
- Viewing prototypes in presentation mode, in-file and on your mobile
- fix and scroll positions
- Nested scrolling behaviour
- Connecting screens
- Trigger and animation types
- Smart animate magic!
- Interactive components
- Stateful design
- Prototyping with variables in Figma
- Conditional statements with variables
Day 5 –Documenting and sharing with development
- Figma team libraries
- Why document
- For whom
- Where to document: From in-file documentation for small projects to external design systems
- What and how to document: Colours, Typography, Spacing, Components and more
- The new Figma dev mode
Is there a recording, in case I miss a session?
Who teaches the class?
How much does it cost?
Can we join in as a company?
Join the June workshop
5×2.5h + Q&A
Workshop, 5×2.5h + Q&A
Feb 1st - Feb 9th 2024
09:00 – 11:30 am pt (18:00 – 20:30 cet) check your time zone
Thu Feb 1st, 09:00 – 11:30 am pt (18:00 – 20:30 cet)
Fri Feb 2nd, 09:00 – 11:30 am pt (18:00 – 20:30 cet)
Wed Feb 7th, 09:00 – 11:30 am pt (18:00 – 20:30 cet)
Thu Feb 8th, 09:00 – 11:30 am pt (18:00 – 20:30 cet)
Fri Feb 9th, 09:00 – 11:30 am pt (18:00 – 20:30 cet)
check your time zone
all sessions are recorded
Founder Cybermedia Concepts
"Thank you so much Christine for a mind-opening workshop on Figma. I feel I’ve discovered and learned so much over the course of 5 days, my brain is bubbling… I really appreciated the clarity and level of detail of your courses and documents"
Founder & Principal Designer at Skowak Inc.
"Christine - this is the best design tool workshop I have ever participated in. The content was generous and comprehensive. Your energy levels and clear explanations made it easy and fun to go through. Many many thanks!"
New workshop dates to be released, stay informed!
Sign up and be the first to know about new releases, workshops, and articles.