Office hours: Advanced prototyping

Summary

Figma designer Anna Boyer leads a workshop demonstrating how to build an e-commerce prototype in Figma using advanced prototyping techniques. She covers connecting design elements to variables, assigning modes to group similar variables, carrying state across frames, toggling layer visibility, using expressions and conditionals to update variables on interactions, connecting variants to variables, and calculating order totals. The goal is to create a realistic customer journey where products can be added to a cart with accurate totals displayed.

Takeaways

• 😊 Using variables allows you to store information in your designs and create logic in prototypes by binding elements to variables
• 📝 Modes group related variables together for each component instance, reducing duplication
• 🔗 Variables carry state across frames, so interactions in one frame update other frames
• ❇️ Bind layer visibility to boolean variables to show/hide elements based on conditions
• ⚙️ Use set variable, expressions, and conditionals to update variable values on interactions
• 🔀 Multiple actions can be added to a single interaction, executing sequentially
• 🎚 Variant components can be connected to variables to switch dynamically
• 📋 Design elements with variables can be copied/pasted to retain connections
• 🌐 Variables can be published for re-use across files via libraries
• 🤝 Best practices depend on team structure and preferences around separation of concerns

Q & A

What are some of the key benefits of using variables in Figma prototypes?

Using variables in Figma prototypes allows you to store information, add logic and interactivity, reduce duplicate screens, connect elements across frames, and create dynamic prototypes that can update based on variable values. It significantly increases the power and flexibility of prototyping.

How can modes be used to simplify variables in Figma prototypes?

Modes allow you to group related variables together for different objects or states. For example, in the prototype built in the video, a 'mode' was created for each product type to group the name, price, count etc. This eliminates duplicating variables and streamlines updating related data.

What are some ways boolean variables can be utilized in Figma prototypes?

Boolean variables can be used to toggle layer visibility in a prototype. For example, the 'added' boolean variable was used to show/hide item cards in the basket screen based on whether that item had been added. Booleans are also commonly used to switch between design variants.

How can multiple actions be added to a single interaction in the new Figma prototypes?

The latest Figma prototypes allow adding multiple actions to a single interaction, such as a button click. Simply use the '+' icon to add additional actions like setting variables, conditionals etc. This allows much more complexity without duplication.

What order are actions executed in advanced Figma prototypes?

When you have multiple actions for a single interaction, they will execute top to bottom. So order is important, especially if later actions rely on updates made in previous ones.

How were variants connected to variables in the Figma prototype example?

The basket icon component had 'true' and 'false' variants. By connecting the component instance to the 'isEmpty' boolean variable, it would automatically switch between those variants based on the variable value to show empty/full states.

What are some ways math can be performed on number variables in Figma prototypes?

Expressions allow numerical operations like addition, subtraction, multiplication and division to be performed on number variables. For example, the total price was calculated by multiplying 'price' and 'count' variables.

How can conditional logic be implemented with the new Figma prototyping actions?

The conditional action allows you to set 'if X then Y' logic. For example, when clicking the minus button, the code checked if 'itemCount > 0' to decide whether to subtract 1 or set to 0.

How were item details connected across frames in the Figma prototype?

Variables were used to connect the product info across screens. The 'name' and 'price' variables were bound to elements in the product cards, and carried those values over to the cart screen automatically.

Where can additional Figma prototyping resources be found?

The presenter shared links to resources such as the prototyping playground files, help documentation, variable and prototyping video tutorials which are great for learning more advanced Figma prototyping techniques.