xiry.

Design · Tip

Run Rive Animations in Native iOS Prototypes Without Xcode

Embed interactive Rive animations into iOS prototypes using the Play app.

From the Xiry library · Updated 11 October 2026

A mobile prototyping workflow that combines Rive with the Play iOS design app. By exporting runtime .riv files and dropping them directly into Play, designers can test interactive animations on an iPhone without writing Swift code or setting up Xcode.

How it works

Steps shown in the video: 1) In Rive, export your file 'For runtime' as .riv (the export menu also offers .rev for backup). 2) In Play, a tool for building native iOS prototypes (shown editing components like Collection, items, columns, gap, header/footer), just drag and drop the Rive file. 3) Preview on the iPhone: demos include an animated Dieter Rams-style 'Good design is innovative' list, a speedometer cluster joystick (inputs: color, rpm, bar), a pink neon tachometer showing 138 km/h, and a gyroscope-reactive element.

What it's for

  • Test interactive Rive animations directly on an iPhone
  • Hook mobile hardware sensors like the gyroscope up to vector graphics
  • Prototype native iOS UI layouts with dynamic graphics without opening Xcode

Key points

  • Export assets from Rive using the 'For runtime' (.riv) format
  • Import .riv files directly into Play via drag-and-drop
  • Support for device-level interactions such as gyroscope input
  • Interactive parameter binding for state machines such as color, rpm, and bars
  • Direct mobile preview of native components alongside vector animations

Pricing

Free

Details

Type
Tip
Category
Design
Topic
Prototyping
Open source
No
Platforms
iOS, macOS
For
iOS designers, motion designers, and mobile prototypers
Alternative to
Xcode, Origami Studio, Framer
Tags
rive, play, ios, prototyping, motion design, animation

Why it was saved

  • @rive_app, 25 July 2024: Removes the need for Xcode to ship interactive Rive animations on iPhone, including device features like the gyroscope.

Compare

Related

  • Jitter

    Fast, browser-based motion design tool with Figma import and AI animation features

  • Paper Animator

    Turn photos into paper cut-out animations and text match cuts.

  • Phase

    Animation and micro-interaction tool for product designers

  • Space Type Generator

    Browser-based kinetic typography tool for generating animated 2D and 3D text

  • Animating Mesh Gradients in Figma

    Create and animate soft mesh gradients natively in Figma prototypes

  • Mixed Media Flash Cut Workflow

    Step-by-step workflow for creating mixed-media match cut animations in Photoshop

Updated