Figma : qu’est-ce que c’est et comment ça marche ?

Figma est un éditeur de graphiques vectoriels innovant et puissant pour le web dont la base d’utilisateurs s’est considérablement élargie au fil des ans : aujourd’hui, c’est l’une des plateformes les plus utilisées par les concepteurs UX/UI, les agences de communication et d’autres entreprises.

La première version de Figma a été lancée en 2015 avec l’objectif déclaré de permettre à “n’importe qui d’être créatif en créant des outils créatifs simples et gratuits dans un navigateur“. En 2022, le géant américain de la technologie Adobe – célèbre pour sa suite d’outils de design digital – a racheté Figma pour environ 20 milliards de dollars.

L’avenir de Figma est encore incertain, mais la plateforme reste sans aucun doute l’un des outils d’édition graphique les plus populaires pour les sites web et les interfaces d’applications. Aujourd’hui, nous allons voir ce qu’est Figma et comment il fonctionne : c’est un guide pour ceux qui ne connaissent pas le programme, ou qui en ont peut-être seulement entendu parler.

Qu’est-ce que Figma ?

Figma est une plateforme d’édition graphique et de design d’interface basée sur le web et collaborative. Avec Figma, vous pouvez faire un peu de tout en matière de conception graphique – de la création de sites web et d’interfaces graphiques pour des applications à la réalisation de posts pour les réseaux sociaux et à l’élaboration de présentations – et c’est la raison pour laquelle les entreprises et les agences de design l’adorent.

L’une des caractéristiques les plus innovantes de Figma est son caractère collaboratif. Différents membres d’une équipe peuvent travailler sur le même fichier en temps réel : cela signifie que plusieurs graphistes peuvent travailler sur un projet à la fois, sans parler des développeurs et des copywriters.

Résultat ? Vous gagnez un temps fou : finis les partages de fichiers interminables. De plus, la collaboration stimule la créativité.

Le fait que Figma soit basé sur le web – en d’autres termes, accessible via un navigateur – est un autre grand avantage : il n’est pas nécessaire d’installer et de mettre à jour des programmes, ni d’acheter des licences. Chaque membre de l’équipe peut travailler sur un projet à partir de n’importe quel système d’exploitation sans avoir à se préoccuper des polices de caractères de sa machine ou à changer d’ordinateur.

Tout est sauvegardé dans le Cloud et en temps réel, ce qui évite des problèmes tels que travailler accidentellement sur un fichier périmé ou perdre du temps à envoyer et recevoir des documents volumineux. Évidemment, pour utiliser Figma, vous devez être presque toujours en ligne et disposer d’une bonne connexion internet.

Vous avez maintenant une idée plus claire de ce qu’est exactement Figma. À ce stade, il convient de préciser que Figma est un programme gratuit, du moins dans sa version de base. Le Starter pack gratuit permet aux équipes de travailler sur trois fichiers dans le cadre d’un projet et de sauvegarder les versions précédentes pendant 30 jours. Les étudiants et les enseignants peuvent également demander un accès gratuit (ici) à la version professionnelle de Figma – qui coûte par ailleurs 12 dollars par mois et par utilisateur.

Donc, pour résumer :

• Figma est un programme d’édition graphique et de prototypage.
• Figma est principalement utilisé pour le design digital : en d’autres termes, pour 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 ; au lieu de cela, il est utilisé via un navigateur et une connexion internet.
• Figma est collaboratif : plusieurs utilisateurs ayant des rôles différents peuvent travailler en même temps sur un projet.
• Figma est en temps réel : tout est sauvegardé en permanence dans le Cloud.
• Figma est gratuit dans sa version de base.

Comment fonctionne Figma ?

Nous espérons que vous avez maintenant une idée plus claire de ce qu’est Figma et de son potentiel. Mais avant d’examiner le fonctionnement de Figma – du moins en ce qui concerne les bases et les fonctions les plus innovantes – nous devons clarifier un aspect important : Figma est vraiment utile dans toutes les phases qui précèdent la conception finale d’un projet graphique, et pas seulement dans le produit final.

