You asked, and we listened! After hearing your requests loud and clear, we’re thrilled to finally introduce one of our community's most highly requested features—

This marks the beginning of a multi-stage rollout of Auto Layout, with this first release launching in 

. In this phase, we focus on applying auto layout to design elements and importing auto layout properties from Figma. This addresses a significant user pain point, boosting productivity and enabling a more seamless Figma-to-ProtoPie export for a faster, more efficient design workflow.

Looking ahead, future releases launching next year will expand Auto Layout to 

, providing a fully integrated solution for your design and interaction needs. Read on to explore the details of this beta release and how it can elevate your design process.

Auto layout is a design feature that automatically adjusts and arranges elements within a container based on defined rules and relationships. It allows designers to create responsive designs by specifying an element’s properties, such as padding, gap, direction, resizing options, and alignment.

Here are some of the most typical use cases:

: Automatically adjusts spacing and alignment when content is added, removed, or resized, such as in text boxes, image frames, or form fields.

: Maintains consistent padding, spacing, and alignment across components, which is especially useful for creating standardized layouts for cards, lists, and grids.

: Auto Layout makes it easy to update individual components, like buttons or navigation bars, ensuring that component instances automatically adjust consistently throughout the design.

, Auto Layout helps you create responsive designs by automatically adjusting how elements are arranged within a container based on specific layout settings.

There are several ways to apply Auto Layout in ProtoPie:

Select any object (single or multiple), right-click, and choose 

. This will automatically move the object(s) into a container and apply Auto Layout.

Select any object (single or multiple) and press 

 option in the Property panel or right-click the container and select 

: Choose horizontal or vertical alignment in the Property panel.

: Arrange child items through the Layers panel, using keyboard arrows, or directly on the canvas.

: Allow child items to resize to fill the parent container automatically.

: Set a fixed gap or let items automatically adjust to fit the available space.

: The Auto Layout option does not appear in the Property panel if you’re working with a Mask layer, a single non-container layer, or an audio layer.

What are the supported Auto Layout properties in ProtoPie?

The properties that support applying Auto Layout to layers in ProtoPie Studio include:

Check out our documentation to explore the 

With this release, ProtoPie now supports most of Figma's core Auto Layout properties, ensuring that your primary Auto Layout settings are kept when importing designs from Figma. However, some advanced features—such as ‘strokes,’ ‘canvas stacking,’ and ‘align text baseline,’ along with max/min sizing options—are not yet supported in ProtoPie.

Keep Figma and ProtoPie open and visible on your desktop during the import for optimal performance.

When importing top-level frames from Figma into ProtoPie Studio, these frames are converted into scenes, which removes any original properties, including Auto Layout settings. So, if a top frame in Figma has Auto Layout applied, it won’t carry over into ProtoPie Studio and will be omitted from the scene.

Q. Can I use Auto Layout with interactions and preview them in the Preview window or the ProtoPie Player app?

Interactions are not supported in the initial 

 release of the Auto Layout feature. In this phase, Auto Layout is focused on design elements and imports from Figma to enhance your workflow efficiency. Although you can add triggers and responses to layers with Auto Layout applied, when a layer within an Auto Layout is moved or scaled in the Preview window, the other layers will not move or scale to adjust as they do on the canvas.

However, Auto Layout for prototyping & interactions is coming next year—stay tuned for updates.

Q. Why can’t I see the Auto Layout option in the Interactions panel?

The Auto Layout option is only available in the Property panel under specific conditions. Here’s when it will and won’t appear:

When selecting and applying it to a single container.

When selecting and applying it to a Main Component.

When selecting and applying it to two or more layers.

, as Auto Layout cannot be applied to audio.

If you don’t see the Auto Layout option, check if your selection falls into one of these unsupported cases. 

