Module 3Créer une maquette pour le développement web
Chapitre 9 sur 12
Frames, auto layout, composants, charte graphique, prototype et remise au développeur dans Figma.
Objectifs
Avec ce chapitre, tu sauras…
:::savoir Un chapitre rédigé à partir du programme Ce chapitre suit les intitulés officiels « Construire un wireframe avec Figma » et « Créer une première maquette avec Figma ». Figma évolue souvent : les noms des menus peuvent légèrement changer, mais les notions (frames, auto layout, composants, styles, prototype) restent les mêmes. :::
Leçon 1
| Zone | Rôle |
|---|---|
| barre d'outils | les outils de création : déplacement, frame, formes, plume, texte, commentaire |
| panneau de gauche | les pages du fichier et l'arbre des calques (layers) ; l'onglet Assets liste les composants |
| canevas (au centre) | l'espace de travail infini où l'on place les écrans |
| panneau de droite | les propriétés de l'élément sélectionné (position, taille, auto layout, remplissage, contour, effets, export) ; l'onglet Prototype pour les interactions |
| Outil | Raccourci | Usage |
|---|---|---|
| déplacer / sélectionner | V | sélectionner, déplacer, redimensionner |
| frame | F (ou A) | créer un écran (préréglages : téléphone, tablette, ordinateur) ou un conteneur |
| rectangle, ellipse, ligne | R, O, L | formes de base |
| texte | T | titres, paragraphes, libellés |
| plume | P |
Vidéo · À regarder
FRTuto Figma débutant : apprendre les bases en créant une landing page (mini formation gratuite)
front-end · YouTube
Leçon 2
F) → choisis un préréglage de téléphone dans le panneau de droite (par exemple 390 × 844) ; renomme la frame « Fiche livre – mobile ».Leçon 3
| Composants à créer pour Kitab | Variantes |
|---|---|
| bouton | principal, secondaire, texte ; normal, survol, désactivé |
| carte livre | verticale (grille), horizontale (liste) |
| champ de formulaire | normal, focus, erreur, désactivé |
| en-tête | mobile, desktop |
| badge |
Leçon 4
| Élément de la charte | Exemple pour Kitab | Dans Figma |
|---|---|---|
| couleurs | une couleur primaire (actions : boutons, liens), une secondaire (accents), des neutres (textes, fonds, bordures), des couleurs d'état (succès vert, erreur rouge, alerte orange) | variables de couleur (ou styles de couleur), par exemple primaire/500, neutre/900 ; possibilité de modes clair et sombre |
| typographies | deux polices au maximum (une pour les titres, une pour le texte, avec les caractères arabes si le site est bilingue) ; une échelle de tailles : 32, 24, 20, 16, 14 | styles de texte : Titre 1, Titre 2, Corps, Légende |
| espacements et rayons |
Leçon 5
| Notion | Exemple |
|---|---|
| connexion (noodle) | une flèche tirée d'un bouton vers l'écran de destination |
| déclencheur | au clic (On click), au survol, après un délai, au glissement |
| action | naviguer vers un écran, revenir en arrière, ouvrir une superposition (menu, fenêtre modale), faire défiler jusqu'à un élément |
| animation | instantanée, fondu, glissement, Smart animate (anime les calques qui portent le même nom d'un écran à l'autre) |
| point de départ (flow) |
Leçon 6
| Besoin du développeur | Dans Figma |
|---|---|
| tailles, marges, couleurs, polices | sélectionner un élément affiche ses mesures ; maintenir Alt montre les distances entre éléments ; le mode développeur (Dev Mode) affiche le CSS correspondant |
| images et icônes | section Export du panneau de droite : SVG pour les icônes et logos, PNG ou JPG (×1, ×2) pour les images, WebP via un outil d'optimisation |
| comportement | annotations, commentaires et prototype |
| composants | la page « Composants » sert de design system de référence |
1Le conteneur de base qui représente un écran dans Figma est…
2L'auto layout correspond en CSS à…
3Modifier le composant principal…
4Les états normal, survol et désactivé d'un bouton sont des…
5Le réglage qui fait épouser à une frame la taille de son contenu est…
6Pour exporter un logo net à toutes les tailles, on choisit…
7L'animation qui anime les calques de même nom d'un écran à l'autre est…
8Le mode qui affiche le CSS d'un élément est…
L'essentiel du chapitre
F) = écran ou conteneur ; grille de mise en page (4 colonnes mobile, 12 desktop) ; grille de 8.Maj + A) = Flexbox : direction, gap, padding, alignement, tailles Hug, Fill, Fixed.Ctrl + Alt + K) et instances ; variantes et propriétés ; correspondance avec les composants du code.| dessiner des formes libres (icônes) |
| main | H ou barre d'espace maintenue | se déplacer dans le canevas |
| commentaire | C | discuter avec l'équipe ou le client |
| zoom | Ctrl + molette, Maj + 1 (tout afficher) | naviguer |
Ctrl + D pour dupliquer une frame, puis adapter : résultats de recherche, panier, paiement.| Réglage de l'auto layout | Équivalent CSS |
|---|---|
| direction horizontale ou verticale | flex-direction: row ou column |
| espacement entre les éléments | gap |
| marges internes (padding) | padding |
| alignement | justify-content, align-items |
| taille Hug (épouse le contenu) / Fill (remplit le parent) / Fixed (fixe) | width: auto / flex: 1 ou width: 100% / width: 200px |
Vidéo · À regarder
FRTuto Figma débutant : apprendre les bases en créant une landing page (mini formation gratuite)
front-end · YouTube
| en stock, stock faible, épuisé |
Vidéo · À regarder
FRTuto Figma débutant : apprendre les bases en créant une landing page (mini formation gratuite)
front-end · YouTube
| 4, 8, 16, 24, 32 ; coins arrondis de 8 |
| variables numériques |
| ombres | une ombre légère pour les cartes | styles d'effet |
| icônes et images | un seul jeu d'icônes cohérent ; photos de couvertures réelles | bibliothèques et plugins de la communauté |
Vidéo · À regarder
FRTuto Figma débutant : apprendre les bases en créant une landing page (mini formation gratuite)
front-end · YouTube
| l'écran par lequel commence la démonstration ; un fichier peut avoir plusieurs parcours |
Vidéo · À regarder
FRTuto Figma débutant : apprendre les bases en créant une landing page (mini formation gratuite)
front-end · YouTube
Piège classique
Le CSS généré
Propose la charte graphique de Kitab : (1) une couleur primaire, une secondaire, trois neutres et trois couleurs d'état, avec leurs codes hexadécimaux ; (2) deux polices (dont une avec des caractères arabes) et une échelle de cinq tailles ; (3) l'échelle d'espacements. Vérifie avec un outil de contraste en ligne que ta couleur primaire, utilisée comme fond d'un bouton à texte blanc, atteint 4,5:1.
Une frame est le conteneur de base de Figma : un écran (un « artboard ») ou un bloc à l'intérieur d'un écran (une carte, un en-tête). Contrairement à un simple groupe, une frame a sa propre taille, peut découper son contenu, recevoir une grille et l'auto layout. Dessiner une interface, c'est imbriquer des frames.
Ce que tu vas voir (3 min) : les chapitres « L'interface », « Déplacement et sélection ». Le formateur présente l'interface de Figma, puis le déplacement et la sélection des éléments.
Le wireframe mobile de la fiche livre
Un composant (Ctrl + Alt + K, ou Cmd + Option + K sur Mac) est un élément réutilisable : un bouton, une carte de livre, un en-tête. Chaque copie posée dans un écran est une instance : si on modifie le composant principal, toutes les instances sont mises à jour. Une instance peut seulement surcharger certaines propriétés (le texte, la couleur, l'image).
Un composant peut avoir des variantes (variants) regroupées dans un ensemble de composants : un bouton avec les variantes Type = principal / secondaire, État = normal / survol / désactivé, Taille = M / L. Des propriétés de composant permettent aussi de modifier un texte ou d'afficher/masquer une icône depuis l'instance.
La charte graphique fixe l'identité visuelle ; dans Figma, on l'enregistre sous forme de styles et de variables réutilisables.
Dans l'onglet Prototype du panneau de droite, on relie les écrans entre eux pour simuler la navigation.
Dans Figma : (1) reproduis en wireframes les cinq écrans de ton wireflow (TP 8.5) en mobile, avec une grille de 4 colonnes ; (2) crée les composants bouton (3 variantes), carte livre et champ de formulaire ; (3) applique ta charte (exercice 9.4) pour obtenir les maquettes ; (4) relie les écrans en prototype et fais tester le parcours de commande sur un téléphone ; (5) ajoute dans ton dossier de conception le lien de partage et les exports PNG des écrans.
Un bouton Figma est une frame en auto layout horizontale, avec un padding de 12 en haut et en bas et de 24 à gauche et à droite, un espacement de 8 entre une icône et un texte, les éléments centrés verticalement, une largeur Hug, un fond #2a6fdb et des coins arrondis de 8. Écris le CSS équivalent.
Observe la page d'accueil d'un site de vente en ligne marocain de ton choix. Liste au moins huit composants réutilisables que tu y vois, avec pour chacun deux variantes possibles.
L'auto layout
Ce que tu vas voir (10 min) : les chapitres « Créer la frame », « Créer un dégradé », « Créer une grille », « Créer le bouton », « Auto Layout ». Il crée la frame de la page, une grille de mise en page, un bouton, puis utilise l'auto layout : la structure d'un wireframe propre.
Ce que tu vas voir (2 min) : les chapitres « Les composants ». Il transforme un élément en composant et réutilise ses instances : c'est la section « Les composants ».
Du wireframe à la maquette
Ce que tu vas voir (14 min) : les chapitres « Créer la barre du haut », « Titres et bouton de défilement ». Il construit la barre du haut, les titres et le bouton de défilement avec les couleurs et la typographie de la maquette finale.
On lance la démonstration avec le bouton Présenter (▶) : le prototype s'ouvre dans un nouvel onglet, et on peut l'ouvrir sur un téléphone avec l'application Figma pour le tester « en vrai ». C'est l'outil idéal pour les tests utilisateurs avant de développer.
Ce que tu vas voir (10 min) : les chapitres « Le prototype Figma », « Corriger la barre du haut », « Prototype : le défilement », « Prototype : l'overlay ». Il crée le prototype : liens entre éléments, défilement vers une section et overlay, puis teste le résultat.
Le code proposé par Figma est une aide pour lire les valeurs (couleurs, tailles, rayons), pas un code à copier tel quel : il utilise des positions et des tailles fixes qui ne sont pas responsives. L'intégrateur recrée la mise en page avec Flexbox, Grid ou Bootstrap (modules de 1re année).