Merge pull request #10 from worldline/develop

Merge develop into main

README.md

@@ -1,16 +1 @@
----
-home: true
-heroImage: /welcome-image.png
-tagline:  Tirez le meilleur de ce logiciel !
-actionText: Démarer la formation →
-actionLink: /figma/introduction/program/
-features:
-- title: Pourquoi Figma ? 💡
-  details: L'essentiel pour connaître les usages et avantages de ce logiciel en entreprise !
-- title: Apprendre Figma 🖥️
-  details: Comment utiliser Figma lorsqu'on n'est pas designer ?
-- title: Votre première App 🚀
-  details: Partie pratique, on design une app from scratch en utilisant un UI kit !
-footer: Made with ❤️ by Antoine CANDY, Henri OUZIEL et Simon MERCIER - Worldline 2023
----
-
+TODO

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: '/' },
@@ -78,8 +79,7 @@ module.exports = {
           title: 'Fonctionnalités avancées',
           collapsable: true,
           children: [
-            '/figma/advanced-features/style',
-            '/figma/advanced-features/variable',
+            '/figma/advanced-features/styles-et-variables',
             '/figma/advanced-features/component',
             {
               title: 'Autolayout',

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,15 +2,14 @@
 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 ? 💡
-  details: L'essentiel pour connaître les usages et avantages de ce logiciel en entreprise !
-- title: Apprendre Figma 🖥️
-  details: Comment utiliser Figma lorsqu'on n'est pas designer ?
-- title: Votre première App 🚀
-  details: Partie pratique, on design une app from scratch en utilisant un UI kit !
-footer: Made with ❤️ by Antoine CANDY, Henri OUZIEL et Simon MERCIER - Worldline 2023
----
-
+  details: Maquetter les écrans est une étape incontournable dans le processus de création d'une application. Figma s'impose quant à lui comme leader du marché mondial avec son interface intuitive et son positionnement collaboratif.
+- title: Apprendre Figma 🎨
+  details: Dans cette formation vous apprendrez les bases de Figma, mais aussi les fonctionnalités avancées et les bonnes pratiques pour concevoir et organiser un fichier Figma.
+- title: Exercice 📚
+  details: Pour terminer cette formation nous vous proposons de reproduire un écran d'une application connue. A vous de vous poser les bonnes questions !
+  footer: Made with ❤️ by Antoine CANDY, Henri OUZIEL et Simon MERCIER - Worldline 2023
+---

docs/src/figma/advanced-features/plugins.md

@@ -2,7 +2,7 @@
 
 ## Qu'est-ce que c'est ?
 
-Les `plugins` dans Figma sont des outils personnalisés qui permettent d'améliorer votre productivité en vous donnant accès à des ressources ou nouvelles fonctionnalités sur Figma.
+Les `plugins` dans Figma sont des outils développés par la communauté qui permettent d'améliorer votre productivité en vous donnant accès à des ressources ou nouvelles fonctionnalités sur Figma.
 
 L'onglet plugin se situe depuis le menu représenté par l'icône <img src="../../assets/img/figma/advanced-features/plugins/plugin-icon.png"></p> de la barre d'outils. Depuis cette interface vous trouverez vos plugins récemment utilisés et une fonction de recherche de plugins.
 
@@ -20,6 +20,10 @@ Ce plugin permet d'utiliser les icônes de la bibliothèque Material de Google.
 
 <p align="center"><img src="../../assets/img/figma/advanced-features/plugins/material-symbols.png"></p>
 
+### Iconify
+
+Ce plugin permet d'accèder à une large bibliothèque d'icônes.
+
 ### Mockups
 
 Ce plugin permet de générer des mockups depuis vos frames.

docs/src/figma/advanced-features/prototype.md

@@ -35,7 +35,7 @@ Au click, un menu de configuration du point de connexion apparaît dans lequel i
 
 Lorsqu'il est relié, le point de connexion prend la forme d'une flèche entre les frames qu'il relie.
 
-INSERER SCHEMA SUR SCREEN 
+<!--INSERER SCHEMA SUR SCREEN -->
 
 ### Les déclencheurs
 
@@ -60,28 +60,25 @@ L'animation la plus courante est le smart animate, celle-ci permet d'animer la t
 Nommer ses éléments est important, une transition en smart animate ne fonctionnera pas si l'élément possède un nom différent que dans le premier écran.
 :::
 
-(vidéos des différentes animations)
-
-### Fonctions de scroll
-
-(PARLER DES FONCTIONS DE SCROLL)
-
 ## Mode présentation
 
 Le mode de présentation permet de "lire" les flows créés via les connexions.
 
-Le menu de présentation <img src="../../assets/img/figma/advanced-features/prototype/presentation-mode.png"></p> est accessible tout à droite de la barre d'outils.
+<p align="center"><img src="../../assets/img/figma/advanced-features/prototype/preview.png"></p>
+
 
 `Present` permet d'ouvrir les flows dans une nouvelle fenetre en grand-écran, tandis que `preview` permet de visualiser le prototype directement depuis la page actuelle ce qui est pratique pour éditer les écrans en parallèle.
 
 ::: tip Astuce
-Le raccourci de l'affichage `preview` est (faire commande touches) Shift + Espace
+Le raccourci de l'affichage `preview` est <kbd>Shift</kbd>+<kbd>Espace</kbd>
 :::
 
-AFFICHER SCREEN ECRAN + Description actions
-
 ## Paramétrer le mode présentation
 
-Depuis le panneau prototypage il est possible de paramétrer le mode de présentation en affichant un mockup d'un device, il est également possible de modifier le fond d'écran sur lequel le protoype apparaît.
+Depuis le panneau prototypage vous avez accès à plusieurs paramètres de la présentation :
 
+- Ajout d'un mockup
+- Modifier le fond de la présentation
+- Gérer les flows
 
+<p align="center"><img src="../../assets/img/figma/advanced-features/prototype/preview-settings.png"></p>

docs/src/figma/advanced-features/style.md → docs/src/figma/advanced-features/styles-et-variables.md

@@ -4,53 +4,37 @@
 
 Les styles permettent de définir la couleur, le texte et les effets appliqués aux objets, ou de définir la structure et l'apparence des grilles de mise en page.
 
-Il existe 4 types de styles dont chacun permet de définir les caractéristiques suivantes :
-- **Couleurs :** couleur de remplissage, contours, arrière-plan
-- **Textes :** famille de polices, taille, hauteur de ligne, espacement
-- **Effets :** ombre portée, ombre interne, flou de calque, flou d'arrière-plan
-- **Grilles :** ligne, colonne, grille
+Il existe 4 types de styles : **Couleurs, textes, effets et grilles**
 
-Les styles permettent une meilleur gestion de ces éléments dans votre projet et de définir une charte qui sera applicable facilement à vos écrans.
-
-La fonction `local styles` se situe dans le `panneau de conception`.
-
-Les bibliothèques de styles sont représentées par l'icône <img src="../../assets/img/figma/advanced-features/styles-variables/bibliotheque-style.png">
+Ces styles sont applicables à vos éléments et permettent d'avoir un design cohérent utilisant les styles à la manière d'une charte graphique.
 
 🎯 **Objectif : Créer et appliquer les différents styles à nos éléments**
 
 ## Créer un style 
 
-Cliquer sur `local styles` permet de choisir le type de style à créer : **text, couleur, effet ou grille.**
-
-<p align="center"><img src="../../assets/img/figma/advanced-features/styles-variables/action-creation-local-styles.png"></p>
-
-
-Afin de créer et appliquer nos différents styles, nous allons commencer par les **styles de couleurs** :
-
-## Créer un style
+Nous allons créer le style `Primary` qui correspond à la couleur principale de notre maquette :
+- Cliquez sur l'icône <img src="../../assets/img/figma/advanced-features/styles-variables/plus-icon.png"> de la section `local styles`
+- Sélectionnez le style `color`
+- Indiquez les caractéristique du style
+- Validez
 
-### Créer un style de couleur
+Félicitations, vous avez créé votre premier style !
 
-Nous allons créer le style `Primary` qui correspond à la couleur principale de notre maquette :
-- Cliquer sur l'icône <img src="../../assets/img/figma/advanced-features/styles-variables/plus-icon.png"> de la section `local styles`
-- Sélectionner `color`
-- Indiquer le nom, la description et la couleur
-- Valider en cliquant sur `Créer`
+Ce procédé est identique pour créer des styles de textes, effets et grilles.
 
 ::: details Tutoriel 🎥
 <p align="center"><img src="../../assets/img/figma/advanced-features/styles-variables/create-new-style.gif"></p>
 :::
 
 ::: tip Astuces
 Les styles créés sont automatiquement affichés dans le `panneau de conception` lorsqu'aucun élément n'est sélectionné.
-(Insérer image)
 :::
 
 ### Appliquer les styles
 
 Le style "Primary" étant créé, il faut désormais l'appliquer à notre maquette.
 
-Sélectionner le bandeau vert, sa couleur est la même que celle du style créé mais est référencée par son code #HEX dans la section `fill`.
+Sélectionnez le bandeau vert, sa couleur est la même que celle du style créé mais est référencée par son code #HEX dans la section `fill`.
 En cliquant sur <img src="../../assets/img/figma/advanced-features/styles-variables/bibliotheque-style.png"> vous accédez à la bibliothèques de styles de couleurs, puis sélectionnez le style "Primary" précèdement créé pour l'appliquer.
 
 ::: details Tutoriel 🎥
@@ -70,38 +54,54 @@ De cette manière vous pouvez aisément modifier ou remplacer les couleurs, manu
 
 Nous allons désormais créer des styles depuis les éléments de notre maquette. Durant sa conception nous avons choisi des couleurs, typographies et effets mais ceux-cis n'ont pas encore été créé en tant que styles.
 
-Sélectionner la card afin de créer le style de couleur de son fond actuellement blanc : `#FFFFFF`.
+Sélectionnez la card afin de créer le style de couleur de son fond actuellement blanc : `#FFFFFF`.
 Dans la section `fill`, en cliquant sur <img src="../../assets/img/figma/advanced-features/styles-variables/bibliotheque-style.png"> puis <img src="../../assets/img/figma/advanced-features/styles-variables/plus-icon.png"> on accède à la création de style de couleur.
 
-On peut alors nommer, et donner une description à la couleur existante.
+On peut alors nommer et donner une description à la couleur existante.
 
 ::: details Tutoriel 🎥
 <p align="center"><img src="../../assets/img/figma/advanced-features/styles-variables/create-color-style-from-selection.gif"></p>
 :::
 
 Vous êtes désormais capables de créer les styles des couleurs restantes, mais aussi de faire de même pour les **typographies, effets et grilles**
 
-
 ## Modifier les styles
 
-Vous pouvez éditer à tout moment vos style depuis le panneau de conception. Les modifications s'appliquent à tous les éléments auxquels vous avez appliqué vos styles.
+Vous pouvez éditer à tout moment vos styles depuis le panneau de conception. Les modifications s'appliquent à tous les éléments auxquels vous avez appliqué vos styles.
 
 Lorsque vous sélectionnez un objet avec un style, vous avez la possibilité de `détacher` un style via l'icône <img src="../../assets/img/figma/advanced-features/styles-variables/detach-icon.png"></p>.
 
 Les modifications de style ne s'appliqueront plus à cet élément même si les caractéristiques sont les mêmes, voir exemple ci-dessous.
 
-::: details Tutoriel 🎥
-<p align="center"><img src="../../assets/img/figma/advanced-features/styles-variables/edit-style.gif"></p>
-:::
-
-
 ## Local styles et libraries
 
-Les styles que vous créez dans un fichier sont enregistrés dans une bibliothèque locale, ainsi uniquement les personnes travaillant sur le même fichier que vous peuvent utiliser ces styles et les composants créés dans ce fichier.
+Les styles que vous créez dans un fichier sont automatiquement enregistré sur ce fichier Figma et sont accessibles par tous les membres ayant des droits d'édition.
 
-Pour pallier cela, vous pouvez `publier` vos styles pour les partager avec les membres de la `Team library`.
+Vous pouvez également `publier` vos styles pour les partager avec les membres de la `Team library`.
 De cette manière vous et les membres de l'équipe pourrez réutiliser ces styles à travers plusieurs fichiers Figma, ce qui est particulièrement utile lors de la création d'un système si ce dernier comporte beaucoup d'éléments.
 
 Pour publier une librairie de styles, cliquez sur <img src="../../assets/img/figma/advanced-features/styles-variables/figma-icon.png"></p> puis sélectionnez `libraries` et publiez la bibliothèque choisie.
 
-<p align="center"><img src="../../assets/img/figma/advanced-features/styles-variables/publish-libraries.png"></p>
+<p align="center"><img src="../../assets/img/figma/advanced-features/styles-variables/publish-libraries.png"></p>
+
+
+## Ouverture sur les variables
+
+La fonctionnalité `Local variables` est une feature de Figma encore en beta permettant de définir des caractéristiques qui peuvent ensuite être appliquées à vos éléments, ce sont des `variables`.
+
+::: warning Attention
+La fonctionnalité des `variables` n'est accessible que depuis une versio payante de Figma.
+:::
+
+En apparence, les variables et styles sont similaires :
+- Ils peuvent être publiés dans les bibliothèques de l'équipe et réutilisés dans toutes les conceptions.
+- Ils permettent une gestion efficace des `design systems`, car les mises à jour d'une variable ou d'un style entraîneront des mises à jour pour tous les design systems qui les utilisent.
+
+Pourtant les variables permettent davantage de complexité : les variables peuvent être utilisées pour définir d'autres variables et styles, mais les styles ne peuvent définir ni les unes ni les autres.
+
+Les variables permettent de créer des **valeurs de texte, de nombre, de couleur et de booléennes.**
+Vous pouvez définir et modifier ces valeurs depuis un espace de collection de variables qui vous permettront par exemple de pouvoir ajuster facilement le thème (dark mode ou light mode), du texte, ou encore de gérer vos espacements et vos corner radius.
+
+Les variables permettent également de faire du prototypage avancé de vos maquettes.
+Pour une meilleure compréhension de cette feature, nous vous invitons à consulter cette
+[vidéo de présentation des variables](https://www.youtube.com/watch?v=1ONxxlJnvdM&t=344s&ab_channel=Figma/)