O que é um sistema de movimento? Um guia prático para equipes de UI
Um sistema de movimento são regras, tokens e componentes compartilhados que decidem como um produto se move. O que pertence a um, como gerenciá-lo e onde o ExodeUI se encaixa.
Ponto principal
Um sistema de movimento é o conjunto compartilhado de regras, tokens, componentes e código que decide como um produto se move. Abrange durações, atenuação, molas, coreografia e estados de interação para que as equipes reutilizem o movimento aprovado em vez de reconstruí-lo tela por tela. Um sistema de movimento é um problema de gerenciamento tanto quanto um problema de design: ele precisa de um proprietário, de uma fonte de verdade e de um caminho para a produção.
O que é um sistema de movimento?
Um sistema de movimento é a parte de um sistema de design que descreve o movimento. Ele responde a perguntas que uma biblioteca de componentes estáticos não consegue: quão rápido um menu abre, como um botão reage quando pressionado, o que acontece quando um usuário interrompe uma transição e quais valores de mola pertencem a qual superfície. A saída não é uma página de guia de estilo. O resultado é um pequeno conjunto de decisões reutilizáveis que designers e desenvolvedores podem aplicar sem inventar uma nova animação a cada vez.
O que pertence a um sistema de movimento
Um sistema de movimento útil tem cinco partes. Pule um e o sistema se tornará uma pasta de arquivos que ninguém usa.
Principles
Regras curtas que explicam a personalidade do produto. Por exemplo: o movimento confirma a entrada no primeiro quadro ou superfícies grandes se movem menos que as pequenas.
Fichas
Valores nomeados para duração, atenuação e molas, como motion.enter.fast ou motion.spring.snappy. Os tokens tornam o movimento revisável e mantêm os valores consistentes.
Padrões
Comportamentos reutilizáveis para trabalhos comuns: entrar, sair, expandir, reordenar, arrastar, descartar, sucesso e erro.
Componentes
Os blocos de construção ativos que já usam os padrões, para que uma equipe possa inserir um em vez de ler um documento e reconstruí-lo.
Governança
Quem pode alterar o sistema, como as alterações são revisadas e como o movimento obsoleto é desativado.
Sistema de movimento vs sistema de design vs tokens de movimento
Um sistema de design abrange cor, tipo, espaçamento, componentes e regras de uso. Um sistema de movimento é a camada de movimento dentro dele e geralmente tem seu próprio dono porque o movimento muda por razões diferentes das da cor. Os tokens de movimento são a menor unidade dessa camada: valores nomeados para tempo e física. Uma biblioteca de tokens é necessária, mas não suficiente. Sem padrões e componentes ativos, os tokens tornam-se uma lista de números que os designers interpretam de maneira diferente em cada tela.
Por que os sistemas de movimento falham
A maioria dos sistemas de movimento falha por razões operacionais, não por razões estéticas. Os tokens residem em um documento desconectado dos componentes. A moção aprovada existe apenas em um protótipo que os desenvolvedores não podem executar. Uma equipe adota o sistema e outra continua enviando durações codificadas. O sistema não tem dono, então ele fica à deriva. Consertar isso significa colocar o sistema em algum lugar onde o trabalho já acontece: no arquivo de design, na biblioteca de componentes e na revisão de código.
Como gerenciar um sistema de movimento
Comece com uma superfície pequena e própria e torne o sistema o caminho mais fácil.
- Escolha uma fonte de verdade para tokens e crie um link para ela no arquivo de design e na base de código
- Nomeie os tokens por intenção, não por valor: motion.exit.fast é mais útil que motion.200ms
- Envie um pequeno conjunto de padrões antes de adicionar mais tokens
- Revise alterações de movimento, como alterações de código, com uma gravação antes e depois
- Rastreie a reutilização: quantos novos componentes usam padrões aprovados em vez de temporização personalizada
- Retire valores antigos de acordo com um cronograma para que o sistema não acumule duplicatas
Onde ExodeUI se encaixa
ExodeUI mantém o movimento dentro de um arquivo .exode aberto, em vez de em uma especificação separada. Layout, estados, cronogramas, física de primavera, lógica e entradas convivem juntos, e os pacotes de tempo de execução reproduzem o arquivo em React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter. Isso dá a um sistema de movimento uma referência funcional: um designer pode abrir o componente aprovado, um desenvolvedor pode inspecionar o mesmo arquivo e uma ferramenta de codificação de IA pode editá-lo por meio do servidor MCP. O arquivo não substitui a governança. Apenas dá à governação algo concreto para apontar.
Como iniciar um sistema de movimento em um sprint
Audite dez dos seus componentes mais usados e liste cada duração, curva e mola neles. Agrupe os valores que fazem o mesmo trabalho e nomeie os grupos. Escolha cinco padrões que cubram a maioria das interações. Crie um componente de referência por padrão, documente quando usá-lo e adicione os tokens às suas bibliotecas de design e código. Em seguida, execute um único recurso no novo sistema e meça quantos valores personalizados ainda são necessários. Esse número é a sua linha de base para o próximo sprint.
Trecho de implementação em produção
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}Princípios-chave para lembrar
- Um sistema de movimento é a camada de movimento de um sistema de design, não uma pasta de vídeos de protótipos
- Precisa de princípios, tokens, padrões, componentes ativos e governança
- Tokens sem regras de uso tornam-se números que cada equipe interpreta de forma diferente
- As alterações de movimento devem ser revisadas como alterações de código
- ExodeUI mantém movimento, estados e lógica em um arquivo aberto que os tempos de execução podem reproduzir