A quoi sert Figma et quels sont ses atouts ?

‍

‍Figma est un outil de conception et création visuelle de sites internet et applications. Il est aujourd’hui le plus populaire et le plus performant pour différentes raisons que nous allons évoquer dans cet article.

‍

I. A quoi sert Figma ?

‍

‍

1. Design de sites Web et Applications sur Figma

La fonction première de Figma est de permettre la création de maquettes de sites internet et applications. En effet, cet outil s’est imposé depuis quelques années comme la référence en matière de conception visuelle.

Son interface intuitive et la multitude de fonctionnalités qu’il offre font de Figma une boîte à outil qui permet de s’attaquer à n’importe quel chantier sereinement. Tant sur le paramétrage et l’organisation que sur l’expression de la créativité, tout est optimisé pour qu’un Designer utilisant Figma soit le plus libre et efficace possible.

‍

‍

2. Création de Wireframe grâce à Figma

Lorsque l’on souhaite réaliser un projet digital tel qu’un site internet ou une application, il est préférable de passer par plusieurs étapes afin d’avoir un produit optimisé pour l’utilisateur comme pour le concepteur. Pour en savoir plus à ce sujet, vous pouvez consulter notre article qui traite des différentes étapes nécessaires à la réussite d’un projet de site ou application.

Ici, deux grandes phases de la conception nous intéressent :

-   On travaille tout d’abord sur l’expérience utilisateur (UX).

-   Ensuite vient la réalisation du Wireframe. Le Wireframe est le plan sur lequel figurent toutes les pages et interfaces du produit envisagé. C’est donc une version schématique du site à venir. Cela revient à créer le squelette du projet digital avant de l’habiller visuellement.

Lors de la création du Wireframe, le designer et les équipes concernées par le produit définissent ensemble le cadre et l’organisation de ce dernier. On travaille alors sur les différentes pages et leur agencement ainsi que sur la mise en page de ces dernières au niveau des éléments graphiques (images, textes, boutons, animations…)

Le fait que l’interface Figma soit intuitive et très facile à utiliser font de cette dernière un excellent outil de création de Wireframes, comparable à Miro par exemple.

En effet, Figma permet de créer des éléments schématiques et des formes très facilement. Ces derniers sont particulièrement utiles, d’autant plus qu’il est possible d’en faire des « composants » afin de pouvoir les utiliser à répétition et les modifier simultanément.

Par ailleurs, certains plugins tels qu’Arrow Auto ou Draw Connector permettent d’ajouter des liens entre les différentes pages du squelette.  Le rendu esthétique est alors encore plus parlant, ce qui est idéal pour le présenter à une autre équipe ou un client.

‍

‍

3. Création de supports visuels et chartes graphiques sur Figma

Figma est un outil complet qui permet de réaliser seul et efficacement des tâches pour lesquelles il aurait fallu utiliser différentes applications il y a quelques années.

En effet, il est extrêmement aisé de créer tous types de supports visuels sur Figma. On peut penser ici à des logotypes, à des chartes graphiques complètes (typographies, colorimétrie) ou encore à des supports de communication tels que des flyers, plaquettes et cartes de visite. La retouche photo est elle aussi aisée sur Figma, et l’export des éléments réalisés l’est tout autant, sous différents formats.

‍

‍

Figma est donc un outil particulièrement complet et utile pour les UI et UX Designers, quel que soit le chantier auquel ils souhaitent s’atteler.

Toutefois, les fonctionnalités principales de Figma restent la conception et la réalisation de maquettes visuelles. Ainsi, si vous souhaitez réaliser des supports de communication complexes ou créer une charte graphique avancée, d’autres outils seront à privilégier. On peut penser par exemple à Canva, Photoshop, InDesign ou encore Illustrator. Ces outils plus spécialisés vous offriront davantage de flexibilité et possibilités.

II. Quelles sont les caractéristiques principales de Figma ?

‍

1. Les fonctionnalités principales de Figma

En termes de caractéristiques propres à l’outil, voici un aperçu des fonctionnalités majeures :

-   Reproduction parfaite de la charte graphique d’une entreprise grâce à la diversité de réglages et plugins : tout dans le design peut être unique et personnalisé afin d’avoir un rendu fidèle à l’identité du client.

-   Pluralité des ressources disponibles et supportées. Figma permet de travailler aussi bien sur des textes que sur des formes ou encore des images. Ces éléments peuvent être modifiés sous tous rapports.

-   Mise en place d’un design vivant. Cela signifie que les maquettes réalisées sur Figma peuvent être animées et laisser entrevoir une grande partie des interactions qu’un utilisateur pourra avoir avec le site ou l’application une fois codés.

