Figma : qu’est-ce que c’est et comment ça marche ?
Figma est un éditeur de graphiques vectoriels innovant et intéressant conçu pour le web dont l’utilisation n’a cessé de croître au fil des ans : c’est aujourd’hui l’une des plateformes les plus utilisées par les designers UX/UI, les agences de communication et les entreprises du monde entier !
La première version de Figma a été lancée en 2015 avec l’objectif affiché de permettre à chacun de ” faire preuve de créativité à l’aide d’un navigateur “. En 2022, Adobe, le géant américain connu pour sa suite de programmes graphiques numériques, a racheté Figma pour environ 20 milliards de dollars.
Nous ne savons toujours pas quel sera l’avenir de Figma, mais il ne fait aucun doute que la plateforme est l’un des outils d’édition graphique les plus populaires pour les sites web et les interfaces d’applications aujourd’hui. Aujourd’hui, voyons ce qu’est Figma et comment il fonctionne : un guide, celui-ci, pour ceux qui ne connaissent pas encore le programme ou qui en ont seulement entendu parler !
Qu’est-ce que Figma ?
Figma est une plateforme d’édition graphique et de conception d’interfaces : elle est basée sur le web et collaborative. Avec Figma, vous pouvez faire un peu de tout graphiquement – de la conception de sites web et d’interfaces utilisateur graphiques pour des applications à la création de posts sur les médias sociaux et de présentations – et c’est donc un outil de plus en plus populaire pour les entreprises et les studios de graphisme.
L’une des caractéristiques les plus innovantes de Figma est certainement le fait qu’il s’agit d’un outil collaboratif. Cela signifie que différents graphistes peuvent collaborer à la création d’un design, mais aussi que les développeurs et les rédacteurs sont déjà impliqués dans les premières étapes du travail.
Le résultat ? Un gain de temps considérable : finis les échanges de fichiers interminables. En outre, la collaboration favorise la créativité.
Le fait que Figma soit basé sur le web – c’est-à-dire qu’il suffit d’y accéder via son navigateur – est une autre caractéristique très appréciée : il n’est pas nécessaire d’installer et de mettre à jour des programmes ou d’acheter des licences ; tous les membres de l’équipe peuvent travailler à partir de n’importe quel système d’exploitation sans avoir à se préoccuper, entre autres, des polices installées sur les machines ou de changer d’ordinateur.
Tout est sauvegardé dans le nuage et en temps réel, ce qui permet d’éviter divers problèmes, comme le fait de travailler négligemment sur des fichiers obsolètes ou de perdre beaucoup de temps à échanger des documents, même très lourds. Bien entendu, pour utiliser Figma, vous devez être en ligne pratiquement tout le temps et disposer d’une connexion Internet stable et de bonne qualité.
Tu as maintenant une meilleure idée de ce qu’est Figma. Enfin, il faut préciser que Figma est un programme gratuit, du moins dans sa version de base. Le pack Starter gratuit permet aux équipes de travailler sur trois fichiers dans le cadre d’un projet et stocke les versions précédentes pendant 30 jours. Il convient de noter que les étudiants et les enseignants peuvent également demander un accès gratuit (à partir d’ici) à la version professionnelle de Figma – qui coûte par ailleurs 12 dollars par utilisateur et par mois.
En résumé, qu’est-ce que Figma ?
- Figma est un programme d’édition graphique et de prototypage.
- Figma est principalement utilisé pour la conception numérique, c’est-à-dire la conception de sites web et d’interfaces d’applications.
- Figma est basé sur le web : cela signifie qu’il n’y a pas de logiciel à télécharger et à installer, mais qu’il est utilisé via le navigateur et une connexion internet.
- Figma est collaboratif : plusieurs utilisateurs ayant des rôles différents peuvent travailler simultanément sur un projet.
- Figma est en temps réel : tout est sauvegardé en permanence dans le nuage.
- Figma est gratuit dans sa version de base.
Comment fonctionne Figma ?
Avez-vous une idée plus claire de ce qu’est Figma et de son potentiel ? Avant de voir ensemble comment fonctionne Figma – du moins dans ses éléments de base et les plus innovants – clarifions tout de suite un aspect important : Figma montre toute son efficacité non seulement pour la conception finale d’un produit graphique, mais aussi et surtout dans toutes les phases précédentes.
Brainstorming, évaluation des différentes options graphiques, prototypage, collecte et mise en œuvre du retour d’information : vous pouvez utiliser Figma de manière très efficace à toutes ces étapes ! Par exemple, dans Figma, une équipe de concepteurs peut construire en collaboration le wireframe d’un site web, c’est-à-dire le squelette simple d’un design sans couleurs ni styles, et recueillir immédiatement les premiers commentaires des autres membres de l’équipe ou leur demander de voter pour la meilleure option. Ou encore prototyper l’interface d’une application, c’est-à-dire simuler la navigation et l’interaction au sein d’une conception à un stade précoce.
Expliquons maintenant comment fonctionnent les aspects fondamentaux de Figma. À la fin de l’article, nous vous recommanderons quelques cours et ressources pour approfondir vos connaissances et devenir un professionnel de Figma !
Création d’un compte
Pour créer un compte, il suffit de s’inscrire gratuitement sur figma.com. Une fois inscrit, vous pouvez créer des équipes, des projets et des travaux (fichiers). Invite d’autres utilisateurs dans ton équipe afin de leur donner accès aux projets sur lesquels tu collaboreras.
L’espace de travail
La zone de travail de Figma est un vaste environnement – un carré pouvant atteindre 65 000 pixels – dans lequel vous pouvez placer les différents écrans de la conception sur laquelle vous travaillez.
Pour placer les captures d’écran, utilisez l’outil Cadres : vous pouvez choisir parmi des dizaines de tailles prédéfinies, par exemple l’iPhone 14, l’Apple Watch 41 mm ou un post Facebook. De cette manière, vous pouvez par exemple rassembler les différentes pages d’un site web dans un seul fichier ou montrer comment une même page doit être affichée sur différents appareils.
Bibliothèques et communautés
Les bibliothèques de composants constituent un autre aspect intéressant de Figma. Si vous ne voulez pas perdre de temps à créer des éléments à partir de zéro, vous pouvez accélérer la création d’un design – ou d’une ébauche – en utilisant les éléments graphiques les plus disparates déjà présents dans les bibliothèques. Dans les bibliothèques, vous trouverez une barre de navigation préfabriquée, par exemple, des icônes ou les boutons les plus courants.
Parcourez la communauté Figma – l’un des endroits les plus intéressants et les plus utiles pour ceux qui utilisent la plateforme – pour rechercher ces éléments et d’autres. Vous y trouverez des sources d’inspiration, du matériel de réflexion, des éléments graphiques et des systèmes de conception, c’est-à-dire un ensemble de règles, de lignes directrices et d’éléments graphiques qui contribuent à donner de la cohérence à votre produit graphique.
Prototypage
Dans la section Prototype de Figma, vous pouvez relier différents écrans ou éléments graphiques en identifiant des nœuds : par exemple, un nœud peut être placé sur l’élément “à propos” d’un menu qui conduira l’utilisateur à la page correspondante. Ou sur un bouton “s’inscrire à la lettre d’information”. En lançant le prototype, vous pouvez simuler le fonctionnement de l’interface d’un site web ou d’une application à un stade précoce, ce qui vous permet de comprendre ce qui fonctionne et ce qui doit être amélioré !
Recueillir les commentaires
Une fois que le fichier a été partagé avec le reste de l’équipe, il est possible de recevoir et de placer des commentaires à l’aide de post-its de couleur pratiques. Les post-its sont utilisés pour voter, signaler des problèmes ou donner des conseils par le biais de commentaires plus structurés. Par exemple, vous pouvez présenter à votre équipe trois options différentes pour la conception d’une page d’accueil et voir, en temps réel, ce que vos collègues en pensent.
Les commentaires peuvent également être communiqués oralement au programme, qui les transcrira. Pratique, n’est-ce pas ?
Cours et autres matériels utiles pour l’utilisation de Figma
Avez-vous vu ce qu’est Figma et comment il fonctionne ? Vous l’aurez compris, les possibilités sont infinies ! Nous parions que tu as déjà envie de mettre la main sur le programme et de faire tes premières expériences créatives avec ton équipe.
Si vous souhaitez devenir un pro, il existe une multitude de ressources gratuites en ligne pour apprendre à mieux utiliser Figma.
Une première introduction utile est celle fournie par Figma lui-même et que vous trouverez ci-dessous : en un peu plus d’une heure, les différentes vidéos donnent un aperçu complet de la plateforme.
Il existe également une myriade de cours en ligne, pour la plupart gratuits. Nous signalons par exemple ce cours de Sherpa Design, la communauté italienne des designers UX/UI. Il y a aussi les cours officiels proposés par Figma, avec des modules d’une dizaine de minutes chacun, et le cours pour débutants proposé par The Designer Ship.
Sympa, non ? Maintenant que nous avons compris ce qu’est Figma et comment il fonctionne, pour lequel de vos prochains projets allez-vous l’utiliser ?