Vibe, Design & Code with Figma Make: Tips and Tricks Using a Fictional Retro Space Game

Stefan Huber
Aug 6
3 min read

👉 Spaceoperator

What started as a quick concept draft for a fictional space game and as an initial real-world functionality test of Figma Make has, thanks to the capabilities of Figma Make, evolved into a highly developed game with sound, animation, and logical interactivity.

The first prototype was built in just 10 minutes, while the current version emerged over many iterations (and several hours).

What is Figma Make?

Figma Make is more than just a tool for visual design — it's a creative playground for designers and anyone wanting to quickly build interactive prototypes with real functionality.

Figma Make has been in open beta for a few weeks — anyone with an active Figma subscription can jump right in.

Feature Overview:

Code generation with Claude Sonnet 4
Prompt input + image uploads
Prototyping with interactive components, animations, and sound
Iterative editing (including point & edit tool for visual adjustments)

Refining Until It Fits

The first draft takes just a few minutes — but then the exciting part begins: iterating, refining, testing. Each adjustment in Figma Make triggers a code rewrite — quick for simple prototypes, but more complex ones can take several minutes.

Currently, the code isn’t clean enough for developers to use directly, but it's sufficient for many use cases. If you want to turn the prototype into a real product, the code needs to be reviewed, understood, and cleaned up.

Also, there’s currently no way to connect Figma Make with the traditional Figma design editor, so you can either design with vibes or work traditionally — but you can’t directly adjust individual elements. However, design libraries can be linked, as you're used to in Figma — though this only works partially at the moment.

We’ve used Figma Make for multiple prototypes and beauty shots — what used to take a week now takes just one day.

The benefits are clear: vibe-design instead of component-building, iterate and explore, and deliver functional click-dummies with features that normally would only be possible in Figma via plugins (like sounds) — great for discussing feature possibilities and design ideas with clients. _________________________________________________________________

Tips and Tricks:

For complex processes and platforms, prep your prompt with ChatGPT: Defining prompts for Figma Make becomes easier when ChatGPT summarizes what should be included — goal, layout, design elements, process flows, screenshots from the definition phase, etc. In short: throw everything you’ve got into ChatGPT and explain what the desired output should be (e.g., a prompt for an AI design tool to build a functional retro game with specific features).
Define screen size and layout boundaries early: For example, "desktop screen size" or 1920x1200px. While Figma Make tries to generate responsive elements by default, it’s helpful to define the layout area beforehand.
Avoid similar designs by defining more upfront: Fonts, font sizes, corner radius, colors, etc. help reduce repetitive design patterns often shown in first drafts.
Use screenshots as design references: Be sure to specify that the content is not to be used, only the design layout.
Embed sounds or files via URL: Upload assets to a cloud storage and link via prompt. Figma Make can utilize browser functions via the Web Audio API to generate synthetic sounds (frequency, attack, sustain, decay) if no audio files are available.
Prevent elements from overlapping or leaving their area: Specify that elements should remain within their sections and either be scrollable or vertically adjusted.
Use Point & Click tool to avoid full code regeneration: Adjust single elements (colors, radius, font weight) quickly without waiting for a full rewrite.
Manual code edits possible but volatile: Custom code edits are overwritten on the next code generation unless explicitly addressed in the prompt.
Know the design terminology: Understanding the correct names for UI elements helps target changes more effectively. If you’re unsure, ask ChatGPT.
Revert changes with versioning tool in the prompt window: Use the restore icon to return to a previous version — but be careful, as this can sometimes mess up the design. Best practice: regularly save local copies or duplicate your file.
__________________________________________________________________