By
Mevent
in Tools
The Figma to Rust UI Export Plugin converts Figma interfaces into UI code for Rust game plugins. Designers and developers can turn their Figma designs into working UI elements for Rust.
📝 Guidelines
🖼️ Use Frames, Not Groups
Why: Groups with rectangles won't export correctly. Frames with fills give the correct Rust UI hierarchy.
How: Always use Frames (Shift + A) for containers. Apply fills directly to the frame (not nested rectangles).
Frame Example:
🖌️ Icons: Vector or PNG Only
Why: Nested icon frames cause export errors.
How: Flatten icons into a single vector shape (Combine paths) or export as PNG.
Right-click icon layers → Flatten Selection or export via Export Settings.
🏷️ Parent Naming Conventions
Why: Rust requires parent layers to be named Overlay or Hud (case-sensitive).
How: Rename root frames in Figma to exactly Overlay or Hud in the Layers panel.
🎚️ Constraints Configuration
Why: Defines how elements scale/position in Rust's UI system.
Horizontal Constraints:
Left/Right/Center: Anchors to screen edges.
Scale: Full-width (AnchorMin="0 0" AnchorMax="1 1").
Vertical Constraints:
Top/Bottom/Center: Anchors to top/bottom edges.
Scale: Full-height (AnchorMin="0 0" AnchorMax="1 1").
Constraints Example:
⚡ Pro Tips
Test constraints in Figma's Prototype mode to preview scaling behavior.
Avoid mixed constraints (e.g., Left + Scale) unless intentional.
Use Auto Layout for responsive elements (supports padding/spacing).
🚨 Troubleshooting
Export fails? Check for unnamed parents or nested groups.
Icons missing? Make sure they're flattened vectors or PNGs.
UI misaligned in Rust? Check the constraints and parent names again.
