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 07 · Como funciona

Do .exode ao seu aplicativo: como os arquivos ExodeUI são criados e reproduzidos

Um arquivo aberto do design à produção. Um tempo de execução o reproduz, seu código o conduz.

What is Do .exode in ExodeUI?

ExodeUI não gera código-fonte React, Swift ou Flutter. Você projeta em um arquivo .exode JSON aberto; para produção, ele pode ser compilado em um arquivo .bexode menor e um pacote de tempo de execução para sua estrutura o reproduz em uma tela. Seu código o controla definindo entradas e ouvindo eventos. Fazemos ExodeUI.

Arquitetura central

Por que engenheiros e designers escolhem o ExodeUI

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

Arquivo de código aberto

O arquivo .exode é JSON que descreve camadas, estados, transições, molas, entradas e eventos. Os desenvolvedores podem lê-lo e as ferramentas de IA podem editá-lo.

Core Architecture

Compilado para produção

A mesma cena pode ser compilada em um arquivo .bexode menor para ser enviado ao seu aplicativo.

Core Architecture

Tempo de execução por estrutura

Pacotes de tempo de execução para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter reproduzem o arquivo.

Core Architecture

Controlado pelo seu código

Defina booleanos, números e gatilhos do estado do aplicativo e ouça eventos que a animação envia de volta.

Core Architecture

Avaliação objetiva

Como o ExodeUI se compara a Rebuilding motion by hand

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

The ExodeUI Architecture

ExodeUI

Pontos fortes
  • O arquivo projetado é o arquivo enviado, então nada é perdido na transferência
  • Estados e lógica viajam com a animação
  • Um arquivo funciona em oito ambientes de execução de estrutura
  • Os designers podem alterar o tempo sem alterar o código, se as entradas e os eventos permanecerem os mesmos
Compared with

Rebuilding motion by hand

Trade-offs
  • Os desenvolvedores recriam cada transição a partir de uma referência
  • Cada mudança de design precisa de outra mudança de código
  • Cada plataforma é reconstruída separadamente
  • O código escrito à mão oferece controle total e nenhum tempo de execução extra, o que às vezes é a compensação certa

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

O que acontece entre o editor e seu aplicativo

Um componente ExodeUI passa por quatro etapas:

  • 1. Design: você constrói camadas, estados, transições, molas e lógica no navegador ou editor de desktop. O trabalho é salvo como um arquivo .exode JSON aberto.
  • 2. Compilar (opcional): para produção, a cena pode ser compilada em um arquivo .bexode menor.
  • 3. Play: um pacote de tempo de execução para seu framework carrega o arquivo e desenha-o em uma tela.
  • 4. Controle: seu código define entradas, como um booleano de carregamento ou um gatilho de sucesso, e escuta os eventos que a animação envia.

Quando o código escrito à mão é a melhor escolha

Um tempo de execução nem sempre está certo. Para um único fade ou um simples hover, CSS ou uma biblioteca como Motion é mais leve e não precisa de pacote extra. ExodeUI é mais útil para componentes com vários estados, físicos ou lógicos que os designers desejam continuar editando.

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