(Info D2) Web 1/3 : Figma

• Créer un compte Figma et installer le logiciel
• Rejoindre l'équipe Figma Education "Team DSAA"

— Figma

— Un logiciel d'UI Design pour créer, prototyper et publier des interfaces web

• Figma est un logiciel spécialisé dans la création et le prototypage d'interfaces (UI, ou User Interface). Il s'agit même désormais d'une suite d'outils (Figma Design, Slides, FigJam, Make, Site, etc.), qui permet d'aller au-delà du prototypage, jusqu'à la mise en ligne de sites et applications web fonctionnels.
• Si Figma s'est progressivement imposé comme le principal logiciel de UI Design, il en existe d'autres : Adobe XD, Webflow, etc. L'alternative la plus intéressante et la plus proche de Figma est PenPot, une logiciel web open source et gratuit quasi équivalent.

— Formation vidéo Figma design for beginners

La formation mise en lgne par Figma sur YouTube est très bien faite : https://www.youtube.com/playlist?list=PLXDU_eVOJTx5IuSrbtanZHnDuPB3Hx0hq
N'hésitez pas à la visionner en parallèle ou complément de cette formation qui va aller assez vite.

— Organisation des fichiers et de l'interface

• Équipes › Projets › Fichiers (design, figjam, etc.)
• Community : accès à des fichiers partagés, templates, UI kits, plugins
• Fichiers › Pages › Calques › Frames (même si par défaut les éléments ne sont pas forcément regroupés dans des frames)
• 2 principaux modes dans Figma design : Design (créer les écrans) / Prototype (créer des interactions et tester). Il y aussi un mode Dev, très utile pour passer du design au développement.

— Frames

— Création d'une frame

• Choisir l'outil Frame (raccourci : F)
• Partir d'un préréglage de la liste (Mobile, Bureau, etc.)

— Guides

• Selon le projet, ajouter des guides visuels : grille, colonnes ou lignes
• Raccourci pour afficher/masquer les guides : Maj + G

— Positionnement des éléments

— Mise en page automatique : auto layout

L'auto layout est une des fonctionnalités les plus intéressantes de Figma. Il permet de regrouper des éléments dans des frames automatiques, appelés conteneurs (containers). À la différence d'un groupe d'éléments dans Illustrator, il va être possible d'agir à la fois sur le conteneur pour définir des règles de postionnement, définir des marges et les tailles, permuter des éléments, etc. Il est aussi possible d'agir sur chaque élément individuellement pour compléter les règles générales du conteneur.

Pour activer l'auto layout :

• Sélectionner les éléments à regrouper et appuyer sur maj + A
• Les éléments sont désormais regroupés dans une Frame de type auto layout (ou Mise en page automatique). Précision : la frame créée plus haut n'a pas de comportement automatique par défaut, mais il est possible de l'activer.
• Les éléments vont donc désormais se positionner et se réorganiser en fonction de règles à définir dans le panneau... Mise en page automatique

Cas d'utilisation :

• 1er cas : regrouper 2 éléments liés, comme un bouton :

• 2e cas : regrouper plusieurs éléments dans une liste ou un tableau d'éléments (menu, galerie, etc. ou toute mise en page plus ou moins complexe) :

La Frame principale peut aussi passer en auto layout. La preuve en vidéo :

— Contraintes (responsive)

• Le positionnement par contraintes est utile dans une optique responsive : on peut souhaiter qu'un élément reste positionné au crntre, ou en bas et à droite, etc., quelle que soit la taille de l'écran.
• Tout se passe dans la zone Contraintes du panneau Position.

Exemple :

— Composants

• Créer une page composants pour regrouper l'ensemble des composants
• Création d'un composant réutilisable.
  • Sélectionner l'élément à convertir en composant
  • Cliquer sur l'icône Créer un composant. Raccourci : option + command + K (Mac) ou alt + ctrl + K (PC)
  • Déplacer le composant sur la page Composants
  • Nommer ce composant pour vous repérer par la suite