This is just the beginning. In this first 

 release, Auto Layout enhances design elements and Figma imports, streamlining your workflow by importing Auto Layout properties and allowing you to edit them directly in ProtoPie for greater productivity and faster exports. Looking ahead, the next phase—set to launch next year—will bring Auto Layout to prototyping, offering a more robust and seamless integration that enhances both your design and interaction workflows.

Your feedback is invaluable in shaping the future of Auto Layout. Join our 

 to share your thoughts, ask questions, and stay updated on upcoming updates.

Adjust dynamic layouts, import auto layout properties from Figma, or create your own with flexible controls like direction and wrapping. Now in beta.

What’s New? Improved Import & Design with Auto Layout

Unlocking the future of prototyping for leading innovators

, the high-fidelity prototyping tool empowering designers and developers to create seamless digital and physical interactions, recently made a significant impact at the prestigious 

. Known as a hub for creative visionaries and digital innovators, this year’s DDD served as a platform for ProtoPie to showcase its capabilities, connect with industry leaders, and further establish its position at the forefront of design technology. ProtoPie CEO Tony Kim also presented ProtoPie’s advanced prototyping features.

The event attracted global heavyweights in design and business, including EY, Deloitte, AKQA, and the creative team from TikTok, among others. Notably, 15 representatives from Accenture engaged with ProtoPie, expressing keen interest in how its advanced prototyping solutions could transform their workflows and enhance client deliverables.

At the heart of the event, ProtoPie’s team demonstrated its unparalleled ability to prototype intricate user experiences that bridge digital and physical interactions. Attendees experienced firsthand how ProtoPie simplifies creating, testing, and iterating on prototypes, from dynamic app interfaces to hardware-integrated solutions. ProtoPie CEO Tony Kim gave a presentation on ProtoPie’s strong features, highlighting the importance of prototyping.

“Participating in Digital Design Days has been an incredible opportunity to engage with some of the most forward-thinking minds in the industry,” said Tony Kim, CEO of ProtoPie. “The level of interest and conversations we’ve had with companies like EY, Accenture, and TikTok reflect the growing demand for high-fidelity tools that allow teams to innovate faster and more effectively.”

ProtoPie’s presence at DDD strengthened its visibility among creative professionals and resulted in promising leads across key sectors such as consulting, tech, and advertising. With top-tier brands and agencies like Deloitte and AKQA exploring ProtoPie’s potential, the company is poised to expand its reach and influence in the global design community.

ProtoPie is a high-fidelity prototyping tool that bridges the gap between digital design and real-world interaction. Trusted by leading brands and agencies worldwide, including Google, Meta, and Microsoft, ProtoPie enables teams to create and test interactive prototypes with unparalleled accuracy and powerful integration capabilities.

 is an international event celebrating the best in digital creativity, innovation, and design. Hosted in Milan, DDD brings together global industry leaders, creative professionals, and tech enthusiasts to explore cutting-edge tools and trends shaping the future of digital design.

ProtoPie showcased its advanced prototyping tools at Digital Design Days in Milan, connecting with industry leaders like EY, Accenture, TikTok, and Deloitte.

ProtoPie Showcases Innovation at Digital Design Days in Milan

The holidays are here, and what better way to celebrate than with festive prototypes? We’ve curated five ProtoPie creations that showcase the magic of interactive prototyping, perfect for adding a touch of seasonal cheer to your projects. From IoT integrations to smartwatch apps, these prototypes highlight the versatility of ProtoPie.

Each Pie is linked so you can explore and replicate these creative ideas firsthand. Let’s dive in!

🔍 4. Spot the difference – holiday edition

Transform your Christmas tree into the star of your holiday decorations with this smart home app prototype. Leveraging ProtoPie Connect for seamless software-hardware integration and enhanced with a festive sprinkle of Lottie animations, this prototype brings your tree to life in a way that stands out.

Lottie animations for extra festive cheer

Design personalized holiday cards with this creative mobile prototype. Drag, rotate, and pinch interactions make it intuitive and fun to create  designs for your loved ones.

