How to build a UI in Satisfactory style?
Hi! I’m working on a mod that uses a combinator-style building which opens a UI when pressing E.
I want the UI to look like the native Satisfactory interface (dark background, orange buttons, close button ✕, etc.), but I’m building everything from scratch using UMG widgets — no SFUIKIT or templates.
If anyone has advice or examples (preferably without dependencies), I’d really appreciate it!
Specifically looking for help with:
• Suggested sizes/padding for SizeBox, Border, VerticalBox?
• Typical colors used for buttons, text, backgrounds?
• Is there any visual reference or style guide for matching the game’s UI?
Thanks a ton in advance! 🙏
6 Replies
https://discord.com/channels/555424930502541343/1036634533077979146/1308090902425895004
dean has a lot of guides on this
https://discord.com/channels/555424930502541343/1308379757863506002
theres also a step-by-step guide somewhere
You will find all the widgets in the project
Check out my mods to get an idea of what you can do.
https://ficsit.app/mod/MultipurposeGenerator
https://ficsit.app/mod/Disassembler
Multipurpose Generator - SMR
Generate Power from: All Resources + Sun + Wind
Disassembler - SMR
Breaks down solids into as many items as it took to form them
Unfortunately, I haven’t found any proper documentation on widgets yet, and I still don’t understand how to create a window that matches the vanilla UI style.
Have you read all the documentation?
https://docs-dev.ficsit.app/satisfactory-modding/latest/Development/BeginnersGuide/index.html
Have you done the examples?
https://docs-dev.ficsit.app/satisfactory-modding/latest/Development/BeginnersGuide/SimpleMod/index.html
Did you get the sources?
https://docs-dev.ficsit.app/satisfactory-modding/latest/Development/ExtractGameFiles.html
Getting Started :: Satisfactory Modding Documentation
In this section, we will guide you through the process of setting up a development environment, making your first mod for Satisfactory, and ...
Create a Simple Mod :: Satisfactory Modding Documentation
Now that you have learned the core concepts of Satisfactory modding, you can get started on creating your first mod. To get started, ...
Extracting Game Files :: Satisfactory Modding Documentation
Having access to the model and texture files used by Coffee Stain can be a valuable resource for creating content for your own mods. This pa...
For behaviour, you would want to parent your widget off Widget_UseableBase (or whatever it's called) because that implements the basics for you, e.g. having a close button and some keybind support.
For aesthetics... I'm not an artist 😅
I am pretty sure there's UI examples in ExampleMod