Motion Systemdi Owl-Listener

Motion System Skill.

Rendi le decisioni sull'animazione riutilizzabili tra componenti e team.

Design system
Movimento

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Motion SystemSKILL.md

Attività Design system Produce • Token di durata ed easing con nome e usi previsti. • Regole di coreografia per gruppi, stagger e direzione. • Override per il movimento ridotto e requisiti di documentazione. Prima di iniziare Richiede un'implementazione dei token o un equivalente della piattaforma; la fonte non impone alcun framework di animazione.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Crea un vocabolario di movimento condiviso

Definisce token di movimento condivisi, regole di coordinamento e alternative per il movimento ridotto per l'intero prodotto.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Motion System tratta il movimento come un livello di design token anziché come una serie di scelte scollegate sui singoli componenti. Definisce una piccola scala di durate, ruoli semantici di easing e regole di coordinamento per gli elementi che entrano, escono o si muovono insieme.

La fonte colloca inoltre la gestione del movimento ridotto a livello di sistema. È una differenza significativa rispetto a correggere una singola animazione dopo il rilascio: gli override dei token e i comportamenti sostitutivi possono essere applicati in modo coerente in tutto il prodotto. I tempi d'esempio sono un vocabolario di partenza, non una prova che ogni interfaccia debba usare gli stessi valori.

Risultati attesi

Token di durata ed easing con nome e usi previsti.
Regole di coreografia per gruppi, stagger e direzione.
Override per il movimento ridotto e requisiti di documentazione.

Vedi il brief di esempio

Dal brief alla revisione

01
Fai l'inventario dei ruoli del movimento
Individua cambi di stato immediati, entrate, uscite e transizioni più ampie. Crea solo i token necessari a coprire esigenze distinte.
02
Definisci il coordinamento
Specifica tempi condivisi all'interno di gruppi semantici, limiti di stagger e direzioni di movimento coerenti.
03
Costruisci la variante accessibile
Documenta quale movimento scompare, cosa lo sostituisce e come le informazioni di stato essenziali restano visibili.

02 Quando usarlo

Quando usarla

Richiede un'implementazione dei token o un equivalente della piattaforma; la fonte non impone alcun framework di animazione.

Adatta se

Movimento incoerente tra i componentiUtile quando team diversi hanno accumulato tempi di animazione incompatibili.
Estensione del sistema di tokenAggiunge il movimento alla stessa pipeline condivisa che già gestisce colore e spaziatura.

Limiti da verificare

Non è un'animazione finitaLe singole interazioni richiedono comunque composizione e implementazione.
Gli esempi vanno testatiDurate e curve della fonte vanno validate rispetto al prodotto, ai dispositivi e ai requisiti di accessibilità.

Cosa portare

Inventario dei componentiElenca le animazioni esistenti e cosa comunica ciascuna.
Principi di movimentoDescrivi il carattere del prodotto che vuoi ottenere e le interazioni che non devono essere animate.
Piattaforma e accessibilitàIndica le piattaforme di destinazione e le aspettative sul movimento ridotto.

03 Decisioni importanti

Decisioni che contano

Vocabolario ridotto
Meno scelte semantiche rendono più facile individuare un'eccezione non necessaria rispetto a un ampio catalogo di tempi arbitrari.
Accessibilità globale
Gli override a livello di sistema riducono il rischio che un componente dimentichi la preferenza sul movimento.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Usa il metodo di installazione documentato nel repository e conserva gli eventuali file complementari indicati. Questa voce descrive un metodo di progettazione mirato, non un'applicazione eseguibile.

File sorgente originale

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

Richiede un'implementazione dei token o un equivalente della piattaforma; la fonte non impone alcun framework di animazione.

Parti da un solo deliverable

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa motion-system per unificare tooltip, drawer, dialog e transizioni di pagina. Proponi una piccola scala di token e ruoli di easing per ingresso/uscita, definisci limiti di stagger e scrivi un comportamento per il movimento ridotto che preservi le informazioni di stato. Includi i casi che non devono essere animati e indica i tempi come proposte da testare sui dispositivi.

Verifica il risultato

Confronta l'output effettivo con questi criteri osservabili.

Ogni token ha un ruolo distinto e un valore concreto.
Gli elementi raggruppati seguono le stesse regole di coreografia documentate.
Il comportamento per il movimento ridotto è specificato a livello di sistema.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questa scheda non significa che la skill sia inclusa o che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata sotto. Comportamento e requisiti upstream possono cambiare.

Titolare della fonte: Owl-Listener
Repository: Owl-Listener/designer-skills
File della skill: design-systems/skills/motion-system/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 9a6930cf84a8

Sintesi editoriale della fonte

Definisce token di movimento condivisi, regole di coordinamento e alternative per il movimento ridotto per l'intero prodotto.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore datato di popolarità, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Quanti token di durata dovrebbero esserci?

La fonte consiglia un insieme ridotto, in genere da quattro a sei, aggiungendo valori solo per casi davvero diversi.

Il movimento ridotto elimina ogni feedback?

No. La comunicazione essenziale dello stato deve restare, con il movimento disattivato o sostituito dove opportuno.

Quale implementazione prevede?

Descrive proprietà personalizzate CSS o token equivalenti della piattaforma e l'inclusione in una pipeline di esportazione dei token esistente.

OpenDesign

Fai spazio alla prossima iterazione del design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design