Merge branch 'develop' into main

worldline · Nov 17, 2023 · 905acc7 · 905acc7
2 parents c47a9ea + 43ba19a
commit 905acc7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/docs/src/assets/img/figma/introduction/program/open_gif.png b/docs/src/assets/img/figma/introduction/program/open_gif.png
diff --git a/docs/src/figma/exercice/app-1.md b/docs/src/figma/exercice/app-1.md
@@ -20,4 +20,15 @@ En recopiant un design depuis une capture d'écran, le résultat ne peut évidem
 
 Vous pouvez par exemple utiliser des polices et icônes différentes, ce n'est pas cela qui est important.
 
+:::
+
+::: tip Correction
+
+[Un exemple de solution est disponible ici](https://www.figma.com/file/uUvHGlJITQbQQnn4zMxJku/Blablacar?type=design&node-id=0%3A1&mode=design&t=ebOpGpn3qxmYY7BI-1).
+
+Essayez d'abord par vous même avant de regarder la correction !
+
+
+( Il y a plusieurs pages au Figma ;) )
+
 :::
diff --git a/docs/src/figma/exercice/app-5.md b/docs/src/figma/exercice/app-5.md
@@ -4,6 +4,10 @@
 ![](../../assets/img/figma/exercice/app/header.png)
 :::
 
-Ce header n'est pas le plus intéressant à réaliser, je vous conseille plutôt de travailler sur d'autres vues si vous voulez continuer à vous exercer.
+La barre de recherche peut être créé en imbriquant des autolayout horizontaux.
 
-Si malgré tout vous souhaitez finir la vue, la difficulté ici est de créer la barre de recherche. Cela va être plus compliqué de séparer la barre en composants comme on a pu le faire précédemment. La meilleure solution est peut être de tout réaliser avec des imbrications d'auto-layout horizontaux.
+J'ai fait le choix de donner aux cases de destination départ et arrivée une largeur dynamique et de donner aux autres cases une largeur fixe.
+
+Une fois votre header créé, vous pouvez assembler votre écran !
+
+Mettez-le dans un autolayout vertical pour pouvoir tester son comportement responsive: le contenu de la page et de la barre de recherche doivent avoir une largeur fixe alors que le haut du header prend toute la largeur de l'écran (nous ne testerons pas ici le cas d'un appareil mobile).
diff --git a/docs/src/figma/introduction/pricings.md b/docs/src/figma/introduction/pricings.md
@@ -16,14 +16,10 @@ En mode gratuit, vous pouvez avoir **autant de `fichiers` que vous le souhaitez*
 
 Il n'y a aucune limite pour inviter des collaborateurs **en lecture seule** dans vos brouillons.
 
-::: danger Limites du mode gratuit
+::: danger Limite des brouillons
 
 - Vous ne pouvez pas donner les droits d'édition à d'autres collaborateurs.
 
-- Vous êtes limité à 3 pages par `fichier`.
-
-<p align="center"><img src="../../assets/img/figma/introduction/pricings/pages.png"></p>
-
 :::
 
 ## Teams
@@ -36,9 +32,9 @@ Par défaut, Figma vous a créé une `équipe` avec un `projet`.
 
 Dans ces `fichiers` vous pouvez ajouter **autant de collaborateurs que vous le souhaitez avec les droits de lecture ou d'écriture**.
 
-::: danger Limites du mode gratuit
+::: danger Limites des équipes en mode gratuit
 
 - 1 `projet` maximum
 - 3 `fichiers` maximum dans ce `projet`
-
+- 3 pages maximum dans ces `fichiers`.
 :::
diff --git a/docs/src/figma/introduction/program.md b/docs/src/figma/introduction/program.md
@@ -6,6 +6,15 @@ Dans cette première partie vous serez guidés pour prendre en main les bases de
 
 Vous découvrirez l'interface de Figma en mode édition, les différents composants de base, comment les positionner et modifier leurs propriétés.
 
+::: tip 💡 Astuce: ouvrir les vidéos
+
+Sur ce site vous trouverez de nombreuses sections `Tutoriel` avec des vidéos d'explication.
+
+Si l'affichage sur le site est trop petit, nous vous conseillons de les ouvrir dans un nouvel onglet pour les voir en grand en faisant `clique droit` -> `Open image in new tab`
+
+<p align="center"><img src="../../assets/img/figma/introduction/program/open_gif.png"></p>
+:::
+
 ## Fonctionnalités avancées 📚
 
 Dans cette deuxième partie vous serez guidés pour découvrir les fonctionnalités avancées de Figma.