O Editor de Estilo integrado é uma ferramenta abrangente que permite criar, gerenciar e aplicar estilos de UI para jogos Roblox através de uma combinação de tokens, folhas de design, regras de estilo, e temas.
Acesse o Editor de Estilo através da aba UI.
Uma vez aberto, clique no botão Criar Design para gerar um conjunto de estilos base.
Criar um conjunto de estilos de design através do Editor de Estilo gera um BaseStyleSheet dentro de uma pasta Design em ReplicatedStorage. Esta folha base sincroniza valores padrão específicos do motor, como o valor padrão de Color3 de [163, 162, 165], com valores padrão que vêm dos fluxos de inserção no Studio. É altamente recomendado que você não exclua ou tente modificar a folha de estilo base — em vez disso, construa tokens e regras de estilo ao redor de uma folha de design para corresponder aos seus objetivos de UI.
Além disso, uma folha StyleSheet é gerada na pasta Design, que contém um StyleDerive para a folha de estilo base. Se você optar por remover esse StyleDerive, valores não estilizados para GuiObjects podem se tornar valores inesperados, por exemplo um padrão Size de 0, 0, 0, 0.
Tokens de Estilo
Os tokens de estilo, definidos através de atributos de um StyleSheet de token, representam variáveis de propriedades de UI que podem ser usadas em estilos e componentes; por exemplo, pode haver uma cor comum para um Frame.BackgroundColor3, TextLabel.TextColor3 e UIStroke.Color. Tokens são comparáveis às variáveis CSS.
Embora não sejam obrigatórios para estilização de UI, os tokens são altamente recomendados para design UI extensível e atualizações de estilo ao longo do tempo. Você deve começar criando os seguintes tokens para entender como eles se conectam a outros aspectos da estilização universal.
Crie uma nova folha de estilo de token:
- Na coluna esquerda do Editor de Estilo, passe o mouse sobre Tokens, clique no ⊕ e selecione Nova Folha de Tokens.
- Renomeie a nova folha para TokenSheet.
Com a nova folha de token selecionada, crie vários tokens clicando em Adicionar um Token… no painel principal. Esses tokens serão usados ao longo deste guia para regras e temas.
Nome do 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 
Folhas de Design
Uma folha de estilo de design agrega regras de estilo e pode ser vinculada a árvores de DataModel para aplicar propriedades de estilo a instâncias de UI. Apenas uma StyleSheet pode se aplicar a uma árvore dada, embora você possa usar temas para alternar estilos relacionados em sua UI, um conceito coberto mais adiante neste guia.
Uma folha de design pré-populada chamada StyleSheet é criada através do botão Criar Design. Ela contém regras de classe para objetos UI comuns como Frame e TextLabel. Ela também contém duas instâncias de StyleDerive que derivam (herdam) tokens e estilos da folha de estilo base para uso em suas configurações de estilo personalizadas.
Uma vez que você tem uma folha de design, você pode configurar um container na tela de teste para usar com o Editor de Estilo, ou um container na experiência se desejar.
Passe o mouse sobre StarterGui no Explorer e insira um ScreenGui.
Confirme que uma nova instância de StyleLink aparece sob o ScreenGui com a propriedade StyleSheet configurada para a folha de design StyleSheet.
Regras de Estilo
As regras de estilo se aplicam a cada instância que corresponder à definição Selector da regra para combinar características como nome de classe, tag da instância e relacionamentos hierárquicos. Em um nível alto, a correspondência e modificação da instância via a definição Selector da regra ocorre através de:
- Seletores de classe do Roblox que visam todas as instâncias de uma determinada classe de UI, como Frame, ImageLabel, TextButton, etc.
- Seletores de tag de instância que visam objetos UI específicos tagados através de CollectionService.
- Seletores de estado de GuiObject que correspondem a um dos quatro valores de enumeração Enum.GuiState como Hover.
- Seleção de nome de instância de acordo com o valor do Instance.Name do objeto de UI.
Regra de Classe
Um seletor de classe de estilo class visa todas as instâncias de uma determinada classe de UI. A seguinte configuração de regra estiliza todos os Frames com uma cor de fundo uniforme e tamanho.
Na coluna esquerda do Editor de Estilo, selecione Frame na ramificação Elementos de UI.
Vincule dois tokens de estilo criados anteriormente a duas propriedades de Frame:
Propriedade Token de Estilo BackgroundColor3 $Magenta Size $SquareL - Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade necessária. Lembre-se de que você pode digitar palavras-chave para encontrar propriedades mais rapidamente no menu suspenso.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Vincular Token.
- Clique no $ que aparece no campo de valor e selecione o token associado apropriado.
Insira um novo Frame no ScreenGui que você criou e vinculou anteriormente. Os estilos que você definiu devem se aplicar automaticamente a ele.
Regra de Tag
Os seletores de tag de instância visam objetos UI específicos tagados através de CollectionService. A seguinte configuração de regra estiliza um TextButton tagado como ButtonPrimary com uma cor de fundo personalizada, fonte e tamanho de texto.
Na coluna esquerda do Editor de Estilo, passe o mouse sobre a folha StyleSheet, clique no botão ⋮ e navegue até Novo ⟩ Tag.
Renomeie a nova regra de tag para .ButtonPrimary (note o . inicial).
Vincule três tokens de estilo criados anteriormente a três propriedades de TextButton:
Propriedade Token de Estilo BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade necessária. Lembre-se de que você pode digitar palavras-chave para encontrar propriedades mais rapidamente no menu suspenso.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Vincular Token.
- Clique no $ que aparece no campo de valor e selecione o token associado apropriado.
Insira um novo TextButton no ScreenGui que você criou e vinculou anteriormente e tagueie como ButtonPrimary. Um atalho conveniente é o seguinte:
- Certifique-se de que o novo TextButton esteja selecionado no Explorer.
- Com a regra de tag .ButtonPrimary selecionada na coluna esquerda do Editor de Estilo, clique em Aplicar Tag no painel principal. Os estilos que você definiu devem se aplicar automaticamente ao botão.
Modificador de UI
Seletores de modificador de instância aplicam UIComponents fantasma, como UICorner ou UIStroke para estilizar ainda mais um objeto. A seguinte configuração de regra estiliza um TextLabel com um tamanho de texto personalizado e cantos arredondados.
Na coluna esquerda do Editor de Estilo, selecione TextLabel na ramificação Elementos de UI.
Vincule um token de estilo criado anteriormente à propriedade TextSize:
- Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade TextSize. Lembre-se de que você pode digitar palavras-chave para encontrar propriedades mais rapidamente no menu suspenso.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Vincular Token.
- Clique no $ que aparece no campo de valor e selecione o token $Text32.
Um pseudo objeto é necessário para configurar e aplicar cantos arredondados a outros elementos. Para criar um:
Na coluna esquerda, passe o mouse sobre TextLabel, clique no botão ⋮ e navegue até Novo ⟩ Pseudo Objeto ⟩ UICorner.
Um novo UICorner pseudo objeto aparece sob o elemento TextLabel na coluna esquerda.
Com a nova instância UICorner selecionada na coluna esquerda, vincule um token de estilo à propriedade CornerRadius:
- Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade CornerRadius.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Vincular Token.
- Clique no $ que aparece no campo de valor e selecione o token $Rad20.
Insira um novo TextLabel no ScreenGui que você criou e vinculou. Os estilos que você definiu devem se aplicar automaticamente a ele.
Regra de Estado
Os seletores de estado GuiObject correspondem a um dos quatro valores da enumeração GuiState, como Hover, permitindo que você configure automaticamente mudanças de estilo para estados interativos. A seguinte configuração de regra cria um estado de hover de rotação de -4 graus para todos os ImageButtons.
Na coluna esquerda do Editor de Estilo, selecione ImageButton na ramificação Elementos de UI.
Clique no botão ⋮ e navegue até Novo ⟩ GuiState ⟩ Hover.
Uma nova instância de modificador Hover aparece sob o elemento ImageButton na coluna esquerda.
Com o novo modificador Hover selecionado na coluna esquerda, clique em Adicionar uma Propriedade… no painel principal e selecione Rotation. Lembre-se de que você pode digitar palavras-chave para encontrar propriedades mais rapidamente no menu suspenso.
Digite -4 no campo de valor da propriedade.
Insira um novo ImageButton no ScreenGui que você criou e vinculou anteriormente. Quando você passar o mouse sobre o botão na visualização, ele deve rotacionar 4 graus no sentido anti-horário.
Consultas de Estilo
As consultas de estilo, semelhantes a consultas de container e mídia CSS, permitem que você aplique lógica condicional à sua UI com base no tamanho do container, tipo de entrada ou outros fatores. O Editor de Estilo fornece um fluxo de trabalho simplificado para criar tanto a lógica da consulta (condições) quanto os estilos resultantes como um conjunto unificado.
Consultas Integradas
Algumas condições StyleQuery são muito comuns, como mudar propriedades com base no ViewportDisplaySize. Para simplificar isso, o Editor de Estilo inclui consultas integradas que permitem que você crie regras condicionais sem precisar de uma instância pseudo ou real de um StyleQuery; em vez disso, você simplesmente usa uma regra de consulta com um seletor pré-definido como ViewportDisplaySizeSmall.
Os seguintes passos demonstram como gerar consultas integradas para um TextLabel para lidar com os tamanhos de viewport Small, Medium, e Large.
Na coluna esquerda do Editor de Estilo, passe o mouse sobre TextLabel, clique no botão ⋮ e navegue até Novo ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
Isso cria uma pasta Queries sob a regra TextLabel contendo três regras de consulta:
- @ViewportDisplaySizeLarge — Defina propriedades que se aplicam quando a viewport é Large.
- @ViewportDisplaySizeMedium — Defina propriedades que se aplicam quando a viewport é Medium.
- @ViewportDisplaySizeSmall — Defina propriedades que se aplicam quando a viewport é Small.
Clique em Adicionar uma Propriedade… sob cada regra de consulta e defina a string Text específica que deve ser exibida quando aquela consulta estiver ativa:
Para verificar as consultas, use o Emulador de Dispositivo para testar como a UI responde a diferentes resoluções em três dispositivos distintos:
Mude o Dispositivo no Emulador de Dispositivo para ver o texto mudar em tempo real.
Consulta Personalizada
Você pode adicionar uma consulta de estilo a qualquer regra existente para criar uma UI responsiva que se adapte ao seu container. A seguinte configuração configura um TextLabel para mudar automaticamente sua aparência apenas quando se expandir para uma largura de 400 pixels ou mais.
Na coluna esquerda do Editor de Estilo, passe o mouse sobre TextLabel, clique no botão ⋮ e navegue até Novo ⟩ StyleQuery ⟩ Custom.
Esta ação cria uma pasta Queries sob a regra TextLabel contendo dois itens vinculados:
- Regra de pseudo-instância ::StyleQuery onde você define as Condições.
- Regra @StyleQuery onde você define as Propriedades a serem aplicadas quando aquelas condições forem atendidas.
Selecione a regra pai TextLabel no painel principal e defina as seguintes propriedades padrão:
Propriedade Valor BackgroundColor3 $Magenta Text Texto Padrão Selecione a regra ::StyleQuery no painel principal, clique em Adicionar uma Condição…, e configure o seguinte:
Condição Valor MinSize 400, 0 Veja StyleQuery.IsActive como referência para outras condições disponíveis através da regra ::StyleQuery.
Selecione a regra @StyleQuery no painel principal e configure as propriedades que devem se aplicar quando a consulta estiver ativa:
Propriedade Valor BackgroundColor3 $Gold Text Texto Grande
Para verificar a consulta, você pode redimensionar manualmente um TextLabel na visualização.
Ajuste sua largura para ver a troca de estilo em tempo real.
Enquanto a largura do TextLabel é menor, a condição MinSize não é atendida e o rótulo usa sua cor de fundo e texto padrão.
Embora o redimensionamento manual seja uma maneira rápida de verificar a lógica responsiva, você também pode usar as ferramentas de emulação integradas do Studio para testes mais precisos:
- Use o Emulador de Dispositivo para testar como sua UI responde a resoluções de tela específicas e condições de ViewportDisplaySize.
- Use o Emulador de Controlador para verificar a lógica de PreferredInput, como alternar estilos quando um gamepad é detectado.
Transições de Estilo
As transições de estilo, comparáveis às transições CSS, permitem que você interpolar valores de propriedade ao longo de uma determinada duração.
Padrão
Para interpolar muitas propriedades de UI com os mesmos parâmetros, você pode definir uma transição padrão que se aplica a todas as propriedades, a menos que outra transição seja explicitamente configurada para uma propriedade específica.
Selecione TextButton na ramificação Elementos de UI e, em seguida, no painel principal, adicione três novas propriedades com os seguintes valores:
Propriedade Valor AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Passe o mouse sobre a linha pai TextButton, clique no botão ⋮ e navegue até Novo ⟩ GuiState ⟩ Hover.
Para o novo modificador Hover, adicione duas novas propriedades como os alvos para o estado de hover.
Propriedade Valor BackgroundColor3 #33AAFF Rotation -5 
Insira um novo TextButton no ScreenGui que você criou e vinculou. Quando você passar o mouse sobre o botão na visualização, ele deve clarear gradualmente e rotacionar 5 graus no sentido anti-horário.
Vinculado a Tokens
Para reutilizar comportamentos de transição em várias regras, você pode definir tokens representando o tipo de dados TweenInfo. A seguinte configuração de regra cria um estado de hover para alternar todos os TextButtons de -5 graus de rotação e uma cor de fundo mais clara.
Se você ainda não fez isso, crie uma folha de tokens chamada TokenSheet.
Com a nova folha de tokens selecionada, crie dois novos tokens clicando em Adicionar um Token… no painel principal.
Nome do Token Tipo Parâmetros do Tween CubicOut TweenInfo - Duration = 1.25
- EasingStyle = Cubic
- EasingDirection = Out
- Delay = 0
QuadInOut TweenInfo - Duration = 0.5
- EasingStyle = Quad
- EasingDirection = InOut
- Delay = 0
Selecione TextButton na ramificação Elementos de UI e, em seguida, no painel principal, adicione três novas propriedades com os seguintes valores:
Propriedade Valor AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Para cada nova propriedade, exceto para AutoButtonColor, passe o mouse sobre sua linha, clique no botão ⋮ e selecione Inserir ⟩ Transição.
Passe o mouse sobre a nova linha de Transição sob cada propriedade, clique no botão ⋮ e selecione Vincular Token. Em seguida, em vez de inserir um valor estático, clique no $ que aparece no campo de valor e selecione o token de transição apropriado.
Transição da Propriedade Token de Transição BackgroundColor3 $CubicOut Size $QuadInOut 
Passe o mouse sobre a linha pai TextButton, clique no botão ⋮ e navegue até Novo ⟩ GuiState ⟩ Hover.
Para o novo modificador Hover, adicione duas novas propriedades como os alvos para o estado de hover.
Propriedade Valor BackgroundColor3 #33AAFF Rotation -5 Insira um novo TextButton no ScreenGui que você criou e vinculou. Quando você passar o mouse sobre o botão na visualização, ele deve gradualmente clarear e rotacionar 5 graus no sentido anti-horário.
Temas de Estilo
Os temas de estilo consistem em conjuntos de tokens específicos que podem ser trocados, por exemplo, tokens de cor que definem um tema "claro" e "escuro".
Criação de Tema
Para extensibilidade, os temas são organizados em pastas. Embora uma única pasta possa ser suficiente para a maioria dos propósitos, você está livre para organizar temas em pastas como "cores" ou "fontes", se desejar.
Crie uma nova pasta de tema:
- Na coluna esquerda do Editor de Estilo, passe o mouse sobre Temas, clique no ⊕ e selecione Novo Tema.
- Renomeie o novo item Pasta para Geral.
Crie uma nova folha de estilo de tema:
- Passe o mouse sobre a nova pasta Geral, clique no botão ⋮ e selecione Nova Folha de Estilo Tema.
- Renomeie-a para TemaA.
Tokens de Tema
Uma vez que um tema é construído, você pode vincular seus tokens a várias propriedades de objetos de UI, como o BackgroundColor3 de um TextButton. As folhas de tema devem usar um conjunto comum de tokens para funcionar corretamente.
Com TemaA selecionado na coluna esquerda do Editor de Estilo:
Vincule três tokens de estilo criados anteriormente a três novos tokens de tema:
Token de Tema Token de Estilo BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Clique em Adicionar um Token… no painel principal e insira o nome do token do tema.
- Clique no $ que aparece no campo de valor e selecione o token de estilo associado.
Na coluna esquerda do Editor de Estilo, selecione TextButton na ramificação Elementos de UI.
Vincule os tokens do tema a três novas propriedades de TextButton:
Propriedade Token de Tema BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade necessária.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Vincular Token.
- Clique no $ que aparece no campo de valor e selecione o token de tema apropriado.
Ao vincular os tokens do tema, procure por $[Token] em TemaA ao passar o mouse para saber que o token está vindo do tema e não da folha de tokens global (lembre-se de que o tema já deriva os tokens globais).
Duplicação de Tema
Uma vez que você tenha um tema geralmente estabelecido, pode duplicá-lo e alterar vários tokens para definir um estilo de tema único.
Na coluna esquerda do Editor de Estilo, passe o mouse sobre o tema TemaA, clique no botão ⋮ e selecione Duplicar.
Renomeie o tema duplicado para TemaB.
Vincule dois dos tokens do tema a dois tokens de estilo diferentes:
Token de Tema Token de Estilo BackColor $Magenta ButtonTextSize $Text24 - À direita do campo de valor da propriedade, clique no botão ⋮ e selecione Desvincular Token.
- Clique em ⋮ novamente e selecione Vincular Token.
- No campo de valor, clique no $ e selecione o novo token de estilo associado.
Troca de Tema
Uma vez que você tenha vários temas, você pode alternar entre eles através da pasta do tema ou por meio de um script, conforme descrito em SetDerives().
Na coluna esquerda do Editor de Estilo, selecione a pasta Geral na ramificação Temas.
No painel principal, alterne entre os temas usando os botões de opção.
