Global tech leader Meta consistently pushes the boundaries of innovation. Designing and validating user experiences for their cutting-edge products and complex interactive systems requires a prototyping solution that is both powerful and agile.

The Challenge: Prototyping in a Complex, Fast-Paced Environment

Across its diverse teams, including Reality Labs (RL), Industrial Design (ID), and infrastructure groups, Meta needed to:

 and gather actionable user feedback quickly.

, including those involving native device sensors or data from multiple sources.

Bridge the gap effectively between design and engineering to streamline the development process.

Meta uses ProtoPie beyond  its mobile UX.

The Solution: ProtoPie for Advanced, Integrated Prototyping

Meta utilizes ProtoPie to empower its designers to build and test high-fidelity prototypes quickly and 

without requiring in-depth coding knowledge

For teams working on complex systems, including those involving hardware or backend integration, 

 are key. Ryan Olson, a Product Design Engineer at Meta, describes the API plugin as 

, allowing prototypes to seamlessly communicate with hardware or custom backend services (e.g., via JSON). This is crucial for simulating real-world product behaviors.

"That API plug-in is gold... having the ability to send and receive from a service like that... is a killer feature."

 - Ryan Olson, Product Design Engineer, Meta

 ProtoPie helps Meta "try a lot of things quickly," speeding up design validation across projects.

50% reduction in engineering rework costs

 faster Design-to-development cycles, and achieved positive ROI in only 

Native Device Capabilities for Authentic User Testing:

 Test on real devices with native sensors for genuine user insights.

 An intuitive model (Object, Trigger, Response) allows designers to tackle complex UX for software and hardware-integrated products.

Cloud Sharing leads to faster Stakeholder Buy-in:

 Effectively communicate complex designs for faster alignment, with ProtoPie Cloud enabling easy sharing.

Smoother Developer Handoff simplifies Communication:

 Designers "show developers what [they] want," reducing ambiguity and easing implementation.

"I've gotten remarks from developers saying like, 'oh my god, you showed me what you meant with that interaction'... And it makes it much easier for them to understand and then implement." 

- Ryan Olson, Product Design Engineer, Meta

ProtoPie impacts the entire Product Development Cycle.

These are just some of the achievements Meta has realized in the short time since using ProtoPie for their high-fidelity prototyping. Continuous development and feature expansion of ProtoPie’s solution will extend the benefits that any design and product team can expect when joining ProtoPie.

 ProtoPie can help your team innovate faster and 

transform your Complex Product Design with ProtoPie.

Complex Product Design, faster innovation, and smoother developer handoff at Meta made easy with ProtoPie!

Meta Achieves High-Fidelity Prototyping at Scale with ProtoPie

Granstudio: A pioneer in automotive design

Granstudio’s approach to HMI design: Blending physical and digital expertise

Innovating the future of HMI design with ProtoPie

In today’s rapidly evolving automotive landscape, the demand for seamless human-machine interface (HMI) experiences has never been more pressing. 

, an international creative consultancy headquartered in Italy, is at the forefront of this revolution, harnessing the power of XR (extended reality) prototyping to create intuitive and cutting-edge automotive designs.

Granstudio’s HMI Team members Lukasz Czekanowski, Granstudio Junior Partner, and Klaudia Warmus, Software Developer & Project Team Member, shared Granstudio’s insights during our 

 on “Transforming HMI: XR Prototyping to Design Complete & Seamless Car Experiences.”

This article takes an in-depth look at Granstudio’s approach to HMI design, the tools it utilizes, how 

 fits into its whole process, and how Granstudio’s team's innovative methods are reshaping the future of automotive experiences.

 is a diverse team of over 65 experts spanning multiple disciplines in mobility design. Located in the heart of the Italian automotive industry, with an additional branch in Belgium, the company combines physical and digital expertise to offer comprehensive design solutions. Their projects range from designing cars and trucks to more forward-thinking mobility concepts, all driven by their commitment to creating human-centric, context-aware experiences.

