Layout
| Figma Feature | Roblox Result |
|---|
| Absolute position | UDim2 (Scale-based) |
| Auto Layout (Vertical) | UIListLayout (Vertical) |
| Auto Layout (Horizontal) | UIListLayout (Horizontal) |
| Padding | UIPadding |
| Gap (item spacing) | UIListLayout.Padding |
| Hug contents | AutomaticSize |
| Clip content | ClipsDescendants |
| Overflow scroll | ScrollingFrame |
Visual
| Figma Feature | Roblox Result |
|---|
| Solid fill | BackgroundColor3 + BackgroundTransparency |
| Linear gradient | UIGradient |
| Opacity | BackgroundTransparency (inherited) |
| Corner radius | UICorner (Scale-based) |
| Stroke | UIStroke |
| Rotation | Rotation (with recenter) |
Text
| Figma Feature | Roblox Result |
|---|
| Font family | FontFace (50+ mappings) |
| Font weight | FontFace.Weight |
| Font size | TextSize |
| Text alignment | TextXAlignment + TextYAlignment |
| Text auto-resize | AutomaticSize |
| Mixed styles | RichText with <font> tags |
| UPPERCASE/lowercase | TextCase transformation |
| Underline/Strikethrough | RichText <u> / <s> tags |
| Text truncation | TextTruncate |
Images
| Figma Feature | Roblox Result |
|---|
| Image fill | ImageLabel (auto-upload) |
| Vector shapes | ImageLabel (exported as PNG) |
| Complex effects (shadow, blur) | ImageLabel (flattened to PNG) |
| Mixed corner radii | ImageLabel (flattened) |
| Multiple fills | ImageLabel (flattened) |
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.
- Visual-only nodes — Nodes with complex effects (shadows, blur, non-solid fills) that Roblox can’t render natively are automatically flattened to PNG.
Not Supported
These Figma features don’t have Roblox equivalents:
- Radial/Angular/Diamond gradients (node is flattened to PNG)
- Drop shadows (flattened)
- Blur effects (flattened)
- Blend modes
- Masks (partially — flattened)