MTA UI Designer

Visual UI editor for MTA:SA. A complete tool to design interfaces and import layouts from Figma into Multi Theft Auto.

---

Features

Visual Editor

• Drag and drop elements directly onto the canvas
• Resize elements using handles
• Grid and snap system for precise alignment
• Zoom and pan for smooth navigation
• Real-time preview of changes

Available Elements

Element	Description
Rectangle	Basic rectangular shape
Circle	Circular or elliptical shapes
Text	Text with font and style options
Button	Interactive buttons
Input	Input fields
Checkbox	Checkbox elements
Progress Bar	Progress indicators
Panel	Containers for grouping elements
Image	Image placeholders
Line	Lines and separators

Figma Import

• Direct import using the Figma API
• Automatic conversion of Figma elements
• Supports colors, positions, and text
• Preserves element hierarchy

Export Options

• MTA:SA (dxDraw) – Optimized Lua code for MTA

---

Installation

Requirements

• Windows 10 or later
• .NET Framework 4.7.2
• Visual Studio 2022 (for building from source)

Download

Download the latest version from: https://github.com/was547/MTAUIEditor/releases

Build from Source

git clone https://github.com/was547/MTAUIEditor.git

Open MTAUIEditor.sln in Visual Studio 2022 and build the solution.

---

Usage

Create a New Project

1. Open MTA UI Designer
2. Click File > New Project (Ctrl+N)
3. Set the project name and resolution
4. Start adding elements

Import from Figma

1. Click File > Import from Figma (Ctrl+I)
2. Paste your Figma API key
3. Paste the Figma project URL
4. Optionally define the background element
5. Click Import

Edit Elements

• Select: Click the element
• Move: Drag the element
• Resize: Use the resize handles
• Properties: Edit via the right-side panel
• Duplicate: Ctrl+D
• Delete: Delete key

Export to Lua

1. Click File > Export (Ctrl+E)
2. Choose the destination folder
3. The entire package with .lua, meta.xml and image assets file will be generated

---

Keyboard Shortcuts

Shortcut	Action
Ctrl+N	New project
Ctrl+O	Open project
Ctrl+S	Save
Ctrl+I	Import from Figma
Ctrl+E	Export Lua
Ctrl+D	Duplicate element
Delete	Delete element
Ctrl+A	Select all
Ctrl+G	Toggle grid
Ctrl++	Zoom in
Ctrl+-	Zoom out
Ctrl+0	Reset zoom
Home	Center canvas
Arrow keys	Move element (1px)
Shift + Arrow keys	Move element (10px)
Middle mouse button	Pan canvas
Mouse wheel	Zoom

---

License

This project is licensed under the MIT License.