In the livestream, Lukasz highlighted the breadth of Granstudio’s design spectrum, emphasizing the seamless integration of physical and digital design elements in their workflow. Granstudio’s unique transdisciplinary approach allows them to connect different aspects of mobility design, offering a holistic experience that goes beyond traditional automotive design boundaries.

Granstudio has a unique approach to creating seamless and intuitive Human-Machine Interaction (HMI). Their work is structured around three main design disciplines centered on a design-driven methodology:

This layered process allows the design team to simulate, test, and refine interactions, ensuring that the HMI aligns perfectly with the vehicle’s overall design.

Crafting multi-dimensional car experiences

At the heart of Granstudio's interaction design process is a transdisciplinary approach that allows them to create multi-dimensional car experiences. Their UX-driven methodology covers the entire design process, from initial user research to the final stages of development, adapting to the specific needs of each project. This flexibility enables them to deliver HMI systems that are functional and unique, ensuring that each project stands out in its own right.

One of Granstudio’s key strengths lies in their ability to merge physical and digital expertise, also known as the ‘phygital’ approach. This is especially evident in their prototyping process, combining physical prototypes with digital tools to create a comprehensive design experience. Although digital methods have not always been the go-to in automotive design, Granstudio is reimagining these techniques to fit their needs, particularly in prototyping.

One of the standout innovations Granstudio has developed is their proprietary mixed reality tool, 

. Powered by over 25 different engines, DigiPHY integrates physical and digital elements into an immersive design platform, capable of adapting to any vehicle layout—from cars and buses to trucks and agricultural vehicles.

According to Lukasz, DigiPHY provides an unparalleled foundation for testing high-resolution prototypes, aligning virtual simulations with physical models. The tool allows designers to experience and interact with a digital representation of the vehicle in real time, providing instant feedback on design elements.

This fusion of digital and physical design is a key differentiator for Granstudio. It allows their team to explore the full potential of HMI design, blending the best of both worlds to create seamless, context-aware experiences for drivers and passengers alike.

Granstudio's HMI workflow is built on three main components: physical prototypes, interactive VR, and digital prototypes. ProtoPie plays a significant role in the digital prototyping stage, allowing the team to refine user interactions and test behaviors in a real-time environment.

Physical prototypes are used to simulate and verify ergonomics, ensuring that every interaction feels natural. ProtoPie aids in this by supporting real-time interactions, so Granstudio can create prototypes that closely mimic the final experience. This allows them to assess key user interface sections, including material configurations, embedded lighting, and overall feel, ensuring that digital design aligns with physical elements.

2. Interactive VR for context-aware design

Interactive VR is essential for evaluating the user experience in various contexts. With ProtoPie, Granstudio can simulate how users interact with HMI systems in different scenarios, such as traffic conditions, weather changes, or different times of the day. This context-aware design approach ensures that Granstudio’s prototypes are robust, flexible, and tested in various environments.

3. Digital prototyping and dynamic interactions

ProtoPie truly shines when it comes to digital prototyping. Granstudio uses ProtoPie to build adaptive, responsive interfaces that adjust to various user inputs and settings. For instance, ProtoPie allows them to design interactions that adjust based on the active user profile, making the experience more personalized and reducing potential distractions for drivers. This flexibility is key in their HMI design process, ensuring their prototypes are dynamic and user-friendly.

ProtoPie provides several features that have transformed Granstudio’s design workflow, making it more efficient and powerful.

1. Triggers and responses for interaction design

 are two of the most frequently used functions in ProtoPie. They allow the team to create interactive elements easily, simulating how users interact with the interface.

2. Formulas and variables for enhanced realism

, on the other hand, allow Granstudio to track and adapt to real-time data. These features make it possible to create dynamic prototypes that adapt to users' needs and behaviors, ensuring that the HMI design is intuitive and functional.

As voice technology becomes more critical in modern vehicles, ProtoPie allows Granstudio to simulate 

 in their prototypes. This feature is essential for testing hands-free interactions, helping to improve both driver safety and convenience. The ability to prototype voice interactions gives Granstudio a valuable edge in designing forward-thinking HMI systems.

4. ProtoPie Cloud for sharing & collaboration

