Apprendre Figma en 30 jours au Maroc : un plan de pratique guidé

Définir un résultat mesurable à atteindre

Avant d’ouvrir Figma, choisissez ce que vous voulez pouvoir montrer à la fin du mois. « Apprendre Figma » est trop vague pour guider votre travail. Un objectif plus utile serait : « concevoir une maquette mobile de trois écrans pour la réservation d’un rendez-vous, relier les écrans dans un prototype et expliquer les principaux choix visuels ». Cet objectif donne un résultat vérifiable et évite de passer d’un tutoriel à un autre sans terminer de projet.

Délimitez aussi votre périmètre. En 30 jours, un débutant peut se familiariser avec l’interface, les calques, les formes, le texte, les couleurs, les composants simples, les contraintes de mise en page et le prototypage de base. En revanche, une pratique professionnelle complète demande davantage : recherche utilisateur, architecture de l’information, tests, accessibilité, collaboration avec une équipe produit et gestion d’un système de design.

Choisissez un sujet proche de votre quotidien au Maroc : une page de présentation pour un commerce, un écran de prise de rendez-vous, une petite application de suivi de dépenses ou un catalogue de produits. Utilisez des contenus et des besoins plausibles, mais évitez d’ajouter des fonctionnalités que vous ne pourrez pas concevoir dans le temps prévu. Commencez par un seul parcours utilisateur, par exemple consulter une offre puis envoyer une demande.

Prévoyez environ 20 à 28 heures sur les quatre semaines, soit 5 à 7 heures par semaine. Vous pouvez, par exemple, travailler quatre séances de 45 minutes et une séance plus longue de 2 à 3 heures le week-end. La régularité compte davantage que de longues sessions espacées : elle aide à retenir les commandes et à repérer les difficultés pendant qu’elles sont encore faciles à corriger.

Avant de commencer, créez un document de suivi. Notez votre objectif, les heures réellement pratiquées, les fonctions apprises et les questions qui restent ouvertes. Pour mesurer votre progression, évaluez-vous de 1 à 5 sur quatre points : organiser les calques, mettre en page un écran, réutiliser un élément et relier deux écrans dans un prototype. Reprenez cette grille à la fin de chaque semaine.

• Livrable visé : 3 à 5 écrans portant sur un parcours simple.
• Temps indicatif : 20 à 28 heures au total, à ajuster selon votre expérience.
• Règle anti-dispersion : ne suivre que des ressources utiles à l’exercice de la semaine.

Semaine 1 : découvrir l’environnement

Objectif de la première semaine : savoir se repérer dans Figma et créer un premier écran sans chercher à produire une maquette parfaite. Réservez environ 5 heures. Commencez par créer un fichier et repérez la zone de travail, les pages, la liste des calques, les propriétés de l’objet sélectionné et les commandes de partage. Prenez le temps de comprendre comment sélectionner, déplacer, redimensionner et renommer un élément.

Les ressources pédagogiques de Figma et ses contenus d’aide peuvent servir de référence pour découvrir l’interface et ses fonctions. Choisissez une leçon à la fois, puis reproduisez immédiatement ce qu’elle présente dans votre propre fichier. Si une démonstration porte sur le texte, créez votre propre titre et votre propre paragraphe au lieu de simplement regarder la vidéo ou de copier un fichier terminé.

Exercice 1 : créez un écran de présentation pour une activité fictive ou réelle. Ajoutez un titre, un court texte, une image ou une forme, puis un bouton visuel. Exercice 2 : dupliquez l’écran et modifiez un élément pour apprendre à distinguer les calques et à retrouver un objet dans la liste. Exercice 3 : renommez les calques de façon compréhensible, par exemple « titre principal » ou « bouton demande », au lieu de conserver des noms génériques.

Jalon de fin de semaine : partez d’un fichier vide et composez un écran simple en 30 à 45 minutes. Vous devez pouvoir sélectionner séparément le titre, le texte et le bouton, déplacer ces éléments et retrouver leurs réglages. Si vous ne savez plus quel objet vous modifiez ou si votre fichier est difficile à lire, consacrez une séance à l’organisation des calques avant de passer à la suite.

• À pratiquer : sélection, déplacement, redimensionnement, texte, formes, duplication et organisation des calques.
• Exercice progressif : créer un écran, le dupliquer, puis modifier un seul élément.
• Auto-évaluation : pouvez-vous refaire l’écran sans suivre pas à pas un tutoriel ?

Semaine 2 : maîtriser les opérations de base

La deuxième semaine transforme la familiarisation en gestes reproductibles. Prévoyez environ 5 à 7 heures. Le but n’est pas d’accumuler des effets, mais de réaliser plus proprement les opérations courantes : structurer l’écran, gérer les espacements, appliquer une hiérarchie de texte, réutiliser des couleurs et éviter de reconstruire plusieurs fois le même élément.

Exercice 1 : reprenez votre écran de la première semaine et définissez une hiérarchie simple. Choisissez un titre, un sous-titre et un texte secondaire. Vérifiez que la taille et la position aident le lecteur à comprendre ce qui est important. Exercice 2 : créez deux boutons cohérents, l’un pour l’action principale et l’autre pour une action secondaire. Comparez leur contraste, leur taille et leur alignement.

