Exploring Figma Variables Through a Game Prototype

Why I Took on This Challenge

When Figma introduced variables in its latest update, I was eager to explore how they could enhance interactive prototyping. Rather than just experimenting randomly, I wanted to push their limits in a fun and practical way.

That’s when I stumbled upon a "Smash Elon" prototype game on TikTok. At first, I assumed it required multiple screens and complex interactions to work. But when the creator mentioned that it was built entirely using variables, I was intrigued. Could I recreate and understand this using Figma’s latest features?

My Approach to Learning: Smashing It, One Variable at a Time

With a tight deadline to submit a prototype game and a goal to deeply understand Figma variables, I took a structured approach:

1. Researching Different Approaches

Before jumping in, I explored the Figma Community to see how other designers built similar interactive prototypes. I analyzed how variables were used in different ways, learning why certain interactions were designed the way they were.

2. Breaking Down the Prototype

I deconstructed the Smash Elon game step by step:

• Examined each interaction to see how variables controlled different states.

• Tested alternative setups to see what worked and what didn’t.

• Pushed the limits by tweaking variables beyond their intended use.

This hands-on experimentation helped me understand the full potential of variables and their efficiency in prototyping.

3. Documenting the Process for Others

Once I had a solid grasp of how it worked, I compiled my findings into a detailed breakdown to help others learn from my exploration. The documentation covers:
✔ How the prototype was structured
✔ How variables were implemented for dynamic interactions
✔ Key insights and takeaways from the process

👉 Check out my Figma file here:
Advanced Prototype Explanation

Reflection: What I Learned

This challenge was initiated as a UX department competition to create a prototype using variables and explain the reasoning behind it. I was excited to win first place, but more than that, I enjoyed sharing my insights with fellow designers.

Key Takeaways from This Exploration:

🔹 Variables simplify complex interactions and reduce the need for excessive frames.
🔹 Understanding when and why to use variables is just as important as knowing how.
🔹 Experimenting beyond tutorials and documentation accelerates learning and unlocks creative solutions.

This project required self-research, critical thinking, and problem-solving—all essential skills for a UX designer. I hope my breakdown helps others understand and explore the power of Figma variables too. Have fun experimenting!