The need for prototypes that feel as if you’re actually moving

Nothing beats UX testing on ‘the real thing. ’ But when you’ve spent any time working in automotive HMI design, you know that testing your designs in an actual prototype car is a rare luxury. 

If you’re lucky, you may have access to a buck setup for judging your UI visuals and ergonomics in a semi-realistic layout.


The lack of realism gets particularly tricky when user testing. As a researcher, you’ll have to do a lot of explaining to provide your test users with enough context to understand what they’re looking at (“

Now imagine you’re driving on the highway at 120km/h.

RemotiveLabs has developed something that could alleviate this missing realism. Their tools provide streams of real vehicle data (telemetry, location, etc.), which can help automotive software developers test applications with realistic data in their simulators.


This allows for multiple ways to power simulations: 

Choose from a pre-made library of sample recording,

Upload your own signal data files (e.g., BLF, ASC, or MF4)

Or even connect an actual vehicle for a live data stream to test your HMI designs under real-world conditions.

Wouldn’t it be nice if we could test our interactive car UI prototypes with real car data?


Test prototypes of instrument clusters with realistic data (-visualizations).

Use vehicle data to bring infotainment mockups to life.

Duct tape a touch screen into any car and feed live data into a prototype UI.

Being curious how easy it is for an automotive UX designer like myself to incorporate this into a real-world design prototype, I decided to try and integrate RemotiveLabs’ tools into a typical UI design workflow.

Our UI Experiment: Figma, Protopie, and RemotiveCloud

Today’s de facto UI design tool is Figma. Design teams and their stakeholders use it to collaboratively iterate on design proposals.

Ideally, these design iterations also include testing:

Designers need to test their design proposals to evaluate the dynamic aspects of their concepts ‘in motion.’

User researchers need to do user tests with actual users to test intuitiveness, learnability, and ergonomic factors.

Unfortunately, Figma’s prototyping features are a bit rudimentary and usually not sufficient for automotive purposes. So, for interactive prototyping, I prefer another tool: Protopie.

RemotiveCloud streaming vehicle data into an HMI prototype on a touch display


In the automotive world, Protopie is a popular prototyping platform because it allows the use of multiple simultaneous (touch) displays, sensors, and complex conditional logic. 

We will need a Protopie license that includes Protopie Connect (an add-on to Protopie that allows prototypes to communicate with external devices and data sources).

To begin with, we’ll take the  automotive dashboard UI from Figma and bring it into Protopie to add the interactivity.

Once we have the prototype set up in Protopie, we’ll make a connection with RemotiveLabs’ toolset and drive various objects in our UI with streams of vehicle data.

If we can figure out how to do this, the world’s our oyster: we can use real vehicle data as parameters for controlling any aspect of our user interface.


Above is the HMI design for a fictitious urban micro car

We will be making an infotainment screen for a fictitious urban mini-mobility vehicle. It has a basic central touchscreen, which functions as both a simple infotainment screen and as the instrument cluster.

The vehicle is designed for short trips around town (typically < 30 minutes), so functionality-wise, we will keep the system simple:

An instrument cluster with the basic information needed for driving the vehicle.

A music section, which offers digital radio and a Bluetooth music connection to your phone.

Let’s go: setting up the demo project in Figma

In this experiment, we’ll be feeding real vehicle data into various aspects of the instrument cluster section of the screen.

To make this work, we don’t need to do anything special in Figma. We can set up the design as we always do. Needless to say, it will make everyone’s lives easier if all layers have meaningful names - but that’s good practice, anyway.


Getting your Figma frames into Protopie is literally easy as pie. The kind folk at Protopie provide a plugin for Figma, which lets you import frames from Figma and turn them into fully editable Protopie “scenes”.

Your Figma design will typically carry over 95% intact. The main things I have seen break in the conversion are:

Background blurs (for that popular frosted glass effect)

Image aspects, which can typically be easily corrected in Protopie

To bring gradients (e.g., for masks) over from Figma to Protopie, I recommend copying the gradient layers in Figma as SVG and pasting them in Protopie.

Download ProtoPie's Figma Import Plugin here: 

Preparing the ProtoPie for real-time data inpu

The first thing we need to do is to make any layer or object that we want to manipulate ready to receive changes. We do this by selecting the objects and clicking the “Make editable” button for each of them.

Again, double-check that each layer has a meaningful name because you will need to find them back in a dropdown list.

Once all the layers you want to manipulate using real-time data are editable, it’s time to set up the RemotiveLabs data stream we want to use.


Selecting the vehicle data parameters we want to use in our prototype

For my experiment, I’ve been using the free trial license of 

, which gives access to a number of trial recordings that provide dozens of different variables and signals to feed into our demo.

In the web environment, we can cherry-pick the signals we want to use in our prototype. And there’s no need to do it all at once; we can always come back later to add or remove signals from our selection.

I prefer to use VSS signals when they’re an option over OEM-specific signals. VSS stands for “Vehicle Signal Specification”, a standardization protocol for automotive data from Covesa. 

 The nice thing about VSS is that all signals have meaningful, descriptive names. 

Sometimes, it takes a bit of searching for the right signal name, but usually, they are quite easy to identify thanks to their naming format:

Vehicle.Powertrain.TractionBattery.StateOfCharge.Displayed


The signal names are important! We will need to refer to these in our prototype.


When we’re done we can look up the exact configuration command needed for running our prototype. We’ll paste this command in a terminal window later, so make sure you save it in a location where it can be easily retrieved every time we want to run our prototype.


RemotiveCloud natively supports Protopie communication

Feeding the VSS signals into our ProtoPie

There’s one last thing we need to do in Protopie before we can run our prototype: make the Pie listen and respond to the VSS signals we selected from the RemotiveCloud stream.

Make a global variable, e.g., a numerical variable named “speed”

Make a trigger that will respond when it receives a VSS signal from Protopie Connect. It will listen to the name we found in the data stream, e.g., “Vehicle.Speed”

Add the response: We can put the value we received in a text layer we prepared for this purpose (or change the color of an object, make something [in]visible, etc.).


That’s all. Obviously you can use all of Protopie’s extensive logic features to add complex conditional functionality and rich visualisations, way beyond just changing a number on the screen.


Tell Protopie how to receive vehicle data and what to do with it

Getting the prototype to run for the first time

We’re now only a few steps away from seeing our prototype run with real data!


Save your Pie (the Protopie file) on a local drive, so Protopie Connect can get access to it. Then, run Protopie Connect and locate your local prototype.

Press the little “Display” button next to your imported Pie to open up a Protopie demo window. This is the window our interactive prototype will run in.

2. Open the RemotiveCloud in a browser window

Go to the browser tab where we configured our data stream. Press Play to start sending data. You may need to restart the stream at some point if it runs out before we’re done (depending on the length of the selected stream).

3. Perform some command-line magic in a Terminal window

Next, open a terminal window and paste our command line string into it (assuming you have already installed RemotiveCLI. If not, this is a great time for that). RemotiveCLI will serve as our bridge between the data streaming from the RemotiveCloud and our Protopie demo.

Protopie Connect, showing the incoming data stream




When everything is set up correctly, it should automatically detect that both Protopie Connect and our RemotiveCloud data stream are in place: you should see all the relevant data points scrolling by in the Protopie Connect window.

A hands-on tutorial on using ProtoPie, RemotiveCloud and Figma to bring car UIs to life with actual vehicle signals.

Automotive UI Prototyping with Real Car Data

 emerges as a powerful ally for game designers and developers, offering a user-friendly platform to prototype real-world scenarios effortlessly. Combined with Unreal Engine, the possibilities for crafting immersive and interactive interfaces are endless.

In this step-by-step manual, we'll explore the fusion of 

 and Unreal Engine, empowering you to bring your UI ideas to life with ease.

Step 1. Set up the Web Browser plugin in Unreal Engine

Step 2. Create a new User Interface widget

Step 3. Add the Web Browser to your widget

Step 5. Create a Blueprint to display the widget

Step 6. Add the UI widget to the Blueprint

Step 7. Test your ProtoPie prototype in Unreal Engine

Begin by setting up the web browser plugin in Unreal Engine.

2. Go to the "Edit" menu, then select "Plugins.”

3. Search for the "Web Browser" plugin In the Plugins window.

4. Enable the Web Browser plugin if it is not already enabled.

 5. Restart Unreal Engine to apply the changes.

Create a new User Interface widget after setting up the web browser plugin.

1. Go to the "Content Browser" in Unreal Engine.

2. Right-click in the content area and select "User Interface," then "Widget Blueprint" to create a new widget.

3. Select “User Widget” and name your widget appropriately.

For the next step, you must include the web browser in your widget.

1. Open the Widget Blueprint you just created by double-clicking it.

2. A new window will open; you can click and drag this window to the main tab.

3. In the Designer tab, search for the "Web Browser" widget in the left Palette panel under “Experimental.”

 4. Drag and drop the Web Browser widget into your widget layout.

5. Resize (drag the double arrows) and position the Web Browser widget to fit your design.

You will set up the web browser widget by copying and pasting the URL of the ProtoPie prototype into it.

1. With the Web Browser widget selected, go to the Details panel.

2. Find the "Initial URL" property. Here, you will enter the URL where your ProtoPie prototype is hosted.

3. Launch ProtoPie Connect and import your prototype, selecting either from the Cloud (

) or uploading a local Pie file. Check your network settings and permissions to avoid connectivity issues when loading prototypes from the Cloud. 

4. Click the web browser icon to open the Pie in a browser.

5. If your Pie has a transparent background, add “&bg=transparent” at the end of the URL.

6. Copy the entire URL from the address bar, return to Unreal, and insert it into the "Initial URL" field. Ensure to enable the "Supports Transparency" option.

1. Go to the "Blueprints" folder in the Content Browser.

2. Right-click "Blueprint Class," then choose a class appropriate for displaying UI, such as an Actor or a PlayerController.

4. Since this guide uses the “Third person” Unreal template, select the “BP_ThirdPersonCharacter.”

1. In the Blueprint editor, go to "Event Graph."

2. Create a new node for "Create Widget" and select your Web Browser widget as the class.

3. Connect the "Create Widget" node to the appropriate event (e.g., "Event BeginPlay" for an Actor or “key/gamepad Press”).

4. Add an "Add to Viewport" node and connect it to the "Create Widget" node to display the widget when the event triggers.

5. Press the “M” key on the keyboard to create the widget.

For the final test, you will test your ProtoPie prototype in Unreal.

2. If your Blueprint actor is not already part of another Blueprint, like PlayerController, you can drag and drop it into the level.

3. Press "Play" to run the game in the editor and test the integration. Your ProtoPie prototype should display within the game environment using the Web Browser widget.

4. Press the key “M” on your keyboard to view your Pie.

Unlock a world of possibilities with ProtoPie

The combination of ProtoPie Connect and Unreal Engine provides numerous possibilities for creators who want to push the boundaries of digital interaction. Whether you are designing for games, simulations, or any interactive media, this tutorial serves as a solid foundation for your creative projects.

Now that you have learned how to connect ProtoPie and Unreal Engine, why wait?

Start your journey with ProtoPie for free today

 and unlock the full potential of your creative visions. Your next groundbreaking project begins now—happy prototyping!

Dive into the fusion of ProtoPie Connect and Unreal Engine.

ProtoPie Connect and Unreal Engine 5 Integration

. This tool is great for most of our design needs when designing user interfaces, brainstorming ideas in FigJam, and creating presentations with Figma Slides. Plus, its AI integrations further enhance Figma’s versatility.

 Complex interactions can be tricky, even with its robust UI3 interface and, logic-driven features. Tasks such as real-time validations or multi-step logic, that require simple formulas and minimal setup in ProtoPie, can become cumbersome in Figma. Thus, underscoring the need for dedicated prototyping tools for 

Introduction to conditions, variables, and formulas

Creating advanced interactions & adding animations

Dynamic messaging with conditions & formulas

At the end of this tutorial, you will be able to build your own “Money Transfer App” like this from scratch:

Now, let’s address the areas Figma falls short on — 

Real-time validation and feedback limitations

Complex customization for general simple output

For example, imagine building a money transfer app where the amount entered must be validated against a user’s account balance. Users must send an amount greater than 0 but equal to or less than the total balance. In Figma, this requires numerous variables:

3 number variables (for balance and amounts)

Plus additional variables to control UI elements like message length and button opacity

But do note that Figma doesn’t natively support multi-digit input fields or keyboard interactions

. You can use numbers and strings, but you can’t type something that goes beyond a single digit. Hence, requiring to create a heavily customized keyboard from scratch with complex interactions that looks like this:

Now, imagine this crazy validation set on each key. Double it if you need it to work on an actual keyboard.

Even with some workarounds and extensive customization, notice in the output below how we still had to adjust the math with a custom balance of 

 to trigger the error message with the highest possible value we could enter with a single digit, which is 

What would require an extensive setup in Figma (with many variables and custom inputs) can be handled in ProtoPie with just 

—making the process much faster and more intuitive.

ProtoPie is the #1 advanced prototyping tool for dynamic and multimodal interactions. The tool is great and lets designers do actual interaction design. You can easily add 

 via JSON files, and seamlessly import your UI assets from tools like 

. Unlike other high-fidelity prototyping tools like 

, the tool stands out as it requires almost zero coding skills.

 Each scene is like a frame, artboard, or screen. You can only preview one scene at a time, enabling you to focus on one screen at a time when crafting complex interactions.

 Similar to other layer panels like in Figma, located on the leftmost end, it provides an overview of all the layers within the active scene, organized based on their hierarchy.

 might feel new if you haven’t touched advanced prototyping in Figma, but it’s pretty much the same. You can add local or general variables. Each one can be a string, number, or color.

 of your active scene. You can also customize the frame size, pixel density, device orientation, and specific UI elements such as System Status Bars.

 where you can create triggers (tap, click, swipe) linked to objects that trigger actions such as 

 changes. You can also preview and adjust interaction timelines here.

 Located at the rightmost end. Customize interaction properties such as width, height, position, colors, text style, and animation specifications.

 Use the Preview window to view your interactions in action and identify any errors before sharing your prototype.

 and share the Pie link with your team & stakeholders.

 that showcases user flows, element behaviors, and overall interaction integration within your prototype.

ProtoPie also offers advanced features like 

. To dive deeper into its full potential, consider exploring the 

ProtoPie goes beyond Figma’s limitations with complex interactions and validations. 

Let’s recreate the Money Transfer App but this time with ProtoPie.

Step 1: File setup. Import frames from Figma

The first step is to import the Figma file into ProtoPie. Run the 

Select the Figma frame you need and hit the 

 Wait and let ProtoPie do its magic. You will be redirected to ProtoPie once it loads all your design elements.

 in ProtoPie. Rearrange the layers if needed and set a custom 

 (I’m working with an iPhone 15 Pro screen aspect ratio).

Below is the final setup. Now, you are ready to go beyond Figma’s advanced prototyping. Let’s move on and craft actual interaction design like a Pro.

. Create a new input layer. You can now add inputs using your native keyboard, directly into the layer.

Define its size and properties like placeholder text, font styles for both empty and filled states. Then set the keyboard that should display once you tap the input. In this case, we will display a numerical keyboard.

Remove the original placeholder text/input field imported from Figma once the input field in ProtoPie is styled correctly. Rearrange its final location in the layers panel and use the 

 to test real-time inputs, which can be customized freely without creating a custom keyboard. Label the input appropriately, such as “MoneyTransfer.”

Now, to enable the math, we need to create 

: Should be numerical and have a fixed value (say 20,000) so we can subtract the amount we type.

: Also numerical, but instead of a fixed value, it captures the real-time input from the 

Make "Amount" variable dynamic

 next to each variable to see real-time updates as green badges. Adjust their position as needed, then use the 

 to confirm that the “amount” variable captures the values when you type in real-time.

Step 3: Create error messages using Conditions, variables, and Formulas

The next step is to print messages. We can print 3 different messages according to these scenarios:

 When the amount variable > balance variable.

 When 0 > amount variable < balance variable

For the initial validation, start by adding a 

. This will allow us to activate interactions upon loading this specific scene. Add a condition to the trigger to activate this interaction when the balance is 20,000.

Now let’s rename your “Balance:” text object to “Dynamic message”. First, select the “Balance:” text object and 

: When you import frames from Figma, ProtoPie by default, will turn all your text into pictures.

Rename to “Dynamic message”. We will change this text object each time with dynamic error messages based on the condition.

. Select the “Dynamic message” object.

To ensure the scene opens in the default state, we will replace the dynamic message object with the balance variable value.

 and if everything is set correctly, the “Dynamic message” text value will change to “20000”.

Now we move on to the second validation of displaying customized messages based on the 3 scenarios. Start with adding a new 

” variable. This will let your prototype review the 

variable value each time your prototype meets certain conditions. Next, you will add 3 different conditions for each scenario.

Once you reach Figma's limits, it’s time to move on. Build advanced prototypes with custom interactions, input validation, and lightweight Lottie animations in this beginner guide with ProtoPie.

Why Move from Figma to ProtoPie for Advanced Prototyping

Time-based UI's are occasionally overlooked in UX design strategy, but stopwatch-styled timers are common features in exercise, cooking, and productivity apps. Consider the apps you use that include a temporal aspect of tasks and how you might incorporate a stopwatch timer into the app prototypes you are designing.

allows designers to create functioning stopwatch timers by using formulas, detect functions, and variables. With these powerful tools, ProtoPie is able to read and react to changes in data. While it may seem complicated, exploring these skills will prove that ProtoPie is a powerful tool for your data (and time) oriented designs!

Automate the centiseconds using a variable

Increase the second using detect and condition

In this advanced tutorial, you'll prototype a stopwatch-styled timer while exploring how formulas, detect functions, and variables can manipulate data.

Tutorials

Automotive UI Prototyping with Real Car Data

ProtoPie Connect and Unreal Engine 5 Integration

Why Move from Figma to ProtoPie for Advanced Prototyping

Create a Stopwatch Timer using Formulas and Variables

How to Prototype a Dropdown Menu with Components

How to Create a Looping Scroll Carousel for Web

How to Design a Circular Slider with Conditionals

How to Prototype a Functional Video Player

How to Create a Draggable Slider with a Dynamic Number Indicator

10 Easy Prototypes You Can Replicate Today

How to Create a Sticky Header that Responds to Scrolling

Game UI Tutorial with ProtoPie Connect Unity Plugin

3D Car HMI Tutorial with ProtoPie Connect Unity Plugin

Integrating Unity WebGL Build with ProtoPie Connect Web-Embed Layer

Smart Home Prototyping: Arduino MQTT Bridge