O Editor de Estilo Integrado é uma ferramenta abrangente que permite criar, gerenciar e aplicar estilos de UI para experiências do 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 (se ele não for visível, acesse-o a partir da aba Início).

Uma vez aberto, clique no botão Criar Design para gerar um conjunto de estilo de base.

Tokens de estilo
Estilo tokens , definidos através de atributos de um token StyleSheet , representam variáveis de propriedade da interface 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 a variáveis CSS.
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 Novo Estilo de Token .
- Renomeie a nova folha para TokenSheet.
Com a nova folha de tokens selecionada, crie vários tokens clicando em Adicionar um Token… no painel principal.Esses tokens serão usados ao longo deste guia para ambas as 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 número 24 Text32 número 32
Folhas de design
Uma folha de estilo de design agrega regras de estilo e pode ser vinculada a DataModel para aplicar propriedades de estilo às instâncias da interface do usuário.Apenas um StyleSheet pode se aplicar a uma dada árvore, embora você possa usar temas para trocar estilos relacionados em toda a sua interface, um conceito abordado mais tarde neste guia.
Uma folha de design pré-populada chamada Folha de Estilo é criada através do botão Criar Design .Ela contém regras de classe para objetos de UI comuns como Frame e TextLabel.Ele também contém duas instâncias StyleDerive que derivam (herdam) tokens e estilos da folha de estilo base para uso em suas configurações de estilo personalizado.

