Help with exporting Figma to Roblox + drop shadows & icons

Help and Feedback Art Design Support
, , , ,
#1

image
image1107×613 77.5 KB

I made a design in Figma that looks like this (note the logo in the top left is a template, i just added sepia to the original logo from where its from) and I’m using icons from Icons8, but when I export my design to Roblox using the Figma to Roblox plugin, the output looks similar to this (i just did some small tweaks, + added icons, but it still looked similar:

image
image863×465 96 KB

Of course, the big noticeable change is the drop shadows + divider line missing, as well as some icons having less quality than in Figma, but to be fair I did export them as PNG, but that was by using the Figma to Roblox plugin.

Any help with exporting drop shadows, preserving image quality, etcetera would be monumental to me, as you can clearly see that the design on Figma is much better than the design on Roblox (at least to me.) Exporting drop shadows would be the most useful. Thanks.

#2

Drop shadows can be achieved by making a blurry rectangle and slicing it with 9-slice.

image
image833×767 92.5 KB

Here’s a rectangle with a layer blur inside a frame with a bit of padding. You can export this and slice it with 9-slice: UI 9-Slice Design | Documentation - Roblox Creator Hub

Then, you can put the new sliced image behind any Roblox UI element to achieve a drop shadow effect.

1 Like