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 frente a solo código

Alternativa Framer Motion: Visual Motion Canvas con salida limpia React

Deje de codificar fotogramas clave de animación y parámetros de resorte mediante prueba y error en las ventanas del editor de código. Diseñe visualmente en un lienzo en vivo y reproduzca el mismo archivo en React y Swift.

What is Alternativa Framer in ExodeUI?

ExodeUI es la alternativa visual a Framer Motion para equipos de diseño e ingeniería. Mientras que Framer Motion requiere que los desarrolladores creen variantes de animación complejas, gestos y resortes completamente a través del código JavaScript, ExodeUI proporciona un entorno de diseño visual donde los diseñadores crean interacciones y exportan componentes React JSX y SwiftUI listos para producción.

Arquitectura central

Por qué ingenieros y diseñadores eligen ExodeUI

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

Variante visual e inspector de estado

Obtenga una vista previa de los cambios de diseño, las curvas de resorte y las variantes de desplazamiento al instante sin recargar el navegador ni escribir objetos JSON.

Core Architecture

Exportación nativa multiplataforma

Framer Motion está restringido a React en la web. ExodeUI exporta físicas idénticas a React, React Native Reanimated y Apple SwiftUI.

Core Architecture

Física de gestos continuos

Cree límites de arrastre complejos, velocidad de lanzamiento y ajuste magnético visualmente en el lienzo.

Core Architecture

Integración multimarco

Úselo junto con el código Motion (Framer Motion) existente: archivos ExodeUI para componentes diseñados, código para el resto.

Core Architecture

Evaluación objetiva

Cómo se compara ExodeUI con Framer Motion (Code Library)

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

The ExodeUI Architecture

ExodeUI

Puntos fuertes
  • La creación de lienzos visuales elimina la tediosa prueba y error del código
  • Salidas a React Native y SwiftUI nativo además de React Web
  • Diseñadores e ingenieros colaboran en el mismo archivo de movimiento visual
  • Tamaño liviano con opciones de exportación de código de dependencia cero
Compared with

Framer Motion (Code Library)

Trade-offs
  • Sin lienzo de creación visual: los desarrolladores deben escribir código desde cero
  • Los diseñadores no pueden inspeccionar ni ajustar las curvas de los resortes sin ayuda de ingeniería.
  • Solo Web React: no se puede exportar a iOS SwiftUI nativo o Android Compose
  • Requiere un tamaño de paquete grande cuando se combinan motores de proyección de diseño completo

Entrega al desarrollo

Cómo usarlo en tu 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 qué a los desarrolladores de Framer Motion les encanta ExodeUI

Framer Motion es una excelente biblioteca de animación a nivel de código para desarrolladores de React. Sin embargo, la creación de movimientos complejos completamente en código adolece de un problema importante: no se puede ver la animación mientras se escribe el código. Los desarrolladores deben ajustar los valores de rigidez y amortiguación, recargar el navegador, probar la interacción y repetir docenas de veces.

  • Fricción de prueba y error: ajustar los parámetros físicos en el código requiere horas de experimentación manual.
  • Anulación multiplataforma: Framer Motion no se puede utilizar en aplicaciones nativas de iOS SwiftUI o Android.
  • Desconexión del diseñador: los diseñadores no pueden modificar el código Framer Motion directamente, lo que genera interminables reuniones de revisión.

Topic Cluster Network

Explora conceptos y herramientas relacionadas

¿Tienes preguntas?

Preguntas frecuentes

Crea componentes vivos con movimiento real.

Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.

Pruébalo gratis