Figma: Designing with Variables and Conditionals

Learn how to design with flexibility using variables and conditionals in the collaborative design tool Figma.

Introduction

• Working with variables and conditionals
• Getting set up

1. Exploring Figma’s Approach to Variables

• Figma design file overview
• Creating local variables
• Organizing variables into groups
• Adding variable collections
• Working with variable modes

2. Designing with Variables and Conditional Logic

• Assigning variables to text elements
• Prototyping with conditional logic
• Developing a reset function
• Controlling visibility with Booleans
• Adding products to the cart
• Adding quantities to the cart
• Removing quantities in the cart

Conclusion

• What's next?