https://www.patreon.com/posts/setup-for-ui-54708148
This is just a quick tutorial on setting up for creating UI mods. Please note that UI editing, while simple for some topics (like my World Selection Icon Shrinking tutorial), is not a beginner topic and it's recommended you gain experience with regular mods first if you have not modded before.
To create UI mods you need Sims4Studio (S4pe should work as well) and JPEXS (Latest Release, if you grab Pre-Release instead use with caution as it might be buggy), or if you are aware of an alternative program feel free to use it. If you plan to be doing UI mods for a while, I also recommend 010 Editor (not free) for searching, or some other program that allows you to search binary files. It makes it easier when trying to track down what you want to edit. I also recommend a renaming program to mass edit the extensions and file names, the one I use is ReNamer which is free, but has a more advanced paid version available as well. It's not required, just makes thing slightly easier.
Setup a workspace somewhere on your computer that fits your needs. I have a folder for the mod I am making with it's own setup, and then a folder for “Current UI” files and a folder for “Old UI” files (with sub-folders for each previous patch) for keeping track of changes. The last two aren’t needed if you don’t plan to do a lot of UI modding.
Open Sims4Studio, and if you are making a mod right now go to Tools > Create Empty Package. Give it your creator name and the name of the package, then save to the folder you made for the mod. If you aren't making a mod right now and are just wanting to extract the files, skip this step.
Now go to Tools > Game File Cruiser (GFC).
Inside the GFC find a filter called Scale Form GFX, check the box.
A bunch of files will appear in the bottom left. If you made a “Current UI” folder select all of them (click on one then Ctrl + A, Cmd + A if Mac), and click “Batch Export”, then save to your “Current UI” folder without touching the name it provides. If you are making a mod right now instead and know which specific file you need, just find the file and export only that one to your workspace folder, and click "Add to current package" as well to add it to the package you made.
If you have the instance of the file (from following a tutorial), you can also paste that number into the Instance box to the top right. Then you can either 1. click the Filter button in the middle, 2. re-select the Scale Form GFX button, or 3. just hit the All button to get the menu to refresh and show the file you are looking for.
Now for all the files you just exported, you can either use a renaming program to edit the extensions so they all end in .GFX or .SWF, or leave them be and only edit the extensions whenever you need to access the file. I use ReNamer with this setting:
Keep in mind there are at least 2 files with weird names that ReNamer gets mad at, just rename them manually (other renaming programs might just ignore them/work anyway). I label them as BuildBuyContext and TimeControls, based on what's already there.
The next thing to do is to associate these files with the JPEXS program so you can double-click to open. I’m not sure how you do it on Mac, but for Windows right-click on one of the files and choose “Open With” and make sure the “Use this app for all .gfx/swf files” is ticked (or anything with similar wording), then find and select the JPEXS program. You can also open the JPEXS program and edit any settings you feel like you understand, otherwise it’s best to leave them as is for now until you learn more.