Figma-to-Unity UI Pipeline: The Export Mistakes That Actually Cost You Time

Skipping the pitch for why Figma beats designing UI directly in Unity's Canvas — the iteration speed argument is obvious once you've felt it. The part that actually matters is getting the export right, because this is where most of the wasted time happens.

The single most common mistake: exporting the whole frame as one flat PNG. Looks correct in the screenshot, unusable in Unity — nothing can animate, nothing changes state, and any dynamic element means rebuilding from scratch. Export individual pieces instead: buttons, bar tracks, bar fills, panels — each as its own sprite.

Specific per-element export rules, since this is where the actual mistakes cluster:

Health/progress bars — export the track and fill as two separate sprites, never one flat image. Unity needs to scale the fill independently for it to actually animate.
Panels — export with padding around the corners intact for 9-slice setup. A panel exported as a plain PNG and stretched in Unity blurs at the corners; 9-slicing in Unity's Sprite Editor after import is what keeps corners sharp at any scale.
Text — never export as an image. Match the Figma text style (font, size, line height) directly in TextMesh Pro settings instead. Flat text loses localization, dynamic resizing, and the ability to update copy without a reimport.
Icons — SVG for clean simple shapes, PNG at 2x for anything with gradients SVG handles poorly.

Layer naming matters more than it seems like it should. "Rectangle_47.png" landing in your Unity project is a problem you'll hit again in three months when you can't remember what it is. Name every exportable layer before you touch the export dialog — UI_Button_Primary_Normal, UI_HealthBar_Fill, that pattern.

On the Unity side, don't skip the Sprite Atlas step — fifty individual UI sprites without an atlas is fifty draw calls; batched into an atlas, it's one. Retrofitting this later is real work; setting it up from the start isn't.

Full setup including Component Variants for button states and the Canvas Scaler config that makes the whole thing scale correctly across resolutions: Full Guide: https://digitaltoolify.blogspot.com/2026/09/how-to-use-figma-for-game-ui-design.html

Anyone using one of the Figma-to-Unity plugins (Figma UI Exporter, UnityFigmaBridge) at scale, or still doing the export manually? Curious if the automation actually holds up on a real production UI surface.