Esercizio per documentare un componente completo con design tokens

4.6 (480)
4min 23 Lezioni Certificazione Risorse

Questa lezione fa parte del corso Design System che puoi iniziare totalmente gratis creando il tuo account Learnn solo con la tua email (senza carta di credito)

Inizia il corso gratis
€16.67/mese
4.6 (480)
perché così poco?

Corso incluso su Learnn PRO

  • 400+ corsi inclusi
  • 950+ risorse scaricabili
  • 50+ percorsi tematici
  • Accesso web e app
  • Scarica le lezioni offline
  • Assistente AI
  • Certificazione per ogni corso
  • Garanzia rimborso 14 giorni

Hai un team?
Unisciti a +800 team aziendali che si formano già su Learnn con il piano TEAM →

Corso tenuto da

Edoardo Sportelli

UI Designer a Then

Overview del corso

Progetta un Design System completo su Figma: dalle fondazioni visive ai token, fino alla documentazione per il team di sviluppo.

Molti designer costruiscono interfacce che funzionano finché il progetto rimane piccolo. Appena il prodotto cresce, aggiungono un componente, cambiano il colore primario, introducono una nuova tipografia: il file Figma si trasforma in un archivio caotico, le revisioni richiedono ore e ogni handoff con gli sviluppatori genera incomprensioni. Il problema non è la velocità di esecuzione, è l'assenza di un sistema. Senza uno strato di regole condivise, ogni aggiornamento impatta tutto il progetto in modo imprevedibile, il design non scala e la collaborazione rallenta.

In questo corso guidato da Edoardo Sportelli – UI Designer a Then imparerai a costruire un Design System strutturato dall'inizio: definire le fondazioni visive (colori, tipografia, spaziature, griglie), progettare e documentare i componenti con le Varianti e le Auto Layout di Figma, gestire i design token per la consegna agli sviluppatori e mantenere il sistema aggiornato nel tempo senza perdere coerenza.

Cosa ottieni seguendo questo corso

Al termine del corso Design System avrai una guida operativa per costruire un Design System professionale su Figma che copre l'intero flusso: dalla definizione delle fondazioni alla consegna al team tecnico. In particolare, acquisirai la capacità di:

  • Definire e organizzare le fondazioni visive di un Design System in Figma
  • Progettare componenti riutilizzabili con Varianti, proprietà e Auto Layout
  • Documentare i componenti per garantirne l'uso corretto nel team
  • Strutturare e nominare i design token per la consegna agli sviluppatori
  • Gestire aggiornamenti e nuove versioni del sistema senza rompere i componenti esistenti
  • Applicare il Design System a un progetto reale mantenendo coerenza visiva

Struttura del corso

Il corso è diviso in quattro moduli progressivi. Si parte dalle fondazioni (colori, tipografia, spaziature, icone) e si costruisce layer per layer fino ai componenti più complessi. Il terzo modulo affronta la consegna agli sviluppatori: token, documentazione e handoff. Il quarto modulo copre la governance del sistema: come versioning, aggiornamenti e deprecazioni vengono gestiti nel tempo.

È il corso giusto per te se:

  • Sei un UI/UX designer che lavora su prodotti digitali e vuoi strutturare il tuo file Figma in modo scalabile
  • Lavori in un team di product design e devi allineare designer e sviluppatori su un linguaggio visivo condiviso
  • Vuoi passare dalla progettazione di singole schermate alla costruzione di un sistema di componenti manutenibile

Non è il corso adatto se:

  • Non conosci ancora le basi di Figma (frames, gruppi, stili): parti prima da un corso introduttivo a Figma
  • Stai cercando un corso su design system per sviluppatori o su librerie di componenti in codice (React, CSS)
  • Ti aspetti un corso di UX research o di product strategy: il focus qui è esclusivamente sul sistema visivo e sulla sua implementazione in Figma

Cosa include l'iscrizione:

  • Accesso completo al corso online (4 moduli, 20+ lezioni)
  • Esercizi pratici con deliverable concreti: fondazioni visive, libreria componenti, token set e documentazione handoff
  • File Figma di riferimento per seguire le esercitazioni modulo per modulo
  • Certificato finale Learnn al completamento del corso per attestare le competenze acquisite
  • Accesso illimitato al corso e a tutti gli aggiornamenti futuri

Inizia ora il corso e costruisci un Design System scalabile che allinea il team di design e sviluppo su un linguaggio visivo condiviso.