• Création d'instances
  • Depuis la page principale, ouvrir l'onglet Ressources à côté de Fichiers
  • Parcourir les composants et sélectionner celui à insérer dans la page principale
  • Cliquer sur Insérer l'instance, ou glisser-déposer l'instance sur la page

• Création de variantes d'un composant.
  Très utile pour prévoir différents états à un même composant. L'exemple le plus parlant : définir un état de survol à un bouton.
  • Dans la page Composants, sélectionner le composant Bouton
  • Cliquer sur le bouton Ajouter une variante (en haut à droite du panneau Design). Figma duplique automatiquement le bouton.
  • Modifier la variante
  • Et renommer la propriété et sa valeur, par exemple propriété État, et valeurs Par défaut pour la première variante, et Survol pour la deuxième.

— Protoypage

— Basculer en mode Prototype

Une fois les écrans créés, le mode prototype va permettre de créer les interactions souris ou touch.

• Une interaction combine un événement (déclenchement) et une action (ou effet). Quand je [événement] il se passe [action].

  • Les principaux événements : clic, survol, scroll, etc.
  • Les actions : afficher une autre frame, faire apparaître un panneau, passer à une variante de composant, changer une variable, etc.

• C'est dans le mode prototype que l'on définit également le comportement des éléments vis-à-vis du scroll : est-ce que les éléments sont liés au scroll et donc bougent dans la page, ou sont-ils fixes ?

— Preview et mode présentation

• Maj + Espace : ouvre la fenêtre de preview du prototype
• option + command + entrée (Mac) ou alt + ctrl + entrée (PC) : ouvre le prototype en mode présentation

— Créer une interaction simple avec effets d'animation

La vidéo ci-dessous présente 2 manières de créer une interaction simple de navigation :

— Ouvrir et refermer une modale, ou superposition

— Scroll et position fixe

• Pour fixer un élément il faut dans un premier temps le sortir de l'auto layout, puis ajuster les marges pour corriger les décalages produits lorsque l'élément sort du flux.
• Puis dans le panneau Prototype, déterminer le comportement des éléments : défilement vertical, position fixe, etc.

Exemple en vidéo :

— Variables

Les variables sont très utiles pour enregistrer une valeur, notamment une couleur, qui sera utilisée pour plusieurs éléments du site. Cela fonctionne à peu près comme les feuilles de style.

— 4 types de variables

• Les variables de type nombre dont la valeur doit être un nombre (avec ou sous virgule : 1, 0.3, etc.)
• Les variables de type chaîne ou String : leur valeur est une chaîne de caractères (lettre, mot, suite de mots)
• les variables de type booléen : leur valeur est soit true, soit false
• les variables de type couleur : leur valeur est une couleur exprimée en hexadécimal (par exempe #FF0000 pour rouge)

— Exemple d'utilisation d'une variable de couleur

• Définir la variable, éventuellement dans une nouvelle collection. Bien choisir son nom, puis définir sa valeur.
• Créer des éléments graphques, et définir la couleur en allant chercher dans Bibliothèques, puis en choisissant la variable de couleur qui vient d'être créée.
• En modifiant la valeur de la avariable, tous les éléments dont la couleur a été définie avec cette variable sont modifiés.

En vidéo :

— Mofifier la variable d'une couleur au clic (prototypage)

En vidéo :

— Afficher/masquer un élément avec une variable booléenne

• La variable booléenne peut prendre uniquement ces 2 valeurs : true et false.
• Il est possible de définir la visibilité d'un élément avec cette variable : si elle est égale à true alors l'élément est visible ; et inversement.
• Pour associer la variable à la visibilité de l'élémen, faire un clic droit sur l'icône oeil dans la partie Apparence du panneau droit.
• Puis définir les interactions pour changer la valeur de la variable en true et false.

En vidéo :