Motion Systempor Owl-Listener

Motion System Skill.

Torne as decisões de animação reutilizáveis entre componentes e equipes.

Design Systems
Movimento

Revisão da fonte · Motion SystemSKILL.md

Tarefa Design Systems Produz • Tokens nomeados de duração e easing com seus usos pretendidos. • Regras de coreografia para grupos, stagger e direção. • Substituições para movimento reduzido e requisitos de documentação. Antes de começar Exige uma implementação de tokens ou equivalente da plataforma; a fonte não obriga o uso de um framework de animação.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Crie um vocabulário de movimento compartilhado

Define tokens de movimento compartilhados, regras de coordenação e alternativas de movimento reduzido para todo o produto.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Motion System trata o movimento como uma camada de design tokens, e não como uma série de escolhas de componentes sem relação. Define uma escala pequena de durações, papéis semânticos de easing e regras de coordenação para elementos que entram, saem ou se movem juntos.

A fonte também trata o movimento reduzido no nível do sistema. Isso é uma diferença importante em relação a ajustar uma animação depois de publicada: substituições de tokens e comportamentos alternativos podem ser aplicados de forma consistente em todo o produto. Os tempos de exemplo são um vocabulário inicial, não prova de que toda interface deva usar os mesmos valores.

Entregas esperadas

Tokens nomeados de duração e easing com seus usos pretendidos.
Regras de coreografia para grupos, stagger e direção.
Substituições para movimento reduzido e requisitos de documentação.

Ver o briefing de exemplo

Do briefing à revisão

01
Levante os papéis do movimento
Identifique mudanças de estado imediatas, entradas, saídas e transições maiores. Crie apenas os tokens necessários para cobrir necessidades distintas.
02
Defina a coordenação
Especifique tempos compartilhados dentro de grupos semânticos, limites de stagger e direções de movimento consistentes.
03
Crie a variante acessível
Documente qual movimento desaparece, o que o substitui e como as informações essenciais de estado continuam visíveis.

02 Quando usar

Quando usar

Exige uma implementação de tokens ou equivalente da plataforma; a fonte não obriga o uso de um framework de animação.

Boa aplicação

Movimento inconsistente entre componentesÚtil quando equipes diferentes acumularam tempos de animação incompatíveis.
Expansão do sistema de tokensAdiciona movimento ao mesmo pipeline compartilhado que já gerencia cor e espaçamento.

Limites a verificar

Não é uma animação prontaAs interações individuais ainda exigem composição e implementação.
Os exemplos precisam de testesAs durações e curvas da fonte precisam ser validadas com o produto, os dispositivos e os requisitos de acessibilidade.

Traga estas entradas

Inventário de componentesListe as animações existentes e o que cada uma comunica.
Princípios de movimentoDescreva o caráter pretendido do produto e as interações que não devem ser animadas.
Plataforma e acessibilidadeInforme os alvos de implementação e as expectativas de movimento reduzido.

03 Decisões importantes

Decisões importantes

Vocabulário pequeno
Com menos escolhas semânticas, é mais fácil identificar uma exceção desnecessária do que em um grande catálogo de tempos arbitrários.
Acessibilidade global
Substituições no nível do sistema reduzem a chance de um componente esquecer a preferência de movimento.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o caminho de instalação documentado no repositório e mantenha quaisquer arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo-fonte original

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

Exige uma implementação de tokens ou equivalente da plataforma; a fonte não obriga o uso de um framework de animação.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use motion-system para unificar nossos tooltips, drawers, diálogos e transições de página. Proponha uma escala pequena de tokens e papéis de easing de entrada/saída, defina limites de stagger e escreva um comportamento de movimento reduzido que preserve as informações de status. Inclua casos que não devem ser animados e marque os tempos como propostas para teste em dispositivos.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Cada token tem um papel distinto e um valor concreto.
Elementos agrupados seguem as mesmas regras de coreografia documentadas.
O comportamento de movimento reduzido é especificado no nível do sistema.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: design-systems/skills/motion-system/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Define tokens de movimento compartilhados, regras de coordenação e alternativas de movimento reduzido para todo o produto.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Quantos tokens de duração deve haver?

A fonte recomenda um conjunto pequeno, normalmente de quatro a seis, e só adicionar valores para casos realmente diferentes.

O movimento reduzido remove todo o feedback?

Não. A comunicação essencial de estado deve permanecer, com o movimento desativado ou substituído quando apropriado.

Qual implementação ela tem como alvo?

Descreve propriedades personalizadas de CSS ou tokens equivalentes da plataforma e a inclusão em um pipeline de exportação de tokens existente.

OpenDesign

Abra espaço para a próxima iteração do design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design