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 →

Pilier 04 · Visual Studio vs Code uniquement

Alternative Framer Motion : Canevas de mouvement visuel avec sortie React propre

Arrêtez de coder les images clés d'animation et les paramètres de ressort par essais et erreurs dans les fenêtres de l'éditeur de code. Concevez visuellement sur un canevas en direct et lisez le même fichier dans React et Swift.

What is Alternative Framer in ExodeUI?

ExodeUI est l'alternative visuelle au Framer Motion pour les équipes de conception et d'ingénierie. Alors que Framer Motion oblige les développeurs à créer des variantes d'animation, des gestes et des ressorts complexes entièrement via le code JavaScript, ExodeUI fournit un environnement de conception visuelle dans lequel les concepteurs créent des interactions et exportent des composants React JSX et SwiftUI prêts pour la production.

Architecture centrale

Pourquoi les ingénieurs et les designers choisissent ExodeUI

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

Variante visuelle et inspecteur d'État

Prévisualisez instantanément les changements de disposition, les courbes à ressort et les variantes de survol sans recharger le navigateur ni écrire d'objets JSON.

Core Architecture

Exportation native multiplateforme

Framer Motion est limité à React sur le Web. ExodeUI exporte une physique identique vers React, React Native Reanimated et Apple SwiftUI.

Core Architecture

Physique du geste continu

Créez visuellement des limites de traînée complexes, une vitesse de projection et un accrochage magnétique sur la toile.

Core Architecture

Intégration multi-framework

À utiliser avec le code Motion (Framer Motion) existant : fichiers ExodeUI pour les composants conçus, code pour le reste.

Core Architecture

Évaluation objective

Comment ExodeUI se compare à Framer Motion (Code Library)

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

The ExodeUI Architecture

ExodeUI

Points forts
  • La création de canevas visuels élimine les essais et erreurs fastidieux du code
  • Sorties vers React Native et SwiftUI natif en plus du React Web
  • Les concepteurs et les ingénieurs collaborent sur le même fichier de mouvement visuel
  • Encombrement léger avec options d'exportation de code sans dépendance
Compared with

Framer Motion (Code Library)

Trade-offs
  • Pas de canevas de création visuelle : les développeurs doivent écrire du code à partir de zéro
  • Les concepteurs ne peuvent pas inspecter ou ajuster les courbes des ressorts sans l'aide d'un ingénieur
  • Web React uniquement : impossible d'exporter vers iOS SwiftUI natif ou Android Compose
  • Nécessite une grande taille de bundle lors du regroupement de moteurs de projection à mise en page complète

Passage au développement

L’utiliser dans votre code

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>
  );
}

Pourquoi les développeurs de Framer Motion adorent ExodeUI

Framer Motion est une bibliothèque d'animation exceptionnelle au niveau du code pour les développeurs React. Cependant, la création de mouvements complexes entièrement dans le code souffre d’un problème majeur : vous ne pouvez pas voir l’animation lors de l’écriture du code. Les développeurs doivent ajuster les valeurs de rigidité et d'amortissement, recharger le navigateur, tester l'interaction et répéter des dizaines de fois.

  • Friction par essais et erreurs : la modification des paramètres physiques du code prend des heures d'expérimentation manuelle.
  • Vide multiplateforme : Framer Motion ne peut pas être utilisé dans les applications natives iOS SwiftUI ou Android.
  • Déconnexion des concepteurs : les concepteurs ne peuvent pas modifier directement le code Framer Motion, ce qui entraîne des réunions de révision sans fin.

Topic Cluster Network

Explorer les concepts et outils liés

Des questions ?

Questions fréquentes

Créez des composants vivants avec un vrai mouvement.

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

Essayer gratuitement