Protopie Drag And Drop

Are you looking for an easy and efficient way to test your prototypes on different devices and browsers? Look no further than ProtoPie Connect! This powerful tool allows you to seamlessly test your prototypes on a variety of smart devices and desktop browsers. Whether you want to test prototypes on your own device or share them with others, ProtoPie Connect has got you covered.

Adding Prototypes to ProtoPie Connect

Before you start testing your prototypes, you need to load them into ProtoPie Connect. It’s a simple process that can be done in a few easy steps:

  1. Click the + New button or drag-and-drop your prototypes into ProtoPie Connect’s interface. If you are an enterprise user, you can also open prototypes directly from ProtoPie Cloud by selecting Cloud Pie.

  2. Select the prototypes you want to add and click the trash icon to remove any prototypes from the list.

  3. To replace a prototype, simply click on the two-way arrow icon and upload the new prototype file. It’s worth noting that adding a new prototype creates a new pieid, while replacing a prototype reuses the same pieid as the previous one.

Arranging Pies into Groups

To keep your prototypes organized and easy to manage, you can group them together in ProtoPie Connect. Here’s how you can do it:

  1. Click on the Group icon to create a new Pie group.

  2. Drag and drop your prototypes into the group. Make sure to expand the group before doing so.

  3. If you want to move a prototype from one group to another, simply drag and drop it into the desired group.

  4. You can rename a group by double-clicking on the group name and entering a new name.

  5. To delete a group, hover over it with the cursor and click the Trash icon.

Testing Prototypes Using ProtoPie Connect & ProtoPie Player

ProtoPie Player is a free companion app for ProtoPie Studio and ProtoPie Connect. It allows you to view, experience, and test any prototypes added to ProtoPie Connect on iOS, iPadOS, and Android devices. There are three ways to connect ProtoPie Player to ProtoPie Connect:

  1. Scanning the QR code: Make sure your computer and smart device are connected to the same WiFi network. Click on Connect for the prototype you want to open in ProtoPie Connect and select QR Code. In ProtoPie Player, tap on the Scan QR Code button and scan the QR code to run the prototype.

  2. Entering the IP address: Ensure that your computer and smart device are connected to the same WiFi network. Tap on Type IP Address in ProtoPie Player and enter the IP address shown in ProtoPie Connect. Tap on the Connect button to run the prototype on your smart device.

  3. Using a USB cable: Connect your smart device to your computer using a USB cable. In ProtoPie Player, select USB Connection and your device will be automatically detected. Click on the Connect button to start testing your prototype.

Testing Prototypes on Web Browsers

If you prefer to view your prototypes on a web browser, ProtoPie Connect provides two methods to do so:

  1. On the same machine: Simply click on the Web Browser icon next to the prototype you want to open. The URL will have the format http://localhost:9981/.

  2. On a different machine: Ensure that your computer and the other machine are connected to the same WiFi network with ProtoPie Connect. Open any web browser on the other machine and enter your ProtoPie Connect IP address in the address bar. The ProtoPie Connect interface will be displayed. Click on the Web Browser icon next to the desired prototype to open it. The URL will have the format http://protopie.connect.ip.address:9981/.


  • How to debug messages in ProtoPie Connect? To debug messages in ProtoPie Connect, follow these steps:
    1. Open ProtoPie Connect and click on the Debug Messages icon.
    2. Review the messages displayed to troubleshoot any issues with your prototypes.

With Protopie Connect, testing prototypes has never been easier. Whether you’re a beginner or an experienced designer, this drag and drop tool is sure to streamline your prototyping process. Start using ProtoPie Connect today and bring your design ideas to life!