The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Introducing Fan XI
For the #ConfigMakeathon, I wanted to build something inspired by a familiar experience among football fans: the endless debates about who knows the game best.
Whether it's arguing over the best player, the strongest national team, or who has the deepest football knowledge, everyone seems convinced they're right.
So I turned that idea into a game.
š Project Link: https://grit-base-04607023.figma.site/
Fan XI is an interactive football trivia experience where players identify the countries of football stars before time runs out. Players can use real-time hand tracking through their webcam or simply use their mouse to make selections.
The challenge is simple:
ā¢ Recognize the player ā¢ Match them to the correct country ā¢ Beat your friends' score
How I Built It
This project became an interesting experiment when the initial idea I had failed. š§
I used Figma to design the interface, create the visual assets, and shape the overall experience.
I then used Figma Make to transform those designs into a working product and rapidly prototype the game mechanics.
After my Figma Make credits ran out, I exported the generated code and continued development in Antigravity, where I refined interactions, updated gameplay mechanics, and improved the overall experience.
That workflow allowed me to move from concept to working product incredibly quickly while still retaining the flexibility to make custom code changes when needed.
What I Explored
ā¢ Hand-tracking interactions for web games ā¢ Designing for speed and replayability ā¢ AI-assisted product development workflows ā¢ Bridging design and code without losing creative control ā¢ Building social features through shareable score cards
Why Fan XI
With the 2026 FIFA World Cup bringing fans together from all over the world, I wanted to create something playful that encourages competition, conversation, and a little friendly bragging rights.
Because let's be honest, every football fan thinks they're the expert. š
I'd love to hear your thoughts and feedback.
Amazing
Thanks Abdul.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Hi creatives! š
For #ConfigMakeathon, I created SLAMBOOK for Designers āØ
https://slambook.figma.site
It's inspired by the slambooks many of us had as kids, but reimagined for the internet.
Designers from all over the world can create their own page by adding photos, favorite music, creative advice, inspirations, and a few fun facts about themselves. It's a playful way to discover people behind the portfolios and build new connections within the design community.
The best part? It lives online and can always be in your pocket, just add it to your home screen like an app.
This concept could work for any community.
Imagine a special Config edition where attendees share their photos, inspirations, favorite talks, creative superpowers, or memorable moments from the event.
A little internet corner where creativity, personality, and community come together š
If it resonates, pass it on and start your own page š
If you really love it, Iād be sooo grateful for your support. Every goat, like, comment, share, means so much for me. Thank you!
Project Link:
https://slambook.figma.site
Video Instagram:
https://www.instagram.com/reel/DZpeUvBo4bs/?igsh=bDhhMnc1aXlzODls
Let's make this slambook really worldwide =))) Add your pages https://slambook.figma.site š WHO NEXT?
Stop making flatĀ Figma prototypes ā make them feel 10x more realistic! ā
Last call to join the Config Makeathon and get a chance to win $100k!
š Join here
This single feature just changed my entire design workflow forever āØ
Proud to share my submission for the #configMakeathon š¦
Design has one job ā make people feel something before they think something.
For the #ConfigMakeathon, I built a complete digital campaign experience for Butterfly Conservation's "Britain's Favourite Butterfly" ā taking a public vote and transforming it into something people actually want to be part of.
The challenge wasn't technical. It was human. How do you make someone genuinely care about a species they've never noticed? How do you turn conservation data into something personal? How do you design an experience that moves people from passive viewers to active participants?
The answer was architecture ā three distinct experiences working as one:
š³ļø Results Explorer ā A fully filterable species discovery system built around personality vibes, wing colours, and rarity. Not a leaderboard. A world worth exploring.
š§¬ Personality Quiz ā A matching experience that gives every user a butterfly identity rooted in real behavioural traits. Flashy. Feisty. Adventurous. Rare. When someone sees themselves in a species, the relationship changes entirely.
šæ Conservation Narrative ā A story-first approach to ecological data that earns its urgency rather than demanding it. The stakes land harder when you already have a favourite.
This is the kind of work I find most meaningful ā where design isn't decoration, it's the strategy itself.
š Prototype:Prototype
Built with Figma Ā· Figma Make Ā· MCP
#ConfigMakeathon #Figma #UXDesign #ProductDesign #DesignForGood #ButterflyConservation @Figma @Contra @Contra HQ
Pretty Good!
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?