Maquetter avec Figma
Sommaire
Figma est un outil de conception basé sur le cloud, accessible depuis un navigateur sans installation. Connu principalement pour le maquettage UI/UX, il est aussi utilisé pour créer des visuels simples, des chartes graphiques ou des présentations, ce qui en fait un outil polyvalent adapté à de nombreux profils.
Objectifs#
- Comprendre ce qu’est Figma et ses cas d’usage
- Distinguer les différents types de maquettes
- Connaître les outils principaux de l’interface
- Comprendre la structure pages, frames et calques
Présentation de Figma#
Figma propose un ensemble de fonctionnalités pour la conception, le prototypage et la collaboration : des outils de conception (formes, textes, images, icônes), des composants et styles réutilisables pour la cohérence visuelle, du prototypage (liens entre écrans, transitions, gestes), une collaboration en temps réel (édition simultanée, commentaires), et le partage de spécifications et de code généré automatiquement pour faciliter le travail des développeurs.
Information
Figma est connu pour le maquettage UI/UX, mais il couvre bien d’autres usages : visuels pour les réseaux sociaux, templates de communication, chartes graphiques, supports de présentation. Pour un community manager, il offre un avantage clé sur Canva, la création de composants et de styles partagés garantit une cohérence visuelle de marque durable.
| Usage | Pertinence |
|---|---|
| Maquettage UI/UX (web, mobile) | Usage principal, excellent |
| Prototypage interactif | Natif, très efficace |
| Charte graphique rapide | Possible, moins complet qu’Illustrator |
| Visuels pour réseaux sociaux | Tout à fait adapté, excellent pour des templates réutilisables |
| Système de design | Excellent (composants, tokens) |
Par rapport aux autres outils du marché : Adobe XD a été abandonné en 2023, Sketch est réservé à macOS, Penpot est l’alternative open-source. Figma s’impose comme la référence du secteur grâce à sa dimension collaborative et à son écosystème de plugins.
Astuce
Figma est gratuit pour les étudiants et enseignants via le programme Education. Cela donne accès à toutes les fonctionnalités professionnelles sans limite.
Types de maquettes#
Les maquettes web se déclinent en quatre niveaux de fidélité. Les wireframes sont des maquettes basiques en noir et blanc présentant la structure et la disposition des éléments, sans couleurs, images ni polices, utilisées comme point de départ pour itérer rapidement sur l’organisation de la page. Les maquettes visuelles (ou “design comps”) incluent tous les détails de conception (couleurs, images, typographies, graphiques) et permettent de visualiser le rendu final. Les maquettes interactives incluent des interactions (boutons, menus déroulants, animations) pour simuler le fonctionnement réel de l’interface. Les maquettes responsives sont conçues pour s’adapter à différents formats d’écran, afin de garantir une expérience cohérente sur tous les appareils.
Démarrer avec Figma#
- Créer un compte sur figma.com (email, Google ou autre fournisseur d’identité)
- Cliquer sur “Nouveau fichier” pour créer un document de design
- Utiliser les outils de la barre supérieure pour créer des éléments dans la zone de travail
- Modifier les propriétés (couleur, taille, police) dans le panneau de droite
- Créer des composants réutilisables via clic droit > “Créer un composant”
- Passer en mode “Prototype” pour relier les frames et créer des interactions
- Partager le fichier ou le prototype via l’icône “Partager” en haut à droite
- Exporter les éléments via l’onglet “Exporter” dans le panneau de propriétés
Barre d’outils#
Les outils disponibles dans la barre supérieure de Figma :
Pages, frames et calques#
Les pages organisent différentes versions ou types de maquettes au sein d’un même fichier (mobile, desktop, wireframes, mockups), chaque page pouvant contenir plusieurs frames. Les frames sont l’équivalent de sections ou de pages web, ils servent de conteneurs pour les éléments de conception et sont également utilisés pour créer des interactions lors du prototypage. Les calques représentent les éléments individuels de l’interface (boutons, textes, images, objets graphiques), chaque calque pouvant être manipulé indépendamment et organisé en groupes.
Plugins#
L’écosystème de plugins enrichit considérablement Figma. Quelques exemples utiles : Iconify (accès à des milliers d’icônes directement dans Figma), Unsplash (insertion de photos libres de droits sans quitter l’outil), Stark (vérification de l’accessibilité, contrastes et daltonisme), Figma to HTML/CSS (export de code pour les développeurs). Les plugins s’installent depuis le menu “Ressources” > “Plugins”.