Supported Features

Layout

Figma Feature	Roblox Result
Absolute position	UDim2 (Figma’s pixel offsets, turned into scale in Scaled mode)
Auto Layout (Vertical)	UIListLayout (Vertical)
Auto Layout (Horizontal)	UIListLayout (Horizontal)
Auto Layout with an absolutely positioned direct child, or with a supported INSIDE border that a painted child reaches	Measured UDim2 positions for the direct children; the parent keeps source order and does not receive a native layout or padding component
Padding	UIPadding
Gap (item spacing)	UIListLayout.Padding
Hug contents	AutomaticSize
Clip content	ClipsDescendants. Left off when it would hide nothing and content touches the frame’s right or bottom edge, or when it would hide only a glow (a shadow or blur reaching past the frame) and a border touches that edge, because on a screen scaled by 125% or 150% Roblox can trim a border there. The glow then shows a little further than in Figma. A clip that hides real content past the edge stays on
Prototype Overflow scroll	ScrollingFrame, scrolls along the chosen axis
Figma Grid / Wrap layout	UIGridLayout
Evenly spaced cards in a scrolling frame (no Figma layout)	UIGridLayout, added automatically so the canvas grows as you add cards. Each card sits in a slot Frame with the same name
Linear Repeat groups	Expanded into repeated Roblox instances

New in v63: scrolling and grids

Scroll areas with same-size cards placed by hand in an even grid now import as a real grid, so cards you add in Studio scroll too. Scrolling grids leave room for card borders, so the last row is no longer cut off at the bottom, grids of masked cards sit flush, and a grid whose cards already fit does not scroll. If a scroll area extends past the panel drawn behind it, the Structure tab offers Fix to fit it. With Preserve layers, scrolling lists and grids work the same as in Automatic, and rows drawn behind a mask move into the scrolling frame. In every artwork mode, a scroll area named with _ScrollingFrame or _scroll, with no auto layout of its own and a full-size rounded or circular mask as its first layer, keeps its rounded edge, and everything inside stays editable and scrolls.

When an Auto Layout frame mixes ordinary children with a visible absolutely positioned child, FigBloxUI preserves the measured Figma geometry for every direct child. Nested layouts remain native. A ScrollingFrame keeps its measured canvas and scroll axis, but newly added Studio children do not receive automatic growth from this fixed arrangement.

The same happens when an Auto Layout frame has a supported INSIDE border and a painted child (not text) reaches that border. Roblox draws a UIStroke below its children, so FigBloxUI keeps the measured positions and puts a Border Overlay on top. Direct children of that frame then do not reflow when you change them in Studio.

Visual

Figma Feature	Roblox Result
Solid fill	BackgroundColor3 + BackgroundTransparency
Linear gradient	UIGradient
Opacity	BackgroundTransparency / ImageTransparency / TextTransparency
Corner radius	UICorner (the Figma radius in pixels, turned into scale in Scaled mode; a full circle stays perfectly round)
Individual corner radius	Per-corner UICorner properties
Stroke	UIStroke
Gradient stroke	UIStroke + UIGradient
Stroke alignment	UIStroke BorderStrokePosition
Stroke joins	UIStroke LineJoinMode (Round on circles and rounded corners, so outlines stay round)
Multiple strokes	One UIStroke per solid or linear gradient stroke, in Figma’s order (text keeps one stroke). In Automatic and Separate, _stroke layers also add a UIStroke
Rotation	Rotation (with recenter)
Skew (slanted layers)	ImageLabel that keeps the slant. Slanted text stays an editable TextLabel, in italic for a light lean to the right when Roblox has an italic for the font, otherwise upright
Boolean shapes (Union, Subtract, Intersect, Exclude)	ImageLabel that keeps the combined shape, including text cut out of a shape
Blend mode (Overlay, Multiply and others)	Blended artwork and groups arrive as an ImageLabel drawn over the Figma background behind it, so the colors match Figma in every artwork mode, apart from a few cases. Blended shapes, empty frames and thin dividers arrive this way too. Blended text stays an editable TextLabel. Supported colors match over one solid color; unsupported gradient/blend combinations keep their original colors and get a Structure warning
Drop shadow cast by the layer’s own filled box	UIShadow
Drop shadow cast by the layer’s contents (a glow around icons, rings or text, or a frame with no fill)	An ImageLabel named Drop Shadow behind the layer’s editable layers, matching Figma. On a frame that clips, scrolls or has a layout, it sits in a <name> Holder frame so it is never cut off or laid out. The shadow image does not follow later edits; resend from Figma to update it. The frame you send keeps a UIShadow

New in v63: more of a layer stays editable