Brainstorming, évaluation des différentes options graphiques, prototypage, collecte et mise en œuvre du feedback : Figma peut être très efficace pour toutes ces étapes ! Par exemple, dans Figma, une équipe de designers peut collaborer à l’élaboration du wireframe d’un site web (c’est-à-dire le squelette simple d’un design sans couleurs ni éléments visuels), recueillir immédiatement les commentaires des autres membres de l’équipe ou soumettre la meilleure option à un vote. Il peut également être utilisé pour le prototypage de l’interface d’une application : il s’agit de simuler la navigation et l’interaction avec un design.

Voyons maintenant comment opèrent les fonctions de base de Figma. À la fin de l’article, nous vous recommandons quelques cours et ressources utiles pour tirer le meilleur parti de Figma.

Création d’un compte

Pour créer un compte, il suffit de s’inscrire gratuitement sur figma.com. Une fois inscrit, il est possible de créer des équipes, des projets et des fichiers. Invitez d’autres utilisateurs dans l’équipe pour leur donner accès aux projets sur lesquels vous travaillez ensemble.

L’espace de travail

La zone de travail de Figma est un espace énorme – couvrant jusqu’à 65 mille pixels – dans lequel vous pouvez ajouter les différents écrans de dessin sur lesquels vous travaillez.

Pour configurer vos écrans, utilisez l’outil Cadres : vous pouvez choisir parmi des dizaines de tailles prédéfinies, telles que l’iPhone 14, l’Apple Watch 41 mm ou un post Facebook. Cela vous permet, par exemple, de rassembler dans un seul fichier les différentes pages d’un site web ou de 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 une autre caractéristique intéressante de Figma. Si vous préférez ne pas perdre de temps à construire des éléments à partir de zéro, vous pouvez accélérer la création d’un design – ou d’une ébauche – en utilisant toute une série d’éléments graphiques provenant des bibliothèques. Dans celles-ci, vous trouverez une barre de navigation prête à l’emploi contenant les boutons les plus couramment utilisés.

Parcourez la communauté Figma – l’un des endroits les plus intéressants et les plus utiles pour les utilisateurs de la plateforme – pour trouver ces éléments et bien d’autres encore. Vous y trouverez de l’inspiration, du matériel de réflexion, des éléments graphiques et ce que l’on appelle des systèmes de design, c’est-à-dire un ensemble de règles, de lignes directrices et d’éléments graphiques qui contribuent à la cohérence de votre design graphique.

Prototypage

Dans la section prototype de Figma, vous pouvez relier entre eux différents cadres ou éléments graphiques : par exemple, une connexion peut être placée sur l’élément “à propos” d’un menu, ce qui amènera l’utilisateur à la page correspondante. En créant un prototype, vous pouvez simuler le fonctionnement d’un site web ou d’une application dès les premières étapes de la conception, ce qui vous permet de voir ce qui fonctionne et ce qui doit être amélioré !

Recueillir des commentaires

Une fois que vous avez partagé le fichier avec le reste de l’équipe, vous pouvez recevoir et insérer des commentaires à l’aide de notes autocollantes de couleur pratiques. Ces notes sont utilisées pour voter, signaler des problèmes ou faire des suggestions. Par exemple, vous pouvez proposer à votre équipe trois options différentes pour le design d’une page d’accueil et découvrir, en temps réel, ce qu’en pensent vos collègues.

Vous pouvez également laisser des commentaires vocaux, que le programme convertit ensuite en texte. Pratique, non ?

Cours et autre matière utile pour l’utilisation de Figma

Maintenant que vous savez ce qu’est Figma et comment il fonctionne, vous avez compris qu’il offre des possibilités infinies ! Nous sommes certains que vous avez déjà envie de l’essayer et de faire des expériences créatives avec votre équipe.

Si vous voulez vraiment devenir un pro, il existe toutes sortes de ressources gratuites en ligne pour apprendre à tirer le meilleur parti de Figma.

Un point de départ utile est l’introduction fournie par Figma que vous trouverez ci-dessous : en un peu plus d’une heure, cette série de vidéos vous donnera un aperçu complet de la plateforme.

Le web offre une multitude de cours, dont beaucoup sont gratuits. https://www.sherpadesign.it/corso-figma avec des modules de dix minutes chacun .Il existe également des cours pour débutants dispensés par The Designer Ship.

Pas mal, hein ? Maintenant que vous savez ce qu’est Figma et comment il fonctionne, quelle utilisation allez-vous en faire ?