Figma → Lua MTA
GitHub
📘 Full guide

Convert from Figma to MTA step by step

Learn how to turn any interface drawn in Figma into a Lua resource ready to run on Multi Theft Auto.

What this plugin does

The Figma to Lua MTA Converter reads the elements of your Figma page and automatically generates the equivalent Lua code for Multi Theft Auto:SA.

Rectangles, rounded rectangles, texts, images, icons, vectors, ellipses and gradients are converted into the MTA dxDraw functions, with adaptive scaling and pixel-perfect colors.

The result is a complete resource containing a Lua file, a meta.xml and the exported assets, packed into a ready-to-run ZIP.

  • Precise dxDraw code, without writing anything by hand
  • Adaptive scaling for any resolution
  • Automatic export of images and assets
  • Complete resource with the meta.xml included

Prerequisites

Before you start, you only need three things.

  • A Figma account (free or paid)
  • A design or frame with the interface you want to convert
  • A Multi Theft Auto:SA server with access to resources

Installing the plugin

Open the plugin page on Figma Community and click Install. It becomes available in your editor's resources section.

  1. Access the Figma to Lua MTA Converter page on Figma Community
  2. Click Install and confirm
  3. Open the file you want to work on

Local development

To develop or test changes, clone the repository and compile the plugin.

npm install && npm run build
  1. The command compiles the code from src/ to code.js
  2. Use npm run watch to recompile automatically on save
  3. In Figma Desktop, go to Plugins → Development → Import plugin from manifest
  4. Select the project's manifest.json file

Preparing your design

Organize your page into frames. Each frame behaves as a screen and will be converted into a drawing layer in the final code.

Set one frame as Background — it establishes the base resolution of the design. That frame is used only as a scaling reference and is not drawn in the result.

Background name

In the plugin's "Background Name" field, enter the name of the frame used as the base. By default it is "Background". If there is more than one frame with that name, the largest one wins.

  • Use a fixed-resolution frame as the base
  • The Background frame defines the scale and is not rendered
  • Group related elements to keep the code organized

Converting the design

With the design ready, the conversion takes only a few seconds.

  1. Right-click anywhere on the canvas
  2. Go to Plugins → Conversor de Figma para Lua MTA
  3. Enter the "Background Name" if needed
  4. Select what to convert (optional)
  5. Click CONVERT AND DOWNLOAD ZIP

What gets converted

Without a selection, the plugin converts the whole page. If a frame is selected, only it is converted.

What is generated

When the conversion finishes you receive a ZIP named ProjetoGerado.zip, containing a complete MTA resource.

  • ProjetoGerado.lua — the Lua code with every converted element
  • meta.xml — the resource manifest in the MTA format
  • assets/images/ — the PNGs of the exported images and icons
  • Adaptive scaling already applied in the generated code
  • Duplicate calls removed and empty containers ignored

Running on Multi Theft Auto

  1. Extract the ProjetoGerado.zip
  2. Move the ProjetoGerado folder to the server resources folder
  3. Add the resource to the server or start it manually
/start ProjetoGerado

Done — your Figma interface now runs on the server, drawn in real time using the MTA dxDraw functions.

Element mapping

Each Figma element is converted into the corresponding MTA dxDraw function.

Figma element Generated Lua code
Rectangle dxDrawRectangle
Rounded rectangle dxDrawRoundedRectangle
Text dxDrawText
Image, icon, vector, ellipse, gradient dxDrawImage

Images, icons, vectors, ellipses and gradients are exported as PNG in the assets/images folder and loaded via dxDrawImage.

Adaptive scaling and colors

The generated code adjusts automatically to the player's screen size, keeping the design centered and proportioned as in Figma.

local zoom = math.min(sW/resW, sH/resH)

The scale is calculated by comparing the player's screen resolution with the resolution of the Background frame defined in the design.

Color fidelity

Colors with transparency are composited over the background exactly as they appear in Figma, ensuring the final result is faithful to the original design.

Font mapping

Figma fonts are automatically converted to their MTA equivalents.

Figma font MTA font
Inter default
Arial arial
Bebas Neue pricedown

Different colors within the same text are converted into #RRGGBB codes using the colorCoded parameter of dxDrawText.

Tips and best practices

  • Keep a single Background frame to control the scale
  • Use descriptive names on frames and groups to make the code more readable
  • Prefer vectors over images when possible, reducing the resource size
  • Organize the interface into logical layers for cleaner code
  • Test the resource at different resolutions to validate the scaling behavior
  • Remove elements outside the visible area to avoid unnecessary drawing

Troubleshooting

The resource does not start

Make sure the ProjetoGerado folder (with the meta.xml inside) is in resources/ and that it was added to the server with /refresh.

Images do not load

Check that the assets/images folder was extracted along with the meta.xml. The path used in the code is relative to that folder.

The design goes off screen

Check the "Background Name" field — it must point to the correct frame that defines the base resolution. Without a valid background, the scale may be applied over the wrong resolution.

An element appears in the wrong position

Elements loose outside a frame may be converted with absolute canvas coordinates. Use the Background frame as a reference and keep elements inside it.

Ready to try it?

Install the plugin on Figma and convert your first design right now.

Install Figma plugin