Layers with several solid or gradient fills stay editable in Studio, and a texture over a gradient keeps the gradient editable. Layers with more than one border keep every border, and Structure points out the borders Roblox can only approximate. A panel whose fill is blended keeps its cards, borders and corners editable: only the part that needs the blend becomes an image. Circular icon backgrounds, individual corner radii and smoothed corners keep their round outlines. Masked shapes, stars and polygons fill their box, a clickable layer with a shadow keeps its own size, and a rotated image with a masked glow stays inside its mask. A layer that blends with the background inside a Figma Section now imports complete.

Native shadows and corners

Roblox released UIShadow and individual corner radii to all experiences in June 2026, so drop shadows and mixed corner radii now import as editable native instances by default. A shadow cast by a layer’s contents, such as a glow around an icon, arrives as one image behind the layer instead, so it matches Figma. If you prefer them flattened to images, turn off Native shadows and corners in FigBloxUI’s Settings. See Roblox’s announcement.

Artwork layers

Automatic, the default, balances editable layers and combined images. Set Artwork layers to Separate in Settings to keep your Figma names and give each independent piece of artwork its own image, while decoration that only looks right together arrives as one image. Set it to Preserve layers to keep more Figma layers and containers separate, with their names. Supported layers stay native Roblox instances, while unsupported looks use images. Some decoration with blur, blends or masks still combines into one image; ordinary text stays editable. See Artwork layers for the exceptions. In both modes, scrolling lists and grids work the same as in Automatic, and the import usually has more instances and images than in Automatic and takes longer to send. Masks and blends may look different, so review the checks in the Structure tab. Scaled imports with Separate or Preserve layers need Studio plugin 3.0.0 or later.

Text

Figma Feature	Roblox Result
Font family	FontFace (50+ mappings)
Font weight	FontFace.Weight
Italic text	FontFace.Style
Font size	TextSize
Text alignment	TextXAlignment + TextYAlignment
Text auto-resize	AutomaticSize
Text wrapping	TextWrapped. In Offset mode and SurfaceGui, a one-line label stays on one line, so every letter shows
Text scaling	Fixed TextSize in Offset/SurfaceGui; uncapped TextScaled in Scaled ScreenGui; no generated UITextSizeConstraint
Line height	LineHeight
Mixed styles	RichText with one <font> tag per run, so a label that mixes fonts keeps each font, its text size and its letter case in place
UPPERCASE/lowercase	TextCase transformation
Underline/Strikethrough	RichText <u> / <s> tags
Text truncation	TextTruncate
Text drop shadow with no blur	A TextLabel copy behind the text named <name>_Shadow (not for TextBox, rotated text or text in Auto Layout). Update both labels when the text changes
Blurred, spread or inner text shadow	Not imported, and flagged in the Structure tab (add _ImageLabel to keep the look as an image)
Glow around text (a shadow on the group or frame that holds it)	One shadow image behind the text, which stays editable
Other text looks Roblox cannot draw (blur, noise, a brush stroke, an image fill, a radial gradient, a mask Roblox cannot reproduce)	The text stays an editable TextLabel with the closest look Roblox has, and the Structure tab names what is dropped or drawn differently. Name the text layer with _ImageLabel to keep the exact look as an image

Double-stroke text

Roblox supports one UIStroke per text label. For a two-layer outline (a thin dark stroke inside a thick light one), stack two copies of the text in Figma with the bottom copy carrying the outer stroke. FigBloxUI converts both layers as-is, so the result matches your design exactly. If the text changes at runtime, update the Text property on both labels.

Images

Figma Feature	Roblox Result
Image fill	ImageLabel (in Code and Live modes, auto-uploaded to the Personal or Group Image owner you choose)
Vector shapes	ImageLabel (exported as PNG). A plain circle becomes a Frame with a round UICorner instead
Complex effects (unsupported shadows, blur)	ImageLabel (flattened to PNG)
Masked shapes, stars and polygons	ImageLabel that fills the layer’s box, at its Figma position
Mixed corner radii	Per-corner UICorner (flattened if Native shadows and corners is off)
Multiple fills	Native layers where possible: solid and linear gradient fills stack as child Frames named Fill 2, Fill 3 and so on, and one image fill becomes its own ImageLabel (needs Native shadows and corners). Blended fills, radial gradients and more than 4 fills flatten to one ImageLabel
Tintable icons	_gray image mask + ImageColor3 (a text layer with _gray stays editable text in its own color)
Transparent edge cleanup	PixFix mode removes dark halos around PNG edges

Smart Detection

