Static mockups are fine - until they aren’t. Especially in FinTech, where real-time insights matter, a simple image won’t cut it. To create a truly immersive and realistic user experience, you need dynamic, live data. Imagine your prototype's expense charts and financial data updating in real-time, just like a finished product.

In this tutorial, we'll walk you through a step-by-step guide on how to integrate Google Sheets with your ProtoPie prototypes. This guide will show you how to pull data directly from a spreadsheet to create powerful, data-driven prototypes.

Part 1: Retrieving Your Google Sheets Data

The first step is to get your data from Google Sheets into ProtoPie. We'll use ProtoPie Connect and its built-in API plugin to make this happen.

Step 1: Set Up the API Request in ProtoPie Connect

In the ProtoPie Connect API plugin, you'll need to create a new request with the following details:

 The URL is a combination of your Spreadsheet ID, the data range you want to import, and your unique Google API key.

The Spreadsheet ID is the unique identifier for your Google Sheet.

You can find it directly in your Google Sheet's URL. It's the long string of characters located between /d/ and /edit.

Next, you need to tell ProtoPie which data to grab. The range specifies the cells you want to import.

This can be a set of columns (e.g., A:C) or the entire sheet.

You can specify the sheet name and range using formats like Sheet1!A1:D1 or just list the sheet name to import all its data.

Step 4: Generate Your Google Sheets API Key

This key authorizes ProtoPie to access your sheet data.

3. In the search bar, look for the "Google Sheets API" and 

6. Your key will be generated. Copy it and add it to your URL in ProtoPie Connect.

Once you've put together your URL, test the request in ProtoPie Connect. If you get an error, the most common issue is the sharing permission on your Google Sheet.

 Make sure your Google Sheet's sharing setting is changed from "Restricted" to 

 A restricted sheet requires an OAuth authorization, which could be used if you want to keep your data restricted but still use it in your prototype. Though that type of authorization will not be covered in this tutorial.

Once the API request is successful, ProtoPie receives a long string of raw data from your sheet. Now, we need to parse this data (break it apart) so we can use it in our prototype.

The data from Google Sheets is organized into "values," which represent the rows in your spreadsheet. The first row typically contains your column titles (e.g., "Name," "Date," "Amount"), and the subsequent rows contain the actual data.

Step 1: Parsing Basic Data with parseJson

The parseJson() formula is the key to accessing specific pieces of information. Let's look at a basic example for retrieving metadata:

 parseJson(metaData "values."+ (ID+1)+".0")

This is the variable where you assigned to store the raw data from the API call.

 This tells the formula to look inside the "values" section of the data.

 This selects the row you want. We use +1 because the first row (row 0) is usually the titles, and we want to access the actual data rows that follow. So, to get data from the first data row (which is the second row in the sheet), you look in the second set.

This selects the specific item within the row. Data items in each row are indexed starting from 0. So, .0 gets the first item, .1 gets the second, and so on.

Step 2: An Advanced Example for Dynamic Chart Data

Sometimes, the data structure from Google Sheets isn't ideal for direct parsing. For instance, if you have monthly expenses listed year by year, finding a specific month's expense requires a workaround.

 parseJson(googleSheet,"values."+((year*12)+ monthID +1)+".2")

This formula might look complex, but it's just using math to pinpoint the exact data we need.

We use variables for the desired year and 

 This part does the heavy lifting. If your data has 12 months for each year, this calculation skips down the rows in blocks of 12 to get to the correct year.

: After finding the right year, this adds the month's number to find the right row.

: This would grab the third piece of data in that row (e.g., the expense amount).

And there you have it! By connecting Google Sheets to ProtoPie, you can move beyond static designs and build prototypes that are as dynamic and responsive as the real thing. You can now pull live data to power charts, lists, and other components, creating a richer, more convincing user test.

Remember to generate your own Google API key and set your sheet's permissions correctly.