ProtoPie’s cloud-based features make collaboration seamless within the Granstudio team. Using 

, they can share prototypes effortlessly, gather feedback in real time, and ensure alignment across various stakeholders. The team can quickly iterate on feedback, improving the overall workflow speed and efficiency.

, which allows the team to test prototypes on actual devices without extensive hardware. They can check the feel of interactions, adjust timing and animations, and ensure that everything runs smoothly across various devices. This functionality is especially useful when Granstudio connects multiple screens or integrates physical components, ensuring every element syncs.

6. ProtoPie Connect for integration with external devices

ProtoPie’s ability to connect with external devices is another crucial feature for Granstudio. 

 allows the team to integrate microcontrollers and other hardware components into their prototypes, testing physical interactions alongside digital interfaces. This enables them to simulate real-world conditions and ensure their prototypes accurately represent how users interact with the vehicle's systems.

For example, Granstudio can use ProtoPie to move widgets between the dashboard’s display and other in-car screens, ensuring that all devices are synchronized. This level of connectivity and testing allows the team to simulate real-world interactions and refine the HMI design in a comprehensive, integrated environment.

Granstudio’s HMI design process blends physical and digital tools to enable real-time testing and refinement. Tools like ProtoPie, DigiPHY, and interactive VR simulations are central to this workflow, allowing the team to iterate at every stage of the design process.

ProtoPie plays a key role in prototyping and refining HMI designs. It provides the flexibility and efficiency to create seamless, intuitive user experiences while enabling real-time testing and interaction.

ProtoPie also allows Granstudio’s team to work seamlessly across various tools like 

. This adaptability makes ProtoPie an essential part of Granstudio’s toolkit, enabling the team to quickly transition from concept to prototype.

Granstudio’s approach to HMI design blends physical and digital elements to push the boundaries of 

. Using tools like ProtoPie and XR prototyping, they create intuitive, context-aware interfaces that balance functionality and aesthetics.

By focusing on user-centered design and constantly refining their process, Granstudio consistently delivers HMI systems that enhance the driving experience, making it more immersive and intuitive for both drivers and passengers.

Q: Can you talk about the challenges of linking all these prototype environments and technologies together?

Yes, that was the biggest challenges—merging everything together. In our studio, we gathered together designers and software developers to tackle this. It’s about overlaps and how different disciplines work together. The major challenge was how to combine these elements and create a unified environment.

ProtoPie made this process much easier with its connectivity, which helped us to integrate it with VR environments. We had already developed digital simulations within our team, but what was missing was the interface integration—how everything could communicate and influence each other. ProtoPie helped us solve that issue, enabling seamless interaction between different elements.

Now, we use this system for demos and user testing, and it's efficient enough to provide valuable insights throughout the design process. So, ProtoPie's connectivity was crucial in making this integration possible.

Q: What are the major trends you're seeing in the future of HMI and XR prototyping for the automotive industry?

From a design perspective, one of the main trends we see in XR prototyping for HMI design is integrating various tools into a single environment. This enables designers to experience their designs as close to reality as possible, recreating a full in-cabin experience and truly immersing themselves in the design process.

This approach helps reduce costs and time to market by allowing multiple iterative design loops, testing, and prototyping. Designers are moving beyond testing on just two screens; the future involves integrating virtual and physical environments. This allows designers to experience their work firsthand, which is a major shift we’re working on here at Granstudio.

Q: Have you ever tried to use real signals from a car with a native Android automotive system?

Actually, no, we haven’t done that yet, but we know it’s possible. For our prototyping, we don’t use real vehicle signals because we have our own platform that simulates everything. Our approach focuses on simulation, which also allows us to compare different cars during benchmarking.

We’re aware of the capability, and we aren’t ruling out the possibility of using real signals in the future. For now, we primarily use ProtoPie for simulations.

Q: Do you see the web technology becoming stronger and more important for in-car HMI development?