Exercice 3 : créez un composant simple pour un bouton ou une carte, puis réutilisez-le sur plusieurs écrans. Modifiez ensuite une propriété afin d’observer ce qui change dans ses utilisations. Faites un essai avec les fonctions de disposition automatique, souvent désignées par « Auto layout » dans Figma : construisez un bouton dont l’espacement intérieur reste régulier lorsque son libellé change. Si cette fonction vous bloque, reconstruisez d’abord le bouton manuellement, puis revenez à l’exercice.

Pour éviter de confondre esthétique et efficacité, comparez votre travail à quelques interfaces que vous utilisez réellement. Observez l’ordre des informations, les libellés et les espaces, mais ne cherchez pas à reproduire à l’identique une marque existante. Une référence doit vous aider à poser une question précise, comme « le bouton est-il assez visible ? », et non devenir un modèle à copier sans réflexion.

Jalon de fin de semaine : réalisez une petite série de deux écrans partageant les mêmes styles et au moins un composant réutilisé. Vérifiez que les libellés sont compréhensibles, que les éléments s’alignent et que les calques sont nommés. Si vous avez surtout travaillé les couleurs et les détails, revenez à la structure, aux espacements et à la cohérence.

• À pratiquer : hiérarchie typographique, alignements, espacements, composants simples et disposition automatique.
• Temps indicatif : 5 à 7 heures, dont une séance dédiée à la reprise des erreurs.
• Auto-évaluation : pouvez-vous modifier un composant et retrouver facilement ses utilisations ?

Semaine 3 : appliquer les acquis à un cas réel

La troisième semaine est consacrée à un mini-projet représentatif. Réservez 5 à 7 heures. Choisissez un besoin précis : permettre à un client de consulter un service, comparer une offre ou demander un rendez-vous. Écrivez le parcours en quelques phrases avant de concevoir. Par exemple : « la personne découvre le service, consulte les informations utiles, puis envoie une demande ». Cette étape vous évite de créer des écrans décoratifs sans lien entre eux.

Commencez par dessiner les écrans sous forme de blocs très simples. Placez les informations et les actions principales sans chercher immédiatement une finition visuelle. Pour une interface mobile, gardez un périmètre raisonnable : un écran d’accueil, un écran de détail et un écran de confirmation peuvent suffire. Pour une page web, concentrez-vous sur une page unique avec une section de présentation, une offre et un moyen de contact.

Exercice 1 : établissez la liste des contenus nécessaires à chaque écran. Exercice 2 : construisez la première version avec les composants et les styles de la semaine précédente. Exercice 3 : demandez à une autre personne de parcourir votre maquette ou votre prototype et d’expliquer ce qu’elle pense pouvoir faire. Observez où elle hésite sans lui donner immédiatement la réponse. Notez les incompréhensions, puis choisissez une ou deux corrections prioritaires.

Ajoutez une interaction simple dans le prototype : un bouton qui mène à l’écran suivant, un lien de retour ou une action qui confirme l’envoi d’une demande. Le prototype sert à vérifier le parcours, pas à simuler toutes les fonctions d’un produit. Vérifiez chaque lien et assurez-vous que la personne qui teste sait comment revenir à l’écran précédent.

Jalon de fin de semaine : une autre personne doit pouvoir comprendre l’objectif de votre interface et terminer le parcours principal avec peu d’explications. Si elle ne comprend pas une action, corrigez le libellé, la position ou l’enchaînement avant d’ajouter de nouveaux détails.

• À pratiquer : cadrage d’un besoin, ordre des écrans, composants réutilisés et prototypage de base.
• Exercice concret : faire tester le parcours à une personne et noter ses hésitations.
• Auto-évaluation : chaque écran contribue-t-il clairement au même objectif ?

Semaine 4 : finaliser et vérifier son résultat

La quatrième semaine sert à terminer, vérifier et présenter votre réalisation. Prévoyez environ 5 à 7 heures. Commencez par reprendre les retours de la semaine précédente. Classez-les en corrections importantes, améliorations possibles et changements non nécessaires. Corrigez d’abord les problèmes qui empêchent de comprendre l’action principale, puis harmonisez les espacements, les textes, les couleurs et les composants.

Exercice 1 : relisez chaque libellé comme si vous découvriez l’interface. Remplacez les formulations vagues par des actions précises. Exercice 2 : vérifiez que les titres, boutons et cartes suivent une logique cohérente d’un écran à l’autre. Exercice 3 : ouvrez le prototype depuis le début et testez le parcours complet. Les liens doivent mener au bon écran, et les retours doivent être possibles lorsqu’ils sont utiles.

Votre réalisation finale peut être une maquette de 3 à 5 écrans, accompagnée d’un prototype cliquable et d’une courte présentation. Expliquez le problème choisi, la personne à laquelle vous pensez, le parcours proposé et deux décisions de conception. Présentez aussi une difficulté rencontrée et la manière dont vous l’avez résolue. Cette explication montre votre raisonnement, pas seulement votre capacité à utiliser des outils.