Go beyond static mockups by integrating Google Sheets with ProtoPie to create dynamic, data-driven prototypes that respond in real time.

Effortless Integration: Connecting Google Sheets to Your ProtoPie Prototypes

There have been discussions recently about team collaboration in ProtoPie and what kinds of best practices there might be. One of the strengths (and weaknesses) of ProtoPie, much like Figma, is that there are often multiple ways to achieve the same result. While this is beneficial for rapid development, it can pose challenges for team collaboration.

 is a crucial step in simplifying collaboration. Learning to build well-structured, reusable components is a key skill for effective teamwork. This tutorial will demonstrate some best practices for constructing reusable components within a ProtoPie library.

For this guide, I will be using components within a local pie. However, for team collaboration, these would ideally be built in a shared library. This allows updates to be shared among the team, ensuring consistency across all pies.

To keep things simple and make the core concepts clear, I'll use the humble radio button as our example. Imagine a game with an initial screen where the user must choose a player ('Player 1' or 'Player 2') or a difficulty level ('Easy' or 'Hard').

The starter Pie for this tutorial has this exact setup, but it's all hard-coded, with no attempt at reusability. If you examine the file, you’ll immediately see the potential for reusability, as the code for all four of the radio buttons is essentially the same.

To truly understand the value of components, try adding a third difficulty level ('Moderate') to the starter pie. You'll find that this requires numerous edits, and it's easy to miss a small change and break the prototype. Furthermore, as you add more buttons, the list of triggers and responses for the scene becomes increasingly congested, and that's just to make the radio buttons work, without even considering the interactions that react to their input.

Once you're convinced of the benefits, we can proceed with the following steps.


Select the container named “Name Buttons” and choose Create Component. Rename the component to “Radio Buttons” and begin editing it. Ensure the Container Layer is set to Auto Layout (Hug and Hug). Finally, change the name of the text variable “Name” to “Value”.

Select "Button 1," copy it, and use “Paste with Linked Triggers” five times. You should now have six radio buttons, with layers named from Button 1 to Button 6.

Go through all the layers within the component and edit the layer names to be accurate. For example, the "Label" field in "Button 4" should be renamed to "Label 4" instead of "Label 1."

Next, review the list of triggers and responses. Change the descriptions to accurately reflect what each one needs to do. It's much better to do this before editing the responses, as it makes it easier to review each action against its description.

Now, edit the actual triggers and responses. The assignment of a label to the 'value' variable needs to be adjusted for reusability. Instead of "Player 1," use expressions like ‘Label 1’.text. With six buttons, you'll also need to ensure that five buttons are turned off when one is turned on. This means the response for setting the opacity of 'On 2' to 0 needs to be duplicated four times for the additional buttons.

Preview the component to ensure that the new buttons update the correct indicator.