Yes, web technologies are becoming more important in in-car HMI development due to their cross-platform compatibility, ease of updates, cloud integration, and faster development time. They also offer a more familiar user experience for drivers, making them increasingly relevant for future systems. Additionally, web-based HMIs allow for seamless over-the-air updates, which can enhance safety and keep interfaces current without needing hardware changes. As vehicles become more connected, leveraging these technologies will be key to providing personalized, real-time services.

Q: Do you see the possibility to bridge the gap between prototyping to development in the next years? There are tools that are code-free and already compile to the target.

Of course, we are exploring the possibilities of integrating development solutions as well. We are fully aware of the tools available on the design and development market, including those that can compile directly to the target platform. However, for greater flexibility and fewer creative constraints, we prefer to first prototype original and unique designs, which we then hand over to our developers to transform into the final product. Depending on the specific needs, we choose the best tools for development, although we find code-free solutions for final HMI to be more limited and constrained in many aspects.

Q: In the context of transitioning to automotive HMI design, is it necessary to learn about the engineering aspects and ergonomic science?

The ergonomic aspects are important because HMI design is about the relation between human and interfaces. Designers must prioritize driver safety and minimize distrractions. Ergonomic principles guides the placement of controls, and the overall layout of the visuals elements to ensure that drivers can interact with the system safetly. Besides, engineering knowledge can be useful, because HMI designers need to be aware of the contraints imposed by hardware and software. This knowledge ensures that designs are feasible.

Q: Are there any starting points to start learning HMI design? from other disciplines?

HMI is a transdisciplinary field and there are several important starting points to build a solid competence in this field, like for example principles of UX Design, Graphic Design (e.g. composition, typography and color theory), Human Factors and Cognitive Psychology.

Q: How do you transition from being a UI/UX designer to an HMI designer?

I don’t think it’s that far of a transition. First, it's important to note that you don’t necessarily need to be a UI or UX designer to move into HMI design. You could come from various design backgrounds. However, what’s crucial is your approach. HMI design still focuses on the human user and interaction, and you’ll work a lot with hierarchies and interconnections between different elements.

In our studio, we don’t view HMI as just content on a screen. It’s a broader, more immersive interface that surrounds the user and even extends beyond the car in automotive HMI design. While UX and UI are good foundations, you also need an understanding of ergonomics, visual hierarchy, and readability, much like in other design disciplines.

However, automotive HMI introduces a more dynamic context. The main design principles shift to focus on safety and minimizing driver distraction, which are different from designing for personal devices. So, transitioning requires learning the specific context in which HMI interfaces operate, but overall, the shift isn’t too drastic, just different in some aspects.

ProtoPie is pivotal in Granstudio’s design process, offering a powerful and flexible platform for creating dynamic, responsive HMI prototypes. By enabling real-time interaction testing, integrating with external devices, and supporting advanced features like voice commands, ProtoPie fits seamlessly into Granstudio’s workflow.

With ProtoPie, Granstudio can push the boundaries of automotive HMI design, creating the seamless car experiences of the future.

Learn how Granstudio, a pioneer in automotive design, uses ProtoPie for HMI & XR prototyping.

Granstudio Transforms Automotive HMI with XR Prototyping

Interactive design systems are transforming how we develop digital products, offering new levels of efficiency and consistency. In a recent livestream titled 

Interactive Design Systems with ProtoPie: Improving Efficiency & Product Delivery

, Darren Bennett, ProtoPie Ambassador, shared his insights on how to build and manage interactive design systems using 

In this article, we’ll dive into Darren’s presentation, which covered the evolution of design systems, the role of interaction, and how ProtoPie can bridge the gap between static design tools and dynamic, interactive experiences.

Design systems: definition, types, and a brief history

Using Figma and ProtoPie together for design systems

Step-by-step guide on how to build an interactive design system with ProtoPie and Figma

The benefits of interactive design systems

ProtoPie benefits for design system management

Darren started his presentation by giving an overview of the history of design systems, tracing their roots back to corporate identity guidelines used in print design in the 1960s. As the web emerged, designers had to adapt these guidelines to the digital world, which introduced its constraints and opportunities. The introduction of CSS allowed for more control over styling, layout, and consistency, laying the groundwork for the structured design systems we use today.

