Ce guide explique comment créer un cadran, ajouter des éléments basés sur le temps et inclure la prise en charge des photos sélectionnées par l'utilisateur, y compris une galerie de plusieurs photos. Pour découvrir d'autres fonctionnalités, consultez le guide avancé.
Créer un cadran
Pour créer un cadran, dessinez un cadre dans Figma, puis configurez-le comme suit :
Définissez sa taille sur 450 unités de largeur et 450 unités de hauteur :
Figure 1 : Panneau de mise en page des cadres de Figma, affichant un cadran de montre de 450 x 450 D'autres tailles fonctionnent également, mais 450 x 450 est recommandé pour les cadrans Wear OS et est requis pour l'exportation vers Watch Face Studio.
Pour un cadran économe en batterie, définissez la couleur de remplissage du cadre sur noir :
Figure 2 : Panneau de remplissage de frame affichant une couleur de remplissage noire Définissez le nom du frame sur le nom que vous souhaitez donner à votre cadran. Cette option s'affiche sur la montre de vos utilisateurs.
Après avoir créé et configuré le frame, ouvrez le plug-in Watch Face Designer et sélectionnez le frame que vous venez de créer. Un aperçu en direct s'affiche dans la fenêtre Watch Face Designer.
Ajouter des éléments à un cadran
Ajoutez des éléments au cadran pour que les utilisateurs puissent lire l'heure.
Heure analogique
Dessinez un rectangle, qui servira de trotteuse sur votre montre.
Vérifiez que, lorsque le début d'une nouvelle minute s'affiche, le rectangle est centré horizontalement et que son bord inférieur se trouve au centre du cadran, comme le ferait une véritable aiguille. Par défaut, Figma active l'option Magnétisme sur la géométrie, qui affiche des repères rouges pour vous aider à aligner ce rectangle :
Ensuite, indiquez à Watch Face Designer que ce calque n'est pas uniquement décoratif. Sélectionnez le rectangle que vous avez dessiné à l'étape précédente, puis accédez à la fenêtre Watch Face Designer (Concepteur de cadrans) et remplacez Behavior (Comportement) par "Second hand" (Aiguille des secondes).
Remarquez comment l'aiguille commence à bouger une fois par seconde, simulant un tic-tac. Vous pouvez ajuster la rotation si vous le souhaitez, et vous pouvez créer une aiguille des minutes et une aiguille des heures de la même manière que celle-ci.
Pour obtenir des conseils sur les sous-cadrans, consultez le guide sur l'utilisation avancée.
Horloge numérique
Nous pouvons également afficher l'heure au format numérique. Pour ce faire, créez un calque de texte dans Figma. Pour l'instant, saisissez Hh:Mm:Ss comme contenu textuel du calque.
Dans la fenêtre Watch Face Designer, remplacez le comportement du texte "Statique" par "Heure numérique". L'aperçu montre à quoi cela ressemblerait sur un appareil réel :
Pour en savoir plus sur l'ensemble des caractères disponibles que vous pouvez utiliser, suivez le guide de modèle affiché dans la barre latérale de la fenêtre Concepteur de cadrans. Par exemple, a indique si l'heure actuelle correspond au matin ou à l'après-midi. Vous pouvez l'utiliser avec le "format de l'heure" pour afficher l'heure au format 12 heures.
Vous pouvez sélectionner n'importe quelle police dans Figma, y compris celles qui ne sont pas disponibles dans Wear OS. Elle sera automatiquement exportée et regroupée dans votre cadran. N'oubliez pas que chaque police possède ses propres conditions de licence pour la redistribution.
Prévisualiser différentes heures
Pour voir votre cadran à différentes heures de la journée, vous pouvez ajuster l'heure affichée dans l'aperçu en faisant glisser le curseur en bas de la fenêtre Watch Face Designer :
Lorsque vous avez terminé de prévisualiser différents moments, vous pouvez réinitialiser l'heure sur l'heure actuelle en sélectionnant le bouton Réinitialiser en bas à gauche :
Inclure les photos fournies par les utilisateurs
Votre cadran peut inclure un emplacement pour une photo personnalisée. Cela permet aux utilisateurs d'ajouter une photo personnelle en arrière-plan, tout en affichant l'heure et tous les autres éléments que vous avez inclus dans votre conception.
Pour prendre en charge les photos personnalisées, ajoutez un calque à votre cadran et définissez son comportement sur "Photo fournie par l'utilisateur". Pour cet exemple, nous utilisons une photo de fleur comme image par défaut pour ce calque. Cette image est utilisée par défaut avant que l'utilisateur n'ait attribué sa propre photo ou lorsqu'il choisit de ne pas utiliser l'une de ses photos.
Prise en charge de la sélection multiple de photos
Votre cadran peut prendre en charge la sélection multiple de photos. Le Watch Face Designer appelle cela une galerie :
Lorsque l'option Sélection de photos est définie sur "Galerie", l'utilisateur peut sélectionner plusieurs photos pour cet emplacement, et la montre les fait défiler à différents moments, en fonction de ce que vous sélectionnez sous "Changer de photo" :
- Lorsque l'option "Au toucher" est sélectionnée, la photo change lorsque l'utilisateur appuie sur votre calque.
- Lorsque l'option "Au lever du poignet" est sélectionnée, le cadran change une fois sur trois lorsque l'utilisateur lève le poignet. Pour le moment, vous ne pouvez pas ajuster cette option à l'aide de Watch Face Designer. Découvrez comment le Watch Face Format offre une compatibilité plus avancée à l'aide de l'attribut
changeAfterEvery.
En savoir plus
Pour prévisualiser votre cadran sur un appareil physique, consultez le guide sur les exportations.
Pour plus d'options et de fonctionnalités, consultez le guide sur l'utilisation avancée.