El Editor de Estilos integrado es una herramienta completa que te permite crear, gestionar y aplicar estilos de UI para juegos de Roblox a través de una combinación de tokens, hojas de diseño, reglas de estilo y temas.
Accede al Editor de Estilos a través de la pestaña UI.
Una vez abierto, haz clic en el botón Crear Diseño para generar un conjunto de estilos base.
Crear un conjunto de estilos de diseño a través del Editor de Estilos genera una BaseStyleSheet dentro de una carpeta Design en ReplicatedStorage. Esta hoja base sincroniza valores predeterminados específicos del motor, como el valor predeterminado de Color3 de [163, 162, 165], con los valores predeterminados que provienen de los flujos de inserción en Studio. Se recomienda encarecidamente que no elimines ni intentes modificar la hoja de estilo base — en su lugar, construye tokens y reglas de estilo alrededor de una hoja de diseño para que coincidan con tus objetivos de UI.
Además, se genera una hoja StyleSheet en la carpeta Design que contiene un StyleDerive a la hoja de estilo base. Si decides eliminar ese StyleDerive, los valores sin estilo para GuiObjects pueden convertirse en valores inesperados, por ejemplo, un Size predeterminado de 0, 0, 0, 0.
Tokens de estilo
Los tokens de estilo, definidos a través de atributos de un StyleSheet de token, representan variables de propiedades de UI que se pueden usar en todos los estilos y componentes; por ejemplo, podría haber un color común para un Frame.BackgroundColor3, TextLabel.TextColor3 y UIStroke.Color. Los tokens son comparables a variables CSS.
Aunque no son obligatorios para el estilo de UI, se recomienda encarecidamente usar tokens para un diseño de UI extensible y actualizaciones de estilo a lo largo del tiempo. Debes comenzar creando los siguientes tokens para entender cómo se relacionan con otros aspectos del estilo universal.
Crea una nueva hoja de estilo de token:
- En la columna izquierda del Editor de Estilos, pasa el cursor sobre Tokens, haz clic en el ⊕, y selecciona Nueva Hoja de Tokens.
- Renombra la nueva hoja a TokenSheet.
Con la nueva hoja de tokens seleccionada, crea varios tokens haciendo clic en Agregar un Token… en el panel principal. Estos tokens se utilizarán a lo largo de esta guía tanto para reglas como para temas.
Nombre del Token Tipo Valor Gold Color3 #ffcc00 Magenta Color3 #ff0099 Orange Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 number 24 Text32 number 32 
Hojas de diseño
Una hoja de estilo de diseño agrega reglas de estilo y puede estar vinculada a árboles de DataModel para aplicar propiedades de estilo a instancias de UI. Solo una StyleSheet puede aplicarse a un árbol dado, aunque puedes usar temas para intercambiar estilos relacionados en tu UI, un concepto que se cubrirá más adelante en esta guía.
Se crea una hoja de diseño pre-poblada llamada StyleSheet a través del botón Crear Diseño. Contiene reglas de clase para objetos de UI comunes como Frame y TextLabel. También contiene dos instancias de StyleDerive que derivan (heredan) tokens y estilos de la hoja de estilo base para su uso en tus configuraciones de estilo personalizadas.
Una vez que tengas una hoja de diseño, puedes configurar un contenedor en pantalla de prueba para usar con el Editor de Estilos, o un contenedor en el juego si lo deseas.
Pasa el cursor sobre StarterGui en el Explorador e inserta un ScreenGui.
Confirma que aparece una nueva instancia de StyleLink bajo el ScreenGui con su propiedad StyleSheet configurada a la hoja de diseño StyleSheet.
Si no se crea el StyleLink, puedes crear uno rápidamente seleccionando el ScreenGui en el Explorador así como la hoja de diseño StyleSheet en la columna izquierda del Editor de Estilos. Luego, haz clic en el botón Insertar StyleLink en la sección superior derecha del panel principal del editor.
Reglas de estilo
Las reglas de estilo se aplican a cada instancia que coincide con la definición de Selector de la regla para coincidir con características como el nombre de clase, la etiqueta de instancia y las relaciones jerárquicas. A un alto nivel, la coincidencia y modificación de instancias a través de la definición de Selector de una regla opera a través de:
- Selectores de clase de Roblox que apuntan a todas las instancias de una clase de UI dada, por ejemplo, Frame, ImageLabel, TextButton, etc.
- Selectores de etiquetas de instancia (tag) que apuntan a objetos de UI específicos etiquetados a través de CollectionService.
- Modificadores de instancia (modifiers) aplicados a través de componentes fantasma UIComponents como UICorner o UIStroke.
- Selectores de estado de GuiObject que corresponden a uno de los cuatro valores de enumeración Enum.GuiState como Hover.
- Selección de nombre de instancia de acuerdo con el valor del Instance.Name del objeto de UI.
Regla de clase
Un selector de clase de estilo apunta a todas las instancias de una clase de UI dada. La siguiente configuración de regla estiliza todos los Frames con un color de fondo y tamaño uniformes.
En la columna izquierda del Editor de Estilos, selecciona Frame en la rama UI Elements.
Vincula dos tokens de estilo creados previamente a dos propiedades de Frame:
Propiedad Token de Estilo BackgroundColor3 $Magenta Size $SquareL - Haz clic en Agregar una Propiedad… en el panel principal y selecciona la propiedad necesaria. Ten en cuenta que puedes escribir palabras clave para encontrar propiedades más rápidamente en el menú desplegable.
- En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
- Haz clic en el $ que aparece en el campo de valor y selecciona el token asociado adecuado.
Regla de etiqueta
Los selectores de etiqueta de instancia apuntan a objetos de UI específicos etiquetados a través de CollectionService. La siguiente configuración de regla estiliza un TextButton etiquetado como ButtonPrimary con un color de fondo personalizado, fuente y tamaño de texto.
En la columna izquierda del Editor de Estilos, pasa el cursor sobre la hoja StyleSheet, haz clic en el botón ⋮ y navega a Nuevo ⟩ Etiqueta.
Renombra la nueva regla de etiqueta a .ButtonPrimary (nota el . inicial).
Vincula tres tokens de estilo creados previamente a tres propiedades de TextButton:
Propiedad Token de Estilo BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Haz clic en Agregar una Propiedad… en el panel principal y selecciona la propiedad necesaria. Recuerda que puedes escribir palabras clave para encontrar propiedades más rápidamente en el menú desplegable.
- En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
- Haz clic en el $ que aparece en el campo de valor y selecciona el token asociado adecuado.
Inserta un nuevo TextButton en el ScreenGui que creaste y vinculaste previamente y etiquétalo como ButtonPrimary. Un atajo conveniente es el siguiente:
- Asegúrate de que el nuevo TextButton esté seleccionado en el Explorador.
- Con la regla de etiqueta .ButtonPrimary seleccionada en la columna izquierda del Editor de Estilos, haz clic en Aplicar Etiqueta en el panel principal. Los estilos que definiste deberían aplicarse automáticamente al botón.
Modificador de UI
Los selectores de modificador de instancia aplican componentes fantasma UIComponents como UICorner o UIStroke para estilizar aún más un objeto. La siguiente configuración de regla estiliza un TextLabel con un tamaño de texto personalizado y esquinas redondeadas.
En la columna izquierda del Editor de Estilos, selecciona TextLabel en la rama UI Elements.
Vincula un token de estilo creado previamente a la propiedad TextSize:
- Haz clic en Agregar una Propiedad… en el panel principal y selecciona la propiedad TextSize. Recuerda que puedes escribir palabras clave para encontrar propiedades más rápidamente en el menú desplegable.
- En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
- Haz clic en el $ que aparece en el campo de valor y selecciona el token $Text32.
Se requiere una instancia pseudo para configurar y aplicar esquinas redondeadas a otros elementos. Para crear una:
En la columna izquierda, pasa el cursor sobre TextLabel, haz clic en el botón ⋮ y navega a Nuevo ⟩ Instancia Pseudo ⟩ UICorner.
Una nueva instancia pseudo UICorner aparece bajo el elemento TextLabel en la columna izquierda.
Con la nueva instancia UICorner seleccionada en la columna izquierda, vincula un token de estilo creado previamente a la propiedad CornerRadius:
- Haz clic en Agregar una Propiedad… en el panel principal y selecciona la propiedad CornerRadius.
- En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
- Haz clic en el $ que aparece en el campo de valor y selecciona el token $Rad20.
Regla de estado
Los selectores de estado de GuiObject corresponden a uno de los cuatro valores de enumeración GuiState como Hover, lo que te permite configurar automáticamente cambios de estilo para estados interactivos. La siguiente configuración de regla crea un estado de hover de -4 grados de rotación para todos los ImageButtons.
En la columna izquierda del Editor de Estilos, selecciona ImageButton en la rama UI Elements.
Haz clic en el botón ⋮ y navega a Nuevo ⟩ GuiState ⟩ Hover.
Una nueva instancia modificadora Hover aparece bajo el elemento ImageButton en la columna izquierda.
Con el nuevo modificador Hover seleccionado en la columna izquierda, haz clic en Agregar una Propiedad… en el panel principal y selecciona Rotation. Recuerda que puedes escribir palabras clave para encontrar propiedades más rápidamente en el menú desplegable.
Ingresa -4 en el campo de valor de la propiedad.
Inserta un nuevo ImageButton en el ScreenGui que creaste y vinculaste previamente. Cuando pases el cursor sobre el botón en el viewport, debería rotar 4 grados en sentido antihorario.
Consultas de estilo
Las consultas de estilo, similares a consultas de contenedor y medios CSS, te permiten aplicar lógica condicional a tu UI en función del tamaño del contenedor, tipo de entrada u otros factores. El Editor de Estilos proporciona un flujo de trabajo simplificado para crear tanto la lógica de consulta (condiciones) como los estilos resultantes como un conjunto unificado.
Consultas integradas
Algunas condiciones de StyleQuery son muy comunes, como cambiar propiedades en función del ViewportDisplaySize. Para simplificar esto, el Editor de Estilos incluye consultas integradas que te permiten crear reglas condicionales sin necesidad de una instancia pseudo o real de un StyleQuery; en su lugar, simplemente usas una regla de consulta con un selector predefinido como ViewportDisplaySizeSmall.
Los siguientes pasos demuestran cómo generar consultas integradas para un TextLabel para manejar los tamaños de viewport Small, Medium y Large.
En la columna izquierda del Editor de Estilos, pasa el cursor sobre TextLabel, haz clic en el botón ⋮ y navega a Nuevo ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
Esto crea una carpeta Queries bajo la regla TextLabel que contiene tres reglas de consulta:
- @ViewportDisplaySizeLarge — Define propiedades que se aplican cuando el viewport es Large.
- @ViewportDisplaySizeMedium — Define propiedades que se aplican cuando el viewport es Medium.
- @ViewportDisplaySizeSmall — Define propiedades que se aplican cuando el viewport es Small.
Haz clic en Agregar una Propiedad… bajo cada regla de consulta y establece la cadena específica Text que debería mostrarse cuando esa consulta esté activa:
Para verificar las consultas, utiliza el Emulador de Dispositivos para probar cómo responde la UI a diferentes resoluciones en tres dispositivos distintos:
Cambia el Dispositivo en el Emulador de Dispositivos para ver el texto cambiar en tiempo real.
Consulta personalizada
Puedes agregar una consulta de estilo a cualquier regla existente para crear una UI receptiva que se adapte a su contenedor. La siguiente configuración configura un TextLabel para cambiar automáticamente su apariencia solo cuando se expande a un ancho de 400 píxeles o más.
En la columna izquierda del Editor de Estilos, pasa el cursor sobre TextLabel, haz clic en el botón ⋮ y navega a Nuevo ⟩ StyleQuery ⟩ Custom.
Esta acción crea una carpeta Queries bajo la regla TextLabel que contiene dos elementos vinculados:
- ::StyleQuery regla de instancia pseudo donde defines las Condiciones.
- @StyleQuery regla donde defines las Propiedades que se aplicarán cuando se cumplan esas condiciones.
Selecciona la regla TextLabel principal en el panel principal y define las siguientes propiedades predeterminadas:
Propiedad Valor BackgroundColor3 $Magenta Text Texto Predeterminado Selecciona la regla ::StyleQuery en el panel principal, haz clic en Agregar una Condición…, y configura lo siguiente:
Condición Valor MinSize 400, 0 Consulta StyleQuery.IsActive como referencia para otras condiciones disponibles a través de la regla ::StyleQuery.
Selecciona la regla @StyleQuery en el panel principal y establece las propiedades que deberían aplicarse cuando la consulta esté activa:
Propiedad Valor BackgroundColor3 $Gold Text Texto Grande
Para verificar la consulta, puedes cambiar manualmente el tamaño de un TextLabel en el viewport.
Ajusta su ancho para ver el cambio de estilo en tiempo real.
Mientras el ancho del TextLabel sea más pequeño, la condición MinSize no se cumple y la etiqueta utiliza su color de fondo y texto predeterminados.
Si bien el cambio de tamaño manual es una forma rápida de verificar la lógica receptiva, también puedes usar las herramientas de emulación integradas de Studio para pruebas más precisas:
- Utiliza el Emulador de Dispositivos para probar cómo responde tu UI a resoluciones de pantalla específicas y condiciones de ViewportDisplaySize.
- Utiliza el Emulador de Controladores para verificar la lógica de PreferredInput, como cambiar estilos cuando se detecta un gamepad.
Transiciones de estilo
Las transiciones de estilo, comparables a transiciones CSS, te permiten interpolar valores de propiedades durante una duración establecida.
Predeterminado
Para interpolar muchas propiedades de UI con los mismos parámetros, puedes establecer una transición predeterminada que se aplique a todas las propiedades a menos que se establezca explícitamente otra transición para una propiedad específica.
Selecciona TextButton en la rama UI Elements y luego, en el panel principal, agrega tres nuevas propiedades con los siguientes valores:
Propiedad Valor AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Pasa el cursor sobre la fila principal TextButton, haz clic en el botón ⋮ y navega a Insertar ⟩ Transición.
Una transición predeterminada de 1, Quad, Out, 0 se inserta directamente debajo de la regla TextButton, indicando una transición de 1 segundo, estilo de suavizado Quad, dirección de suavizado Out, y sin retraso.
Pasa el cursor sobre la fila principal TextButton, haz clic en el botón ⋮ y navega a Nuevo ⟩ GuiState ⟩ Hover.
Para el nuevo modificador Hover, agrega dos nuevas propiedades como los objetivos para el estado de hover.
Propiedad Valor BackgroundColor3 #33AAFF Rotation -5 
Inserta un nuevo TextButton en el ScreenGui que creaste y vinculaste previamente. Cuando pases el cursor sobre el botón en el viewport, debería iluminarse gradualmente y rotar 5 grados en sentido antihorario.
Vinculado a tokens
Para reutilizar comportamientos de transición en múltiples reglas, puedes definir tokens que representen el tipo de datos TweenInfo. La siguiente configuración de regla crea un estado de hover para transitar todos los TextButtons hacia/desde -5 grados de rotación y un color de fondo más claro.
Si aún no lo has hecho, crea una hoja de estilo de tokens llamada TokenSheet.
Con la nueva hoja de tokens seleccionada, crea dos nuevos tokens haciendo clic en Agregar un Token… en el panel principal.
Nombre del Token Tipo Parámetros de Tween CubicOut TweenInfo - Duration = 1.25
- EasingStyle = Cubic
- EasingDirection = Out
- Delay = 0
QuadInOut TweenInfo - Duration = 0.5
- EasingStyle = Quad
- EasingDirection = InOut
- Delay = 0
Selecciona TextButton en la rama UI Elements y luego, en el panel principal, agrega tres nuevas propiedades con los siguientes valores:
Propiedad Valor AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Para cada nueva propiedad excepto AutoButtonColor, pasa el cursor sobre su fila, haz clic en el botón ⋮ y selecciona Insertar ⟩ Transición.
Pasa el cursor sobre la nueva fila de Transición bajo cada propiedad, haz clic en el botón ⋮ y selecciona Vincular Token. Luego, en lugar de ingresar un valor estático, haz clic en el $ que aparece en el campo de valor y selecciona el token de transición adecuado.
Transición de Propiedad Token de Transición BackgroundColor3 $CubicOut Size $QuadInOut 
Pasa el cursor sobre la fila principal TextButton, haz clic en el botón ⋮ y navega a Nuevo ⟩ GuiState ⟩ Hover.
Para el nuevo modificador Hover, agrega dos nuevas propiedades como los objetivos para el estado de hover.
Propiedad Valor BackgroundColor3 #33AAFF Rotation -5 Inserta un nuevo TextButton en el ScreenGui que creaste y vinculaste previamente. Cuando pases el cursor sobre el botón en el viewport, debería iluminarse gradualmente y rotar 5 grados en sentido antihorario.
Temas de estilo
Los temas de estilo consisten en conjuntos de tokens específicos que se pueden intercambiar, por ejemplo, tokens de color que definen un tema "claro" y "oscuro".
Creación de temas
Para la extensibilidad, los temas se organizan en carpetas. Si bien una sola carpeta puede ser suficiente para la mayoría de los propósitos, eres libre de organizar los temas en carpetas como "colores" o "fuentes" si lo deseas.
Crea una nueva carpeta de tema:
- En la columna izquierda del Editor de Estilos, pasa el cursor sobre Themes, haz clic en el ⊕, y selecciona Nuevo Tema.
- Renombra el nuevo elemento Folder a General.
Crea una nueva hoja de estilo de tema:
- Pasa el cursor sobre la nueva carpeta General, haz clic en el botón ⋮ y selecciona Nueva Hoja de Tema.
- Renómbrala a ThemeA.
Tokens de tema
Una vez que se construye un tema, puedes vincular sus tokens a varias propiedades de objetos de UI, como el BackgroundColor3 de un TextButton. Las hojas de tema deben usar un conjunto común de tokens para funcionar correctamente.
Con ThemeA seleccionada en la columna izquierda del Editor de Estilos:
Vincula tres tokens de estilo creados previamente a tres nuevos tokens de tema:
Token de Tema Token de Estilo BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Haz clic en Agregar un Token… en el panel principal e ingresa el nombre del token de tema.
- Haz clic en el $ que aparece en el campo de valor y selecciona el token de estilo asociado.
En la columna izquierda del Editor de Estilos, selecciona TextButton en la rama UI Elements.
Vincula los tokens del tema a tres nuevas propiedades de TextButton:
Propiedad Token de Tema BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Haz clic en Agregar una Propiedad… en el panel principal y selecciona la propiedad necesaria.
- En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
- Haz clic en el $ que aparece en el campo de valor y selecciona el token de tema adecuado.
Al vincular los tokens del tema, busca $[Token] en ThemeA en el hover para saber que el token proviene del tema y no de la hoja de tokens global (recuerda que el tema ya deriva los tokens globales).
Duplicación de temas
Una vez que tengas un tema generalmente establecido, puedes duplicarlo y cambiar varios tokens para definir un estilo de tema único.
En la columna izquierda del Editor de Estilos, pasa el cursor sobre el tema ThemeA, haz clic en el botón ⋮ y selecciona Duplicar.
Renombra el tema duplicado a ThemeB.
Vincula dos de los tokens del tema a dos diferentes tokens de estilo:
Token de Tema Token de Estilo BackColor $Magenta ButtonTextSize $Text24 - A la derecha del campo de valor de la propiedad, haz clic en el botón ⋮ y selecciona Desvincular Token.
- Haz clic en ⋮ nuevamente y selecciona Vincular Token.
- En su campo de valor, haz clic en el $ y selecciona el nuevo token de estilo asociado.
Intercambio de temas
Una vez que tengas múltiples temas, puedes intercambiarlos a través de la carpeta del tema, o a través de un script como se describe en SetDerives().
En la columna izquierda del Editor de Estilos, selecciona la carpeta General en la rama Themes.
En el panel principal, intercambia entre los temas usando los botones de opción.
