Merge pull request #7 from worldline/develop

Merge develop in main

docs/src/.vuepress/config.js

@@ -49,58 +49,63 @@ module.exports = {
             '/figma/introduction/trainers',
             '/figma/introduction/why',
             '/figma/introduction/pricings',
-            '/figma/introduction/shortcuts'
+            '/figma/introduction/shortcuts',
+            '/figma/introduction/download',
           ]
         },
         {
-          title: 'Partie théorique',
+          title: "Les bases",
           collapsable: true,
           children: [
-            '/figma/theory/download',
-            '/figma/theory/interface',
+            '/figma/basics/interface',
             {
               title: 'Éléments d\'interface',
-              collapsable: false,
+              collapsable: true,
               children: [
-                '/figma/theory/ui-elements/texts',
-                '/figma/theory/ui-elements/forms',
-                '/figma/theory/ui-elements/groups',
-                '/figma/theory/ui-elements/frames',
-                '/figma/theory/ui-elements/properties',
-                '/figma/theory/ui-elements/images',
-                '/figma/theory/ui-elements/icons'
+                '/figma/basics/ui-elements/texts',
+                '/figma/basics/ui-elements/forms',
+                '/figma/basics/ui-elements/groups',
+                '/figma/basics/ui-elements/frames',
+                '/figma/basics/ui-elements/properties',
+                '/figma/basics/ui-elements/images',
+                '/figma/basics/ui-elements/icons'
               ]
             },
-            '/figma/theory/positioning',
-            '/figma/theory/style',
-            '/figma/theory/variable',
-            '/figma/theory/component',
+            '/figma/basics/positioning'
+          ]
+        },
+        {
+          title: 'Fonctionnalités avancées',
+          collapsable: true,
+          children: [
+            '/figma/advanced-features/style',
+            '/figma/advanced-features/variable',
+            '/figma/advanced-features/component',
             {
               title: 'Autolayout',
-              collapsable: false,
+              collapsable: true,
               children: [
-                '/figma/theory/autolayout/definition',
-                '/figma/theory/autolayout/layout-flow',
-                '/figma/theory/autolayout/spacing',
-                '/figma/theory/autolayout/alignment',
-                '/figma/theory/autolayout/resizing',
-                '/figma/theory/autolayout/exercice'
+                '/figma/advanced-features/autolayout/definition',
+                '/figma/advanced-features/autolayout/layout-flow',
+                '/figma/advanced-features/autolayout/spacing',
+                '/figma/advanced-features/autolayout/alignment',
+                '/figma/advanced-features/autolayout/resizing',
+                '/figma/advanced-features/autolayout/exercice'
               ]
             },
-            '/figma/theory/prototype',
-            '/figma/theory/plugins',
-            '/figma/theory/practices'
+            '/figma/advanced-features/prototype',
+            '/figma/advanced-features/plugins'
           ]
         },
         {
-          title: 'Partie pratique',
+          title: 'Exercice',
           collapsable: true,
           children: [
-            '/figma/tutorial/app-1',
-            '/figma/tutorial/app-2',
-            '/figma/tutorial/app-3',
-            '/figma/tutorial/app-4',
-            '/figma/tutorial/app-5',
+            '/figma/exercice/app-1',
+            '/figma/exercice/app-2',
+            '/figma/exercice/app-3',
+            '/figma/exercice/app-4',
+            '/figma/exercice/app-5',
           ]
         }
       ]

docs/src/figma/theory/autolayout/alignment.md → docs/src/figma/advanced-features/autolayout/alignment.md

@@ -9,7 +9,7 @@ C'est pour cette raison que l'alignement se règle depuis l'autolayout et pas su
 Utilisez la boite d'alignement dans le `Design panel`à droite dans la propriété `Autolayout` pour changer l'alignement des éléments à l'intérieur de votre `Frame`.
 
 ::: details Démo 🎥
