Figma: Designing with Variables and Conditionals

Figma: Designing with Variables and Conditionals

1h 1mIntermediate2024-03-04

Authors

Joseph Labrecque

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

Introduction

  • Working with variables and conditionals
  • Getting set up

Exploring Figma s Approach to Variables

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

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
40,000 Toman