Auto Layout

Figblox can turn Figma auto layout and scroll settings into Roblox layout and scrolling objects automatically.

Scroll containers

To make a scroll container, use a frame with overflow set to Vertical, Horizontal, or Both in Figma. Figblox will detect it automatically.

You can also use .scrollv or .scrollh if you want to mark the frame yourself.

The scroll frame should have a fixed size, not Hug. Clip content should be turned on, and the content inside should be larger than the frame so there is something to scroll.

You can structure the scroll contents in two ways. To get auto layout on repeatable rows or tiles (and an easy hierarchy for duplicating layers in Studio), use a child frame (for example Slots) with auto layout: vertical, horizontal, or horizontal with wrap for a grid. If you prefer not to use auto layout, use a plain wrapper frame (for example Content) and position the slot layers manually.

Example: Slots + auto layout

SlotScroll   ← overflow in Prototype, or .scrollv / .scrollh prefix
    Slots      ← auto layout (vertical, horizontal, or horizontal + wrap for grid)
        Slot 1
        Slot 2
        Slot 3

Example: Content without auto layout

SlotScroll   ← overflow in Prototype, or .scrollv / .scrollh prefix
    Content    ← plain frame; arrange Slot layers manually
        Slot 1
        Slot 2
        Slot 3

When a frame uses auto layout in Figma, Figblox creates a Roblox layout object automatically.

Vertical auto layout creates a UIListLayout.
Horizontal auto layout creates a UIListLayout.
Auto layout with wrap creates a UIGridLayout.

Figblox can also create UIPadding when padding is used in Figma.

Spacing, alignment, padding, and layout direction are carried over from Figma.

Children inside auto layout frames are positioned by the Roblox layout object instead of keeping manual positions. Children set to absolute positioning in Figma keep their own positions.

← Back to home