🎨 Design system Material 3 + Apple HIG

Format : Figma (FIG) · 200+ components · variants & auto-layout Auteur : Équipe pédagogique ITAG · Design Pack Mise à jour : 2026

🎯 Description

Design system complet inspiré de Material Design 3 et Apple Human Interface Guidelines. Tokens de couleur, typographie, spacing, components avec variants, prêt à dériver pour une marque.

📋 Contenu

Foundation

• Colors — primary, secondary, tertiary, neutral, error, success, warning (dark + light)
• Typography — display L/M/S, headline L/M/S, title L/M/S, body L/M/S, label L/M/S
• Elevation — 5 niveaux d'ombres avec mode sombre
• Spacing — système 4-8-12-16-24-32-48 px
• Radius — none / xs / sm / md / lg / full
• Motion — easing curves + durations (Material Motion)

Components atomiques

• Button (primary, secondary, tertiary, ghost, destructive) × (sm, md, lg) × (default, hover, focus, disabled)
• Input, textarea, select, checkbox, radio, switch
• Tag, badge, chip, avatar
• Tooltip, popover

Components composés

• Card (3 layouts), banner, alert, snackbar
• Modal, drawer, sheet
• Tabs (3 styles), accordion, breadcrumbs
• Table avec tri / pagination / selection
• Pagination, stepper

Patterns

• Empty state, error state, loading state
• Form layouts (1 col, 2 col, wizard)
• Onboarding flows (tooltips guidés)

💼 Cas d'usage

• Démarrer un design system d'entreprise
• Standardiser une équipe produit (5-50 designers)
• Référence pour études UX
• Portfolio designer senior

📥 Disponibilité

Fichier en préparation — Ce template nécessite un fichier binaire (system) qui est en cours de production par notre équipe pédagogique. La fiche ci-dessus décrit le contenu exact que vous recevrez.

← Catalogue Figma Parcours Design →

ITAG · Material Design et Apple HIG sont des marques déposées de Google et Apple.