This month’s project might be a basic one…not super fun… IKIK but if you work with Unity, I hope this comes in handy!
Actually, I worked on another project this month. I had the design going, but the parts I ordered from China haven’t gotten here yet, sooo… that might become a September or October project instead.
I have a cross-collaboration project at work with another team that does all the fun stuff… like VR and AR. Super cool. I love getting to collaborate with the peeps over there.
Unity is awesome for designing 3D/crazy cool things, i.e. virtual versions of all the crazy machines with buttons and tactile feedback. But when it comes to screen user interfaces… it’s kind of a pain in the butt to do in Unity since they’re 2D, and the nature of motion and interaction is different.
Our 3D designers don’t have a great time dealing with that in Unity, which is why they brought me in to help with this.
We decided our game plan would be to design all the screen interfaces and interactions in Figma, create a library of components, and then export them into assets that we can use in Unity. Our goal is to capture everything as JSON files and hand them off to our 3D designer to bring into Unity.
The problem is… there isn’t a good free Figma plug-in that does this for Unity, and the paid option we found costs $120.
We could pay for it, but if you know me, I love to build things… So after I got home from work, I set off to build my own Figma plug-in to solve the problem.
Of course… I’m still not a software engineer, and AI is my best assistant when it comes to building things. I’ve built a few other plug-ins before, so I kinda know my way around it.
I didn’t think this project would be super complicated, so I chose to use ChatGPT. I gave ChatGPT my feature requirements and what I wanted it to look like, and it pushed out the first version of my Figma-to-Unity exporter.
My first version basically captured the wireframes and exported them as a JSON file. However, it was very flat and had no interactive features like hover, pressed, active states, etc.
We fixed this by building the components with interactions built into Figma. To structure the files better, the plug-in now has two sections: the first part detects components, and the second part detects screens.
I think this works way better, and it’s easier to structure things in Unity too (according to my 3D designer).
BUT… this is sooo silly… there’s more than one page in the app. (Duhhhh. How did I forget this? I basically do this for a living.)