Design the layout.
Keep the native UI.

What becomes what

Use familiar Figma features. GUIRelay turns them into Godot’s native layout and control system.

Name your components for the control you want. The plugin’s layer tree shows what each layer becomes, and its control picker lets you adjust the mapping.

Use Dark and Light color modes for theme variations, editable icons for your visual style, and component variants for control states.

Layouts

Use auto-layout for menus, toolbars, cards, and other UI that should resize with its content. GUIRelay translates the layout rules into native containers instead of flattening the whole screen into an image.

Menu · vertical auto-layout  Padding 24 · gap 12  ├─ Title · text  ├─ Play · Button instance  └─ Settings · Button instance

Menu · PanelContainer  └─ Layout · VBoxContainer     ├─ Title · Label     ├─ Play · Button     └─ Settings · Button

For a HUD, start with constraints

Use a screen-sized frame without auto-layout. Pin a health group to the top-left and an ammo group to the bottom-right using Figma constraints. Each group can still use auto-layout inside. Leave the screen’s background empty when your game world should show through.

Sizing & constraints

Inside auto-layout, the parent container controls placement. Outside auto-layout, Figma’s constraints determine anchors and offsets.

Try this: give a vertical menu fixed width and hug height, then set its buttons to fill width. The container stacks them, the buttons span the menu, and the text supplies their content minimum. Check the result at your game’s target window sizes.

Scrollable lists

Set overflow scrolling on the viewport frame in Figma’s Prototype panel. Keep the list content inside it. To style the native scrollbar, add a track-and-thumb layer named Scrollbar inside that frame and keep it out of the scrolling auto-layout flow. It becomes scrollbar styling rather than an extra imported decoration.

Component names

For component instances, GUIRelay checks the component set and main component names. A whole name, or one segment separated by /, must match a supported control name. Matching ignores case, spaces, and punctuation within a segment.

A normal frame called “Button” isn’t automatically a button. Renaming a placed instance alone also doesn’t change its source component name. Use a component instance for name detection, or assign a control with the picker.

You can always choose the mapping

1. One layer: select it in the plugin’s Screens tree and choose a control in the inspector.
2. A reusable component: open Controls in the Figma plugin and set its type for the component’s instances.
3. A Godot project: use the dock’s Components mapping to assign a type without renaming the Figma component.

The import resolves a Figma control assignment first, then the Godot project mapping, then the component name. Choose Plain to keep ordinary layout instead of a native control. Auto clears the local assignment; a component-level assignment can still apply.

Inspect the layer’s reported type after pushing. If a name-matched component contains too many extra parts, GUIRelay keeps it as ordinary layout to avoid discarding the design. Simplify it or deliberately set the control type; forcing a native control can leave unsupported children out.

Build a button

Start with one reusable component. Its label, icon, and appearance become properties and theme styling on a single native Godot button.

1. Create the base. Add a horizontal auto-layout frame with a fill, corner radius, and padding. Put one text layer inside, such as “Play”. Add one optional icon before or after the text.
2. Make it a component. Name it Button or Button / Primary. For variants, give the component set that name.
3. Add interaction looks. Create a property called State with Default, Hover, Pressed, Disabled, and optionally Focus. Change fills, borders, and text colors in each variant.
4. Place an instance. Put the Default variant in your screen and change its label to “Play”. Choose fill width if it should stretch inside a menu.
5. Push and inspect. The instance becomes a Button; its text becomes the button’s text, its optional icon becomes the button’s icon, and the state looks go into its theme variation.
6. Connect your game. Click Inherit in the Godot dock and connect the button’s pressed signal in that inherited scene to your own game action.

Keep extra descriptions, badges, and unrelated decoration outside the button component. The importer absorbs the label and icon into the control; they aren’t separate child nodes afterward. GUIRelay imports UI and native interaction states. Your game code supplies what clicking “Play” actually does.

States & values

Use State for interaction looks. Status and Interaction are also recognized property names. A single-variant component still imports, but separate state designs give you control over its hover and pressed appearance.

The placed variant matters. A button instance placed in State=Disabled starts disabled. One placed in State=Pressed becomes a toggle button that starts pressed—useful for a selected slot. Place Default for an ordinary action button, even when the component set includes a Pressed look.

Boolean values are interpreted with their property name: Checked=True means checked, while Icon=True does not. Keep style choices such as primary/secondary separate from state and value properties.

Native controls

These are the currently recognized names and the structure each control expects. Aliases in the same row produce the same Godot type.

Switches, checkboxes & radio groups

Simple solid tracks, boxes, circles, knobs, and marks can animate as native indicators. Keep those parts separate. More complex artwork can fall back to rasterized state images while the control remains interactive.

Radio buttons share a group inside their nearest RadioGroup frame. Without that frame, sibling radios share a group. Each instance of the imported scene gets its own group.

Themes, fonts & artwork

Color modes become theme alternatives

Use Figma color variables and modes for palettes such as Light and Dark. GUIRelay generates Godot Theme resources for the design system, with alternatives for its color modes. Component styles become reusable theme variations; imported defaults can also style native controls you add in Godot. Switching themes during play is part of your game logic.

Put the fonts in your Godot project

Include the font files your design uses. GUIRelay matches fonts by name, including static and variable fonts. A system-font fallback may look correct on your computer; use project font files for a packaged game and check missing-font import notes. Custom line height and letter spacing aren’t carried over yet.

Keep artwork separate from layout

Vectors, icons, image fills, and complex leaf artwork can be rendered as 2× PNG assets and imported as TextureRect nodes. Native controls absorb supported icons into their own icon properties. Keep editable text and layout outside flattened artwork when you want them to remain native.

Before you push

A few Figma features don’t have a complete native translation yet. Design with these current limits in mind:

• Absolute children inside auto-layout enter the container’s flow. Use a separate non-auto-layout parent for overlays.
• Grid layout uses fixed positions; it doesn’t become a responsive Godot grid. Wrapping layouts don’t preserve space-between packing.
• Gradients behind child layers, blend modes, inner shadows, and slider-thumb shadows aren’t fully reproduced. Simplify the style or keep decorative artwork separate.
• Number variables, native tab controls, and vertical sliders aren’t supported by the current import.

A useful first-pass check

1. Push one screen and read its import notes.
2. Check the detected control types and any components kept as ordinary layout.
3. Run the scene, resize it, and try hover, focus, pressed, and checked states.
4. Add scripts and custom nodes in an inherited scene, then change the Figma design and push again.