Skip to content

Supported Features

Layout

Figma FeatureRoblox Result
Absolute positionUDim2 (Scale-based)
Auto Layout (Vertical)UIListLayout (Vertical)
Auto Layout (Horizontal)UIListLayout (Horizontal)
PaddingUIPadding
Gap (item spacing)UIListLayout.Padding
Hug contentsAutomaticSize
Clip contentClipsDescendants
Overflow scrollScrollingFrame
Figma Grid / Wrap layoutUIGridLayout
Linear Repeat groupsExpanded into repeated Roblox instances

Visual

Figma FeatureRoblox Result
Solid fillBackgroundColor3 + BackgroundTransparency
Linear gradientUIGradient
OpacityBackgroundTransparency / ImageTransparency / TextTransparency
Corner radiusUICorner (Scale-based)
Individual corner radiusPer-corner UICorner properties with Native UI beta enabled
StrokeUIStroke
Gradient strokeUIStroke + UIGradient
Stroke alignmentUIStroke BorderStrokePosition
Stroke joinsUIStroke LineJoinMode
Multiple strokesMultiple UIStroke children via _stroke
RotationRotation (with recenter)
Drop shadowUIShadow with Native UI beta enabled

Text

Figma FeatureRoblox Result
Font familyFontFace (50+ mappings)
Font weightFontFace.Weight
Italic textFontFace.Style
Font sizeTextSize
Text alignmentTextXAlignment + TextYAlignment
Text auto-resizeAutomaticSize
Text wrappingTextWrapped
Text scalingTextScaled + UITextSizeConstraint
Line heightLineHeight
Mixed stylesRichText with <font> tags
UPPERCASE/lowercaseTextCase transformation
Underline/StrikethroughRichText <u> / <s> tags
Text truncationTextTruncate

Images

Figma FeatureRoblox Result
Image fillImageLabel (auto-upload)
Vector shapesImageLabel (exported as PNG)
Complex effects (unsupported shadows, blur)ImageLabel (flattened to PNG)
Mixed corner radiiPer-corner UICorner with Native UI beta, otherwise flattened
Multiple fillsImageLabel (flattened)
Tintable icons_gray image mask + ImageColor3
Transparent edge cleanupPixFix mode removes dark halos around PNG edges

Smart Detection

  • Emoji text — Text layers containing emoji are automatically exported as PNG images, because Roblox renders emoji differently from Figma. Exporting as an image ensures your design looks exactly the same. If you’d like an option to export emoji as text instead, feel free to request it!
  • Text as image — Add _ImageLabel or _ImageButton suffix to a TEXT node to export it as a PNG image. Useful for decorative text that should be rendered as an image in Roblox.
  • Button detection — Frames with text children and interactive names are auto-detected as TextButton or ImageButton.
  • Native UI beta — Supported drop shadows and individual corner radii stay editable as native Roblox instances when the beta toggle is enabled.
  • Repeat groups — Linear Figma Repeat groups are expanded into normal repeated Roblox instances. Radial repeats are not converted yet.
  • Tintable icons — Add _gray to an image or icon layer to export a white mask that can be recolored with Roblox ImageColor3.
  • PixFix mode — Cleans dark halos around transparent image edges, especially rounded corners and soft edges.
  • Visual-only nodes — Nodes with effects Roblox can’t render natively are automatically flattened to PNG.

Flattened / Limited

These Figma features don’t have editable Roblox equivalents, so FigBloxUI exports them as PNG images when needed:

  • Radial/Angular/Diamond gradients
  • Inner shadows
  • Blur effects
  • Blend modes
  • Brush / textured strokes
  • Masks (partially flattened)

Not Supported

These Figma features are not converted yet:

  • Radial Repeat groups