Using Mosaic.
Mosaic turns a Photoshop or SVG file into real, editable Roblox UI: Frames, TextLabels, UICorner, UIGradient, UIStroke, not one flat image. Every piece stays selectable in Explorer after import. This page is the whole workflow, start to finish.
- Structure with groups, not flat layers
Nest your design the way you want the Frame hierarchy to come out: a Background group, a Header group inside it, and so on. Groups become Frames.
- Flatten multi-layer icons into one layer
A close button made of three or more layers should be one Smart Object (or a merged layer) before export. Otherwise each layer imports as its own placeholder and you end up with extra frames you didn't want.
- Remove what you don't want imported
Delete it, or tag the layer _Ignore instead. Same result, and your source file stays intact.
- Name your layers
Mosaic reads the layer name to decide what a layer is. Untagged layers still import, but a tag gets you the exact result: see the reference below.
Tags are suffixes on the layer name, stripped before the name reaches Roblox, so Play_TextButton becomes Play. They combine: Panel_Canvas_UIList.
Makes the layer a clickable button.
Editable text input.
Force this layer to a plain Frame.
Flatten this layer to one picture, on purpose.
Pairs with _Image (Backdrop_Image_Parent) to flatten the layer to an image but keep its children as real, separate pieces on top.
Scrolling frame.
Container for freely-positioned children.
Auto-layout, and the one that reads real spacing from your layers.
Auto-layout in a grid. Cell size and padding are Roblox's defaults, not read from your file.
Skip this layer entirely.
Import but keep its proportions fixed.
Tiling image.
9-slice image. Sets the scale type; you still set the slice center by hand.
Open Studio, go to the Mosaic panel, click Import Design…, and pick your file. It lands in StarterGui, auto-selected in Explorer. Re-importing the same file updates what is already there instead of duplicating it.
Do this before you consider the import finished, not after. A plugin can't upload images on its own, so until this step, imported images are placeholder colors, not real pictures.
In Photoshop: File → Export → Layers to Files, choose PNG-24, tick Transparency and Trim Layers.
Import the .psd first. The panel tells you exactly which layers need a PNG, usually a small subset of the file.
In Studio: Asset Manager → Bulk Import those PNGs, dropped anywhere in the place.
Already imported the design? Use Bind All from selected Folder in the panel instead.
If two layers share a name but are different images, Mosaic refuses to guess. It tells you which name is ambiguous. Rename one of them in Photoshop and try again.
Sets the image's scale type to 9-slice, but the slice center isn't derived from your art. You still set it by hand in Studio after import.
Adds a grid layout, but cell size and padding come from Roblox's defaults, not your file's spacing. If your layout is one row or column, use _UIList instead. It reads your real spacing.
The panel lists everything it approximated or couldn't represent exactly, with a reason: rounded corners not clipping, blur and inner shadow having no Roblox equivalent, radial gradients getting rasterized, font substitutions, and so on. Most "bugs" turn out to be a documented Roblox limit, not something to report.
One font note: uncommon or heavily-styled fonts sometimes don't match exactly and may need a quick manual fix after import. Worth expecting going in.
Click Remove previews before sharing in the panel first. Previews only exist in your own Studio session. They vanish in Play mode, Team Create, or on anyone else's screen, no matter how good they look on yours. Removing them first keeps it from looking broken.