Done with the tedious Figma to Roblox conversion? Our codegen plugin automates it for a hassle-free, time-saving, and seamless experience. Focus on creativity, not translations!

Usage

Get the figma plugin, select one frame, enable dev mode and set the codegen feature to this plugin and there you go!

Note

Your designs must be inside of a 1920x1080 frame, so the plugin can get proper scales

Demo

Supported codegen frameworks

• React
• Fusion
• JSX
• Vanilla (no UI framework)

Supported properties

• Position (scale)
• Size (scale)

Those are shared properties between all instances

Supported instances

Frame

• BackgroundColor3
• BackgroundTransparency
• ClipsDescendants
• LayoutOrder

ScrollingFrame

• ScrollBarThickness

You need two frames inside of the frame predenting to be a scrolling frame:

Name	Description
Scrollbar	Represents the scrollbar, should be at the right side
Content	May have auto layout wrap feature and one frame children (template)

Warning

Roblox seems buggy when using UIPadding and UIAspectRatioConstraint inside of ScrollingFrame

TextLabel

• FontFace
• Text
• TextColor3
• TextTransparency
• TextXAlignment
• TextYAlignment

UIAspectRatioConstraint

• AspectRatio

UIFlexItem

• FlexMode

UIListLayout

• FillDirection
• HorizontalAlignment
• HorizontalFlex
• Padding (offset)
• VerticalAlignment
• VerticalFlex
• Wraps

UIPadding

• PaddingBottom (offset)
• PaddingLeft (offset)
• PaddingRight (offset)
• PaddingTop (offset)