UX, UI, Figma : de quoi parle-t-on

On ouvre Figma, on dessine un bel écran, de jolis dégradés, des coins arrondis, et l'on croit avoir conçu une application. Puis quelqu'un l'essaie et ne trouve pas le bouton pour réserver. Le logiciel n'y est pour rien : il manquait tout ce qui précède le dessin. Concevoir une interface, c'est d'abord comprendre ce que les gens viennent y faire, ensuite organiser, et seulement après habiller. Cette formation suit cet ordre, et vous apprend Figma au moment où il sert.

Cette formation est rédigée à l'automne 2026. Figma évolue plusieurs fois par an : l'emplacement d'un bouton, le nom d'une offre ou son prix peuvent avoir changé. L'interface de Figma n'existe pas dans toutes les langues ; nous donnons les termes anglais tels qu'ils apparaissent à l'écran, avec leur traduction.

UX et UI

	UX, l'expérience utilisateur	UI, l'interface utilisateur
La question	Est-ce utile, compréhensible, facile ?	Est-ce lisible, cohérent, agréable ?
Le travail	Comprendre les utilisateurs, définir les parcours, organiser l'information, tester	Choisir la typographie, les couleurs, les espacements, dessiner les composants et les écrans
Les livrables	Comptes rendus d'entretiens, parcours, maquettes fil de fer, résultats de tests	Maquettes détaillées, système de design, prototype
L'échec typique	Un produit élégant dont personne ne comprend le fonctionnement	Un produit logique, pénible à regarder et à lire

Les deux se tiennent. Une application de réservation où l'on réserve en trois gestes, avec des boutons lisibles au soleil, a réussi les deux. Dans les petites équipes, la même personne fait tout, sous le nom de product designer ou de designer UX/UI.

Le processus

Cinq étapes, que l'on parcourt plusieurs fois.

Étape	Question	Chapitre
Comprendre	Qui sont les utilisateurs, que cherchent-ils à faire, qu'est-ce qui les bloque ?	2
Structurer	Quels écrans, dans quel ordre, avec quel contenu ?	3
Concevoir	À quoi cela ressemble-t-il ?	4, 5 et 6
Prototyper et tester	Est-ce que des gens réels y arrivent ?	7
Transmettre	Comment les développeurs le construisent-ils fidèlement ?	8

On revient en arrière sans cesse. Un test révèle un problème de parcours, on retourne structurer. Ce n'est pas un échec du processus : c'est le processus. Plus tôt l'on découvre une erreur, moins elle coûte. Corriger un croquis prend une minute, une maquette une heure, une application développée une semaine.

Ce que fait Figma

Figma est l'outil de conception d'interfaces le plus répandu. Il fonctionne dans le navigateur ou dans une application, et plusieurs personnes y travaillent en même temps sur le même fichier.

Produit	Usage
Figma Design	Dessiner les écrans, créer les composants, prototyper
FigJam	Un tableau blanc : ateliers, parcours, notes adhésives
Dev Mode	La vue des développeurs : mesures, couleurs, extraits de code
Figma Slides	Des présentations
Figma Sites	Publier un site depuis une maquette
Figma Make	Générer un prototype fonctionnel à partir d'une description
Figma Draw, Figma Buzz	L'illustration vectorielle ; les visuels de marque en série

Vous passerez l'essentiel de votre temps dans Figma Design, un peu dans FigJam.

Les offres

À l'automne 2026, en ordre de grandeur ; les prix sont affichés en dollars sur le site de Figma, et dépendent du type de siège.

Offre	Prix indicatif	Ce qu'elle permet
Starter	Gratuite	Des brouillons personnels, un nombre limité de fichiers partagés, des crédits d'IA limités
Professional	Environ 16 $ par mois pour un siège complet en engagement annuel, 20 $ sans engagement	Fichiers et projets illimités, bibliothèques partagées, Dev Mode
Organization	Environ 55 $ par mois et par siège complet	Pour les entreprises : bibliothèques à l'échelle de l'organisation, administration

Il existe des sièges moins chers pour les développeurs et pour les collaborateurs qui ne font que commenter.

L'offre gratuite suffit pour toute cette formation et pour vos premiers projets. Les étudiants et enseignants peuvent demander un accès gratuit à l'offre supérieure.

Découvrir l'interface

Créez un compte, puis un fichier de conception : Design file.

Zone	Contenu
Au centre	Le canevas, canvas : un espace sans bord où vous posez vos écrans
En bas	La barre d'outils : déplacement, cadre, formes, plume, texte, commentaire
À gauche	Les pages du fichier et les calques, layers ; l'onglet des ressources, assets, pour les composants
À droite	Les propriétés de l'élément sélectionné, onglet Design ; les interactions, onglet Prototype
En haut à droite	Le partage, Share, et la lecture du prototype

Geste	Moyen
Se déplacer	Maintenir la barre d'espace et glisser ; ou deux doigts sur le pavé tactile
Zoomer	Ctrl et la molette ; ou pincer
Voir tout	Maj + 1
Zoomer sur la sélection	Maj + 2
Chercher une commande	Ctrl + K : tapez ce que vous voulez faire
Annuler	Ctrl + Z

