Tuto Figma - Formation Gratuite
Concevoir l'interface visuelle de son site internet est une étape qui demande du temps et qui n'est pas donnée à tout le monde. Etant une véritable représentation de votre marque, votre site internet se doit de vous représenter dans les moindres détails. Couleur, police, style épuré, original, bref votre site web doit être à l'image de votre entreprise et ne doit surtout pas être négligé.
Pour vous aider dans cette démarche, nous avons décidé de créer un tuto gratuit sur cet outil qui est un outil de prototypage de site internet ou de votre application web pour créer un site qui vous ressemble facilement.
Quels sont les objectifs la formation Figma?
- Comprendre l'enjeu de l'UX design ;
- Comprendre le fonctionnement de Figma ;
- Apprendre à prototyper ;
- Comprendre les codes de design ;
- Améliorer l'expérience utilisateur sur votre site.
La différence entre l'UX et l'UI design
Lorsqu'on n'y a jamais mis les mains dedans, il est souvent compliqué de faire la différence entre l'UX et l'UI. Ils sont très souvent confondus, et pour cause, ils sont complémentaires.
Là où l'UX s'occupera de l'expérience utilisateur, l'UI, quant à lui, s'occupera de l'interface utilisateur. À savoir qu'il faut des deux obligatoirement pour créer un bon site à la fois ergonomique et simple à utiliser. Les deux équipes, d'UX et d'UI sont souvent amenées à travailler ensemble pour réaliser un bon site.
De manière assez générale on dira plutôt que l'UI est la forme et l'UX le fond d'un site internet.
Qu'est-ce que l'UX design d'un site web ?
Voici la présentation de ce qu'est l'UX de manière plus précise on dira qu'il s'agit d'un terme pour désigner tout ce qui touche à l'amélioration de l'expérience utilisateur. Tout doit être pensé pour faciliter les déplacements des utilisateurs sur le site.
L'UX ne s'intéresse pas à tout ce qui est d'ordre esthétique. Il met tout en oeuvre pour que le site internet fonctionne et assure sa fonction principale. Le reste qui concerne plus les détails, concerne l'UI.
Un UX designer pensera à l'accessibilité des informations et au fonctionnement du site web, des pages.
Qu'est-ce que l'UI ?
L'UI ce concentre sur 'les détails', néanmoins, sans eux, personne n'aurait envie de rester sur votre site internet et vos prospects feront vite marche arrière. Votre site web aura beau fonctionner, si celui de vos concurrents et plus agréable, plus ergonomique, vous pouvez être sûr que vous ne leur arriverez pas à la cheville.
Vous l'aurez deviné, l'UI design va s'intéresser non pas au fonctionnement de votre site, mais son aspect visuel. Ici travail les couleurs, la police du texte, la forme des calls-to-actions, les animations, etc.
Figma, c'est quoi ?
C'est un outil qui permet de créer des maquettes, des prototypes de votre site web avant de vous lancer directement sur votre CMS.
Figma est un logiciel qui a pour avantage d'avoir une version gratuite et de proposer le travail en équipe. Ce qui est plutôt intéressant si vous souhaitez gagner du temps et travailler ensemble sur le même projet.
Mais c'est aussi la possibilité d'avoir accès à des tableaux blancs collaboratif pour pouvoir réfléchir tous ensemble et avoir une trace écrite de vos idées.
C'est également la possibilité de créer des bétas-tests de votre site web pour pouvoir y apporter différentes modifications avant de vous lancer.
Avec cet solution, vous avez accès à une grande communauté qui propose des lives, des templates, des cours et des astuces. N'hésitez pas à y faire un tour, vous trouverez un tas d'informations importantes.
Figma c'est pour qui ?
Figma c'est l'outil pour tout ceux qui ont envie de créer des maquettes de leur site web avant de foncer tête baissée sur leur logiciel de conception. C'est pour tous ceux qui apportent une grande importance à cette étape de protypage dans l'intérêt d'en gagner par la suite.
C'est aussi pour les personnes qui ont envie de travailler à plusieurs sur leur projet commun. Et pour tous ceux qui ont un petit budget à accorder à cette étape.
Avec la solution Figma, vous n'avez pas besoins de faire appel à des développeurs, à utiliser du code. Les outils comme Figma, vous permettent de créer en autonomie vos interfaces mobile et web.
Les points forts de l'outil Figma
Figma a de nombreux avantages. Premièrement, ce qui fait de Figma un très bon outil c'est ses fonctionnalités disponibles qui permettent de créer des prototypes réalistes.
Vous avez aussi accès à de nombreuses ressources pour vous aider lors de vos prototypages. Une version gratuite est disponible vous permettant d'apprendre à manipuler l'outil. Le logiciel est collaboratif ce qui est plutôt avantageux.
Les inconvénients de Figma
L'inconvénient principale de Figma c'est qu'il faut obligatoirement avoir une connexion internet pour pouvoir l'utiliser. Comme il s'agit d'un outil en ligne, impossible de l'utiliser sans avoir accès à une connexion.
Combien coûte Figma ?
Figma fait partie des applications en ligne qui sont disponible gratuitement. Sa version gratuite permet de créer des drafts en illimité, d'avoir un groupe de projet. L'offre gratuite est suffisante pour découvrir l'outil.
S'ajoute à cela, deux versions payantes. Une pour les professionnels à 12$ par personne et par mois, et une autre pour les organisations à 45$ par mois et par personne avec plus de fonctionnalités disponible.
Ce que vous allez apprendre dans ces cours Figma
Dans ce tuto, vous aurez accès à 3 cours. Un cours sur le maquettage et propage, un autre cours sur les animations et un dernier cours sur les calls-to-action.
Ces cours vous permettront de concevoir le protypage de page de votre site web pour tous et gratuits.
Tuto 1 : Comment créer votre prototype de A à Z ?
Dans ce premier cours vous apprendrez les bases de l'outil. Vous apprendrez à vous créer un comptes, comprendre les wireframes et à en créer ainsi que la création de vos prototypes avec les composants.
Retrouvez le chapitre 1 en cliquant ici.
Tuto 2 : Comment donner vie à vos prototypes ?
Dans ce second cours vous apprendrez comment rendre vos prototypes plus vivants sur Figma. Vous verrez comment animer vos pages et comment créer des scrolls.
Vous allez découvrir les différentes fonctionnalités, interactions, et les possibilités de maquettage dont propose Figma.
Retrouvez le chapitre 2 en cliquant ici.
Tuto 3 : Designer vos calls-to-action
Dans ce dernier cours, vous aurez différentes astuces. Vous apprendrez à designer vos calls-to-action grâce aux différents effets disponibles sur Figma, à créer du contenu responsive en y appliquant des contraintes et pour finir, savoir positionner vos calls-to-action au bon endroit.
Retrouvez le chapitre 3 en cliquant ici.
