Building a Fully Functional Tic Tac Toe Game in Figma Without a Single Line of Code
Role
Client
Duration
Type
Project Background
Most people associate Figma with static screens and design handoffs — not logic-driven systems or interactive behavior.
I wanted to push the boundaries of what’s possible for me within a design tool by creating something that’s not just visually designed, but also functionally playable.
That’s how the idea for this project was born: to design a fully functional game of Tic Tac Toe — not in code, but entirely inside Figma, using component logic, variables, and conditional interactions.
The goal was to build a real game loop that felt satisfying and intuitive — where players could take turns, game states would update dynamically, and the interface would respond to win conditions or draws. All without writing a single line of code.
The Objective
This wasn’t about reinventing a game — it was about mastering interaction design and creative problem-solving inside a visual prototyping tool. My challenge was simple but technical:
“Can I build a fully interactive 2-player game prototype in Figma — with game state logic, conditional turns, and win/draw detection — using only native prototyping tools?”
The answer turned out to be yes. But it required treating Figma like a logic engine, not just a canvas.
Planning the Game Logic
Before I touched a single frame in Figma, I mapped out the underlying logic of a Tic Tac Toe game on paper.
While the game is simple on the surface, it requires careful state management:
Alternate player turns (X and O)
Lock a tile once clicked
Track which tiles are selected by which player
Detect win conditions (3-in-a-row) across rows, columns, and diagonals
Detect when all tiles are filled and the game is a draw
Reset the board after a win or draw
Because Figma doesn’t have built-in scripting or live variables like JavaScript, every single behavior had to be built using:
Component variants
Prototype interactions
Local variables and conditional logic
Hide/Show logic based on component states
This meant building 9 unique tiles, each capable of switching between neutral, X, or O states — and then tracking those states using variables that could determine whether a winning condition was met.
Design Process & Prototyping in Figma
I used Figma’s “Set variable” and “Conditional” interactions to control turn order.
The game board was designed using a 3×3 grid, where each tile was a component with multiple variants:
Default (unclicked)
Player X active
Player O active
After each click, the board would update a variable like currentPlayer, and restrict future interactions based on whose turn it was. This allowed me to prevent a tile from being clicked twice, and enforce turn-based behavior.
The most complex part was building the win condition detection. For each possible win (e.g., Top Row: tile 1 + tile 2 + tile 3), I created a boolean logic sequence that compared the state of the three tiles. If they were all set to X or all to O, the prototype would show a modal overlay declaring the winner.
Draw detection required checking if all tiles were filled without any win condition being triggered. Once the board was full, and no winner variable was set, the prototype would show a “Draw” screen and prompt users to reset.
Finally, I created a Restart Game button that:
Cleared all tile states
Reset variables to initial state
Brought users back to the starting board
This built a complete gameplay loop — all within the constraints of Figma’s prototyping logic.
Outcome
The final result is a fully interactive, two-player Tic Tac Toe game built entirely in Figma — using nothing but component logic, variables, and conditionals.
It supports:
Alternating turns
Real-time game state updates
Automatic win or draw detection
Visual feedback for players
Full game reset and replay
This project allowed me to demonstrate not only my prototyping skills, but also my ability to think like a system designer, applying logic, flow management, and state transitions — all within a design tool not typically meant for game mechanics.
Reflection
This wasn’t just a playful exercise — it was a test of creative problem solving within constraints. Building the Tic Tac Toe prototype deepened my understanding of stateful interaction design, something that directly translates into any interface that relies on toggles, selections, or conditional content — from dashboards to eCommerce flows.
It also reminded me that the boundaries of design tools are often psychological. Tools like Figma are as powerful as our creativity allows them to be. I didn’t just use Figma to draw screens. I used it to create behavior, logic, and play.
And that’s what design is about — building experiences that feel alive.