Flexalon UI

Since update 4.0, Flexalon can be used to create UI in Unity. You can:

  • Use all Flexalon layouts, constraints, and modifiers to position your content.
  • Animate your UI with Lerp and Curve Animators.
  • Create click and drag interactions with Flexalon Interactables.
  • Bind data to your UI with Flexalon Cloner.
  • Coming Soon: Use Flexalon UI Copilot to create UI with through natural conversation with an AI.
UI Example

Getting Started

If you're familiar with uGUI layouts, adopting Flexalon UI should be easy. Here's the basics:

  • Create a canvas by selecting GameObject > UI > Canvas. Learn more about canvas here.
  • Start building your UI by adding Flexalon layout objects under your Canvas. For example, here we create a Flexalon Flexible Layout under the canvas and add some buttons to it:
    Flexible Layout
  • It's often desirable to build UI that dynamically reflows to match the screen size. To do this, set the width and height properties on the layout's Flexalon Object component to "Fill". If we also check the "Wrap" option on the Flexible Layout, then our buttons will wrap as necessary to fit on the screen.
    Flexible Layout with Wrap
  • Check out the sample scenes under Flexalon/Samples/Scenes/UI to see how to use other layouts, animators, interactables, and scroll views.

Comparing Flexalon UI to uGUI Layout Groups

You can Flexalon components instead of Unity's built-in uGUI layout group components. Here's how their capabilities map:

uGUI Component

Flexalon UI

Layout Element Flexalon Object with size set to "Fixed" or "Fill"
Vertical / Horizontal Layout Group Flexalon Flexible Layout
Grid Layout Group Flexalon Grid Layout
Content Size Fitter Flexalon Object with size set to "Layout"
Aspect Ratio Fitter See Preserving Aspect Ratio


Flexalon Interactables can be used to let users click and drag objects with a Graphic component. See the Interactions page for more information, and check out the Flexalon/Samples/Scenes/UI/InteractableUISample scene.


Flexalon animations let you animate objects between layout positions. See the Animations page for more information, and check out the Flexalon/Samples/Scenes/UI/AnimatorsUISample scene.

Preserving Aspect Ratio

To preserve aspect ratio for images:

  • On the Image component, set "Image Type" to "Simple" and check "Preserve Aspect".
  • Add a Flexalon Object and set one axis to "Component" and the other to "Fixed" or "Fill".

To preserve aspect ratio for text:

  • Add a Flexalon Object and set one axis to "Component" and the other to "Fixed" or "Fill".