Figma to Unity Helper Project

Square

Figma to Unity Helper Project

Sample projects, documentation, and helper scripts to bridge the gap between design and implementation.


If you've ever tried to recreate a Figma design in Unity UI, you know how frustrating it can be. There are a lot of quirks that prevent an easy 1:1 translation. It makes designers do lots of extra work to prep for handoff, and it makes developers do lots of extra work to interpret Figma files. It's rough!

To help bridge this gap, I started creating resources to document Figma and Unity's analogous features. This project provides Figma files and their Unity counterparts, documentation on how the translations were done, and helper scripts to mimic Figma behavior within Unity.

Here's the Figma file - you can duplicate the file from this page. If you play with the window size, the window elements will react differently to scaling. All those behaviors can be recreated in Unity!

Once you have the Figma file set up, click here to download the Unity package. (If you prefer, you can download from Github here!)

When you add this to your Unity project, you'll see that it's the same interface, recreated in Unity UI! Explore the Figma and Unity files side-by-side and learn about how features in one environment can be translated to the other.

This was groundbreaking in 2002.