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

Content can go directly inside the scroll frame. You do not need a separate viewport wrapper.

Example

SlotScroll → overflow in Prototype
                 Content
                      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