Skip to content
FigBloxUI

Naming Convention

Append a suffix to any Figma layer name to override which Roblox class it becomes. FigBloxUI strips the suffix automatically — your Roblox instance gets a clean name.

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

SuffixShortRoblox Class
_frameFrame
_textlabelTextLabel
_textbutton_buttonTextButton
_textbox_boxTextBox
_imagelabel_imageImageLabel
_imagebutton_buttonImageButton
_scrollingframe_scrollScrollingFrame
_viewportframe_vpfViewportFrame
_canvasgroup_canvasCanvasGroup

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

_scrollx is also available as a short suffix for horizontal ScrollingFrame.

Image Modifier Suffixes

SuffixUse For
_grayTintable 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.

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. The suffix is stripped from the final instance name
  4. If no suffix is found, FigBloxUI auto-detects the class based on the Figma node type

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