Figma: Designing with Variables and Conditionals
1h 1mIntermediate2024-03-04
Authors
Joseph Labrecque
University Professor, Adobe Educator, Studio Head
Course details
Digital designers often face unforeseen circumstances, which makes it difficult to control the experience. In this course, join instructor Joseph Labrecque as he shows how to create variables for your design elements in Figma and specify the conditions in which those variables are used. Along the way, get quick, easy-to-apply tips on setting modes in your design strategy, using conditional logic to fork actions with your variables, and leveraging boolean operators to control visibility. By the end of this course, you’ll also be prepared to start adding and removing products and quantities throughout the prototyping process.
Skills covered
FigmaInteraction DesignUser ExperienceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Working with variables and conditionals
- 02 - Getting set up
1. Exploring Figma s Approach to Variables
- 03 - Figma design file overview
- 04 - Creating local variables
- 05 - Organizing variables into groups
- 06 - Adding variable collections
- 07 - Working with variable modes
2. Designing with Variables and Conditional Logic
- 08 - Assigning variables to text elements
- 09 - Prototyping with conditional logic
- 10 - Developing a reset function
- 11 - Controlling visibility with Booleans
- 12 - Adding products to the cart
- 13 - Adding quantities to the cart
- 14 - Removing quantities in the cart
Conclusion
- 15 - What's next