Cos'è un Design System?
Un design system è un insieme di standard, componenti riutilizzabili e linee guida che permettono ai team di creare prodotti digitali coerenti ed efficienti. È più di una libreria di componenti - è un linguaggio comune tra designer e sviluppatori.
Componenti di un Design System
1. Design Tokens
- Colori
- Tipografia
- Spaziatura
- Ombre
- Border radius
- Componenti UI riutilizzabili
- Codificati e documentati
- Versionamento
- Pattern di interazione
- Template di layout
- Flussi comuni
- Linee guida di utilizzo
- Do's and don'ts
- Esempi di codice
- Processi di aggiornamento
- Linee guida per i contributi
- Gestione delle versioni
- Esperienza uniforme cross-product
- Riconoscimento del brand
- Carico cognitivo ridotto per gli utenti
- Non reinventare la ruota
- Sviluppo più rapido
- Meno bug dalla ripetizione
- Più facile scalare i team
- Onboarding più veloce
- Manutenzione centralizzata
- Linguaggio comune designer-developer
- Handoff più fluido
- Feedback loop migliore
- 47% più veloce sviluppo di nuove funzionalità
- 34% riduzione nelle inconsistenze UI
- 25% meno tempo di design review
- Risparmio costi: 1M€+/anno per enterprise
2. Component Library
3. Pattern Library
4. Documentazione
5. Governance
Perché È Importante
1. Coerenza
2. Efficienza
3. Scalabilità
4. Collaborazione
ROI Tipico
Design Tokens
Cosa Sono
I valori atomici che definiscono l'aspetto visivo. Sono la base dell'intero sistema.
Categorie
Colori:
css
/ Naming semantico /
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-secondary: #64748b;
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
/ Scala neutrale /
--color-gray-50: #f8fafc;
--color-gray-100: #f1f5f9;
--color-gray-900: #0f172a;
Tipografia:
css
/ Famiglie di font /
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/ Dimensioni /
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
/ Pesi /
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/ Altezze di riga /
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
Spaziatura:
css
/ Unità base 4px /
--space-1: 0.25rem; / 4px /
--space-2: 0.5rem; / 8px /
--space-3: 0.75rem; / 12px /
--space-4: 1rem; / 16px /
--space-6: 1.5rem; / 24px /
--space-8: 2rem; / 32px /
--space-12: 3rem; / 48px /
--space-16: 4rem; / 64px /
Altri Token:
css
/ Ombre /
--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);
/ Border radius /
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-full: 9999px;
/ Transizioni /
--transition-fast: 150ms ease;
--transition-normal: 300ms ease;
Strumenti per i Token
Component Library
Anatomia di un Componente
1. Props/API
2. Varianti
3. Stati
4. Accessibilità
Esempio: Componente Button
tsx
// Button.tsx
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
size?: 'sm' | 'md' | 'lg';
isLoading?: boolean;
isDisabled?: boolean;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
children: React.ReactNode;
onClick?: () => void;
}
export const Button: React.FC = ({
variant = 'primary',
size = 'md',
isLoading = false,
isDisabled = false,
leftIcon,
rightIcon,
children,
onClick,
}) => {
return (
className={cn(
'button',
button--${variant},
button--${size},
isLoading && 'button--loading'
)}
disabled={isDisabled || isLoading}
onClick={onClick}
aria-busy={isLoading}
>
{isLoading &&
{leftIcon && {leftIcon}}
{children}
{rightIcon && {rightIcon}}
);
};
Componenti Essenziali
Layout:
Tipografia:
Form:
Pulsanti:
Feedback:
Visualizzazione Dati:
Overlay:
Navigazione:
Documentazione
Cosa Documentare
Per Componente:
Generale:
Strumenti di Documentazione
Storybook:
Docusaurus:
Custom:
Setup Storybook
tsx
// Button.stories.tsx
import { Button } from './Button';
export default {
title: 'Components/Button',
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'ghost', 'danger'],
},
size: {
control: 'radio',
options: ['sm', 'md', 'lg'],
},
},
};
export const Primary = {
args: {
variant: 'primary',
children: 'Button',
},
};
export const Secondary = {
args: {
variant: 'secondary',
children: 'Button',
},
};
export const AllVariants = () => (
);
Implementazione
Approcci
1. Costruire da Zero
2. Estendere una Libreria Esistente
3. Usare un Framework CSS
Stack Consigliato 2025
Base:
Headless Components:
Styling:
Build:
Struttura Monorepo
packages/
├── design-tokens/
│ ├── tokens.json
│ └── build.js
├── ui/
│ ├── src/
│ │ ├── Button/
│ │ ├── Input/
│ │ └── ...
│ ├── package.json
│ └── tsconfig.json
├── icons/
│ └── ...
└── docs/
└── storybook/
apps/
├── web/
└── mobile/
package.json (root)
turbo.json
Manutenzione e Governance
Versionamento
Semantic Versioning:
Changelog:
Processo di Contribuzione
1. Proposta
2. Sviluppo
3. Review
4. Release
Tracking dell'Adozione
Metriche:
Strumenti:
Design Systems Popolari
Open Source
Material UI (Google):
Ant Design (Alibaba):
Chakra UI:
Radix:
Enterprise (Riferimento)
Carbon (IBM):
Polaris (Shopify):
Lightning (Salesforce):
Anti-Pattern
1. Over-Engineering Prematuro
Problema: Design system completo prima di avere prodotti.
Soluzione:
2. Troppe Varianti
Problema: Button con 15 varianti diverse.
Soluzione:
3. Accoppiamento Stretto
Problema: I componenti dipendono troppo l'uno dall'altro.
Soluzione:
4. Ignorare l'Accessibilità
Problema: "La aggiungiamo dopo."
Soluzione:
5. Nessuna Governance
Problema: Tutti aggiungono quello che vogliono.
Soluzione:
Conclusione
Un design system ben implementato trasforma il modo in cui i team costruiscono prodotti digitali. L'investimento iniziale si ripaga rapidamente attraverso efficienza e coerenza.
Principi chiave:
Passi di implementazione:
1. Audit dell'UI esistente
2. Estrai pattern comuni
3. Definisci i token
4. Costruisci i componenti core
5. Documenta tutto
6. Stabilisci la governance
---
Il team DGI offre servizi di design e implementazione di design systems. Contattaci per discutere delle esigenze del tuo team.