However, the real shift toward interactive design systems came with the advent of mobile devices in 2007. With the 

, designers were suddenly dealing with new interaction models, such as touch gestures and sensors, in addition to the traditional web and desktop environments. This evolution pushed designers to think more at the component level, focusing on building systems that could scale across multiple platforms and devices.

When Google released Android, it expanded the mobile design landscape, followed by tablets, wearables, and VR headsets.

At the same time, design tools were evolving. Most designers, including Darren, initially used Photoshop, while some worked with Fireworks for web design. In 2012, Sketch emerged as the first dedicated UI tool, introducing "symbols" — reusable components that transformed the design process. These symbols were stored in libraries and led to the trend of "sticker sheets," where UI elements were laid out like Lego pieces for easy use.

"There are many ways to define a design system,"

 says Darren. Some see it as a collection of reusable components, while others view it as a set of patterns and shared practices that serve the purpose of building cohesive digital products.

He defined a design system as a tool that encapsulates all the decisions about how a product looks and behaves. The goal of a design system is to provide a unified framework that enables teams to work more efficiently and consistently.

, design systems fall into six categories: Brand, Tool, Product, Process, Service, and Practice. Darren's presentation focused on two key types: design systems as tools and products.

 include UI kits and code libraries like Bootstrap or React, which help designers and developers create digital interfaces.

 include governance, rules, and a backlog to ensure they evolve with the product.

He emphasized the critical need for aligning design and development within a system, showcasing how ProtoPie can bridge that gap. In the following sections, we’ll explore this in depth—keep reading to discover more.

The importance of interaction in design systems

While traditional design systems focus primarily on static UI components, interactive design systems incorporate motion and interaction design, which Darren identified as critical in modern product design.

Figma and ProtoPie are powerful tools that complement each other when building and managing design systems. Figma is excellent for creating static UI components, while ProtoPie brings those designs to life with advanced interaction and motion design. Here’s how they work together to streamline both design and development.

Figma: building the foundation of your design system

Figma is often the starting point for designers creating the visual foundation of a design system. In Figma, designers use UI kits to assemble static versions of interfaces. These designs serve as blueprints for developers, providing them with the visual structure they need to recreate the design in code. Figma is great at delivering these static designs, helping teams quickly iterate and collaborate on the visual aspects of their products.

However, Figma’s prototyping capabilities are basic, and while it can show simple transitions and interactions, it doesn’t cover the full scope of how a product will behave. This is where ProtoPie steps in.

ProtoPie: bringing interaction and motion to your design system

ProtoPie fills the gap between static design and real-world product behavior. It allows designers to add complex interactions, animations, and logic to the components they create in Figma. Once you export components from Figma to ProtoPie, you can simulate how users will interact with them, showcasing everything from motion effects to conditional logic.

This is especially useful for developers who need to understand how the design should behave, not just how it looks. By providing realistic, interactive prototypes, ProtoPie eliminates much of the guesswork and back-and-forth communication between design and development teams, ensuring that both teams are aligned.

Here’s a simple, step-by-step guide on how to build an interactive design system with ProtoPie and Figma.

First, you’ll begin in Figma by creating your static UI components. Once your components are ready, you can use the 

 to export them directly into ProtoPie. This is where you’ll start adding interaction and bringing the design to life.

Step 2: Create the interactive components

After importing the components into ProtoPie, the next step is to convert them into ProtoPie components. Each component in ProtoPie comes with its own set of variables, layers, and interactions, making it self-contained and easy to manage.

Keeping your components organized is key to maintaining consistency across your design system. ProtoPie, like Figma, lets you create 

 to store and manage your components. This is especially helpful if you’re designing for multiple platforms—mobile, tablet, desktop—since you can quickly switch between libraries as needed.

One of the standout features of ProtoPie is the ability to create interactive documentation. You can embed your interactive components into tools like Notion, allowing your team to not only see the design patterns but also interact with them directly in the documentation. This makes it much easier for developers and stakeholders to understand how each component behaves in the real world.

Darren highlighted several key benefits of using interactive design systems, mainly when using ProtoPie:

