Skip to content
AutoLayout PRO

Getting Started

AutoLayout PRO is a high-performance UI layout engine for Unity uGUI with Figma-inspired sizing, incremental rebuilds, and Burst-compiled calculations. This page walks you through your first layout — both in the Inspector and in code.

Try the bundled demos

The fastest way to see what’s possible:

  1. Open Window → Package Manager.
  2. Select AutoLayout PRO in the list.
  3. Open the Samples tab and click Import next to Demos.
  4. Open any imported scene under Assets/Samples/AutoLayout PRO/<version>/Demos/ and press Play.

The Welcome window (open it via Window → AutoLayout PRO → Welcome) shows a curated list of demo scenes and component prefabs you can open with one click.

Inspector quick start

  1. Create a Canvas (GameObject → UI → Canvas).
  2. Add the AutoLayout component to any UI GameObject (Add Component → Auto Layout).
  3. Pick a Layout Type: Row, Column, Grid, Absolute, or None.
  4. Set Width and Height on each child — pick from Pixels, Hug, Fill, Percentage, AspectRatio, or Raw (text/image intrinsic size).

AutoLayout replaces Unity’s built-in LayoutGroup + ContentSizeFitter + LayoutElement with a single component.

See Overview for a per-property reference.

Code quick start

AutoUI is the static entry point for building UI hierarchies in code. It’s in the namespace AutoLayoutPRO.Builder. Call it like this:

using AutoLayoutPRO;
using AutoLayoutPRO.Builder;
using UnityEngine;


public class MyUI : MonoBehaviour
{
    void Start()
    {
        AutoUI.Create(transform)
            .Column().Padding(16).Gap(8)
            .Children(
                AutoUI.Create().Row().Gap(8).Children(
                    AutoUI.Create().Text("My App", 24f),
                    AutoUI.Create().WidthFill(),                 // spacer
                    AutoUI.Create().Text("Settings")
                ),
                AutoUI.Create()
                    .WidthFill().HeightFill()
                    .Background(new Color(0.95f, 0.95f, 0.95f))
                    .Text("Hello world")
            )
            .Build();
    }
}

Each call to AutoUI.Create() returns a LayoutBuilder. Chain methods to configure it; nest with .Children(...); finalize the tree with .Build() (which materialises GameObjects and returns the root). Builders are pooled and single-use — calling .Build() twice on the same builder throws.

See AutoUI for the full builder reference.

Sizing modes at a glance

ModeBuilder methodWhat it does
Pixels.Width(120) / .Height(40)Fixed size in pixels
Hug.WidthHug() / .HeightHug() / .Hug()Wrap children’s combined size
Fill.WidthFill() / .HeightFill() / .Fill()Share remaining parent space (weight-based)
Percentage.WidthPercent(50) / .HeightPercent(25)A fraction of parent size
AspectRatio.WidthAspect(1.5f) / .HeightAspect(1f)Maintain a width:height ratio
Raw / TextSize.WidthTextSize() / .TextSize()Intrinsic size of text/image content

Full details and edge cases: Sizing.

Common patterns

Center a single child

AutoUI.Create()
    .WidthFill().HeightFill()
    .Center()                                    // MainAlign + CrossAlign = Center
    .Children(
        AutoUI.Create().Width(200).Height(100).Text("Centered")
    )
    .Build();

Build a list from data

AutoUI.Create(parent)
    .Column().Padding(16).Gap(4)
    .Each(items, item =>
        AutoUI.Create()
            .WidthFill().HeightHug()
            .Padding(8)
            .Background(Color.gray)
            .Text(item.Name))
    .Build();

.Each<T>(IEnumerable<T>, factory) is the cheapest way to build N children — no .ToArray() or LINQ allocations. There’s also .Children(int count, Func<int, LayoutBuilder>) for index-driven loops.

Conditional children

AutoUI.Create()
    .Column().Gap(8)
    .Children(
        AutoUI.Create().Text("Always shown"),
        showAdvanced ? AutoUI.Create().Text("Advanced section") : null    // null entries are filtered
    )
    .If(isMobile, b => b.Padding(8))                // conditional config in-line
    .Build();

Capture a reference to the built component

AutoLayout m_Card;


AutoUI.Create()
    .Column().Padding(16)
    .CaptureLayout(layout => m_Card = layout)        // typed AutoLayout, not GameObject
    .Children(...)
    .Build();

Inspector vs code — when to use which

  • Inspector: best for static UI, prototyping, and designer-driven workflows. Visual gizmos give immediate feedback.
  • Code (AutoUI): best for dynamic UI, lists, and procedural layouts.
  • Mixed: build the outer shell in the Inspector, populate dynamic content with AutoUI at runtime. Use .Child(GameObject) to adopt existing prefab instances into a built tree.

Next steps