diff --git a/docs/src/.vuepress/config.js b/docs/src/.vuepress/config.js index 8ba230b..92dc21a 100644 --- a/docs/src/.vuepress/config.js +++ b/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: '/' }, diff --git a/docs/src/.vuepress/styles/index.styl b/docs/src/.vuepress/styles/index.styl index 95aa261..771ce15 100644 --- a/docs/src/.vuepress/styles/index.styl +++ b/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 \ No newline at end of file + text-shadow 0 1px 0 #fff + +.trainer + height 70px + border-radius 12px + +.sidebar-heading + opacity 1 !important \ No newline at end of file diff --git a/docs/src/README.md b/docs/src/README.md index 065b3a4..ed39402 100644 --- a/docs/src/README.md +++ b/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 ? 💡 diff --git a/docs/src/assets/img/figma/basics/positioning/align-contacts.gif b/docs/src/assets/img/figma/basics/positioning/align-contacts.gif new file mode 100644 index 0000000..c7c11ad Binary files /dev/null and b/docs/src/assets/img/figma/basics/positioning/align-contacts.gif differ diff --git a/docs/src/assets/img/figma/basics/positioning/elements-alignment.gif b/docs/src/assets/img/figma/basics/positioning/elements-alignment.gif new file mode 100644 index 0000000..fe1cb66 Binary files /dev/null and b/docs/src/assets/img/figma/basics/positioning/elements-alignment.gif differ diff --git a/docs/src/assets/img/figma/basics/positioning/elements-spacing.gif b/docs/src/assets/img/figma/basics/positioning/elements-spacing.gif new file mode 100644 index 0000000..86873b0 Binary files /dev/null and b/docs/src/assets/img/figma/basics/positioning/elements-spacing.gif differ diff --git a/docs/src/assets/img/figma/introduction/trainers/antoine_1.jpg b/docs/src/assets/img/figma/introduction/trainers/antoine_1.jpg new file mode 100644 index 0000000..e482d35 Binary files /dev/null and b/docs/src/assets/img/figma/introduction/trainers/antoine_1.jpg differ diff --git a/docs/src/assets/img/figma/introduction/trainers/antoine_2.png b/docs/src/assets/img/figma/introduction/trainers/antoine_2.png new file mode 100644 index 0000000..47e5895 Binary files /dev/null and b/docs/src/assets/img/figma/introduction/trainers/antoine_2.png differ diff --git a/docs/src/figma/basics/positioning.md b/docs/src/figma/basics/positioning.md index 3054326..2fe44bc 100644 --- a/docs/src/figma/basics/positioning.md +++ b/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 Ctrl enfoncée puis cliquer sur l'élément +Pour sélectionner plusieurs éléments à la fois : maintenir Shift enfoncée et cliquer sur les éléments un par un + +Utilisez Ctrl + Shift 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` (Ctrl + Alt + G) 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 Shift enfoncée puis piloter le déplacement avec les flèches directionnelles ↑, ↓, →, ← ! + +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 (Ctrl + Roulette) 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 Alt 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 Shift + → puis de 16px vers le bas (Shift + ↓) +- 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 Ctrl + C, pour copier, puis Ctrl + V pour coller +- utiliser le raccourci Ctrl + D pour copier/coller directement +- maintenir Alt 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 diff --git a/docs/src/figma/introduction/trainers.md b/docs/src/figma/introduction/trainers.md index 1a0f306..2c02ef6 100644 --- a/docs/src/figma/introduction/trainers.md +++ b/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 ou à ça selon les médias. +Je ressemble à ça ou à ça selon les médias. Vous pouvez me contacter via [Linkedin](https://www.linkedin.com/in/merciersimon/) ou par [mail](mailto:simon.mercier59@gmail.com). ## Antoine CANDY +Ingénieur informaticien 🤓 spécialisé dans le developpement WEB (plus frontend que backend 😁). UX/UI designer 📱💻 et graphiste en herbe 🎨. + + + + +Contactez-moi directement sur [Linkedin](https://fr.linkedin.com/in/antoine-candy-2347b1105) ou par [mail](mailto:antoine.candy@gmail.com). + ## Henri OUZIEL Alternant en tant qu’UX/UI Designer mais aussi étudiant en Direction Artistique et également graphiste sur mon temps libre ! \ No newline at end of file