Leçon 2 sur 7 · 10 min
Installe ton studio
Objectif:Prépare tes trois outils, sache à quoi sert chacun et repère-toi dans Figma.
TON STUDIO, DEPUIS ZÉRO
uxuiopen.comTrois outils, trois rôles. Un outil de chat IA t’aide à réfléchir, Claude Design t’aide à explorer des options rapidement, et Figma est l’endroit où tu peaufines le design final à la main. Ton journal fait le lien entre eux. Regarde le film de deux minutes, puis monte le tien.
- 1 · Réfléchir
ChatGPT
Plans, recherche, idées
- 2 · Explorer
Claude Design
Mises en page, options, présentations
- 3 · Peaufiner
Figma
Le travail à la main
- 4 · Noter
Journal
Ce que tu as demandé et décidé
Utilise un outil de chat IA pour…
- planifier un projet et le découper en étapes
- te renseigner sur un public ou un sujet
- trouver des noms, des titres et des idées
- avoir un avis sur ton raisonnement
Utilise Figma pour…
- mettre en page des écrans et des affiches avec précision
- régler à la main la typo, la couleur et l’espacement
- créer des composants réutilisables
- partager des designs et des prototypes
Figma
Ta toile. Là où tu peaufines, organises et livres ton travail.
Étapes
- 1Crée un compte gratuit.
- 2Tu fais partie d’une cohorte ? On te fait valider pour l’offre Education, alors inscris-toi avec l’e-mail de ta candidature.
- 3Crée un nouveau fichier de design appelé « Studio ».
ChatGPT
Ton partenaire de réflexion. Plans de recherche, idées, critique et rédaction.
Étapes
- 1Connecte-toi.
- 2Crée un projet appelé « Studio de design » pour garder tes conversations au même endroit.
Claude et Claude Design
Ton explorateur. Mises en page, maquettes et présentations en un rien de temps, et il sait suivre un design system.
Étapes
- 1Connecte-toi à Claude.
- 2Crée un projet appelé « Studio de design ».
- 3Claude Design nécessite une offre payante et c’est une préversion de recherche. Facultatif dans cette unité.
Repère-toi dans Figma
Figma a l’air chargé la première fois que tu l’ouvres, mais chaque fichier a les mêmes cinq zones. Apprends-les une fois et tous les tutos deviendront clairs. Clique dans cette fenêtre Figma simplifiée et trouve les cinq.
Clique sur chaque partie de la fenêtre Figma pour trouver les cinq.
0 sur 5 trouvéesDans Figma, tout est rangé dans une arborescence simple. Les fichiers contiennent des pages, les pages contiennent des frames, et les frames contiennent des calques. Une fois que tu vois l’arborescence, tu sais toujours où se trouvent les choses.
- 📁Unité 1 (fichier)
- 📄Bac à sable (page)
- #Affiche (frame)
- ▢En-tête (groupe)
- TTitre (texte)
- ◯Cercle (forme)
- 🖼Photo (image)
- 📄Journal (page)
- Fichier
- Un projet. Tu peux le partager avec d’autres par lien.
- Page
- Un onglet dans le fichier. Utilise les pages pour séparer ton travail : Bac à sable, Journal, Bibliothèque de prompts.
- Frame
- Un plan de travail avec une taille : un écran de téléphone, une affiche, une diapo. Les designs vivent dans les frames.
- Calque
- Tout ce qui se trouve dans un frame : textes, formes, images, groupes. Le panneau des calques les liste tous.
Lire une description d’outil n’apprend pas grand-chose. Voici un outil de design réduit à l’essentiel, directement sur cette page. Fais les six tâches et tu auras fait tout ce que tes dix premières minutes dans Figma demandent.
Calques
- Frame 1
Position et taille
Auto layout
Apparence
Remplissage
Contour
Un fichier vide, un frame et six choses à faire. Appuie sur V pour déplacer, F pour dessiner un frame, T pour du texte et R pour un rectangle — les mêmes touches que dans Figma.
- 1
Nomme le frame
Sélectionne-le dans la liste des calques et tape un vrai nom en haut du panneau Design, « Affiche » par exemple. Personne ne peut travailler dans un fichier rempli de Frame 1, Frame 2, Frame 3.
- 2
Donne-lui un format d’affiche
- 3
Ajoute un titre
- 4
Agrandis le titre : 36 ou plus
- 5
Ajoute une forme
- 6
Commence le frame suivant
Maintenant, fais-le pour de vrai. Ouvre Figma dans un autre onglet et refais les six mêmes gestes là-bas — les touches sont celles que tu viens d’utiliser.
Tes dix premières minutes dans Figma
Crée un fichier
Crée un nouveau fichier de design et nomme-le « Unité 1 ». Ajoute deux autres pages : « Journal » et « Bibliothèque de prompts ».
Dessine un frame
Appuie sur F, puis fais glisser sur le canevas. Dans le panneau de droite, règle le frame sur 1080 × 1350, le format d’un post de réseau social.
Ajoute du texte
Appuie sur T, clique dans le frame et tape un titre. Texte sélectionné, change la police et la taille dans le panneau de droite.
Ajoute une forme
Appuie sur R pour un rectangle ou O pour une ellipse, fais-la glisser, puis choisis une couleur de remplissage dans le panneau de droite.
Déplace et duplique
Appuie sur V pour revenir à l’outil de déplacement. Sélectionne un élément et appuie sur Ctrl + D (⌘ + D sur Mac) pour le dupliquer.
Vois tout
Appuie sur Shift + 1 pour zoomer de façon à tout voir à l’écran. Appuie sur Shift + 0 pour revenir à 100 %.
Mots à connaître
- Canevas
- L’espace de travail infini de Figma. Fais défiler pour te déplacer ; maintiens Ctrl ou ⌘ et fais défiler pour zoomer.
- Remplissage
- La couleur (ou l’image) à l’intérieur d’une forme, d’un frame ou d’un texte.
- Auto layout
- Un réglage de Figma qui espace les éléments automatiquement, comme une pile. Tu t’en serviras beaucoup à partir de l’unité 5.
- Composant
- Un élément réutilisable, comme un bouton. Modifie le composant principal et toutes les copies se mettent à jour.
Vérifie maintenant que tu sais quel outil choisir.
Quel outil prendrais-tu en premier ?
Rédiger dix questions pour un entretien utilisateur.
Voir trois pistes de mise en page pour une landing page.
Corriger les espacements de la version choisie.
Transformer tes écrans en jeu de composants.
Obtenir une critique honnête sur pourquoi une mise en page paraît chargée.
Prépare ton fichier studio
Crée le fichier Figma que tu utiliseras pendant tout le reste du cours.
- 1Crée un fichier appelé « UX UI Open – Unité 1 » avec trois pages : Bac à sable, Journal, Bibliothèque de prompts.
- 2Sur Bac à sable, crée trois frames : un téléphone (390 × 844), une affiche (1080 × 1350) et une diapo (1920 × 1080).
- 3Mets un titre dans chaque frame, avec une police différente à chaque fois.
- 4Renomme chaque frame pour que son nom dise ce que c’est.
- 5Dis dans la discussion que tu es prêt, et ce qui t’a le plus embrouillé.
À lire ensuite