O Editor de Estilo embutido é 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 estilo base.
Criar um conjunto de estilo de design através do Editor de Estilo gera uma BaseStyleSheet dentro de uma pasta Design em ReplicatedStorage. Esta folha base sincroniza valores padrão específicos do motor, como o padrão Color3 de [163, 162, 165], com padrões que vêm de fluxos de inserção no Studio. É altamente recomendável que você não exclua ou tente modificar a folha de estilo base — em vez disso, construa tokens e regras de estilo em torno 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. Os tokens são comparáveis a variáveis CSS.
Embora não sejam obrigatórios para estilização de UI, os tokens são altamente recomendados para design de 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 da esquerda do Editor de Estilo, passe o mouse sobre Tokens, clique no ⊕ e selecione Nova Folha de Estilo de Token.
- 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 tanto para regras quanto para 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 trocar estilos relacionados em sua UI, um conceito abordado 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 de 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 estilização personalizadas.
Uma vez que você tenha uma folha de design, pode configurar um container na tela para usar com o Editor de Estilo, ou um container no jogo 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 sua propriedade StyleSheet definida para a folha de design StyleSheet.
Regras de estilo
As regras de estilo se aplicam a cada instância que corresponde à definição de Selector da regra para corresponder a características como nome da classe, tag da instância e relacionamentos hierárquicos. Em um nível alto, a correspondência e modificação de instâncias através da definição de Selector de uma regra opera através de:
- Seletores de classe do Roblox que visam todas as instâncias de uma determinada classe de UI, por exemplo, Frame, ImageLabel, TextButton, etc.
- Seletores de tag de instância que visam objetos de UI específicos tagged através de CollectionService.
- Modificadores de instância aplicados através de componentes fantasmas UIComponents, como UICorner ou UIStroke.
- Seletores de estado de GuiObject que correspondem a um dos quatro valores do enum 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 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 e tamanho uniformes.
Na coluna da esquerda do Editor de Estilo, selecione Frame na ramificação UI Elements.
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. Observe 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 de UI específicos tagged através de CollectionService. A seguinte configuração de regra estiliza um TextButton marcado como ButtonPrimary com uma cor de fundo personalizada, fonte e tamanho de texto.
Na coluna da 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 tag 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 da 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
Os seletores de modificador de instância aplicam componentes fantasmas UIComponents, 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 da esquerda do Editor de Estilo, selecione TextLabel na ramificação UI Elements.
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.
Uma instância pseudo é necessária para configurar e aplicar cantos arredondados a outros elementos. Para criar uma:
Na coluna da esquerda, passe o mouse sobre TextLabel, clique no botão ⋮ e navegue até Novo ⟩ Instância Pseudo ⟩ UICorner.
Uma nova instância pseudo UICorner aparece sob o elemento TextLabel na coluna da esquerda.
Com a nova instância UICorner selecionada na coluna da 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 anteriormente. Os estilos que você definiu devem se aplicar automaticamente a ele.
Regra de estado
Os seletores de estado de GuiObject correspondem a um dos quatro valores do enum 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 da esquerda do Editor de Estilo, selecione ImageButton na ramificação UI Elements.
Clique no botão ⋮ e navegue até Novo ⟩ GuiState ⟩ Hover.
Uma nova instância modificadora Hover aparece sob o elemento ImageButton na coluna da esquerda.
Com a nova modificadora Hover selecionada na coluna da 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.
Insira -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 girar 4 graus no sentido anti-horário.
Consultas de estilo
As consultas de estilo, semelhantes a consultas de contêiner e mídia CSS, permitem que você aplique lógica condicional à sua UI com base no tamanho do contêiner, 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 embutidas
Algumas condições de StyleQuery são muito comuns, como mudar propriedades com base no ViewportDisplaySize. Para simplificar isso, o Editor de Estilo inclui consultas embutidas que permitem criar 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 embutidas para um TextLabel para lidar com tamanhos de viewport Small, Medium e Large.
Na coluna da 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 específica Text que deve ser exibida quando essa consulta estiver ativa:
Para verificar as consultas, use o Emulador de Dispositivos para testar como a UI responde a diferentes resoluções em três dispositivos distintos:
Altere o Dispositivo no Emulador de Dispositivos 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 adapta ao seu contêiner. A seguinte configuração configura um TextLabel para mudar automaticamente sua aparência apenas quando se expande para uma largura de 400 pixels ou mais.
Na coluna da 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:
- ::StyleQuery regra de instância pseudo onde você define as Condições.
- @StyleQuery regra onde você define as Propriedades a serem aplicadas quando essas 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 defina as propriedades que devem ser aplicadas 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 for 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 embutidas do Studio para testes mais precisos:
- Use o Emulador de Dispositivos 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 a troca de estilos quando um gamepad é detectado.
Transições de estilo
As transições de estilo, comparáveis a transições CSS, permitem que você faça tween de valores de propriedades ao longo de uma duração definida.
Padrão
Para fazer tween de 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 definida para uma propriedade específica.
Selecione TextButton na ramificação UI Elements 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 anteriormente. Quando você passar o mouse sobre o botão na visualização, ele deve gradualmente clarear e girar 5 graus no sentido anti-horário.
Vinculado a token
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 transitar todos os TextButtons para/de -5 graus de rotação e uma cor de fundo mais clara.
Se você ainda não o fez, crie uma folha de estilo de token chamada TokenSheet.
Com a nova folha de token selecionada, crie dois novos tokens clicando em Adicionar um Token… no painel principal.
Nome do 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
Selecione TextButton na ramificação UI Elements 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 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 de 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 anteriormente. Quando você passar o mouse sobre o botão na visualização, ele deve gradualmente clarear e girar 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ê é livre para organizar temas em pastas como "cores" ou "fontes", se desejar.
Crie uma nova pasta de tema:
- Na coluna da esquerda do Editor de Estilo, passe o mouse sobre Themes, 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 de 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 da 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 de tema.
- Clique no $ que aparece no campo de valor e selecione o token de estilo associado.
Na coluna da esquerda do Editor de Estilo, selecione TextButton na ramificação UI Elements.
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 na sobreposição para saber que o token está vindo do tema e não da folha de token 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, você pode duplicá-lo e mudar vários tokens para definir um estilo de tema único.
Na coluna da 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 através de um script, conforme descrito em SetDerives().
Na coluna da esquerda do Editor de Estilo, selecione a pasta Geral na ramificação Themes.
No painel principal, troque entre os temas usando os botões de opção.
