top of page

Void Royale: Figma To Unreal Workflow

I have an ongoing project as a proof of concept for a direct Figma to Unreal workflow. A number of years ago I was working on a concept for a three-player co-op space fighter game that played like Monster Hunter except the monsters were capital ships you had to take down and the pieces you knock off could be used to upgrade your fighter. I wanted to make a menu that caused the world to react when selecting the navigation buttons so I made a simple set of animations to go with the widgets.

 

 

 

 

 

 

 

 

 

 

 



 

The menu was inspired by Descent: Freespace and a game called The Cycle: Frontier. Descent: Freespace had a menu where you would move your mouse over parts of a hangar and different parts of the ship would animate, indicating you could click and enter that area of the ship. The Cycle: Frontier had a hub world where you could walk around and upgrade your character and weapons by talking to vendors, but there was also a navigation bar at the top for quick navigation between vendors. I always thought that was a great feature that preserved the first time user experience while accommodating veteran players who want to get in, make their modifications and get back into the game as soon as possible. 
 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

I made the menu a few years ago, but now I want to recreate it using a Figma to Unreal workflow. I've made the navigable version in Figma with a full menu flow and preset components for easy style changes. 

You can take a look at the Figma files here.

 

 

 

 

 

 

 

 

 

I've translated Figma components to Unreal before which requires exporting out components as textures and directly importing them, but experimenting with plugins like Figma2UMG I find myself wanting more. The plugin can create textures and widgets, but it doesn't translate any of the navigation. I believe creating my own plugin will be my next project.

VoidRoyaleFigma.png
VoidRoyaleUnrealWB.png
UnrealFigmaTemplates.png
bottom of page