Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →

Pilar 04 · Visual Studio vs somente código

Alternativa Framer Motion: Visual Motion Canvas com saída React limpa

Pare de codificar quadros-chave de animação e parâmetros de primavera por tentativa e erro nas janelas do editor de código. Projete visualmente em uma tela dinâmica e reproduza o mesmo arquivo em React e Swift.

What is Alternativa Framer in ExodeUI?

ExodeUI é a alternativa visual ao Framer Motion para equipes de design e engenharia. Embora Framer Motion exija que os desenvolvedores criem variantes de animação complexas, gestos e molas inteiramente por meio do código JavaScript, ExodeUI fornece um ambiente de design visual onde os designers criam interações e exportam componentes React JSX e SwiftUI prontos para produção.

Arquitetura central

Por que engenheiros e designers escolhem o ExodeUI

Design, logic and motion in one file that runs inside your app.

Variante Visual e Inspetor de Estado

Visualize mudanças de layout, curvas de primavera e variantes flutuantes instantaneamente, sem recarregar o navegador ou gravar objetos JSON.

Core Architecture

Exportação nativa multiplataforma

Framer Motion está restrito a React na web. ExodeUI exporta física idêntica para React, React Native Reanimated e Apple SwiftUI.

Core Architecture

Física de Gestos Contínuos

Crie limites de arrasto complexos, velocidade de arremesso e encaixe magnético visualmente na tela.

Core Architecture

Integração Multi-Framework

Use junto com o código Motion (Framer Motion) existente: arquivos ExodeUI para componentes projetados, código para o resto.

Core Architecture

Avaliação objetiva

Como o ExodeUI se compara a Framer Motion (Code Library)

Where ExodeUI is stronger, and what to weigh before you switch.

The ExodeUI Architecture

ExodeUI

Pontos fortes
  • A criação de tela visual elimina tentativas e erros tediosos de código
  • Saídas para React Native e SwiftUI nativo, além de React Web
  • Designers e engenheiros colaboram no mesmo arquivo visual motion
  • Pegada leve com opções de exportação de código de dependência zero
Compared with

Framer Motion (Code Library)

Trade-offs
  • Sem tela de autoria visual: os desenvolvedores devem escrever o código do zero
  • Os projetistas não podem inspecionar ou ajustar as curvas das molas sem a ajuda da engenharia
  • Somente Web React: não é possível exportar para iOS nativo SwiftUI ou Android Compose
  • Requer tamanho de pacote grande ao agrupar mecanismos de projeção de layout completo

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.

// Playing an ExodeUI file in React with the exodeui package.
// The animation, its states and springs live in save-button.exode;
// your code only sets inputs and listens for events.
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // read by exodePlugin() from 'exodeui/vite-plugin'

export function SaveButton({ saving, onSave }) {
  const { setEngine, setInputBool } = useExodeUI();

  // Drive the "Loading" state from app data
  useEffect(() => {
    setInputBool('Loading', saving);
  }, [saving, setInputBool]);

  return (
    <div style={{ width: 220, height: 64 }}>
      <ExodeUICanvas
        artboard={saveButton}
        onReady={setEngine}
        onTrigger={(name) => {
          if (name === 'Pressed') onSave();
        }}
      />
    </div>
  );
}

Por que os desenvolvedores do Framer Motion amam o ExodeUI

Framer Motion é uma excelente biblioteca de animação em nível de código para desenvolvedores React. No entanto, a criação de movimentos complexos inteiramente em código sofre de um grande problema: você não pode ver a animação enquanto escreve o código. Os desenvolvedores devem ajustar os valores de rigidez e amortecimento, recarregar o navegador, testar a interação e repetir dezenas de vezes.

  • Atrito de tentativa e erro: ajustar parâmetros físicos no código leva horas de experimentação manual.
  • Vazio entre plataformas: Framer Motion não pode ser usado em aplicativos nativos iOS SwiftUI ou Android.
  • Desconexão do designer: os designers não podem modificar o código Framer Motion diretamente, levando a reuniões de revisão intermináveis.

Topic Cluster Network

Explore conceitos e ferramentas relacionados

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.

Experimente grátis