top of page

Figma Make Tutorial: How to Build a Game from a Simple Prompt

From Idea to Game: Building "Bruno" with Figma Make


Have you ever had a great idea for a game but didn't know where to start? In a recent video, one creator showed us how they built a complete, playable card game called "Bruno" using Figma Make. This post will walk you through their process, from the initial concept to a published game.


What is Figma Make?


Before we dive into how "Bruno" was made, let's talk about the tool that made it possible: Figma Make. Figma Make is a new AI-powered tool that lets you turn text prompts, images, and even existing Figma designs into real, working applications and websites. It's designed to be a "prompt-to-app" tool that generates production-grade code, making it easier for both coders and non-coders to bring their ideas to life. You can use it to create web apps, prototypes, landing pages, and more.


What is Bruno?


"Bruno" is a mobile-friendly version of the classic card game Uno. The goal is simple: be the first to get rid of all your cards. You can match cards by number or color, just like in Uno. You can even play against an AI opponent! 🃏


The Development Journey


The creator of "Bruno" used a series of prompts in Figma Make to build and refine the game. Here's a look at their iterative process:

  1. The Initial Prompt: The first step was to create a mobile-friendly version of Uno called "Bruno" with support for two to four players.

  2. Adding Some Flair: The second prompt added a cute "Bruno" logo to the back of the cards and enabled the AI opponent.

  3. Squashing a Bug: During testing, a bug was discovered where a player couldn't play multiple cards of the same number at once. A new prompt was created to fix this, allowing players to select and play multiple cards with the same number if they have them. This highlights the importance of user acceptance testing to find and fix issues.

    figma make tutorial

Exploring Figma Make's Features


The video also gave us a tour of some of the powerful features available in Figma Make:

  • See it in Action: You can preview your game on both mobile and desktop to make sure everything looks and works as expected. 📱

  • Go Live: When you're ready to share your creation, Figma Make gives you plenty of options. You can publish your game, add a custom favicon, and even integrate Google Analytics to track how people are playing.

  • Your Own Domain: You can even link your game to a custom domain for a more professional touch.

  • Share and Collaborate: Figma Make allows you to share your project with others, giving them either viewing or editing permissions. You can even password-protect your project for extra security. 🔒

  • Auto-Fixing Errors: Figma Make has a handy "autofix" feature that can help you with errors in your code. It's believed to be powered by the same model as other popular coding platforms.

  • Join the Community: Once your game is polished and ready, you can feature it on the Figma Make community for others to discover and play.


Watch the Full Video


Want to see the entire process in action? Check out the full video on YouTube: https://youtu.be/mKOZh9Ie7xE


 
 
 

Comments


bottom of page