0Pricing
Frontend Academy · Leçon

Utiliser un système de conception

Installez la bibliothèque dans une application hôte, appliquez le fournisseur de thème, éliminez les composants inutilisés avec le tree shaking et maintenez vos dépendances à jour.

Utiliser un système de conception est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Installation et configuration

Ajoutez le système de conception comme dépendance. Certaines bibliothèques nécessitent une configuration supplémentaire : fournisseur, importation CSS ou chargement des polices.

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

Fournisseur de thème

La plupart des systèmes de conception proposent un fournisseur de niveau supérieur pour le thème (clair/sombre), la langue et le contexte partagé. Enveloppez votre application une seule fois.

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

Importer des composants

N'importez que ce dont vous avez besoin : avec l'élimination par arbre, seuls les composants utilisés sont inclus dans le paquet.

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

Importations de sous-chemins

Certaines bibliothèques prennent en charge les importations de sous-chemins pour plus de clarté et pour réduire la taille du paquet.

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

Conseils pour l'élimination par arbre

L'élimination par arbre supprime les exportations inutilisées lors du regroupement. Elle nécessite : une compilation ESM, sideEffects: false dans le package.json de la bibliothèque et des importations nommées dans votre code. Vérifiez le résultat avec un analyseur de paquet.

Personnaliser avec un thème

Remplacez les jetons du thème pour les adapter à votre marque, sans créer de branche dérivée de la bibliothèque.

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

Étendre les composants

Vous avez besoin d'un bouton légèrement différent ? Composez-le au lieu de créer une branche dérivée.

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

Lire le CHANGELOG avant la mise à niveau

Lisez toujours le CHANGELOG avant de passer à une version MAJOR. Recherchez les changements incompatibles, les outils de transformation pour les migrations et les nouvelles API recommandées.

Outils de transformation pour les mises à niveau majeures

Les bonnes bibliothèques fournissent des outils de transformation de code (scripts jscodeshift) qui automatisent les migrations liées aux changements incompatibles.

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

Versions figées ou avec l'opérateur ^

"^1.4.2" autorise les mises à niveau 1.x.y — ce qui est risqué si la bibliothèque ne respecte pas SemVer. "1.4.2" fige exactement la version — c'est le choix le plus sûr, mais vous devez effectuer les mises à jour manuellement. Renovate et Dependabot vous aident à automatiser les mises à jour hebdomadaires.

Signaler les problèmes en amont

Vous avez trouvé un bogue ? Signalez-le en joignant une reproduction minimale. Vous avez besoin d'une fonctionnalité ? Ouvrez d'abord une discussion. Vos contributions améliorent le système de conception pour tout le monde.

Éviter les remplacements de styles

Ne manipulez pas les éléments internes du système de conception avec !important ou des sélecteurs descendants. Utilisez l'interface publique de thématisation. Ces remplacements bricolés cessent de fonctionner à la prochaine mise à niveau.

Vérification rapide

Si un système de conception utilise ESM et des exportations nommées, quelle est la manière la plus propre de n'utiliser que les composants dont vous avez besoin ?

Récapitulatif : utiliser un système de conception

Installez la bibliothèque, puis enveloppez-la dans DesignSystemProvider avec un thème. Utilisez des importations ESM nommées pour l'élagage de l'arbre. Remplacez les jetons du thème pour les adapter à votre marque. Composez au lieu de créer une branche dérivée. Lisez le CHANGELOG avant les mises à niveau MAJOR et exécutez les outils de transformation fournis, le cas échéant. Figez les versions ou utilisez l'opérateur ^ avec prudence. Signalez les bogues et les demandes de fusion en amont. Ne contournez pas l'interface publique à coups de !important.

Questions Fréquemment Posées

La leçon « Utiliser un système de conception » est-elle gratuite ?

Oui — le texte complet de « Utiliser un système de conception » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Utiliser un système de conception » ?

Installez la bibliothèque dans une application hôte, appliquez le fournisseur de thème, éliminez les composants inutilisés avec le tree shaking et maintenez vos dépendances à jour. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Utiliser un système de conception » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Storybook : stories, contrôles et documentation
  2. Jetons de conception avec Style Dictionary
  3. Gestion des versions et publication sur npm
  4. Utiliser un système de conception
← Retour à Frontend Academy