Pet Simulator
Devs de simuladores armando tiendas de objetos
“Tienda con etiquetas de rareza y precios en gemas”
Roblox UI Maker: diseña UI para Roblox Studio
Cuéntale qué pantalla necesitas: una tienda, un HUD o un inventario. Te arma una GUI de Roblox editable, la ajustas a tu gusto y la pasas a Studio como objetos reales, no como una imagen.
0 / 1200
Prompt
Ideas
Pantallas para empezar en el Roblox UI Maker
Direcciones de diseño para tiendas, inventarios y HUD. Elige una para cargar su brief; el Roblox UI Maker la arma con Frames, etiquetas y botones que puedes editar.
Lo básico
¿Qué es un Roblox UI Maker?
Qué hace
- El Roblox UI Maker convierte un brief corto en un diseño de GUI de Roblox.
- Obtienes Frames, TextLabels y TextButtons, no una imagen plana.
- Todo sigue siendo editable: posición, tamaño, texto, color y esquinas.
Cómo encaja con tu trabajo en Studio
- Bocetas la pantalla en el navegador antes de abrir Studio.
- Exportas en Luau y lo corres en la Command Bar de Studio.
- La misma ScreenGui aparece en Studio, lista para tus scripts y tu arte.
Quién usa un Roblox UI Maker
- Devs que trabajan solos y prefieren programar a acomodar Frames.
- Equipos que quieren ponerse de acuerdo en la tienda o el HUD antes de pulirlos.
- Creadores que rehacen menús para una actualización o un evento.
Funciones
Cómo hacer una GUI de Roblox que se entienda al instante
01
Del brief a una pantalla bien ordenada
- Di qué pantalla es y qué lleva: slots, precios, temporizadores, botones.
- El Roblox UI Maker acomoda de 6 a 16 objetos con títulos, paneles y acciones.
- Si lo prefieres, empieza desde una plantilla de Reward, Shop, HUD o Inventory.
02
Diseños con Scale para PC, tablet y celular
- Los objetos se colocan en fracciones de la pantalla, como funciona Scale en Roblox.
- Revisa el diseño en las vistas Desktop, Tablet y Mobile.
- La exportación usa UDim2.fromScale, así que se adapta a la pantalla de cada jugador.
03
Exporta objetos de GUI reales a Roblox Studio
- Export Luau arma una ScreenGui con tus Frames, etiquetas y botones.
- Las esquinas redondeadas y los bordes llegan como UICorner y UIStroke.
- Agrega ImageLabels con tus propios IDs de imagen de Roblox.
Ideas
Ideas para el Roblox UI Maker en cualquier género
Briefs que funcionan bien en el Roblox UI Maker. Cada uno se vuelve un diseño editable que puedes cambiar de estilo y exportar.
Aventura RPG
Creadores de RPG que planean la cuadrícula de la mochila
“Cuadrícula de objetos con panel de estadísticas y botón Equipar”
Combate
Equipos de battlegrounds acomodando la barra de habilidades
“Barras de vida y estamina con 6 habilidades”
Obby
Creadores solos haciendo el HUD de etapas
“Contador de etapa, temporizador y botón Saltar etapa”
Tycoon
Constructores de tycoon que ordenan las mejoras
“Contador de dinero con tarjetas de mejora y botones de precio”
Configuración
Desarrolladores que ponen en orden el menú de ajustes
“Ventana de ajustes con interruptores y botón Guardar”
Cómo funciona
Cómo hacer una GUI de Roblox en tres pasos rápidos
- 1
Describe la pantalla o elige una plantilla
- Escribe qué muestra la pantalla: slots, precios, barras, botones, colores.
- O empieza con la plantilla Reward, Shop, HUD o Inventory.
- Cada generación cuesta 1 crédito.
- 2
Edita el diseño en el navegador
- Arrastra y cambia el tamaño de los objetos, el texto, el color de relleno y el radio de las esquinas.
- Agrega Frames, TextLabels, TextButtons o ImageLabels.
- Revisa las vistas Desktop, Tablet y Mobile.
- 3
Exporta en Luau y córrelo en Studio
- Export Luau descarga un script, o lo copias desde la vista de código.
- Pégalo en la Command Bar de Roblox Studio y ejecútalo.
- La ScreenGui queda en StarterGui; conecta tus botones a tus scripts.
Especificaciones
Medidas de GUI de Roblox y estándares de interfaz
Lo que recomienda el Roblox Creator Hub para pantallas como las que exporta el Roblox UI Maker.
Fuentes: Roblox Creator Hub: UI · On-Screen Containers · Position and Size · UI Size Modifiers
Comparación
Roblox UI Maker frente a Studio y freelancers
Por qué elegirlo
Por qué los creadores eligen este Roblox UI Maker
Objetos de GUI reales, no una imagen
- El Roblox UI Maker te da Frames, TextLabels y TextButtons.
- Nada de recortar un mockup ni volver a acomodarlo a mano.
Adiós a la ScreenGui en blanco
- Sacas un primer diseño de una frase o de una plantilla.
- Tu tiempo en Studio se va a scripts y arte.
Posiciones con Scale desde el inicio
- Los objetos se colocan en fracciones de pantalla, como Scale en Roblox.
- Revisa Desktop, Tablet y Mobile antes de exportar.
Edita todo antes de exportar
- Mueve, cambia de tamaño, renombra y recolorea cualquier objeto.
- Agrega ImageLabels con tus propios IDs de imagen de Roblox.
Una cuenta para todos tus assets de Roblox
- Usa el Roblox UI Maker junto a las herramientas de miniaturas, íconos y GFX.
- Un solo saldo de créditos sirve para todas.
Créditos sin sorpresas
- Un diseño cuesta 1 crédito.
- Si una generación falla, se te devuelve el crédito.
Preguntas frecuentes
Roblox UI Maker preguntas frecuentes
Es una herramienta que arma diseños de GUI de Roblox por ti.
- Esta convierte un brief corto en Frames, TextLabels y TextButtons.
- Editas el diseño en el navegador.
- Export Luau lo vuelve a crear en Roblox Studio como objetos reales.
Describe la pantalla en el Roblox UI Maker o parte de una plantilla, edítala y exporta en Luau.
- Plantillas: Reward, Shop, HUD e Inventory.
- Ajusta posición, tamaño, texto, colores y radio de las esquinas.
- Corre el script exportado en la Command Bar de Studio.
Describe la pantalla, edita el diseño generado y corre el Luau exportado en Studio.
- Paso 1: escribe un brief o elige una plantilla en el Roblox UI Maker.
- Paso 2: arrastra, cambia el tamaño y el estilo de los objetos.
- Paso 3: exporta en Luau y córrelo en la Command Bar de Studio.
Haz clic en Export Luau, abre Roblox Studio, pega el script en la Command Bar y presiona Enter.
- Se arma una ScreenGui con tus Frames, etiquetas y botones.
- Queda en StarterGui, así que la ves al hacer una prueba de juego.
- Conecta los TextButtons a tus propios LocalScripts; la exportación no trae lógica de juego.
Objetos de GUI reales. El Roblox UI Maker no dibuja una imagen de un menú.
- Los diseños usan Frames, TextLabels y TextButtons con colores planos.
- Puedes agregar ImageLabels que apunten a tus propios IDs de imagen de Roblox.
- El arte de botones e íconos lo haces aparte y lo asignas en Studio.
Sí. Los objetos se colocan con Scale, así que la ScreenGui exportada cambia de tamaño con la pantalla.
- Revisa las vistas Desktop, Tablet y Mobile antes de exportar.
- Agrega UIAspectRatioConstraint en Studio para que los paneles no se estiren.
- Aleja los botones del notch del celular con márgenes de zona segura.
No. El Roblox UI Maker viene con el plan Starter o superior.
- Starter cuesta US$9.99 al mes con 40 créditos.
- Cada generación de diseño cuesta 1 crédito.
- Comprar solo paquetes de créditos no desbloquea el UI Maker.
Sí. Describe la tienda o el inventario, o empieza con la plantilla Shop o Inventory.
- Pide slots de objetos, etiquetas de rareza, botones de precio y un botón de cerrar.
- Ajusta la cantidad de slots y los colores a la economía de tu juego.
- Exporta a Studio y programa tú la lógica de compra.
Figma te da un archivo de diseño; el Roblox UI Maker te da objetos que Studio puede correr.
- No tienes que rehacer en Studio un diseño de Figma Frame por Frame.
- Los diseños usan colores planos, así que el arte detallado sigue saliendo de tus imágenes.
- Sirve para bocetar la estructura de una pantalla y probar cambios rápido.
Sí. Describe el HUD o empieza con la plantilla HUD.
- Pide barras de vida y estamina, barras de habilidades, temporizadores o contadores.
- Deja libre el centro de la pantalla para el gameplay.
- Las barras salen estáticas en la exportación; anímalas con tus propios scripts.
El diseño que estás editando se guarda solo en este navegador.
- Sigue ahí si recargas la página en el mismo dispositivo.
- Exporta en Luau para guardar una copia o pasarlo a otra computadora.
- Si borras los datos del navegador, se borra el borrador.
Sí. Hay freelancers que usan el Roblox UI Maker para bocetar pantallas con sus clientes.
- Prueba varios diseños rápido durante una llamada.
- Entrega una exportación en Luau que el cliente puede correr en su propio Studio.
- Agrega el arte personalizado después como ImageLabels.
Boceta las pantallas de tu juego antes de la próxima actualización.
Describe una tienda, un inventario o un HUD, edita el diseño y córrelo en Roblox Studio como una ScreenGui real.
Crear mi UI de Roblox