Skip to main content

🎨 Intégration Front

Découpe Figma / Maquette​

1. Analyse de la maquette​

Checklist avant intégration :

  • Identifier les composants réutilisables
  • Repérer les breakpoints responsive
  • Noter les animations et interactions
  • Lister les fonts et couleurs
  • Identifier les states (hover, active, focus)

2. Export des assets​

Images optimisées :

# Formats recommandés
- SVG pour les icônes et logos
- WebP/JPG pour les photos (avec fallback)
- PNG pour les images avec transparence
- Tailles multiples pour le responsive (@1x, @2x, @3x)

Extraction des valeurs :

/* Variables CSS depuis Figma */
:root {
  /* Couleurs */
  --color-primary: #3B82F6;
  --color-secondary: #10B981;
  --color-accent: #F59E0B;
  --color-neutral-100: #F3F4F6;
  --color-neutral-900: #111827;
  
  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Playfair Display', serif;  
  
  /* Breakpoints */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1200px;
}

JavaScript natif / jQuery​

1. Structure JS moderne​

assets/js/script.js