-![alignment options](../../../assets/img/figma/theory/autolayout/alignment/alignment-options.gif)
+![alignment options](../../../assets/img/figma/advanced-features/autolayout/alignment/alignment-options.gif)
 :::
 
 > **Remarque :** La `Direction`et le `Gap`de votre autolayout vont déterminer quelle option d'alignement est possible à l'interieur de celui-ci.
@@ -18,8 +18,8 @@ Utilisez la boite d'alignement dans le `Design panel`à droite dans la propriét
 - Agrandissez la `Frame`qui contient vos cercles
 - Essayez de changer l'alignement dans la boite d'alignement de votre `Autolayout`
 - Changer la direction (Horizontal, Vertical, Wrap) puis testez à nouveau les différents alignements
-- Faites de même en changeant le `Gap` <img class="figma-button align-text" height="24px" alt="spacing button" src="../../../assets/img/figma/theory/common-icons/spacing-button.svg"> ("Auto" ou bien une valeur en pixel !)
+- Faites de même en changeant le `Gap` <img class="figma-button align-text" height="24px" alt="spacing button" src="../../../assets/img/figma/common/spacing-button.svg"> ("Auto" ou bien une valeur en pixel !)
 
 ::: details Tuto 🎥
-![alignment box](../../../assets/img/figma/theory/autolayout/alignment/alignment-box.gif)
+![alignment box](../../../assets/img/figma/advanced-features/autolayout/alignment/alignment-box.gif)
 :::

docs/src/figma/theory/autolayout/definition.md → docs/src/figma/advanced-features/autolayout/definition.md

@@ -11,9 +11,9 @@ Il existe plusieurs manière d'utiliser l'autolayout :
 
 L'autolayout est une fonctionnalité puissante dont nous allons présenter les propriétés.
 
-![autolayout animation](../../../assets/img/figma/theory/autolayout/definition/autolayout.gif)
+![autolayout animation](../../../assets/img/figma/advanced-features/autolayout/definition/autolayout.gif)
 
-![autolayout button animation](../../../assets/img/figma/theory/autolayout/definition/button-autolayout.gif)
+![autolayout button animation](../../../assets/img/figma/advanced-features/autolayout/definition/button-autolayout.gif)
 
 ::: tip 💡
 Utilisez la touche <kbd>Tab</kbd> pour passer d'un de champs de saisie au suivant rapidement !

docs/src/figma/theory/autolayout/exercice.md → docs/src/figma/advanced-features/autolayout/exercice.md

