my ui workflow

tl;dr: for a summarized version, read the numbered points and "tools used" section

because i oftentimes get asked about my workflow, i thought i'd write out an elaborate document entailing a rough outline of how i work. compared to other ui developers, i'd say my workflow is insanely unconventional (albeit efficient) and i wouldn't be able to explain it entirely in a tweet... this is pretty much all of it excluding insignificant details that were omitted in the final proofread.

1. consider the requirements of what you're making. things like:

   • what is actually being made?
   • what are the specific requirements (features, elements, etc)?
   • who is the ui being made for + who is actually going to use it?
   • what is someone supposed to be able to do with the finished product?

2. sketch out a rough draft for the ui, being sure to only highlight important/key features

   • don't include super specific details; mentally visualize them. remember KISS (keep it simple, silly)
   • i usually use mspaint because it forces me to keep things simple and makes me not want to try, all while still getting the job done
     • on special occasions (when i feel like it) i'll use an ipad pro (2018) w/ an apple pencil + the Concepts app
       • find the app here
   • i know other people use things like Adobe XD or Figma, but the drawback of using them (for me) is that i'll try making it perfect, effectively defeating the purpose of a rough draft

3. get a rough idea of how i want to animate the ui -- ask yourself questions like:

   • what style of animation fits the style of the ui?
   • which elements should be animated?
   • which elements deserve to be animated?

4. start building the ui in roblox studio (see the tools used section for more in-depth details)

   1. decide what the largest size the parent container should be
   2. build the heirarchy out more and slowly add in more details
   3. prepare ui templates so that they can be programmed into classes
      • see: TemplateProvider.lua
      • also see: BasicPane.lua
   4. deconstruct the ui as necessary so that it's ready to be programmed

5. programming all of the classes that are needed for the ui

   • use hoarcekat/rojo for code sync + live previews
   • this process is specific to each ui that i make, so i can't really explain this step any further

6. write a service for the ui and make it function in-game

   • usually this consists of just creating the class and parenting it to a ScreenGui, but sometimes requires extra work

tools used

External Software

1. mspaint.exe (quick sketches)
2. Sublime Text 3 (the best code editor)
   • Font: Meslo LG L
   • Color Scheme: Gruvbox (dark) (medium)
   • Packages:
     • All Autocomplete - gives autocomplete for open files
     • Colorsublime - lots of color schemes
     • FileIcons Mono - icons in the sidebar
     • gruvbox - the theme + color scheme (including its variants) are good
     • Hide Menu - hides the context menu
     • PackageDev - convenient sublime addons
     • PlainTasks - quick todo list (i use this a lot)
     • Pretty JSON - json linter
     • ScopeHunter - for editing color schemes
     • SideBarEnhancements - adds good stuff to the sidebar
     • SublimeLinter - linter
     • SublimeLinter-contrib-selene - selene support for sublime
     • Terminus - embedded terminal (used to manage rojo)
     • TrailingSpaces - removes trailing spaces in files
     • Undo Close Tab - browser-like ctrl+shift+t functionality
3. Sublime Merge (the best git client)
4. Adobe CC Suite (photoshop, illustrator)
5. Rojo (code syncing from my pc to studio)

Roblox Studio Plugins

1. Rojo github
   • included it twice because rojo isn't just the plugin
2. Hoarcekat github
   • live previews in roblox studio for your ui (updates as your script updates)
   • consider how much time you spend waiting for play solo to load ... and imagine it completely gone -- that's the utility that hoarcekat provides
3. Reclass roblox plugin
   • quickly + easily lets me convert instances (i.e. convert TextLabel -> TextButton while retaining its properties)
4. Studio Timer roblox plugin
   • tbh this is kind of a gimmic but it's a cool gimmic
5. Tag Editor roblox plugin
   • this is a necessity for CollectionService
6. StudioMacros (currently private)
   • allows me to easily bind small snippets of code to shortcuts that are bound on my stream deck

The Stream Deck

basically, i have an Elgato Stream Deck XL that has a bunch of keyboard shortcuts (that i don't have to remember) bound to each button. here's a picture it uses the StudioMacros plugin that is mentioned earlier, and exponentially speeds up the rate at which i can construct my ui in studio. i'll make the plugin public once i finally get around to writing documentation for it.

this is likely the most crucial part of my workflow because of how fast it lets me work, and i cannot stress this enough.

conclusion

that's pretty much it, if your workflow is similar to mine, i'd love to hear about it on twitter @unrooot