les variables
Utilisez la fenêtre modale Variables pour créer et gérer des variables, modes, groupes et collections.
- Déselectionnez tout sur le canevas en appuyant sur Échap ou en cliquant sur le canevas.
- À partir de la barre latérale droite, cherchez la section Local variables.
- Cliquez sur Open variables.
Il existe quatre types de variables.
Color (remplissages solides) > couleurs de remplissage, couleurs de trait, effets d’ombre
Number (valeurs numériques) > calques de texte, rayon du coin, largeur/hauteur minimale et maximale, grilles de mise en page, opacité du calque, effets d’ombre et épaisseurs de trait variables (X, Y, haut, bas, gauche et droite)
String (textes et noms variables) > calques de texte, instances de variantes, visibilité des calques si la valeur utilise « False/True »
Boolean (False/True) > visibilité des calques, instances de variantes
collections et groupes
Les collections et les groupes sont utilisés pour organiser les variables et faciliter leur recherche. A noter que les variables apparaissent sous la forme d’un carré alors que les styles apparaissent dans un cercle !
string
changer les images
1. Sélectionner les images et convertir en composant en utilisant la fonction “Create Component Set”.
2. Renommer le composant dans notre exemple “images” et renommer “property 1” par le texte “couleur”. Vous devriez observer que chaque valeur est associée au nom du calque de chaque image.
3. Placer le composant créé sur la frame.
4. Créer une variable “String”, renommer par “selectedimages” dont la valeur “orange” correspond au nom de la première image. Attention à bien respecter l’orthographe de vos appellations car vous risquez de perdre le lien entre l’objet et sa variable !
5. Assigner la variable “selectedimages” (local instance) pour appliquer la variable au composant. À la place d’avoir le nom de l’occurrence sélectionnée (orange), vous observez le texte “selectedimages”.
6. Passer en mode Prototype, sélectionner l’objet avec lequel interagir puis choisir “On click”, Action “Set variable”, choisir “selectedimages” et saisir dans la valeur le nom de l’image correspondante (par exemple “orange” lorsque la case orange est sélectionnée pour afficher l’image de l’orange).
7. Copier/coller ces propriétés aux autres objets et modifier le nom de la valeur !
8. Tester les actions en utilisant “Preview” (Shift + espace).
string
changer les textes
1. Sélectionner le mot (instance) que vous souhaitez voir changer lors de l’interaction.
2. Ajouter un variable “String” à la collection String précédemment créée. Nommer “selectedtext” et saisir la valeur “choose”.
3. Sélectionner la fonction “Property labels” en utilisant le panneau des zooms et ajouter la variable “selectedtext” dans la section “Typography”. Le texte initial doit être changé par la valeur saisie “choose”.
4. Passer en mode Prototype, sélectionner le bouton orange (1re interaction) et ajouter une action (cliquer sur le bouton +). Choisir “Set variable”, variable “selectedtext” et saisir dans la valeur le texte que vous souhaitez voir apparaître lors du clic de l’usager sur ce bouton.
5. Faire de même pour les autres boutons et changer le nom de la valeur par les textes désirés.
6. Tester les actions en utilisant “Preview” (Shift + espace).
color
basculer en mode light/dark
1. Préparer les illustrations dans les deux modes d’affichage (Light + Dark) afin de noter les différents besoins de changement de couleur.
2. Sur une frame, noter les noms des couleurs ainsi que leurs valeurs hexadécimales pour préparer la collection. Créer une nouvelle collection dans “Local variables” à nommer “theme-color”.
3. Dupliquer la frame “Light” (précédemment créée) pour réaliser le prototype.
4. Créer le bouton “switch” à partir d’une nouvelle frame dans l’exemple W 90 x H 40 px.
5. Utiliser les couleurs intégrées à la collection « theme-color » pour appliquer vos couleurs aux objets.
6. Utiliser des fonctions “Auto Layout” pour organiser les objets et se référer au site https://heroicons.com/ pour récupérer des icônes au format svg.
7. Transformer cette frame en composant “Component” et ajouter une variante. Penser à vérifier que les noms des objets soient identiques entre les deux variants ! Renommer le composant par “switch” et indiquer la valeur “light” pour le bouton ON et la valeur “dark” pour le bouton OFF. Placer votre composant “switch” sur la frame “light”.
8. Créer une nouvelle collection à nommer “modes”. Cette collection va regrouper les changements d’état entre la version Light et Dark de votre interface.
Par exemple : background-color (Name) = en bleu clair (à choisir dans theme-color) sur la version Light et devient noir en version dark.
Chaque objet subissant un changement d’état devra être paramétré dans cette collection.
9. Ajouter un 2e mode en cliquant sur le (+), renommer le mode 1 en “Light” et le mode 2 en “Dark”.
10. Appliquer les noms de ces nouvelles variables aux objets correspondant à votre frame “Light”.
Par exemple, sélectionner le bloc de couleur de fond bleu clair et attribuer la variable “background-color” en utilisant le panneau “Fill”.
11. Passer en mode Prototype et paramétrer les interactions du bouton “switch”.
a. Sur le bouton ON = “On tap” > Change to > mode > dark
b. Ajouter une interaction “Set variable mode” > Collection “modes” > Mode “dark”
c. Utiliser les mêmes réglages pour le bouton OFF mais veiller à changer le sens de Dark vers Light.
Si le prototype ne devait pas fonctionner lors du Preview, en mode Design vérifier que la frame “Light” n’utilise pas de variable dans la fonction “Appearence”. Pour afficher ce panneau, cliquer dans le zoom et choisir “Property labels”. Si un mode devait apparaître, le supprimer !
tuto en vidéo si jamais…
bolean & instances de variantes
créer une interaction à partir d’une case à cocher
1. Créer un composant pour définir la variante de la case à cocher.
2. Ajouter un variant et intégrer une coche.
3. Renommer la propriété par “case_a_cocher” et modifier “Default” par “False” et “Variant2” par “True”. Veiller à respecter le texte de ces propriétés sinon l’interaction ne fonctionnera pas lors de l’utilisation de la variable booléenne !
4. Passer en mode Prototype, appliquer une interaction “On tap” entre la propriété “False” vers la propriété “True”. Choisir l’action “Change to” et cliquer sur le bouton “activer la propriété”.
5. Créer un 2e composant pour interagir avec le bouton “Continuez”. Nommer ce composant “accepter”, nom qui sera utilisé pour la variable booléenne.
6. Ajouter un variant et modifier l’apparence du bouton non actif (dans l’exemple nommé “accepter > False”).
7. Ajouter les instances “case_a_cocher” “False” et “accepter” “False” sur votre design en utilisant le panneau Assets.
8. Dans le menu Design, désélectionner tous les objets (touche esc) et activer la fonction “Local variables” en cliquant sur le bouton “modifier” (barre latérale droite).
9. Créer une variable booléenne et renommer “accepter” avec une valeur “False”.
10. Sélectionner sur votre design le “composant_case” et affecter la variable “accepter” en cliquant sur l’icône Assign variable… Faire la même chose pour l’autre composant du bouton à afficher.
number
créer des actions multiples
A.Drag images
1. Convertir la première image en composant et le nommer “images”.
2. Placer le composant sur la frame de l’interface et dupliquer deux fois en dehors du plan d’affichage de la frame. La fonction Clip content vous permet d’afficher les objets en dehors du plan qui par défaut est sélectionné (objet masqué).
3. Modifier l’apparence des images avec le mode Fill pour chaque composant. Cliquer sur la fonction Fill de l’image à copier puis sélectionner l’image du composant et coller. Vous devez voir apparaître deux images, il faut alors supprimer l’ancienne image. Attention, toutes les images doivent utiliser le même nom “img” à l’intérieur du composant !
4. Réduire l’échelle des deux images situées à l’extérieur et déplacer sur la frame pour amorcer l’affichage des images suivantes.
5. Dupliquer la frame, positionner et redimensionner les images. A nouveau, dupliquer cette frame et recommencer pour obtenir le dernier affichage des images.
6. Passer en mode Prototype, sélectionner la première image, choisir le Trigger “On drag”, Smart animate > Gentle (800ms). Répéter les opérations à partir de chaque image affichée en grande taille et placer les interactions entre chaque frame (3 au total dans cet exercice).
B. Like images (composant interactif) + overlay
1. Créer un composant pour l’interaction du cœur en suivant la procédure de la case à cocher (exercice précédent).
2. Lorsque l’utilisateur clique sur le cœur, on souhaite voir apparaître un overlay. Sélectionner l’instance du composant “hearth” positionné sur l’interface, on remarque que l’interaction “On tap” est présente mais on peut également ajouter d’autres interactions.
3. Cliquer sur le + puis choisir “Open overlay” > choisir la frame de votre overlay dans l’option “Overlay” > Position “Manual” (si vous souhaitez ajuster manuellement sa position à l’affichage) > sélectionner les options “Close when clicking outside” et “Background” (un fond noir transparent masquera l’arrière-plan) > Animation “Move in” > Direction “vers le bas” > régler le type mouvement souhaité et sa vitesse.
4. Régler le temps de présence de l’overlay sur l’interface en utilisant l’option “After delay”. Sélectionner la frame de l’overlay et en mode Prototype choisir dans Trigger “After delay” > Delay “800ms” > Action “Close overlay”.
C. Number
1. Créer une variable “Number” dans le panneau Local variables (Mode Design), nommer “itemCount” avec une valeur de “1”.
2. Préparer un composant constitué de tous les éléments de votre compteur (par exemple les symboles – et +, les chiffres, un texte…). Il est fortement conseillé de séparer tous les éléments car ils seront développés indépendamment !
3. Sélectionner le chiffre et appliquer la variable “itemCount” en passant par le panneau “Typography”.
4. Passer en mode Prototype, sélectionner le symbole + et appliquer Trigger “On tap” > Action “Set variable” > Variable “itemCount” > Value to “itemCount” + 1.
5. Si vous utilisez la même méthode sur le symbole – vous obtiendrez des valeurs négatives qui ne correspondent pas au besoin de l’interface. Au lieu de choisir “Set variable” > choisir “if/else” (condition).
Pour if > “itemCount” <=0 / Set variable > “itemCount”
Pour else > Action “Set variable” > Variable “itemCount” > Value “itemCount” -1
télécharger le dossier d’exercices
Version finalisée incluse !