Naming Convention

Append a suffix to any Figma layer name to override which Roblox class it becomes. With Artwork layers on Automatic, the default, FigBloxUI strips the suffix so your Roblox instance gets a clean name. With Separate or Preserve layers, the instance keeps your full layer name, suffix included.

If you’ve been using other Figma-to-Roblox plugins, your existing layer names will work seamlessly with FigBloxUI. No need to rename anything.

Example: A layer named Submit_TextButton becomes a TextButton named Submit in Roblox.

Class Suffixes

Suffix	Short	Roblox Class
_frame		Frame
_textlabel		TextLabel
_textbutton	_button	TextButton
_textbox	_box	TextBox
_imagelabel	_image	ImageLabel
_imagebutton	_button	ImageButton
_scrollingframe	_scroll	ScrollingFrame
_viewportframe	_vpf	ViewportFrame
_canvasgroup	_canvas	CanvasGroup

_button uses smart detection: becomes TextButton if the layer has text children, ImageButton otherwise.

Ordinary text stays editable text; text used inside a boolean shape or as the mask itself is part of the resulting image. A container suffix on it (_frame, _scrollingframe, _canvasgroup, _viewportframe and their short forms) is ignored, and Structure says so. An image suffix (_image, _imagelabel, _imagebutton) still turns the text into an image.

In Automatic and Separate, giving a group or frame an image suffix (_image, _imagelabel, _imagebutton) exports that whole group as one image, for example Background_image. Text inside the group stays editable text on top of that image, and a text layer named with _image, _ImageLabel or _ImageButton becomes an image itself. It is the quickest way to bring a busy decorative group down to a single upload when a design is close to the 1,000 images a Send can carry. In Preserve layers the same suffix usually keeps the group’s layers inside it instead (a group of artwork with a blend mode or a blur of its own, a group whose mask Roblox cannot reproduce, or a rotated group or frame of artwork with blends inside, can still arrive as one image), so it saves images only in Automatic and Separate.

_scrollx is also available as a short suffix for horizontal ScrollingFrame. _scrolly does the same for a vertical one.

ScrollingFrame tips

• Size the frame to the visible window you want, not the full content. Anything extending past the frame becomes the scrollable canvas.
• You can also opt in without renaming: set Scroll behavior > Overflow in Figma’s Prototype panel.
• _scroll, _scrollx, and _scrolly force a single-direction list layout. For grids, use _scrollingframe so the column count is preserved.
• On a Repeat group, the scroll opt-in keeps every declared clone, so rows hidden behind a mask scroll into view instead of being dropped.
• To round a scroll area’s corners, name it with _ScrollingFrame or _scroll, keep it upright with no auto layout of its own, and make its first layer a mask at the frame’s size: a rounded rectangle with the same radius on every corner, or a circle, with an opaque fill. The content stays editable and scrolls inside the rounded edge in every artwork mode.

Layouts need no suffix

UIListLayout and UIGridLayout are created automatically from the Figma layout you use: Auto Layout (vertical or horizontal) becomes UIListLayout, and Figma’s Grid or Wrap layout becomes UIGridLayout. A scrolling frame with no Figma layout gets one inferred when its items are evenly arranged: a single column becomes a UIListLayout, and evenly spaced cards in rows and columns become a UIGridLayout, so cards you add later flow into the grid and the canvas grows. Just set the layout natively in Figma and the plugin picks the right one.

Layout Suffixes

Suffix	Use For
_uilist	Force a UIListLayout on a container
_uigrid	Force a UIGridLayout on a container

You can place a layout suffix before a class suffix, for example Items_uigrid_frame.

Image Modifier Suffixes

Suffix	Use For
_gray	Tintable image/icon mask

_gray exports the layer as a white PNG mask, preserves transparency, and applies the Figma fill or stroke color through Roblox ImageColor3. Use it for icons that should stay crisp and easy to recolor in Studio. On a text layer, _gray keeps the text editable in its own color, so recolor it with TextColor3 instead.

You can place _gray before an image class suffix, for example Star_gray_image.

Exclude Suffixes

Add these suffixes to skip layers during export:

• _exclude: Skip this layer entirely
• _ignore: Same as _exclude
• _lock: Skip export + preserve aspect ratio (adds UIAspectRatioConstraint)

How It Works

1. FigBloxUI checks the layer name for a matching suffix (longer suffixes are checked first)
2. If found, the suffix determines the Roblox class
3. In Automatic, the suffix is stripped from the final instance name; Separate and Preserve layers keep it
4. If no suffix is found, FigBloxUI auto-detects the class based on the Figma node type

Separate and Preserve layers

With Artwork layers set to Separate or Preserve layers in Settings, Roblox instances keep your exact Figma layer names, suffix included, and the top frame keeps its own name instead of Container. Class suffixes still choose the class. In Preserve layers, a group or frame with an _ImageLabel or _ImageButton suffix usually keeps its layers inside instead of becoming one image (a group of artwork with a blend mode or a blur of its own, a group whose mask Roblox cannot reproduce, or a rotated group or frame of artwork with blends inside, can still become one image), and _stroke layers stay separate layers. In Separate, such a group becomes one image and _stroke layers work as in Automatic.

Tips

• Suffixes are case-insensitive: _TextButton, _textbutton, and _TEXTBUTTON all work
• You can combine with Figma’s existing naming: Header Bar_frame becomes a Frame named Header Bar
• Use _exclude on helper layers (guides, annotations) to keep your Figma file organized without cluttering the Roblox export