Cosa imparerai

  • Definire le fondazioni visive di un Design System in Figma
  • Progettare componenti riutilizzabili con Varianti e Auto Layout
  • Documentare i componenti per il team di design
  • Strutturare i design token per la consegna agli sviluppatori
  • Gestire handoff e documentazione tecnica
  • Aggiornare il Design System senza rompere i componenti esistenti
  • Organizzare e manutenere il sistema al crescere del prodotto

Moduli del corso

4.6 (480)
4h:13m 23 Lezioni Certificazione Risorse

Certificazione disponibile

  • Completa il corso almeno all'80%
  • Sostieni e supera il test finale
  • Ottieni la verifica e condividila
  • Aggiungila a Linkedin in 1 click

Questo corso insieme ad altri 400 è incluso in Learnn PRO

Unisciti ad oltre 280.000+ professionisti digitali

4.6 (480)

Solo esperti da top brand

Incluso hai 1.000€ di sconti su tool partner

Inizia oggi il tuo percorso 🚀

FAQ

Questo corso è pensato per chi vuole approfondire le proprie competenze in Design e UX/UI, indipendentemente dal livello di partenza. È utile sia per professionisti che vogliono aggiornarsi, sia per chi si avvicina per la prima volta a questi temi.

Il corso è tenuto da Edoardo Sportelli, UI Designer a Then, che porta la sua esperienza pratica all’interno delle lezioni.

La durata complessiva del corso è di 4 h e 13 min, suddivisa in 23 lezioni. Puoi seguirlo al tuo ritmo, quando e dove vuoi.

In questo corso imparerai:

  • Definire le fondazioni visive di un Design System in Figma
  • Progettare componenti riutilizzabili con Varianti e Auto Layout
  • Documentare i componenti per il team di design
  • Strutturare i design token per la consegna agli sviluppatori
  • Gestire handoff e documentazione tecnica
  • Aggiornare il Design System senza rompere i componenti esistenti
  • Organizzare e manutenere il sistema al crescere del prodotto


✨ Puoi trovare il dettaglio completo dei contenuti nella sezione in alto.

Learnn è la piattaforma di formazione per ottenere maggiori risultati professionali e di business. Con un unico abbonamento hai accesso a 400+ corsi, 950+ risorse, 50+ percorsi, webinar live e certificazioni. Oltre 280.000 professionisti e 800 aziende si formano su Learnn ogni giorno.

Accesso completo a:
• 400+ corsi on-demand
• 950+ risorse e template
• 50+ percorsi formativi
• Webinar live
• Certificazioni

Puoi accedere da web o app.

I corsi sono on-demand e puoi seguirli quando vuoi. I webinar sono live, ma poi disponibili anche on-demand all’interno della piattaforma.

Puoi seguire tutto da desktop, tablet o smartphone. Scarica l’app Learnn (iOS/Android) e segui i corsi anche in modalità video, audio e testo.

Sì! Con il piano gratuito puoi accedere al 40% di ogni corso senza carta di credito. Ti basta creare un account gratuito con la tua email.

Il piano Learnn PRO costa 16.67€/mese se attivi il piano annuale, ma potrebbero esserci sconti disponibili. Registrati per vedere l’offerta aggiornata.

Sì. Puoi disattivare il rinnovo automatico in qualsiasi momento dalla tua area personale, con pochi clic e senza contattare l’assistenza.

Hai 14 giorni di garanzia soddisfatti o rimborsati su ogni primo acquisto. I rinnovi non sono rimborsabili, ma puoi disattivare il rinnovo automatico in ogni momento.

Sì. Una volta completato almeno l’80% del corso e superato il quiz finale, riceverai una certificazione ufficiale Learnn. Puoi condividerla sul tuo profilo Learnn, LinkedIn e CV.

Le nostre certificazioni sono riconosciute da centinaia di aziende che formano e assumono direttamente dalla nostra piattaforma.

Sì. Avrai accesso a una community di oltre 280.000 professionisti per fare domande e scambiare idee, e potrai partecipare a workshop live con i docenti.

Puoi scriverci direttamente tramite la live chat che trovi in basso a destra sul sito. Per collaborazioni o proposte, compila il form dedicato alle partnership.

Vogliamo digitalizzare l’Italia, una persona alla volta.

La nostra missione è democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici alla portata di tutti.