Get into the holiday spirit with a unique calendar that unveils its surprises day by day. Using 3D "Fling" triggers and a "dateNow" formula, each door unlocks only on the corresponding day to reveal a delicious pie recipe, making it a delightful countdown to the Holidays.

"Fling" Trigger with a 3D Rotate response 

Conditions and "dateNow" formula to ensure each door opens on its corresponding day.

Challenge your attention to detail with this festive twist on a classic game. Using variables to track game progress, this interactive experience adds a fun and engaging element to the holidays.

Ring in the New Year with this stunning smartwatch prototype. The app features a real-time countdown that triggers a celebratory animation at midnight, making it perfect for your New Year’s Eve plans.

Time formulas like 'diffDate' and 'dateNow'


Lottie animations for a dazzling finale



These festive ProtoPie prototypes are just the beginning of what you can achieve with ProtoPie.

From IoT integrations to real-time interactions, each creation showcases the power of ProtoPie to bring ideas to life in a magical way.

Whether you're looking to inspire your next project or just want to explore some holiday creativity, these prototypes are the perfect place to start.

 Download ProtoPie today and make your designs sparkle!

Explore interactive holiday prototypes to add seasonal magic to your designs.

5 Holiday-Themed Prototype Ideas

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

Increase the minute using detect and condition

In the end, you’ll be able to make something like this!

In the assets, you'll notice that the interactions for the 

 have already been created. This is made with the 

 feature. If you want to learn how to make a button based on Condition, please check 

How to Make a Toggle Button with Condition

1. Automate the centiseconds using a variable

　1. You are going to start working on the last two digits (centiseconds) and making them start and stop with the button. Create a new 

. Leave the variable's defaults so it will remain as a number and starting at 

. Drag out your debugger onto your preview screen so you can test your work.

 variable. Testing your start and stop button in the preview, you'll notice the numbers do continuously go up and will stop with the button.

. To do this, add a new trigger and select 

　5. Create a condition, that reads when the 

. It is very hard to notice this delay, but it is important for later on. Using your debugger, you can see that the value goes to 99 and then restarts at 0.

　6. Now, we want to assign this value to the text. Under the detect trigger, add a 

. This formula ensures that there are two digits in the centiseconds by inserting a 0 with single-digit numbers.

 Left-pad a text with another text, to a specific length.

2. Increase the seconds based on the centiseconds

　1. When the centiseconds reach 99, we want the seconds to increase by 1. To do this, add a variable and rename it 

. Drag the debugger onto your preview scene.

 under the Condition we just created and link it to the 

, the seconds will increase by 1. Change the start delay to 0.01. Do not make this repeat.

　3. Assign the variable to the text by adding a 

 and will add a 0 to all single-digit numbers.

　4. Make sure to change the start delay to 0.01 and that the Text response for the 

 response. The order of the interaction pieces is also important. Make sure that the 

 response. You do this because you want ProtoPie to trigger the 

3. Increase the minutes based on the seconds

This means that when the seconds reach 59, it will delay by 1 second before restarting to 0.

　3. Along with resetting the variable, you need to reset the text. Add another 

　4. To link the minute variable to text, create a variable and rename it "

 response and link it to the minute variable you just created. The formula will be 

 response under the assign, link it to the 

　6. In the preview window, when the seconds reach 

 response linked to the centisecond variable.

 (centisecond, second, minute) followed by 

 reset responses each linked to these three variables. Create 

 reset responses each linked to the text of these three variables.

　3. You also need to reset the start/stop button's to their original state. Select the 

 layer and create a reset response. Then, create a reset response with the 

Congratulations! Your stopwatch timer is ready

You explored many advanced techniques in this tutorial including using 

! Now that you've learned these techniques, consider how you can incorporate other strategies to make stopwatch timers for your unique designs!

Ready to bring your ideas to life? Download ProtoPie now to start building your next prototype, and don’t forget to share your amazing work on LinkedIn, X, or Instagram with #MadeWithProtoPie. We can't wait to see what you create!

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

