LanguagePortuguês (BR)
Pilar 06 · Sistemas de Design
Motion Tokens: a arquitetura completa para sistemas de design
Padronize o movimento em todo o seu ecossistema de produtos. Pare de codificar béziers cúbicos arbitrários de 300 ms em dezenas de repositórios de desenvolvedores.
What is Motion Tokens: in ExodeUI?
Motion Tokens são tokens de design padronizados que definem parâmetros de animação – como rigidez da mola, taxa de amortecimento, massa, curvas de atenuação e duração – em um formato legível por máquina. Nosso Motion Token Generator gratuito cria um conjunto inicial que você pode exportar para CSS e JSON, e ferramentas de construção de token os transformam em código para cada plataforma.
Arquitetura central
Por que engenheiros e designers escolhem o ExodeUI
Design, logic and motion in one file that runs inside your app.
Tokens de Física da Primavera
Defina o movimento com tokens físicos (rigidez, amortecimento, massa) em vez de números de temporização arbitrários.
Geração automatizada de código
Transforme tokens em variáveis CSS e código de plataforma com seu pipeline de criação de token existente.
Hierarquia Semântica
Organize tokens de movimento em níveis globais, semânticos e de componentes (por exemplo, motion.spring.snappy, motion.feedback.success).
Sincronização de ferramentas de design
Sincronize tokens de movimento perfeitamente entre variáveis Figma e bases de código Git de produção.
Avaliação objetiva
Como o ExodeUI se compara a Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Suporte completo de primeira classe para tokens físicos de mola e curvas de velocidade
- Exporta para formatos nativos móveis (SwiftUI/Compose) e web simultaneamente
- O inspetor visual permite que os designers sintam a física dos tokens em tempo real
- Fallbacks de acessibilidade automáticos para preferências de movimento reduzido
Traditional Design Tokens (Color/Type Only)
- A maioria das ferramentas de token suporta apenas cores estáticas, tipografia e espaçamento
- O movimento é reduzido a sequências de duração grosseiras, como "300 ms de facilidade de entrada"
- Nenhuma maneira visual de testar a dinâmica do token antes de enviar para o código
- Os engenheiros devem interpretar manualmente as especificações de movimento no código da estrutura
Entrega para o desenvolvimento
Como usar no seu código
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importar { ExodeUICanvas } de 'exodeui';
// Molas, estados e tempo ao vivo no arquivo .exode (projetado no
//editor). Seu código transmite entradas e ouve eventos de volta.
função de exportação SnappyButton() {
retornar (
<ExodeUITela
src="/snappy_button.bexode"
onTrigger={(nome) => console.log('Evento ExodeUI:', nome)}
/>
);
}Por que os sistemas de design falham em movimento
Os sistemas de design modernos aperfeiçoaram paletas de cores, escalas de tipografia, sombras de elevação e grades de espaçamento. Mas o movimento continua sendo o símbolo esquecido do design. Na maioria das organizações, a documentação de movimento consiste em diretrizes vagas como "as animações devem ser rápidas" ou uma variável estática de duração de 250 ms.
- Sensação de marca inconsistente: um engenheiro usa a facilidade, outro usa a facilidade e o celular usa os padrões da Apple.
- Curvas de duração frágeis: as animações cronometradas parecem lentas em elementos pequenos e aceleradas em folhas de fundo grandes.
- Negligência de acessibilidade: as equipes não conseguem implementar substituições coesas de movimento reduzido em todos os componentes.
A hierarquia de token de movimento de 3 camadas
ExodeUI modela tokens de movimento em três níveis estruturados:
Camada 1: Tokens Primitivos Globais
Constantes matemáticas brutas (por exemplo, rigidez-400, amortecimento-25, massa-1).
Camada 2: Tokens de Intenção Semântica
Nomes funcionais vinculados à intenção (por exemplo, motion.interactive.snappy, motion.modal.enter).
Camada 3: Tokens Específicos de Componentes
Substituições vinculadas a componentes específicos (por exemplo, button.toggle.switch).
Topic Cluster Network
Explore conceitos e ferramentas relacionados
Ferramenta geradora de token de movimento
Crie e exporte tokens de movimento
Ambiente de desenvolvimento de movimento
A visão da plataforma MDE
Como os arquivos ExodeUI são construídos
De .exode para seu aplicativo
Glossário: tokens de movimento
Definição formal e esquema padrão
Ficou com dúvidas?
Perguntas frequentes
Crie componentes vivos com movimento real.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.