Prefixes - Figblox Docs

Prefixes tell Figblox what to create. Put them at the start of the layer name.

Use this format:
.prefix Layer Name

The text after the last prefix becomes the layer name in Roblox.
Example: .textbutton Shop creates a TextButton named Shop.

No prefix needed

Some Figma layers already export to the right Roblox type on their own.

Text exports as a TextLabel
Frames, groups, components, instances, and plain rectangles export as a Frame
Vectors, shapes, and image-filled frames or rectangles export as an ImageLabel
Anything else exports as a Frame by default

Corners, strokes, gradients, auto layout, padding, and similar Figma properties can also create Roblox UI objects automatically, like UICorner, UIStroke, UIGradient, UIListLayout, UIPadding, and UIAspectRatioConstraint.

Object prefixes

`.frame`	Creates a Frame
`.textlabel`	Creates a TextLabel
`.textbutton`	Creates a TextButton
`.textbox`	Creates a TextBox
`.imagelabel`	Creates an ImageLabel
`.imagebutton`	Creates an ImageButton
`.imageframe`	Creates an ImageLabel
`.scrollingframe` or `.scrollv`	Creates a vertical ScrollingFrame
`.scrollingframex` or `.scrollh`	Creates a horizontal ScrollingFrame
`.scrollviewport`	Explicit scroll viewport tag
`.viewportframe`	Creates a ViewportFrame
`.canvas` or `.canvasgroup`	Creates a CanvasGroup

Other prefixes

`.gray` or `.grayscale`	Exports a grayscale PNG
`.hover`	Marks the layer as Hover
`.clicked` or `.pressed`	Marks the layer as Pressed
`.toggled`	Marks the layer as Toggled
`.disabled`	Marks the layer as Disabled
`.scrollclip` or `.scrollviewport`	Marks a frame as the clipping child inside a scroll container
`.raster`	Renders the layer to a PNG
`.parent`	Makes the tagged child become the Roblox parent for its group
`.ignore`	Skips the layer during export
`.lock`	Applies lock behavior and can be combined with other prefixes

Combining prefixes

You can use more than one prefix on the same layer.
Prefix order in the layer name does not change how Figblox applies them. Combining prefixes works the same no matter how they are arranged.
For scrolling frames, .scrollh or .scrollingframex sets horizontal scrolling, and .scrollv or .scrollingframe sets vertical scrolling. These mix with your other prefixes in any order; when both horizontal and vertical scrolling markers are present, the result does not depend on which appears first.

Parent override

Use .parent on the direct child that should become the Roblox parent.

For example:
.parent .imagebutton Background

If that child is inside a group named Promote, Figblox makes it the parent and puts the other children inside it instead of creating an extra Frame.

Examples

.textlabel Health Bar
            .imagebutton Play Button
            .scrollingframe Leaderboard
            .gray .imagelabel Title
            .pressed .imagelabel OK
            .gray .scrollh .raster Card

← Back to home