Design system & composants réutilisables pour WordPress/Elementor/ACF

Un design system, c'est bien plus qu'une charte graphique PDF qui dort dans un Drive. C'est un système vivant qui regroupe tokens, composants, règles d'usage et documentation — le tout directement intégré dans WordPress.

Les bénéfices concrets

Quand créer un design system ?

• Vous produisez plusieurs sites par an avec des identités proches
• Vous avez plusieurs marques ou filiales à gérer
• Votre équipe grandit et vous voulez industrialiser la production
• Vous voulez réduire la dette design et faciliter les évolutions

Les tokens sont les variables CSS qui stockent vos choix de design : couleurs, typographies, espacements, ombres, rayons de bordure. Plutôt que d'écrire #3B82F6 partout, vous utilisez var(--color-primary).

Les 5 types de tokens essentiels

Implémentation dans WordPress

Créez un fichier design-tokens.css dans votre thème ou plugin :

/* design-tokens.css */
:root {
  /* Couleurs principales */
  --color-primary: #3B82F6;
  --color-secondary: #8B5CF6;
  --color-accent: #F59E0B;
  
  /* Couleurs neutres */
  --color-gray-50: #F9FAFB;
  --color-gray-900: #111827;
  
  /* Typographies */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-h1: 3rem;
  --font-size-body: 1rem;
  
  /* Espacements (échelle 8px) */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  
  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  
  /* Rayons de bordure */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

Ensuite, utilisez ces tokens partout dans vos composants Elementor ou blocs Gutenberg via CSS personnalisé.

Une fois vos tokens définis, créez une bibliothèque de composants : boutons, cartes, formulaires, sections hero, témoignages, FAQ, etc. L'objectif : ne jamais recréer deux fois le même élément.

Composants essentiels à créer

Méthode Elementor : Templates & Global Widgets

1. 1
   Créez des Templates Elementor

   Dans Elementor → Templates → Saved Templates, créez des sections, pages et popups réutilisables.

2. 2
   Utilisez les Global Widgets

   Transformez vos widgets en Global Widgets : toute modification se répercute sur toutes les pages qui l'utilisent.

3. 3
   Connectez avec ACF pour la flexibilité

   Créez des champs ACF (textes, images, liens) pour personnaliser le contenu sans casser le design.

4. 4
   Organisez avec une nomenclature claire

   Préfixez vos templates : DS-Button-Primary, DS-Card-Testimonial, DS-Hero-v1.

Méthode ACF : Flexible Content & Blocks

Pour des projets plus complexes, ACF Flexible Content permet de créer des "sections builder" entièrement personnalisées :

// Exemple de Flexible Content ACF
// Layouts disponibles : hero, features, testimonials, cta

<?php if( have_rows('page_sections') ): ?>
  <?php while( have_rows('page_sections') ): the_row(); ?>
    
    <?php if( get_row_layout() == 'hero' ): ?>
      <section class="hero">
        <h1><?php echo get_sub_field('title'); ?></h1>
        <p><?php echo get_sub_field('subtitle'); ?></p>
      </section>
    <?php endif; ?>
    
    <?php if( get_row_layout() == 'features' ): ?>
      <section class="features">
        <?php $features = get_sub_field('feature_items'); ?>
        <?php foreach($features as $feature): ?>
          <div class="feature-card">
            <h3><?php echo $feature['title']; ?></h3>
          </div>
        <?php endforeach; ?>
      </section>
    <?php endif; ?>
    
  <?php endwhile; ?>
<?php endif; ?>

Un design system sans documentation, c'est un design system mort. Personne ne l'utilisera. Créez une page de documentation vivante accessible à toute l'équipe.

Que documenter ?

Outils de documentation

• Page WordPress protégée : Créez une page /design-system accessible uniquement aux admins avec tous les composants affichés.
• Notion ou Confluence : Documentation externe avec sections par catégories, exemples de code et captures d'écran.
• Figma + Dev Mode : Liez votre design Figma au code WordPress pour un pont design-dev fluide.
• Storybook (avancé) : Pour les projets React/Vue avec WordPress headless, Storybook documente tous les composants interactifs.

Gouvernance : qui garde le design system ?

Nommez un gardien du design system (designer senior ou lead dev) qui :

• • Valide les nouveaux composants avant ajout
• • Met à jour la documentation à chaque évolution
• • Audite régulièrement les dérives (composants non conformes)
• • Anime une revue trimestrielle pour nettoyer les composants obsolètes