Create a Stopwatch Timer using Formulas and Variables

Not all prototypes are created equal. Take low-fidelity versus high-fidelity prototypes, for example. While they’re both useful in their own ways, that doesn’t mean to say that they look or feel the same—or that they’re both equally valuable throughout all stages of the product development process.

In this post, we will explore the concept of fidelity in prototyping, highlighting the main differences between low-fidelity and high-fidelity prototypes and discussing when to use each type.

In prototyping, "fidelity" refers to the level of detail, accuracy, and realism of a prototype compared to the final product. Fidelity typically varies across three main levels: 

Often sketched or created with basic tools (e.g., wireframes).

Focus on basic structure and functionality, avoiding design details.

Useful for early-stage feedback and brainstorming.

Includes more accurate layouts, some interactivity, and basic UI elements.

Often created with digital prototyping tools, allowing for limited interaction.

Balances realism with flexibility, allowing quick iterations.

Useful for testing user flows and gaining feedback on specific interactions.

Highly detailed, with realistic UI elements, content, and interaction.

Mimics the final product as closely as possible, sometimes including animations and transitions.

Allows for accurate user testing and demonstration of final design.

Useful for validating design, usability, and functionality before development.

The choice of fidelity level depends on the design stage, feedback goals, and available resources. Low-fidelity prototypes are typically faster to create and more flexible, while high-fidelity prototypes are more similar to the final product but require more time and resources. In this article, we will explore the differences between these two types of prototypes.

Low-fidelity prototyping is a quick, simple way of evolving an initial idea or concept into a somewhat more tangible representation of your final product. The goal of a low-fidelity prototype is simply to outline the flow and to check the usefulness and usability of your proposed functionality. Lo-fi prototypes can either be made digitally or on paper. Examples include:

The key benefits of low-fidelity prototypes are that they are fast, easy, and affordable to create. It’s easy to make changes and test new iterations; anyone can produce them, and they encourage design thinking since the prototypes are clearly not finalized.

The downsides of low-fidelity prototypes are that they have limited interactivity, lack realism, are hard to use for user feedback, are sometimes too basic to reflect the user experience of the finished product, and can oversimplify complex issues. Most crucially, they require users to make their own assumptions when imagining how they would use the product (and what this experience will feel like.)

You want to quickly learn the scale of your project;

You want to test the idea first before you start development;

You keep the idea within the product team.

Let’s briefly examine the two main types of lo-fi prototypes: paper and click-through.

Paper prototypes might be the easiest, simplest way to create a lo-fi prototype—but that doesn’t mean to say that they aren’t valuable. Paper prototypes are great for fleshing out concepts while they’re still in their infancy. You can quickly scribble down a few sketches, see how they look, and get feedback. If something needs to be changed, you can literally go back to the drawing board.

Paper prototypes are quick to create and inexpensive, and some designers might even feel more creative when using pencil and paper. They’re also pretty rough and ready—meaning you can generally elicit more honest feedback from people who might otherwise feel hesitant about criticizing a fully formed digital prototype.

That said, paper prototypes aren’t suitable for the later stages of development. You can’t accurately recreate the digital experience on paper—so it certainly has its limitations. Plus, for many design teams, paper prototypes might just feel slightly unnecessary. If you’re going to be creating a digital prototype anyway, why even bother making a paper version?

Click-through prototypes take paper prototypes to the next level, allowing users to test the user flow in greater detail. In short, click-through prototyping tools let you upload photographs of paper prototypes—or digitally recreate them using interactive software widgets—into a UX design application.

For each screen the user sees, you can create multiple hotspots to redirect them to other screens. Imagine your first screen is a log-in page, but you want to demonstrate what happens once a user logs in. By clicking on the ‘login now’ button, the click-through prototype will take you to the next logical step/screen that the user would see.

