Simulador de pets
Dev de simulador montando a loja de itens
“Janela de loja com raridade e preço em gemas”
Roblox UI Maker
Descreva uma loja, um HUD ou um inventário e receba uma UI Roblox Studio editável. Ajuste do seu jeito e mande pro Studio como objetos de GUI de verdade, não como imagem.
0 / 1200
Prompt
Ideias
Telas pra começar no Roblox UI Maker
Direções de design pra loja, inventário e HUD. Escolha uma pra carregar o briefing; o Roblox UI Maker monta tudo como frames, labels e botões editáveis.
Entenda
O que é um Roblox UI Maker?
O que ele faz
- O Roblox UI Maker transforma um briefing curto num layout de GUI do Roblox.
- Você recebe Frames, TextLabels e TextButtons, não uma imagem chapada.
- Tudo continua editável: posição, tamanho, texto, cor e cantos.
Onde entra no seu fluxo no Studio
- Rascunhe a UI Roblox Studio no navegador antes de abrir o Studio.
- Exporte em Luau e rode no Command Bar do Studio.
- A mesma ScreenGui aparece no Studio, pronta pros seus scripts e artes.
Quem usa um Roblox UI Maker
- Dev solo que prefere programar a ficar posicionando frame.
- Time que quer fechar o layout da loja ou do HUD antes de caprichar no visual.
- Criador refazendo menus pra um update ou evento novo.
Recursos
Como fazer uma GUI Roblox Studio que o jogador entende na hora
01
Do briefing a uma hierarquia de tela clara
- Diga qual é a tela e o que ela precisa: slots, preços, cronômetro, botões.
- O Roblox UI Maker distribui de 6 a 16 objetos com títulos, painéis e ações.
- Se preferir, comece por um template de Reward, Shop, HUD ou Inventory.
02
Layout em Scale pra PC, tablet e celular
- Os objetos são posicionados em frações da tela, do jeito que o Scale do Roblox funciona.
- Veja o layout nos tamanhos Desktop, Tablet e Mobile.
- A exportação usa UDim2.fromScale, então a UI acompanha a tela do jogador.
03
Exporte objetos de GUI de verdade pro Roblox Studio
- O Export Luau monta uma ScreenGui com seus Frames, labels e botões.
- Cantos arredondados e contornos viram UICorner e UIStroke.
- Adicione ImageLabels com os IDs dos seus próprios assets de imagem do Roblox.
Ideias
Ideias pro Roblox UI Maker em todo gênero de jogo
Briefings que funcionam bem no Roblox UI Maker. Cada um vira um layout editável que você pode reestilizar e exportar.
Aventura RPG
Criador de RPG planejando a grade da mochila
“Grade de itens com painel de atributos e botão Equipar”
Combate
Time de battlegrounds organizando a hotbar
“Barras de vida e stamina com hotbar de 6 slots”
Obby casual
Criador solo fazendo o HUD das fases
“Contador de fase, cronômetro e botão Pular fase”
Economia tycoon
Quem faz tycoon organizando os upgrades
“Contador de dinheiro com cards de upgrade e preço”
Configurações
Dev arrumando o menu de configurações
“Janela de configurações com botões liga/desliga e Salvar”
Como funciona
Como fazer GUI Roblox Studio em três passos rápidos
- 1
Descreva a tela ou escolha um template
- Escreva o que a tela mostra: slots, preços, barras, botões, cores.
- Ou comece pelo template de Reward, Shop, HUD ou Inventory.
- Cada geração custa 1 crédito.
- 2
Edite o layout no navegador
- Arraste e redimensione objetos, troque texto, cor de preenchimento e raio dos cantos.
- Adicione Frames, TextLabels, TextButtons ou ImageLabels.
- Confira as prévias Desktop, Tablet e Mobile.
- 3
Exporte em Luau e rode no Studio
- O Export Luau baixa um script, ou você copia direto da visualização de código.
- Cole no Command Bar do Roblox Studio e execute.
- A ScreenGui cai no StarterGui; conecte os botões aos seus scripts.
Especificações
Dimensões de GUI no Roblox e padrões de interface
Orientações do Roblox Creator Hub pra telas como as que o Roblox UI Maker exporta.
Fontes: Roblox Creator Hub: UI · Contêineres na tela · Posição e tamanho · Modificadores de tamanho da UI
Comparação
Roblox UI Maker comparado com o Studio e freelancers
Por que usar
Por que os criadores usam este Roblox UI Maker
Objetos de GUI de verdade, não uma imagem
- O Roblox UI Maker entrega Frames, TextLabels e TextButtons.
- Nada de fatiar um mockup ou reposicionar tudo na mão.
Chega de ScreenGui em branco
- Tenha um primeiro layout a partir de uma frase ou de um template.
- Use o tempo no Studio pra scripts e arte.
Posições em Scale desde o começo
- Os objetos ficam em frações da tela, como o Scale do Roblox.
- Veja Desktop, Tablet e Mobile antes de exportar.
Edite tudo antes de exportar
- Mova, redimensione, renomeie e troque a cor de qualquer objeto.
- Adicione ImageLabels com os IDs dos seus assets de imagem do Roblox.
Uma conta pros seus assets de Roblox
- Use o Roblox UI Maker junto com as ferramentas de thumbnail, ícone e GFX.
- Um saldo de créditos só pra todas elas.
Política de créditos justa
- Um layout custa 1 crédito.
- Se a geração falhar, o crédito volta.
Perguntas frequentes
Roblox UI Maker FAQ
Um Roblox UI Maker monta layouts de GUI do Roblox pra você.
- Este transforma um briefing curto em Frames, TextLabels e TextButtons.
- Você edita o layout no navegador.
- O Export Luau recria tudo no Roblox Studio como objetos de verdade.
Descreva a tela no Roblox UI Maker ou comece por um template, edite e exporte em Luau.
- Templates: Reward, Shop, HUD e Inventory.
- Ajuste posição, tamanho, texto, cores e raio dos cantos.
- Rode o script exportado no Command Bar do Studio.
Dá: descreva a tela, edite o layout gerado e rode o Luau exportado no Studio.
- Passo 1: escreva um briefing ou escolha um template no Roblox UI Maker.
- Passo 2: arraste, redimensione e mude o estilo dos objetos.
- Passo 3: exporte em Luau e rode no Command Bar do Studio.
Clique em Export Luau, abra o Roblox Studio, cole o script no Command Bar e aperte Enter.
- Ele monta uma ScreenGui com seus Frames, labels e botões.
- Ela vai pro StarterGui, então aparece pros jogadores no playtest.
- Ligue os TextButtons aos seus LocalScripts; a exportação não traz lógica de jogo.
Objetos de GUI de verdade. O Roblox UI Maker não desenha a foto de um menu.
- Os layouts gerados usam Frames, TextLabels e TextButtons com cores chapadas.
- Você pode adicionar ImageLabels apontando pros IDs dos seus assets de imagem do Roblox.
- Arte de botão e ícones você faz à parte e aplica no Studio.
Sim. Os objetos são posicionados com Scale, então a ScreenGui exportada acompanha o tamanho da tela.
- Confira as prévias Desktop, Tablet e Mobile antes de exportar.
- Adicione UIAspectRatioConstraint no Studio pra os painéis não esticarem.
- Afaste os botões do notch do celular com os insets de área segura.
Não. O Roblox UI Maker faz parte do plano Starter pra cima.
- O Starter custa US$ 9,99 por mês com 40 créditos (cobrança em dólar; o banco pode aplicar IOF).
- Cada geração de layout custa 1 crédito.
- Só comprar pacote de créditos não libera o UI Maker.
Dá. Descreva a loja ou o inventário, ou comece pelo template Shop ou Inventory.
- Peça slots de item, etiquetas de raridade, botões de preço e botão de fechar.
- Ajuste a quantidade de slots e as cores pra economia do seu jogo.
- Exporte pro Studio e programe a lógica de compra você mesmo.
O Figma te dá um arquivo de design; o Roblox UI Maker te dá objetos que o Studio roda.
- Nada de remontar o Figma frame por frame no Studio.
- Os layouts usam cores chapadas, então a arte detalhada continua vindo das suas imagens.
- Ótimo pra rascunhar e testar a estrutura das telas rapidinho.
Dá. Descreva o HUD ou comece pelo template HUD.
- Peça barras de vida e stamina, hotbar, cronômetro ou contadores.
- Deixe o centro da tela livre pro gameplay.
- As barras saem estáticas na exportação; anime com seus próprios scripts.
O layout que você está editando fica salvo só neste navegador.
- Ele continua lá se você recarregar a página no mesmo aparelho.
- Exporte em Luau pra guardar uma cópia ou levar pra outro computador.
- Limpar os dados do navegador apaga o rascunho.
Pode. Freelancers usam o Roblox UI Maker pra rascunhar as telas junto com o cliente.
- Teste vários layouts rapidinho durante uma call.
- Entregue um Luau exportado que o cliente roda no próprio Studio.
- Coloque a arte personalizada depois, como ImageLabels.
Rascunhe as telas do seu jogo antes do próximo update.
Descreva uma loja, um inventário ou um HUD, edite o layout e rode no Roblox Studio como uma ScreenGui de verdade.
Criar UI Roblox