Figma Prototype with Variables

Figma Advanced Prototype with Variables of Shopping Cart

Figma recently released several new exciting features for designers to create robust advanced prototypes, with the star of the show being stored Variables. We’ve created a shopping cart Figma prototype with Variables to share with the community. It includes step-by-step instructions for other designers looking to master these new capabilities.

The Variables feature, currently in beta, enables paid account users to create a Variables library storing multiple ‘modes’. Users can assign these modes conditionally to elements, components, and variants. This allows for flexible designs with dark & light modes or prototypes with calculations and conditional behavior.

In Figma, the Variables panel serves as a little database that lets designers easily access data within Figma. Boolean Variables can determine the visibility of a component, for example, by only showing an item in the shopping cart view when its amount is higher than zero. ‘True’ results make the layer visible, ‘False’ results keep the layer hidden.

Limitations of Figma Variables

These new features have some rough edges, including easily discoverable bugs and limitations. Variable state values may behave unpredictably when transferred to a new frame. Proper labeling and ordered expressions are necessary for accurate calculations. Troubleshooting these issues is time-consuming and may not be worthwhile for rapid internal processes.

There are also smaller issues that new users will encounter as these features are refined. Number Variables currently can’t be set to a specific decimal place, so when adding up the cost of items in a cart, an item with a price of $1.00 will appear as $1.

The updated color fill panel integrates Variables colors and Styles colors in a way that’s not really intuitive, so a designer that is not ready to dive into the world of Variables will inevitably find their existing process for creating color styles caught in the mix. Documentation from figma about these new features is limited and social media tutorials are only starting to trickle in. Variables cannot be applied to rotation or position properties directly yet, so animation possibilities are limited to width & height properties and component state transitions.

Learn along with our Community prototype

Whether you’re looking to go all-in, or just want to know where the trailhead starts, we hope our interactive shopping cart Figma prototype with Variables that we’ve shared with the Community can help you get started.