Sur un Mac, remplacez Ctrl par Cmd. Sur un clavier français, certains raccourcis diffèrent : la liste complète s'affiche depuis le menu d'aide, et Figma permet de choisir la disposition du clavier.

Tout est enregistré en permanence, en ligne. Il n'y a pas de bouton pour sauvegarder. L'historique des versions permet de revenir en arrière.

Le vocabulaire

Terme	Sens
Frame, le cadre	Le conteneur de base : un écran, une carte, un bouton
Layer, le calque	Tout élément du fichier
Auto layout, la mise en page automatique	Un cadre qui organise son contenu tout seul : chapitre 4
Component, le composant	Un élément réutilisable : chapitre 6
Instance	Une copie liée d'un composant
Style, variable	Une couleur, une taille, un espacement enregistrés et réutilisés
Maquette fil de fer, wireframe	Un schéma d'écran sans habillage
Maquette	L'écran détaillé, tel qu'il sera
Prototype	Des écrans reliés, cliquables
Système de design, design system	L'ensemble des règles, styles et composants d'un produit

Ce qu'un bon design a en commun

Avant tout outil, quatre idées que vous retrouverez dans chaque chapitre.

La clarté avant l'originalité. Les gens passent leur temps sur d'autres applications que la vôtre. Ils s'attendent à ce que la vôtre fonctionne comme elles : le panier en haut à droite, le retour en haut à gauche. Surprendre coûte cher.

Une chose principale par écran. Chaque écran a une action qui compte plus que les autres. Elle doit se voir en une seconde.

La cohérence. Le même bouton fait toujours la même chose, se trouve toujours au même endroit, a toujours la même allure.

Tout le monde doit pouvoir s'en servir. Avec une mauvaise vue, une seule main, en plein soleil, avec un lecteur d'écran. L'accessibilité n'est pas une option que l'on ajoute à la fin : c'est une contrainte de départ, et une obligation légale pour un nombre croissant de services.

Le métier

Poste	Dominante
UX designer	La recherche, les parcours, les tests
UI designer	L'interface, le système de design
Product designer	Les deux, au sein d'une équipe produit
UX researcher	Les entretiens et les études
UX writer	Les textes de l'interface

Les chiffres qui circulent en 2026, issus de sites spécialisés et de cabinets et non de statistiques officielles : un designer UX débutant salarié entre 35 000 et 43 000 € brut par an, un indépendant entre 300 et 550 € par jour selon l'expérience. Le marché est exigeant pour les débutants : les recruteurs jugent sur un portfolio d'études de cas, pas sur un diplôme ni sur de belles images. Le chapitre 8 y revient.

Ce savoir sert aussi sans en faire un métier : un développeur, un chef de projet, un entrepreneur qui sait maquetter et tester une idée évite de construire la mauvaise chose.

Ce qu'il vous faut

Élément	Détail
Un ordinateur et un navigateur récent	Figma tourne en ligne ; l'application de bureau est plus confortable
Une souris	Bien plus précise qu'un pavé tactile
Un téléphone	Pour voir vos maquettes en taille réelle, avec l'application de Figma
Du papier et un feutre	Le meilleur outil des deux premières étapes
Cinq personnes prêtes à vous accorder vingt minutes	Pour les entretiens et les tests

Aucun talent de dessinateur n'est requis. Une interface se construit avec des rectangles, du texte et de la rigueur.

L'exemple suivi : la salle d'escalade

Thomas est chargé de communication dans une salle d'escalade. Les adhérents réservent leurs cours par téléphone, découvrent en arrivant que la salle est pleine, et l'accueil passe ses soirées à répondre aux mêmes questions. Le gérant veut une application. Un développeur indépendant la construira ; Thomas doit la concevoir.

Nous irons des entretiens avec les grimpeurs jusqu'au fichier transmis au développeur.

Le parcours

Chapitre	Résultat
2	Des entretiens menés, un problème formulé, des besoins classés
3	Des parcours, une arborescence, des maquettes fil de fer
4	Les bases de Figma : cadres, texte, mise en page automatique
5	Une interface lisible : typographie, couleur, espacement, accessibilité
6	Des composants, des variantes, des styles et des variables
7	Un prototype cliquable, testé auprès de cinq personnes
8	Un fichier transmis aux développeurs, et une étude de cas pour votre portfolio

À vous de concevoir

1. Créez un compte Figma, un fichier de conception, et essayez les gestes du tableau : déplacement, zoom, Maj + 1, Ctrl + K.
2. Choisissez votre projet : un service réel autour de vous, mal servi par son site ou son application, ou sans outil du tout.
3. Sur trois applications que vous utilisez, repérez pour un écran l'action principale, et dites en quoi elle se distingue des autres.
4. Listez cinq personnes concernées par votre projet que vous pourriez interroger vingt minutes.