Interactive prototypes leave little room for misinterpretation. Developers have a clear blueprint to follow, reducing the likelihood of errors and miscommunication.

By providing a complete, interactive design system, teams can reduce the time it takes to build and launch new features. The interactive prototypes serve as a roadmap for developers, speeding up the development process.

ProtoPie helps ensure that interactions are consistent across platforms and devices. This consistency leads to a unified user experience, regardless of whether users interact with the product on a desktop, mobile, or wearable device.

Interactive design systems foster better collaboration between designers and developers. ProtoPie enables both teams to work from the same interactive blueprint, reducing the need for repeated meetings and clarifications.

ProtoPie offers a range of features that streamline design system management, making it easier for teams to work efficiently and deliver high-quality products. Here are some key benefits:

ProtoPie allows designers to create interactive prototypes without writing code, enabling faster workflows and saving time across teams. This results in a quicker path to testing and refining designs, reducing the overall time to market.

ProtoPie integrates smoothly with Figma, allowing teams to transfer static designs from 

 with ease. This seamless workflow helps create better user experiences by enabling interaction and motion design, which brings static components to life.

3. Interaction recordings and user testing

 on mobile and tablet devices to gather valuable feedback. This helps ensure a reliable handoff to developers by providing detailed insights into how the design should function in the final product.

, making it easy to create maintainable and scalable design systems. Teams can reuse components across different projects, ensuring consistency and efficiency while scaling design efforts.

Interaction Libraries Best Practices: The Mercedes Me App Case Study

Building Interaction Design Systems with Conditions & Variables

Getting started with ProtoPie interaction libraries

Products for purchase, SkeletonUI, and self-paced courses

Patreon link for subscription to courses and all videos with project assets

ProtoPie enhances collaboration between design and development, speeds up workflows, and ensures consistency in product delivery, making it an essential tool for managing modern design systems. Whether you’re just getting started or looking to optimize your design process, ProtoPie offers the tools you need to build compelling interactive experiences. Join over one million users and 

Learn how to use ProtoPie and Figma to create interactive design systems and see how ProtoPie bridges the gap between design and development.

How to Build Interactive Design Systems with ProtoPie and Figma

In the fast-paced world of game development, the ability to quickly prototype and iterate on user experiences (UX) and user interfaces (UI) is crucial. Riot Games, a renowned leader in the gaming industry, has embraced 

, an advanced prototyping tool, to enhance the design process of their celebrated games.

This case study delves into how ProtoPie has become an integral part of Riot Games' design toolkit, facilitating innovative UX/UI solutions that elevate player engagement and satisfaction.

Integration of ProtoPie into Riot Games’ workflow

Key features and benefits of ProtoPie at Riot Games

Game UX/UI prototyping involves creating early models of how players interact with a game's interface, including menus, in-game controls, and feedback systems. This initial modeling is important because it allows designers to test and improve the game's user experience and interface before moving on to final development.

Effective prototyping helps identify usability issues, ensures the game is accessible and enjoyable, and significantly reduces the risk of costly changes during later stages of development. By testing different designs early on, developers can ensure that the final product aligns closely with player expectations and preferences.

' mission to be the most player-focused gaming company in the world drives its commitment to developing engaging and beloved games. Known for hit titles like "League of Legends" and "Valorant," Riot Games serves a global audience with a passion for high-quality gaming experiences.

The company’s dedication extends beyond game development to pioneering in the esports arena and producing popular media like the Netflix series "Arcane."

What is interaction design at Riot Games?

At Riot Games, interaction design extends beyond the in-game experience to encompass all the touchpoints a player encounters on the path to the game. This includes everything from account management and social features like chat to the websites that promote the games and the various client interfaces, such as Riot Mobile.

Riot Games sees interaction design as the creation of a "magic moment" where visual design, sound, and user experience seamlessly come together. This moment is crucial for embodying the brand's values and enhancing the overall player experience. It is a meticulous, often behind-the-scenes process that shapes the contextual motion and aesthetics of the game. This transforms functional design into an engaging, tactile interaction that resonates with players.

