Module 1 Introduction à Figma et au maquettage

Section 1 : Qu'est-ce que le maquettage ?

1.1. Définition du maquettage :

Le maquettage est une représentation visuelle de l'interface utilisateur d’un site ou d’une application. Il peut être un simple wireframe (structure de base) ou une maquette plus détaillée intégrant des éléments graphiques, des couleurs, et des interactions.

Pourquoi le maquettage est important :

Permet de visualiser l’apparence et l’expérience utilisateur avant le développement.
Facilite la communication avec les parties prenantes (clients, développeurs, designers).
Sert de guide pour les développeurs lors de l’implémentation.

1.2. Types de maquettes :

Wireframe : version simplifiée, souvent en noir et blanc, ne montrant que la structure.
Maquette statique : design final, montrant les couleurs, les polices et les visuels.
Prototype interactif : version qui inclut des interactions pour tester l’interface avant le développement.

Section 2 : Prise en main de Figma

2.1. Inscription et installation :

Figma est un outil basé sur le cloud, donc aucune installation n'est nécessaire. Suivez ces étapes pour créer un compte et commencer à utiliser Figma.

Accéder à Figma :
- Rendez-vous sur figma.com et cliquez sur "Sign Up" pour créer un compte gratuit.
- Remplissez les informations requises (nom, email, mot de passe).
- Une fois le compte créé, vous serez dirigé vers votre tableau de bord personnel.
Télécharger la version desktop (optionnel) :
- Figma peut être utilisé via un navigateur web, mais il existe aussi une version desktop pour Windows et macOS.
- Pour télécharger l’application, rendez-vous sur Figma Downloads.

2.2. Présentation de l'interface de Figma :

Une fois connecté, vous arriverez sur le tableau de bord de Figma. Voici les éléments clés :

Sidebar (Barre latérale gauche) : Contient la liste de vos fichiers récents et vos projets.
Toolbar (Barre d'outils) : Accès aux outils pour créer des formes, ajouter du texte, et manipuler les objets.
Canvas (Zone de travail) : L’espace où vous créerez vos designs.
Inspector (Panneau droit) : Affiche les propriétés des éléments sélectionnés (dimensions, couleurs, styles).

Section 3 : Création de votre premier projet

3.1. Création d'un nouveau fichier :

Dans votre tableau de bord Figma, cliquez sur le bouton "New File" pour créer un nouveau projet.
Une nouvelle page avec une toile blanche s'ouvre. C'est ici que vous commencerez votre design.

3.2. Outils de base de Figma :

Voici les outils les plus importants que vous utiliserez lors de la création de maquettes :

Sélection (V) : Permet de sélectionner et déplacer les éléments sur la toile.
Rectangle ® : Crée des formes rectangulaires. Vous pouvez également créer des ellipses, des lignes et des polygones à partir de la barre d'outils.
Texte (T) : Ajoute du texte à la maquette.
Frame (F) : Crée des cadres, qui agissent comme des conteneurs pour organiser les éléments. Utilisés pour structurer les pages.
Zoom (Z) : Pour ajuster la vue sur votre maquette.

3.3. Travaux pratiques : Dessiner des éléments de base

Dans cette section, vous allez apprendre à manipuler les outils de base en créant une première structure.

Créer un rectangle pour l’en-tête :
- Sélectionnez l’outil Rectangle dans la barre d'outils ou appuyez sur la touche R.
- Dessinez un rectangle en haut de votre toile pour représenter l’en-tête d’un site web.
Ajouter un cadre pour le corps du site :
- Sélectionnez l’outil Frame (ou appuyez sur la touche F).
- Dessinez un cadre qui représentera la zone principale de votre site. Ce cadre contiendra vos éléments comme les images, le texte, etc.
Insérer du texte :
- Sélectionnez l’outil Texte dans la barre d'outils ou appuyez sur la touche T.
- Cliquez dans le rectangle en-tête et tapez "Bienvenue sur notre site !".
- Ajustez la taille et la police à partir du panneau d’inspection à droite.

3.4. Utilisation des grilles et colonnes :

Les grilles permettent d'organiser votre maquette de manière harmonieuse, surtout pour des designs responsives.

Ajouter une grille :
- Sélectionnez votre Frame principal.
- Dans le panneau d’inspection à droite, cliquez sur Layout Grid et sélectionnez l'option Add Grid.
- Vous pouvez personnaliser la grille avec des colonnes (par exemple, 12 colonnes pour un site responsive).
Travaux pratiques : Organiser les éléments avec une grille
- Réarrangez les éléments que vous avez créés (texte, rectangle) pour qu'ils s’alignent avec les colonnes de votre grille.

Section 4 : Enregistrement et exportation de votre travail

4.1. Sauvegarder votre projet :

Figma sauvegarde automatiquement tous vos changements dans le cloud. Cependant, vous pouvez donner un nom à votre projet pour mieux l’organiser :

Cliquez sur le titre "Untitled" en haut de votre page et renommez-le (par exemple, "Premier projet de maquettage").

4.2. Exporter des éléments :

Figma vous permet d’exporter des éléments spécifiques ou des pages entières :

Sélectionnez l’élément que vous souhaitez exporter.
Dans le panneau de droite, sous la section Export, cliquez sur +.
Choisissez le format d'exportation (PNG, JPG, SVG) et cliquez sur Export.

TP 1 : Prise en main de Figma

Objectif :

Créer un wireframe simple pour une page d'accueil en utilisant les outils de base de Figma.

Instructions :

Créez un rectangle pour l’en-tête.
Ajoutez un cadre pour le corps du site.
Ajoutez un texte de bienvenue dans l’en-tête.
Utilisez une grille pour organiser les éléments.
Sauvegardez et exportez votre wireframe en PNG.

Durée : 1 heure

Conclusion :

À la fin de ce module, vous devriez avoir une bonne compréhension de l’interface de Figma et de ses outils de base. Vous aurez également réalisé une première maquette simple, ce qui vous prépare à des créations plus complexes dans les modules suivants.