Jalon final : répondez par écrit à ces questions. Le parcours principal est-il compréhensible ? Les écrans partagent-ils une mise en page cohérente ? Les composants utilisés plusieurs fois sont-ils faciles à retrouver ? Une personne peut-elle tester le prototype sans aide constante ? Qu’amélioreriez-vous ensuite ? Si vous répondez « non » à plusieurs questions, consacrez une dernière séance aux corrections plutôt que de commencer un nouveau projet.

• Livrable : maquette de 3 à 5 écrans, prototype testable et présentation courte.
• Contrôle final : lisibilité, cohérence, organisation du fichier et fonctionnement des liens.
• Auto-évaluation : comparez votre travail à la grille créée au premier jour et notez les progrès comme les points à travailler.

Adapter le rythme et poursuivre après 30 jours

Si vous disposez de moins de temps, gardez le même parcours mais étalez-le sur six à huit semaines. Deux séances de 45 minutes par semaine peuvent suffire pour avancer, à condition de conserver un objectif clair et de pratiquer entre les séances. Si vous avez davantage de disponibilité, n’ajoutez pas immédiatement plusieurs projets : consacrez d’abord ce temps à tester votre prototype, corriger les problèmes et améliorer la présentation du fichier.

Si vous avez déjà utilisé un outil de conception, vous pouvez réduire le temps passé à découvrir l’interface et consacrer davantage de séances aux composants, aux dispositions et au test du parcours. À l’inverse, si vous débutez dans le design, prenez davantage de temps pour observer la hiérarchie des informations et les choix de mise en page. Dans les deux cas, ne confondez pas vitesse d’exécution et progression : une maquette terminée mais incompréhensible est un résultat moins utile qu’un petit projet bien expliqué.

Après le mois, choisissez la suite à partir de votre objectif. Pour travailler sur des interfaces, approfondissez la conception responsive, les composants et les systèmes de design. Pour évoluer vers l’expérience utilisateur, ajoutez la recherche, les parcours et les tests. Pour présenter vos compétences, améliorez votre projet final, documentez vos décisions et préparez une seconde réalisation répondant à un besoin différent. Une formation accompagnée peut être pertinente si vous avez besoin de retours réguliers, d’exercices cadrés ou d’un programme lié à un objectif professionnel.

JobInTech et les dispositifs d’upskilling et de reskilling présentés par le ministère peuvent être explorés comme des ressources d’orientation ou de développement des compétences. Vérifiez directement auprès des organismes les programmes, conditions d’accès et disponibilités qui correspondent à votre projet ; les informations générales ne permettent pas à elles seules de confirmer qu’une session Figma précise est proposée.

Votre indicateur de progression le plus utile reste la capacité à produire et expliquer un résultat. Gardez vos fichiers de départ et de fin de mois : leur comparaison vous aidera à voir si vous organisez mieux vos calques, construisez plus régulièrement vos composants et rendez le parcours plus clair. Cette observation vous donnera un point de départ concret pour choisir votre prochain apprentissage.

• Moins de temps : étaler le plan et conserver une petite séance de pratique régulière.
• Plus de temps : renforcer le test, les corrections et la présentation avant de multiplier les projets.
• Étape suivante : choisir entre design d’interface, expérience utilisateur, systèmes de design ou approfondissement du prototypage.

Le parcours, étape par étape

1. 1Jour 1 : fixer un objectif — Définissez le projet final, le nombre d’écrans et le parcours à représenter. Notez votre niveau de départ et le temps que vous pouvez réserver chaque semaine.
2. 2Semaine 1 : prendre en main Figma — Travaillez l’interface, la sélection, le texte, les formes et les calques. Terminez par un écran simple que vous pouvez reconstruire sans suivre chaque étape d’un tutoriel.
3. 3Semaine 2 : structurer et réutiliser — Exercez-vous aux espacements, aux alignements, aux composants simples et à la disposition automatique. Produisez deux écrans cohérents.
4. 4Semaine 3 : concevoir un parcours — Choisissez un cas réaliste, organisez les écrans, ajoutez des liens de prototype et faites tester le parcours à une autre personne.
5. 5Semaine 4 : corriger et présenter — Priorisez les retours, vérifiez la cohérence et les interactions, puis préparez une maquette finale accompagnée d’une courte explication de vos choix.
6. 6Après 30 jours : choisir un approfondissement — À partir des points qui vous ont demandé le plus d’effort, choisissez votre prochaine étape : conception responsive, expérience utilisateur, systèmes de design ou prototypage.

Formations et programmes au Maroc

Compétences clés

Questions fréquentes

Sources

1. FormaGroup — Technologie Figma formagroup.ma
2. FormaGroup — Guide du parcours d’apprentissage Figma en 30 jours formagroup.ma
3. JobInTech jobintech.academy
4. Upskilling et reskilling — Ministère de la Transition Numérique et de la Réforme de l’Administration mmsp.gov.ma
5. Figma — Resource Library figma.com
6. Google UX Design Professional Certificate — Coursera coursera.org