Merge pull request #9 from worldline/feature/ui-fixes

Feature/UI fixes

docs/src/.vuepress/config.js

@@ -33,7 +33,8 @@ module.exports = {
     editLinks: true,
     editLinkText: 'Help us improve this page!',
     lastUpdated: true,
-    search: false,
+    search: true,
+    searchMaxSuggestions: 10,
     sidebarDepth: 0,
     nav: [
       { text: 'Accueil', link: '/' },

docs/src/.vuepress/styles/index.styl

@@ -31,4 +31,11 @@ kbd
 	-webkit-box-shadow 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset
 	-moz-border-radius 3px
 	-webkit-border-radius 3px
-	text-shadow 0 1px 0 #fff
+	text-shadow 0 1px 0 #fff
+
+.trainer
+	height 70px
+	border-radius 12px
+
+.sidebar-heading
+	opacity 1 !important

docs/src/README.md

@@ -2,7 +2,7 @@
 home: true
 heroImage: /welcome-image.png
 tagline:  Tirez le meilleur de ce logiciel !
-actionText: Démarer la formation →
+actionText: Démarrer la formation →
 actionLink: /figma/introduction/program/
 features:
 - title: Pourquoi Figma ? 💡

docs/src/figma/basics/positioning.md

@@ -6,7 +6,7 @@
 
 ## Alignements
 
-### Alignement d'un élément dans un conteneur
+### Aligner un élément dans un conteneur
 
 Comme nous l'avons déjà vu, Figma permet d'aligner (à gauche, à droite, en haut, en bas, au centre) un élement à l'interieur de son conteneur (`Frame`, `Groupe`, `Section`) :
 - directement dans le plan de travail (aides visuelles de Figma)
@@ -16,19 +16,80 @@ Comme nous l'avons déjà vu, Figma permet d'aligner (à gauche, à droite, en h
 ![change page background color](../../assets/img/figma/basics/positioning/positioning_alignment_demo.gif)
 :::
 
-### Alignement de plusieurs élements
+### Aligner plusieurs élements
 
-::: tip Sélection en profondeur 💡
+Pour aligner des éléments les uns par rapport aux autres vous pouvez :
+- déplacer les éléments un par un en utilisant les aides visuelles de Figma
+- les sélectionner tous, puis utiliser les boutons d'alignements en haut à droite du `Design panel`
+
+::: tip Sélection en profondeur & mutli-sélection 💡
 
 Pour sélectionner un élément à l'interieur d'un autre (groupe, frame) : 
 - soit double-cliquer jusqu'à atteindre l'élement
 - soit maintenir la touche <kbd>Ctrl</kbd> enfoncée puis cliquer sur l'élément
 
+Pour sélectionner plusieurs éléments à la fois : maintenir <kbd>Shift</kbd> enfoncée et cliquer sur les éléments un par un
+
+Utilisez <kbd>Ctrl</kbd> + <kbd>Shift</kbd> enfoncées pour faire de la multi-sélection en profondeur !
+
+:::
+
+**Exercice :** Aligner éléments dans votre `Card` contact
+- Alignez vos textes `Nom` et `Numéro` (justifiés à gauche)
+- Groupez-les dans une `Frame` (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>G</kbd>) et renommez cette `Frame` en `Contact info`
+- Centrez horizontalement vos trois éléments de contact (photo, contact info et l'icône)
+
+::: details Tuto 🎥
+![elements alignement](../../assets/img/figma/basics/positioning/elements-alignment.gif)
 :::
 
 ## Espacements
+La dernière étape pour positionner correctement vos éléments est de leur appliquer les bons espacements autour et par rapport aux autres !
+
+Il est important pour avoir un design ordonné, cohérent et propre d'avoir des espacements identiques/proportionel et précis. Il est donc normal pour les designers d'interface de positionner ses éléments d'interface au pixel prês !
+
+::: tip Déplacer un élément au pixel près !💡
+Pour déplacer un élément pixel par pixel dans Figma : sélectionnez votre élément puis utilisez les flêches directionnelles du clavier !
+
+Pour déplacer un élément d'un **certains nombre** de pixel d'un seul coup (on parle de `Nudge`), maintenez <kbd>Shift</kbd> enfoncée puis piloter le déplacement avec les flèches directionnelles <kbd>↑</kbd>, <kbd>↓</kbd>, <kbd>→</kbd>, <kbd>←</kbd> ! 
+
+Par défaut cet écart est de 10 pixels, il est possible de changer cet écart dans les options de Figma `Fichier` > `Preferences` > `Nudge amount...`
+
+:::
 
-(work in progress)
+>**Remarque :** Si vous zoomez à fond (<kbd>Ctrl</kbd> + <kbd>Roulette</kbd>) sur le plan de travail, vous finirez par voir les pixels de votre design ! Une aide en  plus pour un design au pixel près !
+
+::: tip Visualiser les espacements 💡
+Utilisez <kbd>Alt</kbd> pour voir l'espacement entre l'élément et les bordures de l'écran
+:::
+
+**Exercice :** Positionner votre `Card` de contact au pixel près !
+- si vous ne l'avez pas encore fait, changez le `Nudge amount` de votre projet (`Fichier` > `Preferences` > `Nudge amount...`) en saisissant la valeur 8
+- dans l'écran de contact, positionnez votre contact tout à gauche au bord de l'écran juste en dessous de votre barre de statut
+- décallez le de 16px à droite avec <kbd>Shift</kbd> + <kbd>→</kbd> puis de 16px vers le bas (<kbd>Shift</kbd> + <kbd>↓</kbd>)
+- aggrandissez ensuite la `Frame` de contact pour qu'elle soit à 16px à droite de l'écran (vous pouvez pour cela aggrandir la `Frame`jusqu'au bord de l'écran puis soustraire le nombre de pixel souhaité à la largeur `Width`)
+
+::: details Tuto 🎥
+![elements spacing](../../assets/img/figma/basics/positioning/elements-spacing.gif)
+:::
+
+**Exercice :** Aligner plusieurs contact
+- Duppliquez votre `Card`de contact deux fois
+
+::: tip Duppliquer un élément
+Pour duppliquer un élément dans Figma, vous pouvez sélectionner votre élément puis :
+- utiliser les raccourcis clavier <kbd>Ctrl</kbd> + <kbd>C</kbd>, pour copier, puis <kbd>Ctrl</kbd> + <kbd>V</kbd> pour coller
+- utiliser le raccourci <kbd>Ctrl</kbd> + <kbd>D</kbd> pour copier/coller directement
+- maintenir <kbd>Alt</kbd> enfoncée, maintenir le clique sur votre élément puis glisser votre cursor en dehors de celui-ci
+- utiliser le clique droit (copier puis coller)
+:::
+
+- Alignez vos `Card` de contact verticallement (justifiées à gauche)
+- Espacer vos `Card`de contact les unes des autres de 16px
+
+::: details Tuto 🎥
+![align contacts](../../assets/img/figma/basics/positioning/align-contacts.gif)
+:::
 
 ## Grilles
 

docs/src/figma/introduction/trainers.md

@@ -4,12 +4,19 @@
 
 Ingénieur informatique de formation, je me suis spécialisé dans le développement d'applications mobiles puis plus globalement dans leur conception, de la phase d'idéation à la mise en production, en passant bien entendu par le design.
 
-Je ressemble à ça <img class="align-text" height="100px" src="../../assets/img/figma/introduction/trainers/simon_2.png" style="border-radius: 10%;"/> ou à ça <img class="align-text" height="100px" src="../../assets/img/figma/introduction/trainers/simon_1.png" style="border-radius: 10%;"/> selon les médias.
+Je ressemble à ça <img class="align-text trainer" src="../../assets/img/figma/introduction/trainers/simon_2.png"/> ou à ça <img class="align-text trainer" src="../../assets/img/figma/introduction/trainers/simon_1.png"/> selon les médias.
 
 Vous pouvez me contacter via [Linkedin](https://www.linkedin.com/in/merciersimon/) ou par [mail](mailto:[email protected]).
 
 ## Antoine CANDY
 
+Ingénieur informaticien 🤓 spécialisé dans le developpement WEB (plus frontend que backend 😁). UX/UI designer 📱💻 et graphiste en herbe 🎨.
+
+<img class="trainer" src="../../assets/img/figma/introduction/trainers/antoine_1.jpg"/>
+<img class="trainer" src="../../assets/img/figma/introduction/trainers/antoine_2.png"/>
+
+Contactez-moi directement sur [Linkedin](https://fr.linkedin.com/in/antoine-candy-2347b1105) ou par [mail](mailto:[email protected]).
+
 ## Henri OUZIEL
 
 Alternant en tant qu’UX/UI Designer mais aussi étudiant en Direction Artistique et également graphiste sur mon temps libre !