Flexbox - Figma Auto Layout

Séance : De Figma à Visual Studio Code – Auto-Layout et Flexbox

⏳ Durée : 1h30 (théorie) + 1h30 (pratique)
🎯 Objectifs :

  • Comprendre et utiliser l'auto-layout dans Figma.
  • Explorer le Dev Mode et la génération de code CSS (Flexbox).
  • Intégrer le code généré dans Visual Studio Code et l’adapter pour une vraie interface web.
  • Comprendre l’usage de Figma en industrie.
Video CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout Comprendre Flexbox via le Dev mode dans Figma En anglais mais vous pouvez ajouter les sous-titres français.

Extention à installer maintenant sur vos Visual Studio Code

1. Introduction à l’Auto-Layout dans Figma (30 min)

📌 Pourquoi utiliser l’auto-layout ?

  • Facilite la gestion des espacements, alignements et tailles des éléments.
  • Simule le comportement CSS (Flexbox).
  • Optimisé pour le responsive design.

🛠️ Démonstration en direct :

  1. Créer un cadre (Frame) et y ajouter un bouton.
  2. Activer l’auto-layout et modifier :
    • Direction (row / column)
    • Alignement (start, center, end)
    • Espacement entre éléments
    • Padding et dimensionnement
    • Gap et distribution des éléments
  3. Appliquer l’auto-layout à un composant plus complexe (ex. une carte de produit).

💡 Discussion : Comment cela se traduit en CSS ? (Évocation rapide de Flexbox)

2. Passage en Dev Mode et Extraction du Code CSS (30 min)

🔍 Présentation du Dev Mode

  • Activer le mode développeur dans Figma.
  • Explorer les propriétés CSS générées.
  • Comprendre comment Figma traduit l’auto-layout en display: flex.

🛠️ Démonstration :

  1. Sélectionner un élément et voir son code CSS généré.
  2. Comparer avec le code qu’on écrirait soi-même.
  3. Copier le code et l’analyser dans Visual Studio Code.

💬 Discussion :

  • Forces et limites du code généré.
  • Pourquoi l’industrie ne copie-colle pas ce code tel quel ?

3. Intégration dans Visual Studio Code (30 min)

📌 Objectif : Recréer l’interface avec un code propre.
🛠️ Démonstration :

  1. Créer un fichier index.html et style.css.
  2. Structurer l’HTML (sections, divs, classes).
  3. Appliquer les styles avec Flexbox en s’inspirant du code généré par Figma.
  4. Ajuster les styles pour améliorer la propreté et la maintenabilité du code.

💡 Analyse :

  • Comparaison entre le code généré et celui écrit manuellement.
  • Importance des bonnes pratiques (nomenclature, optimisation CSS).

4. Comment l’Industrie Utilise Figma en Développement Web ? (30 min)

🛠️ Workflow en entreprise :

  1. Designer → Création des maquettes dans Figma avec Auto-Layout.
  2. Développeur → Exploration en Dev Mode pour récupérer les propriétés.
  3. Intégration → Transposition dans HTML/CSS en adaptant le code généré.

📌 Bonnes pratiques :

  • Nommer et organiser ses calques proprement.
  • Utiliser des styles globaux et des composants réutilisables.
  • Travailler avec des variables CSS et des classes bien structurées.

5. Atelier Pratique (1h30)

🎯 Exercice : Créer une carte de produit à partir d’un design Figma.

  1. Ouvrir un fichier Figma préparé avec une carte de produit (auto-layout activé).
  2. Extraire le code via Dev Mode.
  3. Reproduire cette carte en HTML/CSS en s’inspirant du code généré, mais en l’optimisant.
  4. Tester l’adaptabilité avec quelques modifications (ex. ajustement du flex-grow, ajout d’un breakpoint).

💡 Débriefing :

  • Quels défis avez-vous rencontrés ?
  • Comment améliorer le workflow entre Figma et le code ?

🔚 Conclusion & Ressources Supplémentaires

  • Références : Documentation Figma Dev Mode, CSS Tricks Flexbox Guide.
  • Pour aller plus loin : Utilisation conjointe de Figma et Tailwind CSS, intégration avec React/Vue.js.