Un design system bien concu est la cle d'une application coherente et facile a maintenir. Decouvrons ensemble comment creer un design system evolutif avec React et TypeScript.
Les fondations : tokens de design
Tout design system commence par la definition de tokens : couleurs, espacements, typographie. Ces tokens servent de source de verite unique pour toute l'application.
// design-tokens.ts
export const colors = {
primary: {
50: '#f5f3ff',
100: '#ede9fe',
500: '#A543F1',
900: '#4c1d95',
},
neutral: {
50: '#fafafa',
900: '#171717',
},
};
export const spacing = {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
};Composants atomiques
Suivez la methodologie Atomic Design pour organiser vos composants. Commencez par les atomes (boutons, inputs) puis progressez vers les molecules et organismes.
// Button.tsx
import { colors, spacing } from './design-tokens';
interface ButtonProps {
variant?: 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
children: React.ReactNode;
}
export function Button({
variant = 'primary',
size = 'md',
children
}: ButtonProps) {
return (
<button
className={`btn btn-${variant} btn-${size}`}
style={{
backgroundColor: colors.primary[500],
padding: spacing[size],
}}
>
{children}
</button>
);
}Documentation avec Storybook
Storybook est essentiel pour documenter et tester vos composants en isolation. Chaque composant devrait avoir ses stories avec tous ses variants.
Tests et accessibilite
Un bon design system inclut des tests automatises et respecte les normes d'accessibilite WCAG. Utilisez jest-axe pour verifier l'accessibilite de vos composants.
Conclusion
Un design system est un investissement a long terme qui ameliore la coherence, la vitesse de developpement et la qualite globale de vos applications. Prenez le temps de bien le concevoir des le debut.