← Home
Drill-down
Sanghyo Yee
Overview
I created a simple tunnel‑digging game using Figma Make Block. You can play it right on the screen above and see how it was built in the article below.
What is Figma Make?
Figma Make lets you prompt an AI to generate code based on your Figma design and returns a working prototype. You can even reference existing Figma assets in your prompt. Thanks to this, anyone—developer or not—can quickly turn an idea into a product without defining every single interaction.
I'm a product designer by trade, so I'm used to planning screens, communicating with developers, and testing finished builds. When I applied that experience to Figma Make, I realized I could finally build and ship a mini‑game I'd been wanting to create—no developer required. The screenshot above shows the original English prompt I gave Make.
Create a mini-game in a 4-bit retro style where players score points by drilling tunnels for 1 minute. The following elements are needed:
- A cute drilling character
- A double score item for 15 seconds
- Items that temporarily increase score by +10, +20, +50, +100, +500
- Items that extend the time limit by 5/10/20 seconds
- Items that reduce the time limit by -5/-10/-20 seconds
When the time limit ends, it's game over, and the total accumulated score should be displayed at the end. Also, create a retry and share button below the final score.
When the game starts, the character automatically moves down while drilling. Each time it moves down one space, it earns a base score of 1 point. Meanwhile, the player can use the left and right arrow keys to move the character side to side at any time. As the character moves down, players can collect items to increase their score and time limit. The time-reducing items act like bombs, so if players accidentally collect them, they might end the game with a low score.
I'm a product designer by trade, so I'm used to planning screens, communicating with developers, and testing finished builds. When I applied that experience to Figma Make, I realized I could finally build and ship a mini‑game I'd been wanting to create—no developer required. The screenshot above shows the prompt I gave Make (translated in English).
Figma Site -Make block
Did you know some of the Make features are also available on the Figma Site builder? In the bottom‑center UI of the Site editor you'll find Make Block. It still writes code from a prompt, but instead of owning an entire page it lives as a single block that fits perfectly into the site‑builder workflow.
As you can see, each block acts like a mini admin panel inside Figma. You can combine it with the site's other interaction features and edit parts of the generated block directly. Click an element to open an interactive panel; click the code icon to jump straight to the relevant snippet and your changes show up immediately.
Best part of Figma Site is that - you can also combine all the other blocks within one page, which becomes very handy when you want to express your content manually, just like this article here with generated code block.
You can combine Make block with the site's other interaction features and edit parts of the generated block directly. Click an element to open an interactive panel; click the code icon to jump straight to the relevant snippet and your changes show up immediately.
When you click on the element on the right, an interactive UI appears, and clicking the code icon on the right sends you the related code directly. Changes are reflected immediately.
Once Make block is ready, you can place the block on Figma Site - combining what has been already possible when designing - e.g. font and color styles, components, breakpoints more intuitively. Once all good, all you need to do is just press publish button to expose it to the web.
Co-working with Figma Make
This is a draft of the game created with Figma Make using the same prompt. The first build you saw was created in less than ten minutes with the exact same prompt in Make block on Figma Site. Incredible, right? Press START GAME and a fully playable screen pops up—all from a single idea.
Of course, the visuals weren't great, and I wanted the convenience of the Site's mini‑admin. Yet managing a more complex UX solely inside a Site Make Block felt limiting, so I kept iterating in Figma Make. After more than a hundred additional prompts, I polished the UX, copied the final code into the Site, asked the AI to fix any conflicts, and got the result you see below.
Character Polish & Animation
Next, I redesigned the main driller character in a pixel style and placed the drill on its own layer. Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Because I wasn’t satisfied with the visual quality, I wanted to explore more by myself visually.
Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Hence, here is the finalized visual of main page, combined with prompt-generated UI layouts and one single custom character I created separately. After several rounds of tweaks, the dot‑style guy and overall UI reached a level I'm happy with.
Outro
Figma's design components, embed options, and Make Blocks offer a degree of flexibility and expressiveness that's hard to match with traditional publishing tools.
There are still gaps — custom fonts, native video uploads, variable‑driven dark/light themes, to name a few—so I'd watch the space before relying on it for production work.
Even with those limitations, the accessibility and experimental freedom make the Figma Site a promising platform.
ⓒ 2025. SangHyo Yee, All Rights Reserved.
← Home
Drill-down
Sanghyo Yee
What is Figma Make?
Figma Make lets you prompt an AI to generate code based on your Figma design and returns a working prototype. You can even reference existing Figma assets in your prompt. Thanks to this, anyone—developer or not—can quickly turn an idea into a product without defining every single interaction.
I'm a product designer by trade, so I'm used to planning screens, communicating with developers, and testing finished builds. When I applied that experience to Figma Make, I realized I could finally build and ship a mini‑game I'd been wanting to create—no developer required. The screenshot above shows the original English prompt I gave Make.
Create a mini-game in a 4-bit retro style where players score points by drilling tunnels for 1 minute. The following elements are needed:
- A cute drilling character
- A double score item for 15 seconds
- Items that temporarily increase score by +10, +20, +50, +100, +500
- Items that extend the time limit by 5/10/20 seconds
- Items that reduce the time limit by -5/-10/-20 seconds
When the time limit ends, it's game over, and the total accumulated score should be displayed at the end. Also, create a retry and share button below the final score.
When the game starts, the character automatically moves down while drilling. Each time it moves down one space, it earns a base score of 1 point. Meanwhile, the player can use the left and right arrow keys to move the character side to side at any time. As the character moves down, players can collect items to increase their score and time limit. The time-reducing items act like bombs, so if players accidentally collect them, they might end the game with a low score.
I'm a product designer by trade, so I'm used to planning screens, communicating with developers, and testing finished builds. When I applied that experience to Figma Make, I realized I could finally build and ship a mini‑game I'd been wanting to create—no developer required. The screenshot above shows the prompt I gave Make (translated in English).
Figma Site -Make block
Did you know some of the Make features are also available on the Figma Site builder? In the bottom‑center UI of the Site editor you'll find Make Block. It still writes code from a prompt, but instead of owning an entire page it lives as a single block that fits perfectly into the site‑builder workflow.
As you can see, each block acts like a mini admin panel inside Figma. You can combine it with the site's other interaction features and edit parts of the generated block directly. Click an element to open an interactive panel; click the code icon to jump straight to the relevant snippet and your changes show up immediately.
Best part of Figma Site is that - you can also combine all the other blocks within one page, which becomes very handy when you want to express your content manually, just like this article here with generated code block.
You can combine Make block with the site's other interaction features and edit parts of the generated block directly. Click an element to open an interactive panel; click the code icon to jump straight to the relevant snippet and your changes show up immediately.
When you click on the element on the right, an interactive UI appears, and clicking the code icon on the right sends you the related code directly. Changes are reflected immediately.
Once Make block is ready, you can place the block on Figma Site - combining what has been already possible when designing - e.g. font and color styles, components, breakpoints more intuitively. Once all good, all you need to do is just press publish button to expose it to the web.
Co-working with Figma Make
This is a draft of the game created with Figma Make using the same prompt. The first build you saw was created in less than ten minutes with the exact same prompt in Make block on Figma Site. Incredible, right? Press START GAME and a fully playable screen pops up—all from a single idea.
Of course, the visuals weren't great, and I wanted the convenience of the Site's mini‑admin. Yet managing a more complex UX solely inside a Site Make Block felt limiting, so I kept iterating in Figma Make. After more than a hundred additional prompts, I polished the UX, copied the final code into the Site, asked the AI to fix any conflicts, and got the result you see below.
Character Polish & Animation
Next, I redesigned the main driller character in a pixel style and placed the drill on its own layer. Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Because I wasn’t satisfied with the visual quality, I wanted to explore more by myself visually.
Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Hence, here is the finalized visual of main page, combined with prompt-generated UI layouts and one single custom character I created separately. After several rounds of tweaks, the dot‑style guy and overall UI reached a level I'm happy with.
Outro
Figma's design components, embed options, and Make Blocks offer a degree of flexibility and expressiveness that's hard to match with traditional publishing tools.
There are still gaps — custom fonts, native video uploads, variable‑driven dark/light themes, to name a few—so I'd watch the space before relying on it for production work.
Even with those limitations, the accessibility and experimental freedom make the Figma Site a promising platform.
ⓒ 2024. SangHyo Yee, All Rights Reserved.
← Home
Drill-down
Sanghyo Yee
What is Figma Make?
Figma Make lets you prompt an AI to generate code based on your Figma design and returns a working prototype. You can even reference existing Figma assets in your prompt. Thanks to this, anyone—developer or not—can quickly turn an idea into a product without defining every single interaction.
Create a mini-game in a 4-bit retro style where players score points by drilling tunnels for 1 minute. The following elements are needed:
- A cute drilling character
- A double score item for 15 seconds
- Items that temporarily increase score by +10, +20, +50, +100, +500
- Items that extend the time limit by 5/10/20 seconds
- Items that reduce the time limit by -5/-10/-20 seconds
When the time limit ends, it's game over, and the total accumulated score should be displayed at the end. Also, create a retry and share button below the final score.
When the game starts, the character automatically moves down while drilling. Each time it moves down one space, it earns a base score of 1 point. Meanwhile, the player can use the left and right arrow keys to move the character side to side at any time. As the character moves down, players can collect items to increase their score and time limit. The time-reducing items act like bombs, so if players accidentally collect them, they might end the game with a low score.
I'm a product designer by trade, so I'm used to planning screens, communicating with developers, and testing finished builds. When I applied that experience to Figma Make, I realized I could finally build and ship a mini‑game I'd been wanting to create—no developer required. The screenshot above shows the prompt I gave Make (translated in English).
Make Block on Figma Site
Did you know some of the Make features are also available on the Figma Site builder? In the bottom‑center UI of the Site editor you'll find Make Block. It still writes code from a prompt, but instead of owning an entire page it lives as a single block that fits perfectly into the site‑builder workflow.
I pasted the same prompt into a Make Block and—ta‑da!—the game appeared instantly (bugs and all, but give it a spin!).
As you can see, each block acts like a mini admin panel inside Figma. Because Make Block exposes key variables via its UI, you don't have to touch the prompt again to tweak things like the timer, grid size, character speed, or item frequency.
Best part of Figma Site is that - you can also combine all the other blocks within one page, which becomes very handy when you want to express your content manually, just like this article here with generated code block.
You can combine Make block with the site's other interaction features and edit parts of the generated block directly. Click an element to open an interactive panel; click the code icon to jump straight to the relevant snippet and your changes show up immediately.
When you click on the element on the right, an interactive UI appears, and clicking the code icon on the right sends you the related code directly. Changes are reflected immediately.
Once Make block is ready, you can place the block on Figma Site - combining what has been already possible when designing - e.g. font and color styles, components, breakpoints more intuitively. Once all good, all you need to do is just press publish button to expose it to the web.
Co-working with Figma Make
This is a draft of the game created with Figma Make using the same prompt. The first build you saw was created in less than ten minutes with the exact same prompt in Make block on Figma Site. Incredible, right? Press START GAME and a fully playable screen pops up—all from a single idea.
Of course, the visuals weren't great, and I wanted the convenience of the Site's mini‑admin. Yet managing a more complex UX solely inside a Site Make Block felt limiting, so I kept iterating in Figma Make. After more than a hundred additional prompts, I polished the UX, copied the final code into the Site, asked the AI to fix any conflicts, and got the result you see below.
The only hitch was that the Site couldn't resolve the image paths, so I created fallback SVGs. Beyond that, both versions behaved almost identically and could still reference Figma‑defined assets during production.
Character Polish & Animation
Because I wasn’t satisfied with the visual quality, I wanted to visually explore more by myself. So I redesigned the main driller character in a pixel style and placed the drill on its own layer.
Visual looked much better this way, but I wanted to go even further -
Standing still felt dull, so I asked the AI to add an animation of the drill cutting through the soil.
The motion worked beautifully and now communicates the game concept long before players hit START GAME.
Hence, here is the finalized visual of main page, combined with prompt-generated UI layouts and one single custom character I created separately. After several rounds of tweaks, the dot‑style guy and overall UI reached a level I'm happy with.
Outro
Figma's design components, embed options, and Make Blocks offer a degree of flexibility and expressiveness that's hard to match with traditional publishing tools.
There are still gaps — custom fonts, native video uploads, variable‑driven dark/light themes, to name a few—so I'd watch the space before relying on it for production work.
Even with those limitations, the accessibility and experimental freedom make the Figma Site a promising platform.
ⓒ 2025. SangHyo Yee, All Rights Reserved.