-   Création d’un design « responsive ». Des règles et contraintes peuvent être définies afin que les divers éléments de la maquette s’adaptent en permanence aux tailles et propriétés des éléments qui les contiennent.

2. Travail en équipe sur Figma et communauté

Figma a l’avantage considérable d’être pensé et optimisé pour le travail en équipe. Différents éléments rendent la collaboration fluide et aisée :

-   La mise en place de codes graphiques à respecter sur l’intégralité de la maquette (marges, tailles, épaisseurs, débordements, couleurs…). Cela permet de faire gagner du temps aux équipes de développement qui reproduisent les éléments à l’identique.

-   La centralisation des éléments et ressources utilisés par les équipes produit, des designers aux développeurs. En effet, tous les styles, codes et éléments à utiliser par les équipes peuvent être définis dans l’UI Kit (page que l’on crée généralement dans l’espace de travail pour y intégrer tous les éléments visuels récurrents). Des librairies de composants et guides de styles facilitent cette centralisation.

-   La possibilité d’exporter les divers éléments et ressources des maquettes dans de très nombreux formats, selon le besoin du moment.

-   Le travail simultané sur tous les projets, avec la possibilité de partager un projet avec différents statuts selon l’accès que l’on souhaite accorder à chaque collaborateur. Un système de "chat" et de commentaires est également intégré.

-   L’immense diversité des « Plugins » que l’on peut ajouter à nos projets. Ces outils auxiliaires sont pour la plupart gratuits et open source, créés par la communauté pour la communauté. Ils permettent à tout designer Figma d’augmenter sa productivité et sa créativité en apportant d’innombrables fonctionnalités complémentaires qui répondent à des besoins ou situations spécifiques. Nous avons d'ailleurs rédigé un article résumant tout ce qu'il y a à savoir sur les plugins Figma.

Par exemple, le fait de pouvoir visualiser ce à quoi ressemble la maquette pour une personne daltonienne ou malvoyante est possible grâce au plugin « ColorBlind ».

‍

III. Pourquoi utiliser Figma ?

‍

1. Résumé des atouts différenciants de Figma

Il existe d’autres outils de conception visuelle performants. Sketch et Adobe XD ont longtemps été les deux privilégiés pour la réalisation de maquettes de sites internet. D’autres outils tels qu’InVision, Marvel, Miro ou même Canva sont parfois utilisés à cet effet.

Toutefois, Figma s’est très rapidement imposé comme le nouvel outil de référence, et ce grâce au fait qu’il soit le seul outil qui cumule de nombreux éléments différenciants :

-   L’interface de Figma est très moderne et intuitive

-   Les fonctionnalités de Figma sont nombreuses et en évolution permanente

-   Figma est l’outil le plus complet dans la conception et création graphique, aussi bien pour créer des éléments neufs que pour retoucher des éléments importés

-   La communauté Figma est une de ses forces principales. Elle contribue quotidiennement à en améliorer l’expérience grâce aux multiples plugins créés

-   Plusieurs collaborateurs peuvent travailler simultanément sur les projets et maquettes réalisées sur l’outil

-   Figma possède de nombreuses propriétés optimisées pour les développeurs. Leur travail devient plus aisé et efficace, que les projets soient entièrement codés (HTML, CSS, React, Vue, Typescript… ) ou réalisés en no-code (Webflow)

‍

2. Combien coûte Figma ?

Figma est gratuit dans sa version standard, contrairement aux applications de la suite Adobe (Illustrator, InDesign, Photoshop…) ou Sketch, pour lesquels il est nécessaire de souscrire à un abonnement si on ne souhaite pas les acheter.

Figma devient payant lorsque l’on souhaite dépasser 6 pages de création partagées. Les fichiers de création personnels restent toutefois illimités dans la version gratuite.

Il existe deux versions payantes :

-   Le plan « Figma Professionnel » coûte 12€ par éditeur par mois. Il permet de créer un nombre illimité de fichiers, partagés  avec un nombre illimité de personnes.

-   Le plan « Figma Organisation » coûte 45 € par éditeur par mois. Il donne accès à de nombreuses fonctionnalités d’analyse, de partage et de personnalisation de l’outil supplémentaires.

Maintenant que vous savez à quoi sert Figma, à vous d’essayer, c’est le moment de se lancer !

‍

Voici le lien vers le site Figma.

Cliquer sur « Commencer » en haut à droite permet de se créer un compte et démarrer !

Voici le lien de téléchargement de l’application.

Nous espérons que cet article vous a permis d’en apprendre davantage sur Figma, ses principales caractéristiques et avantages. Si vous souhaitez en apprendre davantage, nous vous invitons à consulter notre article pour savoir comment bien démarrer sur Figma, ou encore notre top 10 des plugins Figma indispensables pour bien utiliser l'outil !

‍