Creating a card game inside Figma | by Anthony Conta | Jan, 2021 | UX Collective

How to use Figma to make a random game of chance.

Anthony Conta

When I first learned about motion design in prototyping tools like Figma and Adobe XD, my initial thought was “can they be used to make a GAME?!!?!?”

Turns out they can.

Introducing a random game created with a prototyping tool: 3 Card Figma.

Playable at

[Disclaimer: I made it in Figma, but this could also be made in XD, or any other software with Smart Animate & time triggers. I chose Figma because I wanted to learn it better while working on this side project.]

The idea of using a prototyping tool to play a game isn’t new — in fact, it’s been documented extensively before for tabletop RPGs during a time when we’re all socially distancing from one another.

But I’d never seen a prototyping tool be used to make a game of chance. Prototypes usually have a strict A-Z flow, moving from screen to screen until you hit the end. That’s how a user test works, after all — you come up with a scripted sequence of events and have the user walk through them. It never changes, never evolves, and rarely responds with branching logic based on a user’s choice. Prototyping software is used to to make experiences, not games.

The “experiential game” would actually work really well in a tool like Figma (and someone should TOTALLY make that), but that game style plays out more like a story for the player. I wanted a game that changes its outcome each time it is played.

Latest posts