Gum is the best Game UI Layout tool available. It provides a flexible, efficient layout engine capable of producing virtually any layout. Gum can be used in a variety of contexts including in the FlatRedBall game engine, MonoGame, raylib, and more. Gum can also be rendered on Skia so it can be used in any environment that supports Skia such as WPF, Silk.NET, and Avalonia.

The Gum layout engine can also be included in any .NET project without requiring the use of a particular graphical API.

Powerful WYSIWYG Editor

Gum UI includes advanced layout functionality to create and preview your UI

Object Oriented Design Focused on Reusable Controls

Gum allows the creation of components which can be instanced and customized in screens and other components

Gum Objects Support Multiple Size and Position Units

Adjust an object’s origin, position units, size units, and stacking to create fluid UI

Simple Integration - Gum Supports Many Runtimes

Grab the NuGet, add a few lines of code, see your Gum project in game! You can use Gum with MonoGame, KNI, FNA, raylib, SkiaSharp, and many more platforms. For more information on our runtimes, see the page.

Interact with Gum in Code

Gum objects can be created and modified in code. Create fully-featured UI by subscribing to common UI events.

Time-Tested and Reliable

Gum has been used in commercial projects of all sizes - check them out in our page.

Need Help?

Gum is actively maintained and provides lots of ways to get answers:

• Check the rest of the documentation

• Join the (shared discord with FlatRedBall)

• Create an

Introduction

This guide walks through Gum's layout system using Figma as a reference point. The quick reference table below covers the most common mappings. The sections that follow explain the concepts that feel meaningfully different coming from Figma.

Quick Reference: Figma → Gum

Project Organization

In Figma, you organize your work into Pages, each containing Frames that typically represent individual screens or views. Components live alongside your frames and can be used across pages.

Gum splits this into three explicit categories visible in the Project panel:

• Screens — represent individual UI states in your game, like a main menu, HUD, or pause screen. You can think of each Screen as a top-level Frame in Figma. Unlike Figma frames though, Screens can't be nested inside other Screens — they're always top-level.

• Components — reusable elements like buttons, list items, or windows. These work like Figma components: define once, place instances anywhere.

• Standard Elements — the built-in primitives (Sprite, Text, ColoredRectangle, etc.) that you drag into Screens and Components to build your UI.

There's no equivalent to Figma's Pages — Screens serve as the organizational unit directly.

Elements and Containers (Frames)

Gum's coordinate system works the same as Figma's: X increases to the right, Y increases downward, with (0, 0) at the top-left of the canvas or parent.

In Figma, a Frame can hold children and have its own fill and stroke. In Gum, layout containers are called Containers, and they are always invisible — there's no fill or stroke to set. You may notice containers showing up with a dotted outline in the editor, but that's just the container outline display (on by default in Gum) and isn't part of the rendered output.

To give a container a visible background, add a ColoredRectangle or NineSlice as a child. For example, a button component might have a Container at the root, a NineSlice child for the background, and a Text child for the label.

Positioning: X/Y + Units + Origin

In Figma, you set X and Y and use the nine-point reference selector to control which corner of the object those numbers measure from. In Gum, the same idea is split into three properties:

X Units options:

Y Units mirrors this vertically, with positive Y always pointing downward. Pixels From Right and Pixels From Bottom work the same way — X=0 / Y=0 is at the edge, and positive goes outward past it. To position something inside those edges, use negative values.

X Origin / Y Origin options are Left/Top (default), Center, and Right/Bottom — the same as Figma's nine-point reference selector, just set separately per axis.

Examples

Center an element horizontally inside its parent (like Figma's "center" horizontal constraint):

Pin an element's right edge 10px inside the parent's right edge (like Figma's right constraint with 10px offset):

Note that Gum doesn't pin both sides of an element at once to stretch it. Stretching is handled by Width/Height Units instead.

Sizing: Width/Height Units

Like Figma's Fixed / Fill / Hug, Gum controls sizing through Width Units and Height Units:

Relative to Children works like Hug. The numeric value adds padding — for example, Width = 16 with Relative to Children adds 8px on each side. Note that children whose size depends on the parent's size are excluded from this calculation to avoid a circular dependency.

Ratio of Parent works like CSS flex-grow. Three siblings with ratios of 1, 2, 1 get 25%, 50%, and 25% of the parent's width respectively.

Anchoring and Docking

The Alignment tab has shortcut buttons that set X, Y, Width, and Height variables for common layouts. They don't toggle any state — they just write variables, so you undo them with Ctrl+Z.

Anchor sets position variables only (X, Y, and their Units and Origins), similar to Figma's constraint presets. It won't change the element's size.

Dock sets both position and size, for "fill a side" patterns — think of it as Figma's "Fill container" combined with a constraint. Options include Top, Bottom, Left, Right, Fill, Fill Horizontally, Fill Vertically, and Size to Children.

Auto Layout → Children Layout

Figma's Auto Layout is called Children Layout in Gum, set on the container itself:

Stack Spacing is the same as Figma's Gap between items. Negative values cause children to overlap.

In Auto Grid modes, the parent's size is divided equally among cells. The number of columns (or rows) is fixed; additional rows (or columns) are added as needed.

A couple of differences from Figma's Auto Layout worth knowing:

• No padding. To approximate padding, size a child with Relative to Parent and a negative value, or offset children manually.

• Cross-axis alignment is per-child. In a Top to Bottom Stack, Gum controls each child's Y automatically, but each child sets its own X. In Figma, alignment (left/center/right) is a single setting on the parent.

Wrapping

Wraps Children works like Figma Auto Layout's Wrap mode. Row height is set by the tallest child; column width by the widest.

One constraint: the container's size on the stacking axis can't be Relative to Children at the same time — that would be circular. You can still use Relative to Children on the cross axis (e.g. height on a horizontal stack). Alternatively, set a Max Width on the container — it will grow with its content until hitting the max, then start wrapping.

Clip Content → Clips Children

Figma's Clip content is called Clips Children in Gum. Off by default, meaning children can render freely outside their parent's bounds.

Components and Slots

Gum's Components work like Figma's components — define once, place multiple instances, override individual properties per instance.

Gum also has Is Slot, which doesn't have a direct Figma equivalent. You can mark child instances inside a component as slots — named attachment points that elements can parent themselves to when the component is placed in a screen. For example, a Window component with Header, Body, and Footer slots lets you drop children directly into any of those sections.

Z-Ordering

Same as Figma: items earlier in the tree render behind items later in the tree. Right-click to Bring to Front, Send to Back, Move Forward, or Move Backward. Reordering a parent moves all its children with it.

Rotation

Rotation is in degrees. One difference from Figma: positive values rotate counterclockwise (Figma rotates clockwise). The pivot point is set by X Origin and Y Origin — by default that's the top-left corner, so set both to Center if you want to rotate around the middle.

Min/Max Constraints

Min Width, Max Width, Min Height, and Max Height work the same as in Figma — they clamp the effective size after all other calculations. They work with any Width/Height unit type, so you can combine them with Relative to Parent or Relative to Children layouts.