This is a submission for the GitHub Finish-Up-A-Thon Challenge
Sound familiar?
You open Figma on a Saturday with big plans. You're designing a Snakes and Ladders game, a classic, something nostalgic, something you can actually be proud to push to GitHub. You spend three hours on the board grid alone. It looks great. You close the laptop.
Two weeks pass. You reopen the file. The enthusiasm is gone. The board is still there, untouched, waiting.
That was me, exactly four months ago. My Snakes and Ladders game UI lived in Figma purgatory, 60% done, 100% abandoned. This is the story of how I finally finished it, what I learned along the way, and why the GitHub Finish-Up-A-Thon was the single thing that broke the cycle.
What the GitHub Finish-Up-A-Thon actually is
The Finish-Up-A-Thon isn't an official GitHub event with prizes and livestreams. It's a community-driven challenge, a commitment you make publicly (or even just to yourself) to ship an unfinished project to a GitHub repo in a set window of time.
The rules are loose: pick one abandoned project, finish it to a "shareable" standard, and push it. No perfection required. No code quality reviews. Just done and public.
The hardest part of finishing a side project isn't skill, it's accountability. The Finish-Up-A-Thon gives you a deadline that didn't exist before.
I'd heard about it through a designer friend on X (formerly Twitter). I signed up on a whim at 11pm. By the next morning, I had committed my Snakes and Ladders game as my target project.
The original plan for the Snakes and Ladders game UI
When I started the project, I had a clear vision. I wanted to design a fully playable-looking Snakes and Ladders game, not just a board illustration, but an entire game interface with a scoreboard, player tokens, dice component, turn indicator, and a win screen. The kind of thing a developer could pick up and build from directly.
- 01: 10×10 numbered board grid
- 02: Snake & ladder illustrations
- 03: Animated dice component
- 04: Player tokens (2–4 players)
- 05: Turn indicator & scorecard
- 06: Win/loss modal screens
At the time I left it, I had the board, the grid, and rough snake paths. Everything else was either placeholder rectangles or simply missing. The dice? Three nested frames with a "TODO" note. The tokens? Four colored circles are sitting outside the artboard.
The week I actually finished it.
Day 1 — audit and commit
The first thing I did was spend 20 minutes going through every layer in the Figma file without touching anything. Just reviewing. I made a short list in Notion of what was truly incomplete versus what only felt incomplete. This distinction matters more than you'd think; half the items I thought were missing were actually in hidden layers or renamed confusingly.
Before you add anything new to a stale Figma file, do a full layer audit first. You'll almost always find work you forgot you already did.
Day 2–3 — the dice component
This was the piece I had been avoiding the most. A dice UI for a Snakes and Ladders game needs to feel tactile; it's the one element players interact with repeatedly. I built it as a component with six variants, each showing the correct pip arrangement. I used auto layout throughout, so the pips stayed perfectly centered regardless of the frame size.
The hover and active states came next. I added a subtle rotation transform suggestion in the prototype flow so developers would know a roll animation was intended.
Day 4 — tokens and player UI
Player tokens for a Snakes and Ladders game are deceptively simple. I went with four distinct shapes (circle, star, shield, diamond) in four color variants each, for a total of 16 possible token states. Each was built as a component with a "selected" property toggle for the token picker screen.
The player sidebar took the afternoon. I kept it clean: player name, token preview, current square, and a simple turn indicator badge. Nothing fancy. The constraint of the Finish-Up-A-Thon forced me to resist scope creep here.
Day 5 — Snakes and Ladders (the actual illustrations)
The snakes were the most fun part of the whole project. I used Figma's pen tool to draw each snake as a flowing vector path, then added a textured fill using a repeating pattern component. The ladders were simpler, two vertical rails with evenly spaced rungs, all built with Auto Layout so I could stretch them to any height the board required.
Placement on the board was done on a separate "game pieces" layer locked above the grid. Each snake-and-ladder was pinned to its correct start and end squares using Figma's grid alignment tools.
For the board's snakes, draw one snake path you love, then use "Edit > Copy properties" to keep strokes consistent across all others. Consistency beats variety in a game board layout.
Day 6 — screens, modals, and prototype flow
I built three additional screens: the start/lobby screen, the in-game screen (the main board view), and the win modal. The prototype flow connected them in a linear path so anyone opening the file could press play and walk through the intended user experience from start to finish.
The win modal for the Snakes and Ladders game was the last thing I designed. I kept it joyful: a big player token at the top, a congratulations line, the final square count, and a "play again" button. Simple. Satisfying.
Day 7 — export, document, push
The final day was all housekeeping. I renamed every layer properly, grouped components into a dedicated component page, wrote a short README in the Figma file description, and exported a preview image for the GitHub repo thumbnail.
- All layers are named and grouped.
- Component page with all variants documented
- Prototype flow connected end-to-end.
- Preview PNG exported at 2x
- GitHub repo created, README written, link shared
What I'd do differently next time
If I were starting this Snakes and Ladders game UI from scratch today, I'd define my component architecture before touching the board. The board grid is the most visually exciting part, which is exactly why I built it first and exactly why everything else felt like a chore afterward. Start with the boring atomic components (tokens, dice faces, UI buttons) and let the board be the reward at the end.
I'd also use variables from day one. Figma's variable system for colors and spacing would have saved me at least two hours of manual updates across player color states.
The Finish-Up-A-Thon taught me one real lesson: "good enough to be useful" ships. "Perfect" doesn't. A Snakes and Ladders game UI that's in a public GitHub repo helps someone. A perfect one still sitting in your drafts helps nobody.
Conclusion
Finishing the Snakes and Ladders game UI was one of the most satisfying things I've done as a designer, not because it's my best work, but because it exists and it's public. The GitHub Finish-Up-A-Thon gave me the structure to stop planning the finish line and actually cross it. If you have an abandoned Figma project sitting in your drafts right now, I'd genuinely encourage you to give it one focused week. You already did most of the hard work. Go ship the rest.
Top comments (0)