Getting Started Installation Core Concepts Flexalon UI (New in v4.0!) Template Pack Challenges! Flexalon Objects Width, Height, and Depth Min / Max Size(v4.1) Margins and Padding Offset, Scale, and Rotation Layouts Flexible Layout Grid Layout Circle / Spiral Layout Curve Layout Random Layout Align Layout Shape Layout Constraints Random Modifier Animators Curve Animator Lerp Animator Rigid Body Animator Animating Layouts Click & Drag Interactable Drag Target XR Interactions (v3.2) Custom Input Provider Data Binding Cloner Data Binding Advanced Flexalon Pipeline Custom Layouts Custom Animators Adapters Scripting API
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

Interactions

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.

Animations

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".