L'éditeur de style intégré est un outil complet qui vous permet de créer, gérer et appliquer des styles d'interface utilisateur pour les jeux Roblox grâce à une combinaison de tokens, feuilles de design, règles de style et thèmes.
Accédez à l'éditeur de style via l'onglet UI.
Une fois ouvert, cliquez sur le bouton Créer un design pour générer un ensemble de styles de base.
Créer un ensemble de styles de design via l'éditeur de style génère une BaseStyleSheet à l'intérieur d'un dossier Design dans ReplicatedStorage. Cette feuille de base synchronise des valeurs par défaut spécifiques au moteur, comme la valeur par défaut Color3 de [163, 162, 165], avec des valeurs par défaut provenant des workflows d'insertion dans Studio. Il est fortement recommandé de ne pas supprimer ou tenter de modifier la feuille de style de base — au lieu de cela, construisez des tokens et des règles de style autour d'une feuille de design pour correspondre à vos objectifs d'interface utilisateur.
De plus, une feuille StyleSheet est générée dans le dossier Design qui contient un StyleDerive vers la feuille de style de base. Si vous choisissez de supprimer ce StyleDerive, les valeurs non stylées pour GuiObjects peuvent devenir des valeurs inattendues, par exemple une taille par défaut Size de 0, 0, 0, 0.
Tokens de style
Les tokens de style, définis par les attributs d'une StyleSheet de token, représentent des variables de propriété d'interface utilisateur qui peuvent être utilisées à travers les styles et les composants ; par exemple, il pourrait y avoir une couleur commune pour un Frame.BackgroundColor3, TextLabel.TextColor3, et UIStroke.Color. Les tokens sont comparables aux variables CSS.
Bien que non requis pour le stylisme de l'interface utilisateur, les tokens sont fortement recommandés pour un design d'interface utilisateur extensible et des mises à jour de style au fil du temps. Vous devriez commencer par créer les tokens suivants pour comprendre comment ils s'intègrent dans d'autres aspects du stylisme universel.
Créez une nouvelle feuille de style de token :
- Dans la colonne de gauche de l'éditeur de style, survolez Tokens, cliquez sur le ⊕, et sélectionnez Nouvelle Feuille de Style Token.
- Renommez la nouvelle feuille en TokenSheet.
Avec la nouvelle feuille de token sélectionnée, créez plusieurs tokens en cliquant sur Ajouter un Token… dans le panneau principal. Ces tokens seront utilisés tout au long de ce guide pour les règles et les thèmes.
Nom du token Type Valeur 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 
Feuilles de design
Une feuille de style de design agrège les règles de style et peut être liée aux arbres DataModel pour appliquer des propriétés de style aux instances d'interface utilisateur. Une seule StyleSheet peut s'appliquer à un arbre donné, bien que vous puissiez utiliser des thèmes pour échanger des styles connexes à travers votre interface utilisateur, un concept abordé plus tard dans ce guide.
Une feuille de design préremplie nommée StyleSheet est créée via le bouton Créer Design. Elle contient des règles de classe pour des objets d'interface utilisateur communs tels que Frame et TextLabel. Elle contient également deux instances StyleDerive qui dérivent (héritent) des tokens et des styles de la feuille de style de base pour une utilisation dans vos configurations de style personnalisées.
Une fois que vous avez une feuille de design, vous pouvez configurer un conteneur à l'écran à utiliser avec l'éditeur de style, ou un conteneur en jeu si désiré.
Survolez StarterGui dans l'Explorateur et insérez un ScreenGui.
Confirmez qu'une nouvelle instance StyleLink apparaît sous le ScreenGui avec sa propriété StyleSheet définie sur la feuille de design StyleSheet.
Si le StyleLink n'est pas créé, vous pouvez rapidement en créer un en sélectionnant le ScreenGui dans l'Explorateur ainsi que la feuille de design StyleSheet dans la colonne de gauche de l'éditeur de style. Ensuite, cliquez sur le bouton Insérer StyleLink dans la section supérieure droite du panneau principal de l'éditeur.
Règles de style
Les règles de style s'appliquent à chaque instance qui correspond à la définition Selector de la règle pour correspondre à des caractéristiques telles que le nom de classe, le tag d'instance et les relations hiérarchiques. À un niveau élevé, la correspondance et la modification des instances via la définition Selector d'une règle fonctionnent à travers :
- Les sélecteurs de classe Roblox qui ciblent toutes les instances d'une classe d'interface utilisateur donnée, par exemple Frame, ImageLabel, TextButton, etc.
- Les sélecteurs de tag d'instance qui ciblent des objets d'interface utilisateur spécifiques tagués via CollectionService.
- Les modificateurs d'instance appliqués à travers des UIComponents fantômes tels que UICorner ou UIStroke.
- Les sélecteurs d'état GuiObject qui correspondent à l'une des quatre valeurs d'énumération Enum.GuiState telles que Hover.
- La sélection du nom d'instance selon la valeur du Instance.Name de l'objet d'interface utilisateur.
Règle de classe
Un sélecteur de style classe cible toutes les instances d'une classe d'interface utilisateur donnée. La configuration de la règle suivante stylise tous les Frames avec une couleur de fond et une taille uniformes.
Dans la colonne de gauche de l'éditeur de style, sélectionnez Frame dans la branche UI Elements.
Liez deux tokens de style créés précédemment à deux propriétés Frame :
Propriété Token de style BackgroundColor3 $Magenta Size $SquareL - Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire. Notez que vous pouvez taper des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token associé approprié.
Insérez un nouveau Frame dans le ScreenGui que vous avez précédemment créé et lié. Les styles que vous avez définis devraient s'appliquer automatiquement.
Règle de tag
Les sélecteurs de tag d'instance ciblent des objets d'interface utilisateur spécifiques tagués via CollectionService. La configuration de règle suivante stylise un TextButton tagué comme ButtonPrimary avec une couleur de fond personnalisée, une police et une taille de texte.
Dans la colonne de gauche de l'éditeur de style, survolez la feuille StyleSheet, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ Tag.
Renommez la nouvelle règle de tag en .ButtonPrimary (notez le . devant).
Liez trois tokens de style créés précédemment à trois propriétés TextButton :
Propriété Token de style BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire. N'oubliez pas que vous pouvez taper des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token associé approprié.
Insérez un nouveau TextButton dans le ScreenGui que vous avez précédemment créé et lié et taguez comme ButtonPrimary. Un raccourci pratique est le suivant :
- Assurez-vous que le nouveau TextButton est sélectionné dans l'Explorateur.
- Avec la règle de tag .ButtonPrimary sélectionnée dans la colonne de gauche de l'éditeur de style, cliquez sur Appliquer Tag dans le panneau principal. Les styles que vous avez définis devraient s'appliquer automatiquement au bouton.
Modificateur UI
Les sélecteurs de modificateur d'instance appliquent des UIComponents fantômes tels que UICorner ou UIStroke pour styliser davantage un objet. La configuration de règle suivante stylise un TextLabel avec une taille de texte personnalisée et des coins arrondis.
Dans la colonne de gauche de l'éditeur de style, sélectionnez TextLabel dans la branche UI Elements.
Liez un token de style créé précédemment à la propriété TextSize :
- Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété TextSize. N'oubliez pas que vous pouvez taper des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token $Text32.
Une instance pseudo est requise pour configurer et appliquer des coins arrondis à d'autres éléments. Pour en créer une :
Dans la colonne de gauche, survolez TextLabel, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ Instance Pseudo ⟩ UICorner.
Une nouvelle instance UICorner apparaît sous l'élément TextLabel dans la colonne de gauche.
Avec la nouvelle instance UICorner sélectionnée dans la colonne de gauche, liez un token de style à la propriété CornerRadius :
- Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété CornerRadius.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token $Rad20.
Insérez un nouveau TextLabel dans le ScreenGui que vous avez précédemment créé et lié. Les styles que vous avez définis devraient s'appliquer automatiquement.
Règle d'état
Les sélecteurs d'état GuiObject correspondent à l'une des quatre valeurs d'énumération GuiState telles que Hover, vous permettant de configurer automatiquement des changements de style pour les états interactifs. La configuration de règle suivante crée un état de survol de rotation de -4 degrés pour tous les ImageButtons.
Dans la colonne de gauche de l'éditeur de style, sélectionnez ImageButton dans la branche UI Elements.
Cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau ⟩ GuiState ⟩ Hover.
Une nouvelle instance de modificateur Hover apparaît sous l'élément ImageButton dans la colonne de gauche.
Avec le nouveau modificateur Hover sélectionné dans la colonne de gauche, cliquez sur Ajouter une Propriété… dans le panneau principal et sélectionnez Rotation. N'oubliez pas que vous pouvez taper des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
Entrez -4 dans le champ de valeur de la propriété.
Insérez un nouveau ImageButton dans le ScreenGui que vous avez précédemment créé et lié. Lorsque vous survolez le bouton dans le viewport, il devrait tourner de 4 degrés dans le sens antihoraire.
Requêtes de style
Les requêtes de style, similaires aux requêtes de conteneur et de média CSS, vous permettent d'appliquer une logique conditionnelle à votre interface utilisateur en fonction de la taille du conteneur, du type d'entrée ou d'autres facteurs. L'éditeur de style fournit un flux de travail simplifié pour créer à la fois la logique de requête (conditions) et les styles résultants en un ensemble unifié.
Requêtes intégrées
Certaines conditions StyleQuery sont très courantes, comme le changement de propriétés en fonction de la ViewportDisplaySize. Pour simplifier cela, l'éditeur de style inclut des requêtes intégrées qui vous permettent de créer des règles conditionnelles sans avoir besoin d'une instance pseudo ou réelle d'un StyleQuery ; au lieu de cela, vous utilisez simplement une règle de requête avec un sélecteur prédéfini comme ViewportDisplaySizeSmall.
Les étapes suivantes démontrent comment générer des requêtes intégrées pour un TextLabel afin de gérer les tailles de viewport Small, Medium, et Large.
Dans la colonne de gauche de l'éditeur de style, survolez TextLabel, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
Cela crée un dossier Queries sous la règle TextLabel contenant trois règles de requête :
- @ViewportDisplaySizeLarge — Définir les propriétés qui s'appliquent lorsque le viewport est Large.
- @ViewportDisplaySizeMedium — Définir les propriétés qui s'appliquent lorsque le viewport est Medium.
- @ViewportDisplaySizeSmall — Définir les propriétés qui s'appliquent lorsque le viewport est Small.
Cliquez sur Ajouter une propriété… sous chaque règle de requête et définissez la chaîne Text spécifique qui doit s'afficher lorsque cette requête est active :
Pour vérifier les requêtes, utilisez l'Émulateur de périphérique pour tester comment l'interface utilisateur réagit à différentes résolutions sur trois appareils distincts :
Changez le Périphérique dans l'Émulateur de périphérique pour voir le texte changer en temps réel.
Requête personnalisée
Vous pouvez ajouter une requête de style à toute règle existante pour créer une interface utilisateur réactive qui s'adapte à son conteneur. La configuration suivante configure un TextLabel pour changer automatiquement son apparence uniquement lorsqu'il s'étend à une largeur de 400 pixels ou plus.
Dans la colonne de gauche de l'éditeur de style, survolez TextLabel, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ StyleQuery ⟩ Custom.
Cette action crée un dossier Queries sous la règle TextLabel contenant deux éléments liés :
- ::StyleQuery règle d'instance pseudo où vous définissez les Conditions.
- @StyleQuery règle où vous définissez les Propriétés à appliquer lorsque ces conditions sont remplies.
Sélectionnez la règle parente TextLabel dans le panneau principal et définissez les propriétés par défaut suivantes :
Propriété Valeur BackgroundColor3 $Magenta Text Texte par défaut Sélectionnez la règle ::StyleQuery dans le panneau principal, cliquez sur Ajouter une Condition…, et configurez ce qui suit :
Condition Valeur MinSize 400, 0 Voir StyleQuery.IsActive comme référence pour d'autres conditions disponibles via la règle ::StyleQuery.
Sélectionnez la règle @StyleQuery dans le panneau principal et définissez les propriétés qui doivent s'appliquer lorsque la requête est active :
Propriété Valeur BackgroundColor3 $Gold Text Texte Grand
Pour vérifier la requête, vous pouvez redimensionner manuellement un TextLabel dans le viewport.
Ajustez sa largeur pour voir le style changer en temps réel.
Tant que la largeur du TextLabel est plus petite, la condition MinSize n'est pas remplie et l'étiquette utilise sa couleur de fond et son texte par défaut.
Bien que le redimensionnement manuel soit un moyen rapide de vérifier la logique réactive, vous pouvez également utiliser les outils d'émulation intégrés de Studio pour des tests plus précis :
- Utilisez l'Émulateur de périphérique pour tester comment votre interface utilisateur réagit à des résolutions d'écran spécifiques et aux conditions ViewportDisplaySize.
- Utilisez l'Émulateur de contrôleur pour vérifier la logique PreferredInput, comme le changement de styles lorsqu'un gamepad est détecté.
Transitions de style
Les transitions de style, comparables aux transitions CSS, vous permettent d'animer les valeurs de propriété sur une durée définie.
Par défaut
Pour animer de nombreuses propriétés d'interface utilisateur avec les mêmes paramètres, vous pouvez définir une transition par défaut qui s'applique à toutes les propriétés, sauf si une autre transition est explicitement définie pour une propriété spécifique.
Sélectionnez TextButton dans la branche UI Elements et ensuite, dans le panneau principal, ajoutez trois nouvelles propriétés avec les valeurs suivantes :
Propriété Valeur AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Survolez la ligne parente TextButton, cliquez sur le bouton ⋮, et naviguez jusqu'à Insérer ⟩ Transition.
Une transition par défaut de 1, Quad, Out, 0 s'insère directement sous la règle TextButton, indiquant une transition de 1 seconde, style d'assouplissement Quad, direction d'assouplissement Out, et aucun délai.
Survolez la ligne parente TextButton, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ GuiState ⟩ Hover.
Pour le nouveau modificateur Hover, ajoutez deux nouvelles propriétés comme cibles pour l'état de survol.
Propriété Valeur BackgroundColor3 #33AAFF Rotation -5 
Insérez un nouveau TextButton dans le ScreenGui que vous avez précédemment créé et lié. Lorsque vous survolez le bouton dans le viewport, il devrait s'éclaircir progressivement et tourner de 5 degrés dans le sens antihoraire.
Lié aux tokens
Pour réutiliser les comportements de transition à travers plusieurs règles, vous pouvez définir des tokens représentant le type de données TweenInfo. La configuration de règle suivante crée un état de survol pour faire passer tous les TextButtons de -5 degrés de rotation et une couleur de fond plus claire.
Si vous ne l'avez pas déjà fait, créez une feuille de style de token nommée TokenSheet.
Avec la nouvelle feuille de token sélectionnée, créez deux nouveaux tokens en cliquant sur Ajouter un Token… dans le panneau principal.
Nom du token Type Paramètres de Tween CubicOut TweenInfo - Duration = 1.25
- EasingStyle = Cubic
- EasingDirection = Out
- Delay = 0
QuadInOut TweenInfo - Duration = 0.5
- EasingStyle = Quad
- EasingDirection = InOut
- Delay = 0
Sélectionnez TextButton dans la branche UI Elements et ensuite, dans le panneau principal, ajoutez trois nouvelles propriétés avec les valeurs suivantes :
Propriété Valeur AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Pour chaque nouvelle propriété sauf AutoButtonColor, survolez sa ligne, cliquez sur le bouton ⋮, et sélectionnez Insérer ⟩ Transition.
Survolez la nouvelle ligne Transition sous chaque propriété, cliquez sur le bouton ⋮, et sélectionnez Lier Token. Ensuite, au lieu d'entrer une valeur statique, cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token de transition approprié.
Transition de propriété Token de transition BackgroundColor3 $CubicOut Size $QuadInOut 
Survolez la ligne parente TextButton, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ GuiState ⟩ Hover.
Pour le nouveau modificateur Hover, ajoutez deux nouvelles propriétés comme cibles pour l'état de survol.
Propriété Valeur BackgroundColor3 #33AAFF Rotation -5 Insérez un nouveau TextButton dans le ScreenGui que vous avez précédemment créé et lié. Lorsque vous survolez le bouton dans le viewport, il devrait s'éclaircir progressivement et tourner de 5 degrés dans le sens antihoraire.
Thèmes de style
Les thèmes de style se composent d'ensembles de tokens spécifiques qui peuvent être échangés, par exemple des tokens de couleur qui définissent un thème "clair" et "sombre".
Création de thème
Pour l'extensibilité, les thèmes sont organisés en dossiers. Bien qu'un seul dossier puisse suffire pour la plupart des usages, vous êtes libre d'organiser les thèmes dans des dossiers comme "couleurs" ou "polices" si vous le souhaitez.
Créez un nouveau dossier de thème :
- Dans la colonne de gauche de l'éditeur de style, survolez Themes, cliquez sur le ⊕, et sélectionnez Nouveau Thème.
- Renommez le nouvel élément Dossier en Général.
Créez une nouvelle feuille de style de thème :
- Survolez le nouveau dossier Général, cliquez sur le bouton ⋮, et sélectionnez Nouvelle Feuille de Style Thème.
- Renommez-la en ThemeA.
Tokens de thème
Une fois qu'un thème est construit, vous pouvez lier ses tokens à diverses propriétés d'objets d'interface utilisateur telles que le BackgroundColor3 d'un TextButton. Les feuilles de thème doivent utiliser un ensemble commun de tokens pour fonctionner correctement.
Avec ThemeA sélectionné dans la colonne de gauche de l'éditeur de style :
Liez trois tokens de style créés précédemment à trois nouveaux tokens de thème :
Token de thème Token de style BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Cliquez sur Ajouter un Token… dans le panneau principal et entrez le nom du token de thème.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token de style associé.
Dans la colonne de gauche de l'éditeur de style, sélectionnez TextButton dans la branche UI Elements.
Liez les tokens du thème à trois nouvelles propriétés TextButton :
Propriété Token de thème BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token de thème approprié.
Lors de la liaison des tokens du thème, recherchez $[Token] dans ThemeA dans le survol pour savoir que le token provient du thème et non de la feuille de tokens globale (rappelez-vous que le thème dérive déjà les tokens globaux).
Duplication de thème
Une fois que vous avez un thème généralement établi, vous pouvez dupliquer celui-ci et changer divers tokens pour définir un style de thème unique.
Dans la colonne de gauche de l'éditeur de style, survolez le thème ThemeA, cliquez sur le bouton ⋮, et sélectionnez Dupliquer.
Renommez le thème dupliqué en ThemeB.
Liez deux des tokens du thème à deux tokens de style différents :
Token de thème Token de style BackColor $Magenta ButtonTextSize $Text24 - À droite du champ de valeur de la propriété, cliquez sur le bouton ⋮ et sélectionnez Dissocier Token.
- Cliquez sur ⋮ à nouveau et sélectionnez Lier Token.
- Dans son champ de valeur, cliquez sur le $ et sélectionnez le nouveau token de style associé.
Échange de thème
Une fois que vous avez plusieurs thèmes, vous pouvez échanger entre eux via le dossier du thème, ou via un script comme décrit dans SetDerives().
Dans la colonne de gauche de l'éditeur de style, sélectionnez le dossier Général dans la branche Themes.
Dans le panneau principal, échangez entre les thèmes en utilisant les boutons radio.