• Emoji text: Text layers containing emoji stay editable text, drawn with Roblox’s own emoji art, so they can look a little different from Figma, and the newest emoji may show as boxes. To keep the exact look, add _ImageLabel to the text layer’s name.
• Text as image: Add an _image, _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 shadows and corners: Drop shadows, individual corner radii and stacked fills stay editable as native Roblox instances. A glow that a layer’s contents cast arrives as one shadow image behind the editable layers, so it follows their shape as in Figma. Turn the Settings toggle off to flatten them to images instead.
• Scrolling frames: Set Scroll behavior > Overflow (Horizontal or Vertical) in Figma’s Prototype panel, or add a _ScrollingFrame suffix, to turn a frame into a ScrollingFrame that scrolls along that axis. Size the frame to the visible window you want; content extending past it becomes the scrollable canvas. If the scroll area is bigger than the panel drawn behind it, the Structure tab offers Fix to fit it to that panel (Reset undoes it). To round a scroll area’s corners, make a rounded rectangle or circle mask its first layer, at the frame’s size: the content stays editable and scrolls inside the rounded edge in every artwork mode. This needs the _ScrollingFrame or _scroll name, not only Prototype Overflow, and a scroll area with no auto layout of its own. A scrolling frame (or a clipping frame with a drop shadow) with rounded corners but no mask is clipped by a plain Frame, which keeps its text sharp on every graphics setting but clips with square corners; the Structure tab marks it when content reaches a rounded corner.
• Repeat groups: Linear Figma Repeat groups are expanded into normal repeated Roblox instances. When a Repeat group opts into scrolling (suffix or prototype Overflow), every declared clone is kept and the rows hidden behind a mask scroll into view. Radial repeats are not converted yet.
• Repeated decorative items: Rows of six or more identical decorative items (icon slots, stars, pips) import each piece once, in its place, instead of the whole row arriving as one picture.
• Hidden layers inside artwork: An artwork group that contains a hidden layer, for example a hidden text label, still imports with its image.
• Tintable icons: Add _gray to an image or icon layer to export a white mask that can be recolored with Roblox ImageColor3. On a text layer, _gray keeps the text editable in its own color; recolor it with TextColor3.
• 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. Text inside them stays editable on top of the image.

Flattened / Limited

These Figma features don’t have editable Roblox equivalents, so FigBloxUI exports them as PNG images when needed (text is the exception: it stays editable with the closest look Roblox can draw, and the Structure tab names what changes):

• Radial/Angular/Diamond gradients. Roblox’s new radial and conical UIGradient types are a Studio beta and can’t be published to live experiences yet, so these stay flattened until Roblox ships them to the client
• Inner shadows
• Blur effects (in Preserve layers, a decorative group with a blur arrives as one image, so its soft glow survives)
• Blend modes (Overlay, Multiply and others): blended artwork, including blended shapes, empty frames and thin dividers, exports as a transparent image. In every artwork mode, blended artwork is drawn over the Figma background behind it, so its colors match Figma over that background. Blended text stays editable. Supported colors match over one solid color; unsupported gradient/blend combinations keep their original colors and get a Structure warning. If you recolor or hide that background in Studio, the blended piece does not blend with the new one, and a few cases still arrive without their background. A frame or group with its own blend mode that also holds text or other editable layers is drawn without blending. When only a frame’s fill is blended, its border and child layers stay editable. In Separate and Preserve layers a blended decorative group arrives as one image that matches Figma, borders included, and in Preserve layers a rotated or flipped group, frame or component of artwork with blends inside does too
• Brush / textured strokes
• Borders with a different width on each side, or with a radial, angular or diamond gradient (frames with children keep an approximate border, flagged in the Structure tab)
• Corner smoothing (squircle corners) on layers without children
• Ovals, arcs and rings (a full circle stays native)
• Masks: in Automatic, a decorative group with a mask exports as one image, while a masked group that holds text or repeated items stays editable. In Separate and Preserve layers, a solid circle or rectangle mask with equal corner radii clips its layers natively with a CanvasGroup, and that clip can hold a mix of editable UI and images; the mask layer itself stays in the tree, hidden. With other masks, the layers they clip arrive as images with the mask built in, while text stays editable on top (unclipped where Roblox cannot reproduce the mask; text used as the mask itself stays in the image), and the Structure tab flags any clipping that may differ. In Separate, a decorative group with a mask usually arrives as one image with the mask built in. In every artwork mode, a scrolling frame named with _ScrollingFrame or _scroll, with no auto layout of its own, whose first layer is such a rounded or circular mask covering the whole frame, keeps its content editable and scrolling inside that rounded clip. Sending part of a design that would move layers across a mask is stopped with a message asking for a full Replace, so the masked layout stays intact

Not Supported

These Figma features are not converted yet:

• Radial Repeat groups