I started this 2023 summer little project as a way to learn the new FIgma variables and how far we can take them to create new cool stuff.
So I decided to challenge myself and create a fully functional Minesweeper which I recommend trying right here before I explain how I made it happen:
Press play on the embebed prototype or open it in the following Link
Variables
01
The hardest part to make the minesweeper work was definitely what I called the “domino effect”. Basically how to, while interacting with one component, make another one change.
In this case, clicking in an empty tile would trigger the rest of the empty tiles and the adjacent number tiles to open.
I accomplished this effect by creating a component that would loop in the background with a set of conditionals that would trigger swaps in the tiles where certain conditions are met.
By clicking a tile to uncover a conditional variable will start the “domino effect”
The mine tiles will stop the loop making the time to stop and preventing further tiles to be uncovered.
Flaging the mine tiles will decrease the “correct mine” count, when it becomes 0 the game is over and the “Success” message appears on screen.
This are all the variables I used for the game to work.
These could increase or decrease depending on the minesweeper board size and the amount of empty tile areas.
Unfortunately, I couldn´t find a simple way to reuse the same component for the domino effect.
A much simpler solution is to identify the number of empty areas in the board and have a different component that behaves the same way.
Components
02
Design
03
The new variable modes are useful for quickly exploring different design ideas. I explored the colour and dimension parameters to figure out how much you can vary the design and found this new tool perfect for colour swaping and good for general changes in object sizes.
Further tweaking at the end of the day will still require to have a separate element.
After making sure the prototype worked as intended, it was time for one of my favourite parts, exploring different moods and playing minesweeper to completion.
Checkout these three different styles and let me know which one you liked the most!
These are all the different variables on each style mode, another easy way for managing and contrasting different options.
Takeaways
04
Variables are a new powerful tool that will make prototypes in Figma behave closer to the final product allowing designers to better express interactions and animations. Modes are also a great way of quickly exploring different styles and building dark modes which I definitely recommend using as much as possible. As with most new tools, there are still some rough edges and functionalities that I would like to see implemented in the future.