Converter do Figma para o MTA passo a passo
Aprenda a transformar qualquer interface desenhada no Figma em um resource Lua pronto para rodar no Multi Theft Auto.
O que este plugin faz
O Conversor de Figma para Lua MTA lê os elementos da sua página no Figma e gera automaticamente o código Lua equivalente para o Multi Theft Auto:SA.
Retângulos, retângulos arredondados, textos, imagens, ícones, vetores, elipses e gradientes são convertidos nas funções dxDraw do MTA, com escala adaptativa e fidelidade de cores.
O resultado é um resource completo com um arquivo Lua, um meta.xml e os assets exportados, empacotado em um ZIP pronto para rodar.
- Código dxDraw preciso, sem escrever nada à mão
- Escala adaptativa para qualquer resolução
- Exportação automática de imagens e assets
- Resource completo com meta.xml incluso
Pré-requisitos
Antes de começar, você precisa de apenas três coisas.
- Uma conta no Figma (gratuita ou paga)
- Um design ou frame com a interface que deseja converter
- Um servidor Multi Theft Auto:SA com acesso aos recursos
Instalando o plugin
Abra a página do plugin no Figma Community e clique em Instalar. Ele fica disponível na seção de recursos do seu editor.
- Acesse a página do Conversor de Figma para Lua MTA no Figma Community
- Clique em Instalar e confirme
- Abra o arquivo onde deseja trabalhar
Desenvolvimento local
Para desenvolver ou testar modificações, clone o repositório e compile o plugin.
npm install && npm run build- O comando compila o código de src/ para o code.js
- Use npm run watch para recompilar automaticamente ao salvar
- No Figma Desktop, vá em Plugins → Development → Import plugin from manifest
- Selecione o arquivo manifest.json do projeto
Preparando seu design
Organize sua página em frames. Cada frame funciona como uma tela e será convertido em uma camada de desenho no código final.
Defina um frame como Background — ele estabelece a resolução de base do design. Esse frame é usado apenas como referência de escala e não é desenhado no resultado.
No campo "Nome do Background" do plugin, informe o nome do frame que serve como base. Por padrão é "Background". Se houver mais de um frame com esse nome, o maior vence.
- Use um frame de resolução fixa como base
- O frame Background define a escala e não é renderizado
- Agrupe elementos relacionados para manter o código organizado
Convertendo o design
Com o design pronto, a conversão leva apenas alguns segundos.
- Clique com o botão direito em qualquer lugar do canvas
- Vá em Plugins → Conversor de Figma para Lua MTA
- Informe o "Nome do Background" se necessário
- Selecione o que deseja converter (opcional)
- Clique em CONVERTER E BAIXAR ZIP
O que é convertido
Sem nenhuma seleção, o plugin converte a página inteira. Se um frame estiver selecionado, apenas ele é convertido.
O que é gerado
Ao final da conversão você recebe um ZIP com o nome ProjetoGerado.zip, contendo um resource completo do MTA.
- ProjetoGerado.lua — o código Lua com todos os elementos convertidos
- meta.xml — o manifesto do resource no formato do MTA
- assets/images/ — os PNGs das imagens e ícones exportados
- Escala adaptativa já aplicada no código gerado
- Chamadas duplicadas removidas e containers vazios ignorados
Rodando no Multi Theft Auto
- Extraia o ProjetoGerado.zip
- Mova a pasta ProjetoGerado para a pasta resources do servidor
- Adicione a resource ao servidor ou inicie manualmente
/start ProjetoGeradoPronto — sua interface do Figma agora roda no servidor, desenhada em tempo real com as funções dxDraw do MTA.
Mapeamento de elementos
Cada elemento do Figma é convertido na função dxDraw correspondente do MTA.
| Elemento do Figma | Código Lua gerado |
|---|---|
| Retângulo | dxDrawRectangle |
| Retângulo arredondado | dxDrawRoundedRectangle |
| Texto | dxDrawText |
| Imagem, ícone, vetor, elipse, gradiente | dxDrawImage |
Imagens, ícones, vetores, elipses e gradientes são exportados como PNG na pasta assets/images e carregados via dxDrawImage.
Escala adaptativa e cores
O código gerado se ajusta automaticamente ao tamanho da tela do jogador, mantendo o design centralizado e proporcionado como no Figma.
local zoom = math.min(sW/resW, sH/resH)A escala é calculada comparando a resolução da tela do jogador com a resolução do frame Background definido no design.
Fidelidade de cores
Cores com transparência são compostas sobre o fundo exatamente como aparecem no Figma, garantindo que o resultado final seja fiel ao design original.
Mapeamento de fontes
As fontes do Figma são convertidas automaticamente para as equivalentes do MTA.
| Fonte do Figma | Fonte do MTA |
|---|---|
| Inter | default |
| Arial | arial |
| Bebas Neue | pricedown |
Cores diferentes dentro de um mesmo texto são convertidas em códigos #RRGGBB usando o parâmetro colorCoded do dxDrawText.
Dicas e boas práticas
- Mantenha um único frame Background para controlar a escala
- Use nomes descritivos nos frames e grupos para facilitar a leitura do código
- Prefira vetores a imagens quando possível, reduzindo o tamanho do resource
- Organize a interface em camadas lógicas para um código mais limpo
- Teste o resource em diferentes resoluções para validar o comportamento da escala
- Remova elementos fora da área visível para evitar desenho desnecessário
Solução de problemas
O resource não inicia
Confirme que a pasta ProjetoGerado (com o meta.xml dentro) está em resources/ e que ela foi adicionada ao servidor com /refresh.
Imagens não carregam
Verifique se a pasta assets/images foi extraída junto com o meta.xml. O caminho usado no código é relativo a essa pasta.
O design fica fora da tela
Verifique o campo "Nome do Background" — ele deve apontar para o frame correto que define a resolução base. Sem um background válido, a escala pode ser aplicada sobre a resolução errada.
Um elemento aparece em posição errada
Elementos soltos fora de um frame podem ser convertidos com coordenadas absolutas do canvas. Use o frame Background como referência e mantenha os elementos dentro dele.
Pronto para testar?
Instale o plugin no Figma e converta seu primeiro design agora mesmo.
Instalar plugin no Figma