Uma vez que você tenha uma folha de design, você pode configurar um teste em um contêiner na tela para usar com o Editor de Estilo, ou um em um contêiner na experiência se desejar.
Passe o mouse sobre StarterGui na Explorer e insira um ScreenGui.
Confirme que uma nova instância StyleLink aparece sob o ScreenGui com seu conjunto de propriedades StyleSheet definido para a folha de estilo StyleSheet .
Regras estilísticas
Regras de estilo se aplicam a cada instância que corresponde à definição da regra para corresponder a características como o nome da classe, tag de instância e relações de hierarquia.Em um nível alto, a correspondência e modificação de instâncias via a definição de uma regra Selector opera através de:
- Seletores de classe Roblox que alcançam todas as instâncias de uma classe de UI dada, por exemplo , , , etc.
- Instância tag selecionadores que alvo específicos objetos de UI etiquetados através de .
- GuiObjectestados selecionadores que correspondem a um dos quatro valores enumerados Enum.GuiState como Hover.
- Seleção do nome da instância de acordo com o valor do objeto da interface de usuário Instance.Name.
Regra de classe
Um seletor de estilo classe alvo todos as instâncias de uma dada classe de UI.Os seguintes estilos de configuração de regra definem todos Frames com uma cor e tamanho de fundo uniformes.
Na coluna da esquerda do Editor de Estilo, selecione Quadro na ramificação Elementos de UI .
Vincule dois tokens de estilo previamente criados a duas propriedades :
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 Token de Link .
- Clique no $ que aparece no campo de valor e selecione o token associado adequado.
Insira um novo dentro do que você criou e ligou anteriormente . Os estilos que você definiu devem ser aplicados automaticamente a ele.
Regra de marcação
Instância tag selecionadores alvo específicos de objetos de UI etiquetados através de CollectionService.O seguinte estilo de configuração de regra etiqueta uma TextButton como ButtonPrimary com uma cor de fundo, fonte e tamanho de texto personalizados.
Na coluna da esquerda do Editor de Estilo, passe o mouse sobre a folha Folha de Estilo , clique no botão ⋮ e navegue até Novo Tag .
Renomeie a nova regra de etiqueta .ButtonPrimary (note o traço inicial . ).
Vincule três tokens de estilo previamente criados a três propriedades :
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 mais rapidamente propriedades no menu suspenso.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Token de Link .
- Clique no $ que aparece no campo de valor e selecione o token associado adequado.
Insira um novo dentro do que você criou e ligou anteriormente e etiqueta como .Um atalho conveniente é o seguinte:
- Certifique-se de que o novo TextButton é selecionado no Explorer .
- Com a regra da etiqueta .ButtonPrimary selecionada na coluna da esquerda do Editor de Estilo, clique em Aplicar Etiqueta no painel principal.Os estilos que você definiu devem ser aplicados automaticamente ao botão.
Modificador de UI
Seletores de modificador de instância aplicam fantasma UIComponents tal como UICorner ou UIStroke para estilizar ainda mais um objeto.O seguinte estilo de configuração de regra define um TextLabel com um tamanho de texto personalizado e cantos arredondados.
Na coluna da esquerda do Editor de Estilo, selecione TextLabel na ramificação Elementos de UI .
Vincule um token de estilo previamente criado a propriedade :
- Clique em Adicionar uma Propriedade... no painel principal e selecione a propriedade TextSize.Lembre-se de que você pode digitar palavras-chave para encontrar mais rapidamente propriedades no menu suspenso.
- Em vez de inserir um valor estático, clique no botão ⋮ e selecione Token de Link .
- 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 ⟩ Pseudo Instância ⟩ Canto 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, ligue um token de estilo previamente criado para a propriedade :
- 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 Token de Link .
- Clique no $ que aparece no campo de valor e selecione o token $Rad20.
Insira um novo dentro do que você criou e ligou anteriormente . Os estilos que você definiu devem ser aplicados automaticamente a ele.
Regra do estado
estado seletores correspondem a um dos quatro valores de enumeração , permitindo que você configure automaticamente alterações de estilo para estados interativos.A configuração da regra a seguir cria um estado de sobreposição de -4 graus de rotação para todos ImageButtons.
Na coluna da esquerda do Editor de Estilo, selecione Botão de Imagem na ramificação Elementos de UI .
Clique no botão ⋮ e navegue até Novo > GuiState > Passe o mouse .
Uma nova instância modificadora de estado de Passe aparece sob o elemento ImageButton na coluna da esquerda.
Com o novo modificador Passe o mouse selecionado 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 mais rapidamente propriedades no menu suspenso.
Insira -4 no campo de valor da propriedade.
Insira um novo dentro do que você criou e ligou anteriormente .Quando você passa o mouse sobre o botão na janela de visualização, ele deve girar 4 graus no sentido horário.
Temas de estilo
Estilos temas consistem em conjuntos de tokens específicos que podem ser trocados, por exemplo, tokens de cores que definem um tema "leve" e "escuro".
Criação de tema
Para extensibilidade, temas são organizados em pastas.Enquanto um único diretório pode ser suficiente para a maioria dos propósitos, você tem liberdade para organizar temas em diretórios como "cores" ou "fontes" se desejar.
Crie um novo diretório de tema:
- Na coluna da 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 o novo diretório Geral , clique no botão ⋮ e selecione Novo Estilo de Tema .
- Renomeie-o para TemaA .
Tokens temáticos
Uma vez que um tema é construído, você pode vincular seus tokens a várias propriedades de objeto de UI, como o BackgroundColor3 de um TextButton.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 do 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 da esquerda do Editor de Estilo, selecione TextButton na ramificação Elementos de UI .
Vincule os tokens do tema a três novas propriedades TextButton :
Propriedade Token do 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 Token de Link .
- Clique no $ que aparece no campo de valor e selecione o token de tema adequado.
Duplicação de tema
Uma vez que você tem um tema geralmente estabelecido, você pode duplicá-lo e alterar 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 ThemeB .
Vincule dois dos tokens do tema a dois tokens de estilo diferentes:
Token do Tema Token de Estilo BackColor $Magenta ButtonTextSize $Text24 - Ao lado direito do campo de valor da propriedade, clique no botão ⋮ e selecione Desligar Token .
- Clique em ⋮ novamente e selecione Token de Link .
- No campo de valor, clique no $ e selecione o novo token de estilo associado.
Mudança de tema
Uma vez que você tem vários temas, você pode trocar entre eles via pasta do tema, ou via um script como descrito em SetDerives() .
Na coluna da esquerda do Editor de Estilo, selecione o diretório Geral na ramificação Temas .
No painel principal, troque entre os temas usando os botões de rádio.