We need a way to send the updated value back to the main scene. To do this, add a trigger for the 'value' variable and use it to send a new message (let's call it NEWVALUE) to the parent. Include the 'value' variable as a parameter in this message. After setting this up, you can return to the scene.

Back in the main scene, delete the old “Difficulty buttons” container. 

Drag a new instance of the “Radio Buttons” component into the scene and name this layer “Difficulty buttons.”

The instance that is already there should be renamed to “Name Buttons.”

Step 9: Receive Messages from the Component

Add a Receive trigger to the scene to listen for the NEWVALUE message from the child component.

Assign its parameter to the appropriate variable. 

Then, duplicate this trigger and configure it for the other child component and the other variable.

In the "Name buttons" instance, decide how many player options you want and hide the remaining radio buttons. Change the labels for the visible buttons as needed. Repeat this process for the "Difficulty buttons" set.

You should now have a functioning prototype with two sets of radio buttons. You can preview the pie and see the correct values being assigned to the 'Name' and 'Difficulty' variables. While the button labels are correct now, we will explore further customizations next time.

If you compare our starting point with our final result, we now have a scene with very simple triggers and a robust component that can deliver any set of 2-6 radio buttons as needed. Adding a third set of buttons is now a straightforward task.

In the next tutorial, we will enhance this component further, adding the ability to display selected buttons differently and perhaps even incorporating different selection behaviors.

For an even more in-depth guide, see the full process in action in this video walkthrough by 

 ProtoPie Reusable Components Tutorial Part 1

A Step-by-Step Tutorial by David Gilmore for Better Team Collaboration.

A Guide to Creating Reusable Components in ProtoPie - Part 1

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

We're thrilled to share some fantastic news! ProtoPie has been recognized as the 

 in the first-ever UX Tools Design Tools Awards. The award is based on comprehensive data collected from 2,220 respondents in the design community, celebrating tools that achieve the highest reported user satisfaction above a certain usage threshold. 

According to the survey results, ProtoPie received an outstanding 

 – a survey high – and was noted for 

"ruling the advanced prototyping category." 

"Specialists love it more than the market leaders in this category."

For years, UX Tools has been a go-to resource for designers seeking insights into the best tools for their workflow. Their annual survey is highly anticipated, and we're incredibly honored to be featured so prominently in their new awards program. The recognition as 

 means the world to us. It underscores our commitment to empowering designers with a powerful, yet intuitive, high-fidelity prototyping tool. 


This achievement wouldn't be possible without our dedicated users. Your continuous feedback, your passion for creating groundbreaking interactive experiences, and your trust in ProtoPie inspire us every single day. This award is as much yours as it is ours.

We want to extend a sincere thank you to 

 for this recognition and to every designer who participated in the survey. We're excited to continue pushing the boundaries of prototyping and delivering a tool that not only meets but exceeds your expectations.

To learn more about the Satisfaction Leader Award and see the full results, visit the 

Stay tuned for more exciting updates from ProtoPie!

Celebrating the voices of 2,220 designers: ProtoPie leads in satisfaction and rules advanced prototyping in the UX Tools Awards.

ProtoPie Honored as Satisfaction Leader in Inaugural UX Tools Design Tools Awards!

 - ProtoPie recently marked a significant milestone with its successful first-time participation in an internal forum hosted by Gasgoo & Geely, one of China's leading automotive manufacturers. The event proved to be a remarkable platform for ProtoPie, resulting in valuable exposure and promising opportunities for future collaborations within the automotive industry.

ProtoPie's booth was a focal point of the event, attracting considerable attention from engineers, designers, and product managers from Geely and its sub-brands, including 

. The booth's design was lauded for its clean, modern aesthetic that aligned seamlessly with ProtoPie's brand identity. Visitors engaged in meaningful discussions, gaining a deeper understanding of ProtoPie's capabilities and use cases. The event merch, particularly the creatively designed tote bags, also received overwhelmingly positive feedback.

Booth visitors loved the merch ProtoPie handed out!

A key highlight of the event was a visit to the ProtoPie booth by the 

Vice President of Geely Auto and Head of the Central Research Institute.

 Their expressed interest in further collaboration with ProtoPie marked a pivotal moment of recognition and validation for the company at the forum.

Adding to the event's success was a well-received presentation by ProtoPie's representative, Link, on 

"Prototype-driven HMI interaction design innovation and validation"

. The presentation resonated strongly with the audience, leading to a surge of visitors to the booth, all eager to experience the demo firsthand. This direct engagement further solidified the attendees' comprehension of ProtoPie's innovative solutions.

Link Li, APAC Business Development Manager at ProtoPie, on "Prototype-driven HMI interaction design innovation and validation"

The event underscored the growing importance of advanced HMI solutions in the automotive sector and highlighted ProtoPie's potential to become an invaluable partner for industry leaders like Geely. The positive reception and high-level interest garnered at the forum have laid a strong foundation for ProtoPie's future endeavors in the automotive space.

ProtoPie's Debut at Geely Forum Sparks Collaboration Buzz

Geely Forum Sees ProtoPie Drive Conversation on Future of Car HMI

Fresh off the electrifying atmosphere of 

, the ProtoPie team is still buzzing! Hosted by the 

, this wasn't just another tech event; it was a peek into the future of mobility, and boy, was it exciting! Pleos 25 rolled out the "

," a groundbreaking initiative set to turbocharge how developers create the next wave of movement.

Imagine a world where developers get their hands on rich mobility data, futuristic tech, and even direct vehicle control via SDKs and APIs – 

 The big question on everyone's mind was: what happens when Hyundai's cutting-edge tech collides with the brilliant minds of developers? 

So, What Went Down at Pleos 25 for ProtoPie?

We were right in the thick of it, showcasing how ProtoPie, our super-intuitive no-code prototyping tool, is ready to help developers and designers craft mind-blowing experiences in this new mobility landscape. And guess what? People were 

 curious minds flocked to Pleos 25, all eager to dive into the future.

 We connected with a large number of super-relevant industry players – think 

Hyundai Motors, Hyundai Autoever, 42dot, and Lotte Innovate

! They saw the ProtoPie magic and wanted in!

 Our awesome team of ProtoPioneers made all this happen on a tight schedule and still managed to make it one of our most successful events yet – talk about impact!

Our Recipe for an Unforgettable Pleos 25:

We didn't just show up; we brought the fun 

 were a total crowd-pleaser! Nothing like a cool souvenir to remember the future of mobility by.

 Our pre-event outreach meant we landed at Pleos 25 with a list of eager developers and businesses ready to chat.

Your Demo Roadmap (aka Experience Cards!):

 were leading attendees through our coolest demos, ensuring they saw just how ProtoPie could impact their world on the new mobility platform.

 This wasn't just a demo; it was a showstopper! We showed off ProtoPie's power to link up multiple devices and integrate with custom hardware, essential for those sleek future in-car experiences.

 We took attendees on a virtual ride with our 

. Immersive 3D UIs within mobility? Yes, please!

 really talking! They loved seeing how ProtoPie's ecosystem could supercharge their workflows on the Pleos mobility open platform.

 VR automotive HMI experience by combining hardware, VR, and ProtoPie!

Pleos 25 was a blast and a huge win for ProtoPie! We jammed with an amazing crowd of tech leaders and developers, got them excited about prototyping, and showed everyone that ProtoPie is ready to help build the user experiences that will define 

. The energy was incredible, and we can't wait to see the awesome collaborations and innovations that will roll out from this fantastic link-up between developers and the Hyundai Motor Group.

, ProtoPie is just getting started in the fast lane of future mobility!

Recapping Our Electrifying Time at Hyundai's Groundbreaking Mobility Event!

ProtoPie Plugged In and Amped Up at Pleos 25!

Auto Layout: you know it, you use it. It helps make sure everything adapts smartly to different content and screen sizes, keeping designs consistent without tons of extra work. But let's be real: getting those awesome static layouts to feel truly 

 in a prototype often meant messy workarounds or just... faking it.

Well, you can forget about that headache! We're super excited to roll out 

 in ProtoPie! This isn't just about copying static rules; it's about bringing real, dynamic, interactive behavior straight into your prototypes. Now, your designs won't just 

Here’s how Auto Layout in ProtoPie is reshaping high-fidelity prototyping.

Inside Auto Layout Upgraded: The Key Updates

 Elements now resize responsively within containers. What you preview behaves just like what you’ve designed, no more mismatches.

 Layouts respond live to user input and triggers, bringing real-world behavior into your prototypes.

 Say goodbye to manual alignment and screen duplication. Auto Layout handles the structure, so you can focus on the experience.

Auto Layout Upgraded enables reactive, on the fly scaling of your prototypes!

Design teams face enough complexity as it is. ProtoPie’s Auto Layout helps simplify the process, speed up iteration, and elevate testing. Here's how:

 Build one prototype that supports multiple user journeys, eliminating the need to duplicate screens for every scenario.

 Whether it’s e-commerce carts or onboarding paths, test variations without rebuilding flows.

 Easily accommodate edge cases and dynamic content without compromising quality.

 Catch layout issues early and iterate with confidence using prototypes that respond like the real thing.

Sneak Peek: Smarter & Smoother Prototyping in Action

1. AI Chat Flows: Dynamic Conversations, No Hacks

Gone are the days of one-answer-per-screen setups. Text bubbles now resize automatically to fit responses, ideal for prototyping AI assistants, chatbots, and support flows. Realistic chat UX, zero layout workarounds.

2. Social Feeds: Real-World Content, Seamlessly Displayed

Auto Layout makes scrollable feeds a breeze. From long text to multiple images, content adapts effortlessly, maintaining clean and consistent spacing without requiring manual labor.

3. E-commerce Flows: One Prototype, Every Scenario

Whether it’s promo codes, cart updates, or shipping options, Auto Layout adjusts layouts in real time. Prototype complex checkout experiences with fewer screens and better testing coverage.

We’ll dive deeper into each use case in upcoming blog posts, so make sure to keep an eye on our feed!

Figma + ProtoPie: A Truly Seamless Handoff, Finally

Designers love Auto Layout in Figma. But translating it into 

 high-fidelity prototypes used to mean manual effort, or worse, compromised fidelity.

Now, ProtoPie not only supports layout behaviors similar to Figma’s, such as direction, padding, and spacing, but also adapts the layout in real-time to triggers and responses. Even better, most Figma Auto Layout properties now carry over 1:1 during import, making the transition smoother than ever.

Streamlined workflow from Figma to ProtoPie!

 Layout logic takes care of the details, freeing you up to focus on creativity.

 Prototype smarter without duplicating screens for every case.

 Developers can follow the layout logic more easily, reducing confusion and rework.

 What you see in ProtoPie is what your stakeholders and users will experience.

 Clearer design-to-dev alignment minimizes expensive miscommunications and design debt.

 Scale prototyping efforts and handle more complex scenarios with your existing team.

 Faster, broader testing cycles lead to quicker user insights and smarter product choices.

 Higher fidelity prototypes help catch costly errors early, ensuring better final quality.

Put the new Auto Layout features to the test. Build a responsive prototype, share it online, and don't forget to tag us; we'd love to see it!

For tips, feedback, and connecting with other users, jump into the 

No more pixel-pushing, just responsive, real-world UX prototyping at lightning speed.

From Static to Smart: Prototyping Just Got Dynamic

Are you ready to take ProtoPie to new heights? We have an incredible deal that will enhance your design workflow and give you more time to develop incredible interactive prototypes. Welcome to the maxed-out performance of ProtoPie with a huge discount on the Pro plan!

ProtoPie Blog

ProtoPie Honored as Satisfaction Leader in Inaugural UX Tools Design Tools Awards!

Latest posts

Effortless Integration: Connecting Google Sheets to Your ProtoPie Prototypes

A Guide to Creating Reusable Components in ProtoPie - Part 1

Meta Achieves High-Fidelity Prototyping at Scale with ProtoPie

Geely Forum Sees ProtoPie Drive Conversation on Future of Car HMI

ProtoPie Plugged In and Amped Up at Pleos 25!

From Static to Smart: Prototyping Just Got Dynamic

Join ProtoPie’s Elite Team With 20% Off on Pro Plan 🚀

Become a ProtoPie Ambassador

Automotive UX Design with ProtoPie and RemotiveLabs

Driving the Future of Auto UX: ProtoPie at Gasgoo HMI 2025

Automotive UI Prototyping with Real Car Data

ProtoPie vs. Play: High-Fidelity Prototyping At Different Levels

Pi Day UX Challenge 2025

UX Spring Cleaning! Declutter & Simplify To Win