What is the role of an interaction designer at Riot Games?

At Riot Games, the role of an interaction designer is multifaceted and vital to the game development process. Primarily, these designers are tasked with three major responsibilities:

1. Developing and contributing to a scalable interaction and component library

Interaction designers at Riot create and maintain a design system known as "Play," which houses a repository of predefined components like animations, sounds, and transitions to boost operational efficiency and ensure consistency across games. This system enables developers to easily access and implement these elements, streamlining the development process.

In the UX/UI prototyping phase, interaction designers construct and test functionalities that align with the organization's goals and facilitate decision-making.

3. Focusing on research and refinement through user testing

Finally, in collaboration with the research team, they continuously gather and analyze player feedback to refine designs, ensuring that the final products align closely with user expectations and enhance the overall player experience.

Before ProtoPie: fragmented workflow, lengthy render & preview times

Before adopting ProtoPie, Riot Games' prototyping process involved a workflow common to many companies, starting with designs in Figma, transferred via a program like AEUX, and finalized in After Effects. This workflow resulted in lengthy render and preview times, presenting several challenges:

 Using multiple applications made the process slow and hindered real-time collaboration and iteration.

 The fragmented workflow prevented the reuse of components, which complicated the development handoff and often led to misunderstandings and extended quality assurance processes.

 Static prototypes prevented stakeholders from fully experiencing designs, reducing the impact of presentations.

 The final outputs were bulky MP4 files organized in a grid-like format reminiscent of Google Sheets, which lacked interactivity and did not allow for immediate feedback. This setup made it challenging for developers to understand and execute the design intentions correctly.

Recognizing these challenges, Riot Games began searching for a tool that would better meet their needs by fitting seamlessly into their existing workflow, supporting collaboration, and allowing for high-fidelity prototypes that could easily be shared and understood across teams.

After ProtoPie: streamlined prototyping, faster iteration & easy handoff

ProtoPie has revolutionized the way Riot Games approaches game design. Key enhancements ProtoPie brought to their design process include:

ProtoPie allows for the integration of complex animations and interactive elements directly into prototypes, enabling designers to create high-fidelity simulations of dynamic and immersive game interfaces.

2. Faster iterations and cohesive designs

Since adopting ProtoPie, Riot Games has enjoyed faster and higher quality design iterations, leading to more cohesive and engaging player experiences.

ProtoPie's collaborative capabilities have been a game changer for Riot. The tool allows designers to share interactive prototypes via simple links, enabling immediate feedback and iterative design across teams. The use of password-protected links has also become a highly valued feature.

Robert notes, “Sending a link is a hundred times easier than downloading a 600MB file for a single interaction. There's no download required and no render times. It has made life much easier.” This ease of access significantly simplifies the handoff process to development teams.

Robert then discussed the key features of ProtoPie that he and his team use, highlighting the benefits ProtoPie has brought to their team.

 has been a game-changer for Riot Games, allowing them to effortlessly link multiple devices like 

, and desktop computers within their design workflow. This seamless integration is key for delivering consistent user experiences across various platforms, which is especially important for features like multi-factor authentication.

Customer Spotlight

Meta Achieves High-Fidelity Prototyping at Scale with ProtoPie

Granstudio Transforms Automotive HMI with XR Prototyping

How to Build Interactive Design Systems with ProtoPie and Figma

Revolutionizing Game UX/UI Design at Riot Games

Medical Device Prototyping: A Sunrise Labs Case Study

How Meta Uses ProtoPie for High-Fidelity Prototyping & User Testing

Prototyping at Design Agencies: Source's Success with Pathé Cinémas

4 Reasons Why Product Designers at Picsart Use ProtoPie

4 Reasons to Integrate RemotiveLabs and ProtoPie

Car UX Prototyping: The Mercedes Me App Case Study

How Medtronic Simplifies Insulin Dosing with ProtoPie

Enhancing Visual Effects in Filmmaking

Meta Case Study on Robotics Prototyping

The Washington Post's ProtoPie Journey

Prototyping the Future of Mobility With ProtoPie