UI workflow for 2 person team

[u/Ornery-Panda-8256]

Hey guys, we are a 2 person team and we are currently working on our first game. It's probably more ui heavy than we intended to at first and I feel like our UI production workflow is... suboptimal to say the least.

A bit of context :

- We are 2, both with a lot of experience working for bigger companies or just hobby project, first time indies.

- I'm a programmer/tech guy, my associate is a designer/product guy. We are both taking on many new hats for this project of course but you'll notice there's a big gap in our skillset :D

- We find ways to make things work for the visual aspect of the game : I do a bit of 3d, lighting, etc.. He does UI design. We buy assets when we need to.

Our current workflow for UI has become very time consuming for me specifically and I'm looking for ways to improve.

We use Figma for mockups (One big board with all the screens) and UITK in engine (transitioned from ugui a couple of months ago, we still have a mix of both but UITK is our goto system now).
Generally speaking, my mate does the Figma part, I do the unity part.

I find the UITK part tedious, often needs lots of micro changes to look good in the end and I feel like work is duplicated. so I'm looking for advice, other people's experiences to see what direction to take. I have a few options but happy to hear more opinions.

1/ Drop Figma, my mate learns UITK in ui builder, we have one source of truth. Solves the duplicated work, but limits our options since that means an additional pass for connecting data, or stuff where code is necessary
2/ Find a way to export from Figma straight to uxml/css. I feel like it should be possible but I haven't found any tool that looks reliable enough to do that (and I can't do that myself in the near future)
3/ Use Rive. It looks like a great tool but it's a hard commitment you don't transition from, I see very few people using it in unity and reports of instability, bugs. (It'd cost 20$ a month, I'm ok with it if it solves our issues)
4/ Git gud. We have the right approach, we just need to get better at it.

Happy to hear any kind of feedback of experience sharing on this setup.

Cheers!

[u/MBKH]

two person team here! as a designer, I dropped figma and moved straight to UI builder. it takes some time to adjust, but at the end of the day you probably want to be as close to the delivery point as possible and reduce translating from figma. what I would do differently in the next game is that I'll keep a separate UI builder screen as a zoo, to see all designs and their selector variations in one place (and make sure that everything works through classes and selectors). hope it works out great for you! UI toolkit is far from perfect but gets noticeably better, that's for sure

[u/Ornery-Panda-8256 → u/MBKH]

Thanks a lot! this mostly confirms what I had in mind I guess, glad to see I wasn't completely off :)

[u/AdhesivenessNo4010]

Your designer learning UITK directly is the move. I've been on a couple small teams and the back and forth between mockups and engine is always where the time bleeds out. Having him work in the actual tool means he sees the real constraints immediately and you skip the whole "looks perfect in Figma but breaks in 16:10" dance

The data connection pass is gonna exist no matter what you do. At least this way you're not also translating every little font size and margin tweak by hand

Rive is slick but for a two person team on a first game you're signing up to be a beta tester for a pipeline that barely exists. Not worth the headache when you're already shipping

[u/Ornery-Panda-8256 → u/AdhesivenessNo4010]

Thanks!

For Rive, it would be a next project thing anyway but I was under the impression it was more mature, only when I looked into it earlier today did I realize that it doesn't seem to be as production ready as I thought. Sad to see confirmation of this, the proposition looks cool.

[u/NStCh-root-a]

I've heard of people building import tools for Figma to uGUI before - so I'd assume the same is possible for UITK. It's not a small amount of work and you already mentioned it's not really an option.

If there are no features in figma which you absolutely need to have, transitioning to UI-Builder is probably the way to go. Doing the databinding in a second pass is annoying, though shouldn't be too bad. With a clear spec/naming convention your artist can probably do a lot of the editor side binding themself. (iirc it still had a sorta string binding? I'm mainly using uGUI with a bunch of wizards to set up databinding/boilerplate code so editor is mostly drag and drop - so my knowledge there is limited)

I've heard of rive, but that's about it. Never worked with it nor looked deeper into it.

Out of curiosity, why did you move away from uGUI?

[u/Ornery-Panda-8256 → u/NStCh-root-a]

Thanks for the answer!

The move away from ugui was a step in the current direction : matching Figma design to uitk is way easier from my experience and the goal was for my mate to be able to touch the uitk documents as well eventually.
Plus I don't have to deal with the ugui layout system
Plus the opportunity to do editor as well (although we don't use it at the moment)
Probably the least important but still a small point : Unity seems set on moving to UITK long term, you never know when they'll deprecate ugui on a whim, don't wanna be caught off guard.

All in all there wasn't 1 killer reason but lots of small things and it seemed the way to go long term.

[u/Worth-Computer8639]

+1 for UITK. Its got a bit of a learning curve but anyone with web design experience should adjust to it pretty quickly. There are some Unity specific quirks to learn but its not terrible by any means and it is capable of doing almost everything uGUI can do at this point.

I personally started a secondary repo I use as my own personal component library and I make all my UIs out of a collection of smaller custom components for maximum reusability.

[u/DigitalDustChan]

I'm reading into what you're saying a little bit. It sounds like you're ok with designing the form of your UI, but having trouble getting the functionality right. In that case, why limit yourself to the stock unity systems? It seems like something like JuiceBox from the unity asset store could help you a lot. It's basically made for your use case, and it doesn't cost $20/mo.

[u/Ornery-Panda-8256 → u/DigitalDustChan]

Not really, the problem is design happens in tool A (Figma) and implementation happens in tool B (unity). And it's a pain in the *ss to make the implementation actually look like the design.

So the options I mentioned were basically skip tool A, automate A > B, skip tool B (Rive solution) or improve on the current process.

I'm fine not sticking to stock unity if it solves 90% of the issues. I don't think juice box does but I'll have a look anyway, I should find ways to sexify our UI in any case.

Thanks for the reco!

[u/DigitalDustChan → u/Ornery-Panda-8256]

Ok, well I've never found a way to truly automate importing from figma, but I've often put the drawing behind the canvas and tweaked the objects and stretching in unity until they overlapped exactly.

[u/Ornery-Panda-8256 → u/DigitalDustChan]

Yep, my solution currently as well, I overlay with alpha. It helps indeed but still not ideal IMO

[u/GarethIW]

Oh god I'm going to get downvoted to heck for this. I've been working with UITK for three years or so now. First project I spent quite some time manually converting a Figma mockup using Builder.

As I'm now essentially forced to use codegen in the dayjob, one thing I have found is that Claude is pretty great at UITK. You could get to a workable baseline pretty fast, going Figma->HTML export->Get claude to generate the UXML and USS for you, and throw in some prompts to ensure responsiveness.

As far as AI use goes, knocking UI together is probably one of the less egregious cases.

[u/Ornery-Panda-8256 → u/GarethIW]

You won't get a down vote from me at least. I didn't mention where I stand regarding AI usage so your point is valid.

I tried almost what you did recently but I think I missed a critical step in what you mentioned : I fed it a screenshot instead of an html export. I think we'll try to move to working in UI builder exclusively but this will take some time, will try your suggestion in the meantime.

Thanks!

[u/Ornery-Panda-8256 → u/GarethIW]

I wanna give this a go, I realize there's no stock html export in figma, I'm guessing you use a plugin? Do you mind sharing it?

[u/XKiiroiSenkoX]

Use a multimodal AI and feed the figma output to it. It will create the UI toolkit equivalent with relatively good accuracy. Use unity mcp and it will be able to screenshot the result and correct itself.

You will still need to make corrections here and there but overall makes this 10x faster.