Prototyping with ProtoPie

Feed your UI designs with real vehicle data

Stream, read and write signals from RemotiveLabs platform seamlessly into your advanced prototypes in ProtoPie. Move fast from design to testable experiences, explore user flows in context, and refine your interface with confidence.

Concept validation of AMG Instrument Cluster in ProtoPie, fed live data from a vehicle to ProtoPie using a RemotiveBroker.

Schematic: Convert Figma designs into ProtoPie, and feed signals from RemotiveLabs into ProtoPie to make them come to live.

Turn your Figma designs and mockups into sophisticated and interative prototypes via ProtoPie. Power them with real vehicle data from RemotiveCloud.

[url_intern=https://remotivelabs.webflow.io/blog/from-figma-to-interactive-ui-in-protopie]Guide Figma to interactive prototype[/url]

Table of contents

How to prototype better and faster with real vehicle data

Feed recorded data into ProtoPie

Experience your prototype live in a vehicle

Control a vehicle using ProtoPie

Get started

Use cases: Ford DPD & Figma to interactive prototypes

Resources

ProtoPie: combine with RemotiveLabs for Automotive UX

RemotiveCLI ProtoPie Connect bridge documentation

We’re here for you – just email us with any questions you might have!

hello@remotivelabs.com

How to prototype automotive UX faster with real vehicle data

Using RemotiveLabs tooling in combination with ProtoPie makes vehicle UX prototyping faster, smoother, and more relevant by enabling the use of actual vehicle signals—live or recorded—to evaluate interfaces in realistic scenarios.

Design with real data from day one - reduce development costs with early and efficient iteration
Bridge design and development with sharper user insights
Transform signals to the expected format (COVESA VSS and AAOS vehicle properties etc)
A great way to make user tests more realistic

Feed signals from RemotiveLabs into your ProtoPie designs.

To overcome the challenges of realistic UX testing, you need an HMI that looks and behaves like the final product and real driving data that powers interactions in real time.

Feed recorded vehicle data into ProtoPie for UX testing

It will only take you minutes to get started and use the recorded data available in our RemotiveCloud free plan, transform it to the desired format and feed it into your cluster or test it with our demo AMG cluster in ProtoPie. Just install RemotiveCLI and connect to ProtoPie Connect to see the prototype come to life!

remotive connect protopie  --signal vss:Vehicle.Chassis.SteeringWheel.Angle  --signal vss:Vehicle.Speed --broker-url https://my-personal-broker --api-key xxx

‍

You can go to the ProtoPie Connect bridge documentation. Or read more about how to mock with real vehicle data.

Experience your prototype in a live vehicle

By using RemotiveLabs lightweight tooling in combination with ProtoPie you can experience your prototype live. In 2 hours we were up and running with an AMG cluster in one of our vehicles. This is what we did:

We recorded relevant signal data by connecting the RemotiveBroker to one of our vehicles.
With the RemotiveCloud we seamlessly matched the signals with the AMG instrument cluster in ProtoPie using LUA scripts.
We connected the RemotiveBroker to the vehicle again and experienced our prototyped cluster live in no time.

The AMG cluster is available here, if you need support getting started please reach out.

Experience your prototypes live in a vehicle the same day you designed it using RemotiveLabs platform and the ProtoPie bridge app.

Control a vehicle using ProtoPie

RemotiveBroker can act as a middleware to control a vehicle and its functionality from your infotainment system built in ProtoPie. Interact with the vehicle by pressing virtual buttons to change for example climate, windows, lights, or other features and services for your prototype.

How it works

RemotiveBroker acts as a signaling gateway allowing you to modify specific signals on the bus (while passing through the rest). No need to hardcode CAN signals!
This setup requires RemotiveTopology connected to the physical vehicle bus/es, and a simple bridge app. Contact us for more information.

‍

With a RemotiveBroker between ProtoPie and the vehicle, the digital controls in the infotainment system will be able to change the behavior of the vehicle during prototyping.

Get started

RemotiveCloud enables seamless collaboration without touching the hardware.

Get started with our sample recordings in a couple of minutes:

Pricing

Choose RemotiveCloud Pro to enjoy unlimited recording uploads, projects and collaborators.

€900/year

price per user

Use cases

Top use cases - Protoyping with ProtoPie

‍

Validate assumtions early with cloud experiences

The team used real vehicle signal recordings and the VSS data model to create a virtual prototype in RemotiveCloud—enabling app testing and data analysis without any hardware. This approach let developers validate features directly in the browser, accelerating iteration and reducing setup complexity.

The demo experience demonstrates gear changes with data from RemotiveCloud streamed into ProtoPie during a three-point turn.

Turn mockup designs into real UI prototypes

Bring Figma mockups to life using ProtoPie and RemotiveCloud. Instead of static UI screens, you can simulate user interactions, animate transitions, and trigger events using real-world vehicle signals. This guide by Bram Boos shows how to bridge visual design and automotive behavior without writing code.

Start with layered Figma designs—buttons, screens, and interactions.

Import seamlessly into ProtoPie, preserving structure and layout.

Connect UI elements to actual signals, simulate real behavior.