Export · Sinua

Take a design from the Studio to your app as code, an FX Spec file, or an image.

Studio feature

Open the Studio, 14 days free, then $9 a month or $99 a year (prices).

Code: the view with only the props you changed, for React, Web, SwiftUI, Compose and React Native — "Web" is the vanilla mount() call. Copy it into your view. After you play an effect, each tab ends with how your app triggers it.
FX Spec file: the whole design, including states and bindings, as a .fxspec.json file (FX Spec 1.8, or a newer version when the design needs it). Load it with the view's spec prop, and open it back in the Studio later.
Image: PNG (rasterized) or SVG (real vectors) of the current frame, for docs, app stores or static fallbacks.

Which to choose is covered in From Studio to your app.

The export drawer in Code mode, SwiftUI tab

The same drawer in File mode, showing the FX Spec

The file half of that same design, exactly as the File tab writes it:

orb-working.fxspec.json

{
  "fxSpec": "1.8",
  "object": "orb",
  "pattern": "working",
  "size": 64,
  "materials": {
    "glow": {
      "strength": 0.6,
      "radius": 3
    }
  }
}

The code half, for React, SwiftUI and Compose, is on From Studio to your app.