@@ -1,6 +1,6 @@
-# Exercice final
+# Exercice
 Afin de mieux comprendre et mettre en pratique vos nouvelles connaissances sur l'autolayout : utilisez les composants et l'écran des contacts précédement réalisés pour créer une interface responsive (redimenssionement, ajout/suppression d'un élémént etc...) ! (Voir le résultat attendu ci-dessous)
 
 ::: details Tuto 🎥
-![exercice final autolayout](../../../assets/img/figma/theory/autolayout/exercice/autolayout-final-exercice.gif)
+![exercice final autolayout](../../../assets/img/figma/advanced-features/autolayout/exercice/autolayout-final-exercice.gif)
 :::

docs/src/figma/theory/autolayout/layout-flow.md → docs/src/figma/advanced-features/autolayout/layout-flow.md

@@ -7,32 +7,32 @@ L'autolayout agence les élements dans la `Frame` les uns à la suite des autres
 - **Horizontal**
 - **Wrap**
 
-![autolayout direction](../../../assets/img/figma/theory/autolayout/layout-flow/autolayout-direction.png)
+![autolayout direction](../../../assets/img/figma/advanced-features/autolayout/layout-flow/autolayout-direction.png)
 
 
 **Exercice :** Créer un autolayout et changer sa direction ! Pour ce faire : 
 - Créez trois cercle de couleurs différentes (cf. l'image ci-dessus)
 - Sélectionnez les 3 cercles (maintenir <kbd>Shift</kbd> + clique, ou bien utiliser la sélection rapide)
-- Utilisez le raccourci <kbd>Shift</kbd> + <kbd>A</kbd> OU cliquez sur le bouton <img class="figma-button align-text" alt="autlayout add button" src="../../../assets/img/figma/theory/autolayout/layout-flow/autolayout-add-button.svg"> dans le `Design panel` à droite (propriété `Autolayout`) pour créer un autolayout.
+- Utilisez le raccourci <kbd>Shift</kbd> + <kbd>A</kbd> OU cliquez sur le bouton <img class="figma-button align-text" alt="autlayout add button" src="../../../assets/img/figma/advanced-features/autolayout/layout-flow/autolayout-add-button.svg"> dans le `Design panel` à droite (propriété `Autolayout`) pour créer un autolayout.
 
 > **Remarque :** On aurait très bien pu d'abord créer une frame, ajouter les 3 cercles à l'intérieur, et n'ajouter l'autolayout qu'après !
 
 - Changez la direction de votre autolayout (Vertical, Horizontal, Wrap) dans le `Design panel` dans la section `Autolayout`
 
 ::: details Tutoriel 🎥
-![autolayout direction tuto](../../../assets/img/figma/theory/autolayout/layout-flow/autolayout-direction.gif)
+![autolayout direction tuto](../../../assets/img/figma/advanced-features/autolayout/layout-flow/autolayout-direction.gif)
 :::
 
 ## Ordre d'empilement
 
-Avec un `Autolayout`, si les éléments ont un espacement négatif (superposition des éléments), le dernier élément de la `Frame` apparaît au dessus des autres par défaut. Vous pouvez changer l'ordre de l'empilement des éléments en cliquant sur le bouton <img class="figma-button align-text" alt="autolayout more button" src="../../../assets/img/figma/theory/autolayout/layout-flow/autolayout-more-button.svg"> dans la propriété `Autolayout` ➡ `Canvas stacking` :
+Avec un `Autolayout`, si les éléments ont un espacement négatif (superposition des éléments), le dernier élément de la `Frame` apparaît au dessus des autres par défaut. Vous pouvez changer l'ordre de l'empilement des éléments en cliquant sur le bouton <img class="figma-button align-text" alt="autolayout more button" src="../../../assets/img/figma/advanced-features/autolayout/layout-flow/autolayout-more-button.svg"> dans la propriété `Autolayout` ➡ `Canvas stacking` :
 - **First on top** : le premier élément de l'empilement sera au dessus
 - **Last on top** : le dernier élément de l'empilement sera au dessus
 
-![canvas stacking order](../../../assets/img/figma/theory/autolayout/layout-flow/canvas-stacking-order.png)
+![canvas stacking order](../../../assets/img/figma/advanced-features/autolayout/layout-flow/canvas-stacking-order.png)
 
 ::: details Démo 🎥
-![autolayout stacking](../../../assets/img/figma/theory/autolayout/layout-flow/autolayout-stacking.gif)
+![autolayout stacking](../../../assets/img/figma/advanced-features/autolayout/layout-flow/autolayout-stacking.gif)
 :::
 
 > **Remarque :** Vous pouvez changer la place d'un élément dans un autolayout avec les flèches du clavier après l'avoir sélectionné !
@@ -43,15 +43,15 @@ Avec un `Autolayout`, si les éléments ont un espacement négatif (superpositio
 - Sélectionnez le et glisser le entre deux éléments dans votre `Frame`
 - A l'aide des flèches du clavier, changez sa position
 - Vous pouvez le supprimer en cliquant sur <kbd>Back</kbd> ou <kbd>Suppr</kbd>
-- (<kbd>Ctrl</kbd> + <kbd>Z</kbd> pour annuler) cachez l'élément en cliquant sur <img class="figma-button align-text" alt="visibility button" src="../../../assets/img/figma/theory/autolayout/layout-flow/visibility-button.svg"> à droite dans le `Design panel` > propriété `Layer`.
+- (<kbd>Ctrl</kbd> + <kbd>Z</kbd> pour annuler) cachez l'élément en cliquant sur <img class="figma-button align-text" alt="visibility button" src="../../../assets/img/figma/advanced-features/autolayout/layout-flow/visibility-button.svg"> à droite dans le `Design panel` > propriété `Layer`.
 
 > **Remarque :** La taille de la `Frame`s'adapte à son contenu par défaut
-- Vous pouvez faire réapparaître l'élément caché depuis le `Panel des calques` à gauche ou en cliquant sur <img class="figma-button align-text" alt="visibility off button" src="../../../assets/img/figma/theory/autolayout/layout-flow/visibility-off-button.svg">
+- Vous pouvez faire réapparaître l'élément caché depuis le `Panel des calques` à gauche ou en cliquant sur <img class="figma-button align-text" alt="visibility off button" src="../../../assets/img/figma/advanced-features/autolayout/layout-flow/visibility-off-button.svg">
 
 ::: details Tutoriel 🎥
-![autolayout children](../../../assets/img/figma/theory/autolayout/layout-flow/autolayout-children.gif)
+![autolayout children](../../../assets/img/figma/advanced-features/autolayout/layout-flow/autolayout-children.gif)
 :::
-- Essayez de refaire l'exercice cette fois ci en changeant l'espacement entre les éléments (`Gap between items`) <img class="figma-button align-text" height="24px" alt="spacing button" src="../../../assets/img/figma/theory/common-icons/spacing-button.svg"> toujours dans les propriétés `Autolayout`
+- Essayez de refaire l'exercice cette fois ci en changeant l'espacement entre les éléments (`Gap between items`) <img class="figma-button align-text" height="24px" alt="spacing button" src="../../../assets/img/figma/common/spacing-button.svg"> toujours dans les propriétés `Autolayout`
 
 ## Position absolue
 
@@ -61,8 +61,8 @@ Un peu comme en CSS (<code>position: absolute;</code>), un élément en position
 
 Les éléments en position absolue sont gérés comme dans des `Frame` classiques (sans autolayout) : vous pouvez leur appliquer des contraintes pour déterminer leur comportement lors du redimensionnement de la `Frame` parent.
 
-Pour activer la position absolue d'un élément, sélectionnez un enfant d'une `Frame` avec `Autolayout` et cliquez sur <img class="figma-button align-text" alt="absolute button" src="../../../assets/img/figma/theory/autolayout/layout-flow/absolute-button.svg">
+Pour activer la position absolue d'un élément, sélectionnez un enfant d'une `Frame` avec `Autolayout` et cliquez sur <img class="figma-button align-text" alt="absolute button" src="../../../assets/img/figma/advanced-features/autolayout/layout-flow/absolute-button.svg">
 
 ::: details Démo 🎥
-![absolute position](../../../assets/img/figma/theory/autolayout/layout-flow/absolute-position.gif)
+![absolute position](../../../assets/img/figma/advanced-features/autolayout/layout-flow/absolute-position.gif)
 :::

docs/src/figma/theory/autolayout/resizing.md → docs/src/figma/advanced-features/autolayout/resizing.md

@@ -6,15 +6,15 @@ Une des plus puissantes fonctionnalités de l'autolayout est d'adapter les dimen
 Vous l'avez peut être déjà remarqué, lorsque vous ajoutez un élément dans une `Frame` avec `Autolayout`, sa taille s'adapte ! C'est parce que par défaut, ses propriétés `Horizontal resizing` et `Vertical resizing` sont réglées sur `Hug contents`.
 
 ::: details Démo 🎥
-![alignment options](../../../assets/img/figma/theory/autolayout/resizing/resizing-properties.gif)
+![alignment options](../../../assets/img/figma/advanced-features/autolayout/resizing/resizing-properties.gif)
 :::
 
 **Exercice :** Créer le bouton `S'abonner` de youtube !
 
 ::: tip 🎯 Objectif : Bouton intelligent
 Un cas pratique de l'autolayout, vous allez créé un bouton qui s'adapte à la taille de son texte
 
-![smart button](../../../assets/img/figma/theory/autolayout/resizing/smart-button.gif)
+![smart button](../../../assets/img/figma/advanced-features/autolayout/resizing/smart-button.gif)
 :::
 - Créer un texte "S'abonner"
 - Sélectionner votre texte et faites <kbd>Shift</kbd> + <kbd>A</kbd> pour créer un autolayout à partir de celui-ci
@@ -33,7 +33,7 @@ Un cas pratique de l'autolayout, vous allez créé un bouton qui s'adapte à la
 - Essayer de modifier le texte et remarquer que la taille de la `Frame` s'adapte
 
 ::: details Démo 🎥
-![smart button demo](../../../assets/img/figma/theory/autolayout/resizing/smart-button-demo.gif)
+![smart button demo](../../../assets/img/figma/advanced-features/autolayout/resizing/smart-button-demo.gif)
 :::
 
 ## Largeur et hauteur fixes
@@ -57,27 +57,27 @@ Grâce à l'option `Fill container`, l'élément va remplir tout l'espace dispon
 - Essayez de redimensionner la `Frame`en largeur et observer le bouton (sa taille s'adapte en largeur)
 
 ::: details Tuto 🎥
-![fill container demo](../../../assets/img/figma/theory/autolayout/resizing/fill-container-demo.gif)
+![fill container demo](../../../assets/img/figma/advanced-features/autolayout/resizing/fill-container-demo.gif)
 :::
 
 - Appliquez `Fill container` à tous les boutons de la `Frame` puis essayer de la redimensionner en largeur
 - Essayer de changer sa direction (vertical/horizontal)
 
 ::: details Démo 🎥
-![fill container demo](../../../assets/img/figma/theory/autolayout/resizing/fill-container-demo-2.gif)
+![fill container demo](../../../assets/img/figma/advanced-features/autolayout/resizing/fill-container-demo-2.gif)
 :::
 
 ## Dimensions minimum et maximum
 
 Il est possible de paramétrer un maximum et/ou un minimum pour la largeur et la hauteur d'une `Frame` avec `Autolayout`. Pour se faire :
-- ouvrir la liste déroulante de la largeur (`Width`) pour trouver les options <img class="figma-button align-text" alt="min width button" src="../../../assets/img/figma/theory/autolayout/resizing/min-width-button.svg"> `Add min width` et <img class="figma-button align-text" alt="max width button" src="../../../assets/img/figma/theory/autolayout/resizing/max-width-button.svg"> `Add max width`
-- ouvrir la liste déroulante de la hauteur (`Height`) pour trouver les options <img class="figma-button align-text" alt="min height button" src="../../../assets/img/figma/theory/autolayout/resizing/min-height-button.svg"> `Add min height` et <img class="figma-button align-text" alt="max height button" src="../../../assets/img/figma/theory/autolayout/resizing/max-height-button.svg"> `Add max height`
+- ouvrir la liste déroulante de la largeur (`Width`) pour trouver les options <img class="figma-button align-text" alt="min width button" src="../../../assets/img/figma/advanced-features/autolayout/resizing/min-width-button.svg"> `Add min width` et <img class="figma-button align-text" alt="max width button" src="../../../assets/img/figma/advanced-features/autolayout/resizing/max-width-button.svg"> `Add max width`
+- ouvrir la liste déroulante de la hauteur (`Height`) pour trouver les options <img class="figma-button align-text" alt="min height button" src="../../../assets/img/figma/advanced-features/autolayout/resizing/min-height-button.svg"> `Add min height` et <img class="figma-button align-text" alt="max height button" src="../../../assets/img/figma/advanced-features/autolayout/resizing/max-height-button.svg"> `Add max height`
 
 **Exercice :** Largeur maximum et minimum !
 - Ajoutez une largeur maximum (250px) et une largeur minimum (170px) pour le bouton `S'abonner`
 - Essayez de redimensionner le bouton au delà de ces dimensions
 
 ::: details Tuto 🎥
-![min max demo](../../../assets/img/figma/theory/autolayout/resizing/min-max-demo.gif)
+![min max demo](../../../assets/img/figma/advanced-features/autolayout/resizing/min-max-demo.gif)
 :::