Figma / Intérêt du logiciel
Nombreuses utilités, le prototype web ne représente qu’une partie des applications
Travail en équipe sur un même fichier (partage fichier, commentaires sur maquette…)
Forte communauté d’utilisateurs
Beaucoup de plugins existants
Logiciel complet qui présente plus de fonctionnalités que XD et dont l'approche est plus proche du WEB.
Création d’un design
Création d’un prototype web
Raccourcis clavier
Cmd + D : Dupliquer
Cmd + G : Grouper
Cmd + A : Sélectionner tous les éléments sur une frame
^ : déplacer un élément en arrière plan
Cmd + ^ : déplacer un élément en arrière
Maj : Changer de taille en gardant les proportions
Cmd + étirer : Étirer une frame sans déplacer les éléments
K : étirer ou réduire en gardant les proportions
F : Créer une frame
Maj + A : Création auto-layout (transforme par la même occasion un élément sélectionné en Frame)
T : Texte
R : Rectangle
L : Ligne
Maj + L : Flèche
O : Ellipse
Maj + G : Afficher / masquer les grilles
Maj + I : Appeler un composant
Maj + déplacer : Déplacer avec alignement vertical ou horizontal
Espace : Naviguer dans l’espace de travail sans impacter le design
Cmd + R : Renommer
Cmd + Opt + P : Accéder aux plugins Figma
Maj + E : Passer mode design au mode prototype
Double cliquer sur la zone de texte : Ajuster le calque au texte
Bonnes pratiques générales
Organiser son fichier de manière à bien différencier : UI, UX, élément de charte graphique, élément de design web, etc. Dans le cadre d’un travail en agence (ou d’un travail en équipe), la structure de fichier peut être imposée, mais dans tous les cas vous gagnerez du temps à bien organiser votre travail.
Au minimum, regrouper dans “une planche” du logiciel utilisé pour le prototypage les éléments d’identité du projet (typo, couleurs, pictos, logo, illustrations…)
Bien nommer les différents éléments ou ensembles d’éléments créés
Ordonner les calques
Les bases :
Panneaux et structure du logiciel Â
Regarder entièrement les chapitres de 1 à 5
https://www.youtube.com/watch?v=t54_l6ztreM
Barre outil : en haut, Ă gauche
Calques (layers) : 1er onglet panneau de gauche
(assets) : 2e onglet panneau de gauche
Propriétés : panneau de droite dans lequel il y a l’onglet design et l’onglet prototype
Espace de travail : au centre
Plan de travail (frame)
Les grilles / colonnes :
https://academie.digidop.fr/formations/figma/1-3-ux-marges-espacements
Une bonne pratique consiste à créer un design à l’aide d’un système de grille qui comprend des colonnages. Usuellement, 12 colonnes sont créées, car ce chiffre offre une possibilité de division intéressante (/2, /3, /4). Il faut paramétrer les colonnes et les marges d’une maquette au commencement et garder les mêmes valeurs sur l’ensemble du projet. Dans le cas de projet plus créatif ou sur lequel on cherche de l’originalité, il est possible de s’affranchir de cette règle, le travail de maquettage est alors plus complexe pour aboutir à un ensemble pratique et cohérent.
Raccourci clavier pour afficher ou masquer les colonnes : control (shift) + g
Les Frame / groupes :
Ressources
Les groupes
Lorsque plusieurs éléments sont regroupés en groupe, vous pouvez :
Les déplacer en même temps
Augmenter ou réduire la taille en même temps
Définir en une action l’espacement entre les différents éléments du groupe (il faut cliquer sur le trait rose qui se trouve alors entre les éléments)
Modifier l’ordre des éléments groupés (il faut déplacer l’élément en cliquant sur le rond rose au-dessus de l’élément)
Les frames
DĂ©signe deux choses dans XD :
L’espace de travail (défini par une taille d’écran spécifique : desktop, tablette ou mobile)
Le “cadre” ou le “contenant” dans lequel on a un ou plusieurs éléments de contenu pour lesquels il sera possible de paramétrer un ensemble de propriétés pour définir la façon dont ils s’organisent entre eux.
Caractéristiques :
Idem que les groupes
Une frame permet de définir la relation entre les différents objets qui font partie du frame en cas de redimensionnement :
Définir une caractéristique de positionnement pour l’ensemble des éléments qui font partie du frame > “fenêtre” Autolayout (voir plus bas)
Définir le positionnement de chaque élément individuellement > “fenêtre” Constraints (accessible, seulement si aucun autolayout n’a été appliqué, en cliquant sur un élément)
Définir des marges intérieures (padding)
Autolayout et position absolute :
Autolayout
Une grande force de Figma. À maîtriser absolument.
L’autolayout s’applique sur des frames. Il permet de créer des frames où les éléments à l’intérieur s’ajustent automatiquement selon des règles définies.
L'autolayout permet de :
RĂ©aliser des maquettes responsives
Adapter la taille d'un bouton en fonction de son contenu
Ajuster automatiquement l'écart entre les différents liens de menu
Permettre de préserver écarts et alignements même lorsque des éléments sont ajoutés, redimentionnés ou retirés.
Position absolute
La position absolute permet de placer un élément librement à l’intérieur d’une frame, sans qu’il soit influencé par la disposition automatique (Auto layout) du parent.
Clic droit sur le calque → "Position absolue"
OU cocher l’option dans le panneau de droite : Absolute position
Composants
Le composant
On transforme en composant des éléments qui vont être répétés sur plusieurs pages de la maquette (menu, footer…) ou plusieurs fois sur une même page (boutons, pictos, CTA…).
Un composant présente deux aspects :
Composant principal (appelé “main component”) qui définit les caractéristiques du composant.
Occurrences (appelées “instance”) qui sont des copies du composant principal qui reste lié à ce dernier. Ainsi, si vous modifiez le composant principal, l’instance sera modifiée également.
Caractéristiques
Lorsqu’une modification est faite sur le composant principal, elle s’applique automatiquement sur les occurrences.
Il est possible de modifier les données qui sont dans les occurrences (texte, couleur, photo…)
Il est possible de mettre un lien dans un composant principal, il s’appliquera également aux occurrences
Une bonne pratique consiste à créer une page dans le projet sur laquelle tous les composants principaux sont apposés afin de les retrouver rapidement dans le cas où l’on souhaiterait les modifier. À savoir : les composants peuvent se partager avec toute une équipe (en version payante).
Le composant est physiquement présent dans la page sur laquelle il a été créé (idéalement une page dédiée à tous les composants) ainsi que sur l’onglet “assets” dans lequel il est possible de le sélectionner pour importer une instance sur une frame.
Prototypage
Mise en place de la navigation
DĂ©clencheurs d'interactions
Exemples :
“Navigate to” : aller sur une autre frame
“Open overlay” : ajouter une frame au-dessus (utile en cas de popup par exemple)
Animation des boutons
SĂ©lectionner le composant
Ajouter un nouveau variant
Modifier le second variant, nommer la propriété
Cliquer sur prototype > interaction (en haut Ă droite)
Ajouter une interaction et aller dans les paramètres (cliquer sur le nom de l’interaction)
Définir le mode de déclenchement de l’interaction
Définir le type d’action, le variant à laquelle et la propriété à laquelle elle s’applique
Définir la temporalité et la longueur de l’action
Les variables
Les variables sont des fonctionnalités très puissantes dans Figma, elles permettent de pousser le prototypage plus loin et de se rapprocher des fonctionnalités qu’offrent les CMS.
Attention :
Le paramétrage des variables peut se révéler assez long, il faut s’assurer que le client ou le process interne de l’entreprise implique de pousser une maquette aussi loin avant de lancer cette phase de travail. Il est toutefois important d’appréhender les variables, car elles offrent des possibilités multiples et peuvent vous permettre de matérialiser un concept de design complexe.
Types de variables :
Chaînes : permets la mise à jour de contenu textuel
Nombres : permets de modifier un prix, une dimension d’objet, une valeur d’espacement, etc.
Couleurs : permets de changer la couleur d’un ou de plusieurs éléments présélectionnés
Valeurs booléennes : visibilité de calque
Étapes :
DĂ©finissez vos variables
Organiser vos variables en groupes puis en collections
Appliquer des variables à un ou plusieurs élément(s) de la maquette
Utiliser l’action “set variable”
