Creating a Fake Retro Game UI Using Only Free AI Assets in Figma

On a Saturday afternoon, staring blankly at the monitor on my desk in my Cologne flat, I suddenly remembered a screen I'd seen at the local arcade as a kid. The title screen with orange and purple flashing in alternation, the chunky pixel characters, the feel of a CRT monitor with its slightly rounded, distorted edges. What if I tried to recreate that in Figma? And without spending a single penny?

Long story short, in half a day I had a pretty convincing arcade-style UI prototype. Here's how it came together.

Gathering Pixel Art Assets

The first thing you need is pixel art sprites. It's not that I can't draw them myself, but it takes ages. So I used a free AI image generation tool. If you put something specific in the prompt like "16-bit pixel art sprite, transparent background, arcade character, side view," you get usable results. The key is to deliberately request a small resolution. If you specify something like 64x64 or 128x128, you cut down on the smearing that happens when the AI tries to force in too much detail.

I made three character sprites, a coin icon, a heart-shaped life gauge, and a star-shaped score icon. All of it was done within the free credit limit. The trick is to boldly discard results you don't like and regenerate while tweaking the prompt little by little. Adding "retro, NES-style colour palette, limited to 8 colours" made a huge difference.

I made the background tiles the same way. Three types: a brick pattern, a sky gradient, and a dark background with twinkling stars. You just lay these down in Figma using pattern fill.

Assembling in Figma

Once the assets are ready, bring them into Figma. I set the frame size to 320x240, the quintessential resolution of old arcade games. I made heavy use of Auto Layout here, and retro game UI turns out to be surprisingly well suited to Auto Layout. Place the score, lives, and stage info horizontally in a top bar, and if you standardise the padding in 8px increments, everything snaps perfectly to the pixel grid.

For the font, I used a free pixel font. Search for "Press Start 2P" on Google Fonts and it comes right up. This single font alone instantly transports the entire screen back to the 1990s. I used only three font sizes: 8px, 16px, and 32px. Sticking to powers of two keeps the pixels crisp and clean.

I also limited the colour palette. Black, dark navy, orange, yellow-green, and white. Five colours. The fewer the colours, the stronger the retro feel. If you register them as Local Styles in Figma, any future changes apply everywhere at once, which is brilliant.

Applying the CRT Effect

This is where it gets fun. The goal is to make a clean Figma screen look like an old CRT monitor display.

The method is simple. You create a horizontal stripe pattern and overlay it on the screen. Make an image with alternating 1px-high black lines and 1px-high transparent lines, then apply it as a pattern fill to a 320x240 rectangle in Figma. Lower the opacity of this layer to about 15%, and you get a subtle scanline effect.

And one more thing. Create another rectangle covering the entire screen and add a radial gradient that darkens only the edges. Switch the blend mode to Multiply, and the edges of the screen naturally darken, producing that vignetting effect you get on real CRTs. Combine these two layers, and you get a remarkably convincing retro screen.

Adding Interactions

Since it's a prototype, it needs to move. I used Figma's prototyping features to create a simple flow. Clicking "PRESS START" on the title screen takes you to the game screen, and clicking "CONTINUE?" on the game over screen brings you back to the game screen.

To add some fun, I used Smart Animate. For the blinking title text effect, duplicate the same frame twice, set the text opacity to alternate between 0% and 100%, and set it to auto-transition with a 300ms delay. Add a loop, and "PRESS START" keeps blinking on and off. This one small detail completely changes the atmosphere.

The entire prototype uses just 5 frames in total. Title, title (text off), gameplay, game over, and game over (selection highlighted). Even with a small number of frames, you can create a flow with surprisingly high polish.

It still amazes me that I got this far without spending any money at all. AI asset generation, free fonts, the Figma free plan, and a bit of persistence. With this combination, anyone can create their own retro game UI. Give it a try tonight. Just start by opening a single 320x240 frame.