Cette page explique des cas d'utilisation plus avancés de Watch Face Designer, y compris comment ajouter la prise en charge des sous-cadrans, des complications et des thèmes de couleur. Pour en savoir plus sur les premiers pas, consultez le guide Principes de base.
Sous-cadrans
Vous pouvez créer des aiguilles analogiques qui tournent dans une sous-section du cadran, comme un sous-cadran sur une véritable montre-bracelet.
Pour ce faire, procédez comme suit :
Créez un frame vide qui recouvre la zone où vous avez placé le sous-cadran dans votre conception :
Figure 1 : Cadre vide recouvrant un emplacement de sous-cadran Dessinez votre seconde main à l'intérieur de ce cadre :
Figure 2 : Conception de la trotteuse dans un cadre Sélectionnez le cadre du sous-cadran qui contient la trotteuse. Ensuite, dans le concepteur de cadrans, définissez Rotation autour de sur "Centre du calque" :
Figure 3 : Après avoir sélectionné le frame contenant (à gauche), choisissez le comportement de rotation de la trotteuse (à droite).
Complications
Pour ajouter un emplacement de complication, ajoutez un cadre à votre cadran. Dans ce cadre, concevez l'apparence de l'emplacement de complication lorsqu'il est vide. Il s'agit de la conception de base pour les autres types de complications, comme les icônes et le texte.
Il existe de nombreux types de complications. Votre cadran fournit des modèles pour chaque type, et les applications sur la montre d'un utilisateur décident du modèle à utiliser et des données à fournir pour elles-mêmes. L'utilisateur choisit l'application à placer dans chaque emplacement de complication.
Sélectionnez le frame contenant le design de l'emplacement de complication. Ensuite, dans le concepteur de cadrans, définissez Comportement sur "Emplacement de complication". Ce processus crée un composant avec une variante (une conception vide).
Appliquer des types d'emplacements de complication
Comme il n'est pas très utile d'inclure un emplacement de complication qui ne prend en charge que le type "empty", ajoutez-en un autre. Dans la fenêtre Watch Face Designer, appuyez sur + Ajouter un nouveau type, puis sélectionnez "Texte court". Le texte court est un type de complication compatible avec la plupart des applications. Il affiche deux petits libellés à côté d'une icône.
Cette étape crée une autre variante pour nous permettre de représenter notre conception pour ce type de complication. Sélectionnez la ligne "Texte court" pour y accéder.
Lorsque vous modifiez des calques dans un modèle de complication, une option "Comportement" s'affiche. Cette option est semblable à celle des cadrans, mais vous pouvez ici sélectionner des comportements spécifiques au type de complication que vous modifiez.
Dans cet exemple, les calques d'une complication de texte court peuvent être le titre de votre application, son texte ou une icône monochrome. "Monochrome" signifie que l'icône hérite de la couleur que vous avez définie pour elle dans Figma.
Après avoir créé un rectangle à l'endroit où vous souhaitez que l'icône de votre application apparaisse sur le cadran, accédez à la fenêtre Watch Face Designer (Concepteur de cadrans) et définissez Behavior (Comportement) sur "Single-color icon" (Icône monochrome) :
Ensuite, créez deux calques de texte. Ces calques représentent deux emplacements de "texte court" supplémentaires : un pour le titre et un pour le texte :
L'aperçu montre comment la complication se présente. Cet exemple montre à quoi pourrait ressembler une complication si l'application Agenda était attribuée à cet emplacement.
Pour afficher le texte en majuscules, comme illustré dans l'image suivante, utilisez la fonctionnalité de casse du texte dans le menu Typographie de Figma.
Notez que, contrairement à l'heure numérique, il n'existe pas d'exportation de police arbitraire pour le texte de complication. Les complications sont toujours dessinées à l'aide de la police système de l'appareil Wear OS, qui peut varier, mais qui est généralement Roboto.
Pour ajouter la prise en charge d'autres types de complications ou personnaliser les paramètres associés tels que Application par défaut ou si le slot s'affiche lorsque la montre est en mode Veille, sélectionnez le slot de complication dans votre cadran :
Thèmes de couleur
Vous pouvez inclure plusieurs options de thèmes de couleurs dans votre cadran. L'utilisateur peut ensuite choisir le thème de son choix à l'aide du sélecteur de cadran sur sa montre.
Watch Face Designer est compatible avec les thèmes de couleur utilisant les styles Figma.
Prenons l'exemple où, étant donné le cadran suivant, vous souhaitez permettre à l'utilisateur de personnaliser les couleurs des aiguilles et du cadran :
Créer le premier style
Pour créer un style de couleur personnalisable sur la montre, créez un style :
- Désélectionnez tout sur le canevas.
- Dans la barre latérale de droite, à côté de Styles, sélectionnez le bouton +.
Vous devez le nommer de manière spécifique :
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
Dans ce cas, le nom du cadran exemple est Bauhaus. La couleur commence donc par ce nom, suivi de Hands, qui est l'élément que les utilisateurs peuvent personnaliser.
Ensuite, donnez un nom descriptif à la couleur, par exemple Charcoal, et spécifiez l'élément spécifique dont la couleur doit être modifiée (ici, l'aiguille des heures).
En regroupant tout, le nom final est le suivant : Bauhaus/Hands/Charcoal/Hours :
Suivez une procédure similaire pour créer un thème de couleur personnalisé pour l'aiguille des minutes :
Enfin, attribuez ces couleurs aux aiguilles qui apparaissent sur le cadran :
Bauhaus/Hands/Charcoal/Minutes à l'aiguille des minutes du cadran de la montreAjouter un autre style
Créez un style en modifiant la partie Theme Name du style. L'exemple suivant ajoute un style appelé Rust (Bauhaus/Hands/Rust/Hours) :
L'utilisateur peut ensuite basculer entre les thèmes de couleur"Charbon " et"Rouille" sur son appareil. Les aiguilles des heures et des minutes de votre cadran sont alors recolorées en conséquence :
Appliquer à d'autres éléments
Suivez des étapes similaires pour rendre d'autres éléments de notre cadran thématiques. Vous pouvez mélanger et assortir ces thèmes, et utiliser autant de styles de couleur que vous le souhaitez pour créer des thèmes complexes interchangeables :
Avec l'ensemble de styles précédent, vous avez fourni deux options pour les aiguilles (Rust et Charcoal) et trois options pour le cadran (Light, Dark et Duotone) :