Of course, click-through prototypes are still a long way off the final product. However, they do make up for one of the major drawbacks of paper prototyping: not being able to experience the user flow. They are, therefore, another useful lo-fi prototyping model that can be used in the early stages of product design.

If you want to make your own click-through prototypes, check out tools like 

High-fidelity prototypes are more advanced, with their aesthetics and functions far closer to that of the final product. You’ll typically create high-fidelity prototypes further along in the process once a team has a firm grasp of what they want the finished product to embody, using a tool like 

 to help you bring your vision to life. High-fidelity prototypes are generally used for 

 with real users or to get final design approval from stakeholders. Examples of high-fidelity prototypes include

The key benefits of high-fidelity prototypes are that they provide greater insight into what the end product will look like, are instrumental in testing and validating individual design decisions, and are great for getting buy-in from clients and stakeholders.

The downsides of high-fidelity prototypes are that they take longer to create, are costlier, and users may mistake the prototype for the finished product and form biases.

You want to start development before you decide on the “final” design;

You have a lo-fi that is tested and acceptable;

You want to take your lo-fi prototype to the next level;

You want to pitch the idea to a non-technical audience.

Let’s now dive into digital and coded prototypes in further detail.

If you’re creating a digital product/experience, then you’re eventually going to have to create a digital prototype. There are no two ways to do it. That’s where digital prototyping software, such as 

, comes in. It allows designers to recreate the end product in detail, producing aesthetically pleasing, interactive prototypes that are close representations of the final user interface.

Designers can demonstrate what their experience will look like and how it will feel, which provides product teams with invaluable feedback before they go ahead and launch their final product. However, they also take a fair amount of time and energy to create. So, for that reason, many product teams prefer quicker and easier alternatives (such as paper prototyping) earlier on throughout the design process.

Coded prototypes are the closest version to the final product that designers will produce, both in terms of how they look and behave. This means they’re great if you want to gather any last-user feedback before bringing a product to market.

However, not everybody can produce coded prototypes. To do so, you first need to code—which means that many designers cannot create these hi-fi, complex prototypes without asking for engineering help.

Making a hi-fi prototype isn’t as complicated as you might think. In fact, these days, you don’t even need to know how to code.

 that empowers designers to build highly interactive prototypes for all digital products. It integrates seamlessly with popular design tools like 

, allowing you to import all existing designs in just a few clicks.

With a smooth design workflow and a unique conceptual model that harnesses powerful 

, ProtoPie opens up limitless possibilities for crafting beautiful, functional prototypes—regardless of your skill level or experience.

, our free learning platform, and gain access to a wealth of resources crafted to elevate your prototyping skills.

ProtoPie offers high-fidelity prototyping with a low barrier to entry. Ready to get started? 

Explore the key differences between low-fidelity and high-fidelity prototypes to determine which best suits your design needs.

Low-Fidelity vs. High-Fidelity Prototyping: Key Differences Explained

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.

ProtoPie Blog

What’s New? Improved Import & Design with Auto Layout

Latest posts

ProtoPie Showcases Innovation at Digital Design Days in Milan

5 Holiday-Themed Prototype Ideas

Create a Stopwatch Timer using Formulas and Variables

Low-Fidelity vs. High-Fidelity Prototyping: Key Differences Explained

Granstudio Transforms Automotive HMI with XR Prototyping

How to Prototype a Dropdown Menu with Components

ProtoPie vs. Figma: Which Tool is Better for Advanced Prototyping?

How to Use QR Code Interactions in Your Prototypes

What’s New in ProtoPie Genie 2.0? Camera, Voice, Web Embeds, and More

How to Build Interactive Design Systems with ProtoPie and Figma

Lesson 2: How to Use the Handoff Feature

Dynamic Prototyping with ProtoPie Connect: Features, Use Cases, and More

What’s New? Optimized Cloud Storage Experience

ProtoPie Wins 2024 UX Design Award in Product Category