Something you'll want to do quite often when building a prototype is to allow a user to type input into a text field. 

makes it really easy to do this. In this tutorial, you'll see just how easy it is to allow your users to type in some text and to do something with it.

How to prototype an interactive text field

Learn more about interactive text input fields

To follow along with this tutorial, download this sample Pie and open it in Studio.

We'll also preview the experience as we go directly on our device. In order to do this, you'll need to install the 

 app on your phone or tablet. ProtoPie Player is a powerful and free app that allows you or anyone you share your Pie with to run your prototype on their device as if it were a native mobile experience.

By the end of this tutorial, you'll have learned how to:

Add a text input box to your Pie (prototype)

React to your user pressing the keyboard's return key to signify they are done typing

Build and call a web URL - this will be sneak preview of an advanced ProtoPie feature called Formulas, which we'll be covering in more detail in the next article.

How to prototype interactive text fields 

To learn how to create dynamic text input fields, check out the video tutorial or follow the detailed step-by-step guide below.

Open the example Pie file. It has a single background image layer that looks like Google's image search UI. 

 menu item in the top-left set of icons. Click it and choose 

Drag to draw your input field anywhere you like on stage. 

We'd like the input box to be perfectly sized inside the pill shape in the background.

Let's rename the text box to be something more meaningful. Double-click the layer, and name it 

 It will be important later that this is named exactly 

 with a lower case s or anything other than 

We'd like the input box to look seamless against the background. Remove the grey background color from the text box by unchecking the box beside 

Currently, the text box has the phrase "placeholder" as its placeholder text. You can change it in the properties panel in the 

 You can change the color and opacity of the placeholder text here as well.

There are more customization options at out disposal. For example, you can choose what kind of keyboard the will appear when you focus the field, and whether the input box should be a password field.

 will tailor the keyboard to the particular type of information you'd like to capture. For example, if you choose 

, a numeric keypad will appear when you focus the field. Choosing either of the password options will mask the entered text instead of displaying the characters as typed.

In our case we're capturing a search term. So let's choose 

The second option we have under Keyboard Options is what the label 

Lastly if you're designing for iOS, you can choose whether you'd like the light or the dark theme.  

In the Studio Preview, click on the text box. You should see the on-screen keyboard appear. Your first instinct might be to click on the keyboard keys in order to type some input. If you try it, you'll see that doesn't work. That just causes the text box to lose focus, hiding the keyboard.

When you preview text entry in Studio on your desktop computer, you need to type with your physical keyboard. The on-screen keyboard is just a placeholder image in Studio.

Let's instead run this on our device so we can type on the keyboard directly. We're going to use the ProtoPie Player app on our device to do so. If you haven't done so already, install ProtoPie Player on your device using the links you'll find above in the 

 in the set of top-right icons. This will reveal a QR code. Leave this visible, as we're going to need it in a moment.

On your device, start the ProtoPie Player app. You'll be greeted with this screen:

Click Scan QR Code and scan the code you revealed above. Your Pie should now start on your device.

For this to work your device needs to either be on the same WiFi as the computer running Studio, or your device needs to be connected to the computer running Studio with a USB cable. If your Pie won't start on your device, double check that your phone is connected in one of these two ways.

Tap on the text box on your device. A real keyboard will be displayed that you can type on. You'll either see a native iOS or Android keyboard depending on the device you're using.

We'd like our experience to take action once the user has tapped the Search key in the keyboard, signifying they are done typing (Remember in step 2 we changed the label for the Return key to be 

 Trigger to take action when this happens.

 Trigger. In the properties panel, configure it to be associated with the 

Any Responses you add underneath this Trigger will fire when the user taps the Return (i.e., 

This next little bit might seem cryptic. We're going to use one of ProtoPie's advanced features called 

 in order to build a URL and send it to a browser. Don't worry if this looks completely foreign to you. We're going to go into much more detail on Formulas in the next article. For now, just follow along step-by-step.

 Response. A Link Response can be used to open a web browser tab to a specific URL.

We'd like to build a dynamic URL using the input the user has typed in order to execute a Google Image Search. Since we don't know what the user has typed until the press Return, we need to build it on the fly. For this we will use a Formula. In the list under Link, choose 

When you click the box below this drop down, you will see a little 

 icon. This means you can create a formula for the link's URL!

 icon. The field will expand, giving you more space to type.

Type exactly (including the quotations marks) or copy and paste the following text into the formula field:

Before we move on, I'll offer a bit more of an explanation as to what we just did. Whenever you type into an input box, the value of whatever you typed is stored in a property of that layer called 

. We created the formula by joining together three bits of text:

a bit of known text — this part is always the same: 

another bit of known text — again, always the same: 

 Remember in the first step where we named the input layer exactly 

 layer directly by name. Layer names are 

Again, don't worry if this looks complicated. We're going to cover Formulas in more depth in the next article. The important takeaway here is that whatever your user has typed into the input box is stored as a property of that layer and available for use in your Pie.

To update your device with the latest changes, click 

You should now be able to execute an image search. Type whatever you'd like to search for, then tap 

Explore ProtoPie's text input options and make your typing interactions as dynamic as possible.

Lesson 6: Interactive Text Fields

You want to create believable camera interactions?  In this tutorial, we'll show you how to prototype them in just a few clicks! 

Take a look at the demo video to see what incredible prototypes you can create using camera interactions.

Got inspired? Follow along with the tutorial below to get started prototyping your own camera interactions.

That's it! your camera interaction is ready!

If you aren't using ProtoPie yet, then go ahead and 

Next, download the Pie file below to create this prototype by yourself.

You'll also need your phone handy, as we'll preview our interactions on the actual device itself. If you haven't already, make sure you've got the ProtoPie Player app installed which allows you to preview and test your prototypes directly on the device:

At the end of this tutorial, you'll know how to:

Create interactions with features such as taking a picture and switching between the front and rear cameras using the 

Animate the experience to improve feedback and feel

Let's get started! First, open the starting Pie file you downloaded above in ProtoPie Studio:

Your mouse cursor will change to a crosshair icon. Draw your Camera layer in your scene.

If you haven't done so already, resize the Camera layer to fill the entire screen. 

We'd like our camera to start when the scene starts. ProtoPie makes this easy:

In the property inspector, tick the box beside 

You can choose which camera to use. Select 

This doesn't much look like what your camera sees, does it? In order to see the camera's picture, we need to preview our Pie directly on our device. 

is a powerful and free app that will allow you 

 to run your prototype on a phone or tablet as if it were a native mobile experience. 

Plus, it's the only way to make use of the built-in device sensors such as your phone's camera. If you haven't done so already, use the links above in the 

 section to install the app on your device.

 in the top-right set of icons. This will reveal a QR code. Leave this visible, as we're going to need it in a moment.

 app on your device. You'll be greeted with this screen:

Scan the QR code you revealed above. Your Pie should now be running on your phone, and your scene should be filled with the rear camera's image.

For this to work your phone needs to either be on the same WiFi as the computer running Studio, or your device needs to be connected to the computer running Studio with a USB cable. If your Pie won't start on your device, double check that your phone is connected in one of these two ways.

Now that you know how to preview your Pie on your device, let's hook up the Switch Cam and Shutter Buttons.

We'd like our Pie to take a picture when we tap the Shutter button. You do this in ProtoPie by stopping the camera.

In order to update the preview on the Player on your phone, click the 

 icon in Studio. This will reload the Pie on your device with your changes reflected.

You should now be able to switch between the front and rear cameras, and you should be able to take a picture.

You now know how to build a prototype that uses your device's built-in camera using the 

, and you've learned how to run your brilliant work on your phone or tablet using the ProtoPie Player app. Well done!

If you're interested in improving the experience — right now our Pie only allows us to take a single picture, there's very little feedback, and switching between the front and rear cameras could behave a little nicer — you can watch this follow-up video which will build on what we just created and turn it into a very believable camera app demonstration.

ProtoPie Intermediate Workshops: Micro-interactions and Native Sensors

 If you've been following along with this entire series, you'll remember that the previous article talked about Voice and Speech. Both of these work beautifully on your mobile device. Take a look at all the lessons to enhance your prototyping skills.

Lesson 1: Start Using ProtoPie in 3 Steps

Create simple but realistic camera interactions using ProtoPie's 'native sensor' support features.

Lesson 5: How to Prototype a Camera Interaction

Welcome to the second installment of ProtoPie School where we quickly get you up and running with ProtoPie.

In this article, we'll cover a great ProtoPie feature called 

In order for a developer to faithfully code your brilliant design, they need to know exactly what you intended. An Interaction Recording is more than a handoff. It is a fully interactive specification of your animation, complete with a scrubbable timeline to show your animation frame-by-frame, and exact values for easing parameters, start and end properties, timings, etc. Interaction Recordings are helpful because they take away the guesswork. Your developer won't need to guess at what you intended.

ProtoPie has made this feature more accessible to designers by allowing up to two Interaction Recordings for 

 plan, you'll be able to record and share unlimited recordings with your team.

You can use any Pie you like, but if you want to follow along with me, you can use this one:

By the end of this tutorial you'll know how to

Review the interaction recording from what you recorded

Share the interaction recording with your team

Step 1: Upload your Pie to ProtoPie Cloud

 icon in the upper right corner of Studio's interface.

 to upload this to. As previously mentioned, Interaction Libraries are not available to Individual plan subscribers, and therefore not available if you upload it to your personal space.

You can just click on the link that Studio provides once the upload is complete.

When viewing your Pie in ProtoPie cloud, look for the panel called 

 on the left-hand side of the browser window.

 button to start recording. Interact with your Pie showcasing the specific interactions you'd like to hand off to your engineering team. When you're done, just click the

That's it! In just a few seconds you've created your first interaction recording!

After you stop recording, you'll be able to review your Recording. An

consists of a timeline of everything you recorded, and a visual preview of your Pie that updates in sync with the timeline.

Your interactions on the timeline are grouped into Triggers and Responses, just the same way as you see them in Studio.

Drag the red upside-down teardrop control — this is the play head — right and left. This will allow you to scrub through the interaction you just recorded frame-by-frame.

Play the animation back at different speeds:

 You can make the animation playback faster or slower. Click the playback speed icon and choose a playback speed. Then click the 

 icon to start the animation — it will change to a 

 icon allowing you to stop playback. Playback will resume from the play head's current position. You can reposition the playhead at any time while the interaction is playing, either by dragging it, or clicking in the top bar of the timeline.

You can make the timeline taller or shorter by dragging the division between the preview and the timeline

Inspect the animation of a particular Response: 

Click on any Response in the timeline, and an inspector window pops up in the upper right side of the screen. These show the exact values of properties at the start and end points of your animation, the animation curve easing parameters, as well as the "current" value of the particular property you are inspecting. The current value updates in real-time, in sync with the play head.

The Layers stack is available to the left of the preview. If you click on any layer, the inspector window on the right updates to show the layer's properties in real-time in sync with the play head.

ProtoPie gives your Recording a default name, likely 

 In the Interaction Recordings panel, you'll now see your new Recording listed. Click the "pencil" icon in order to rename your Recording to something more meaningful to you.

Lastly, you'll want to share your Recording with your Team. You have two ways to do this:

. Anyone with this link will be able to see all of the Interaction Recordings created for this Pie listed on the left-hand side, under Interaction Recordings. To do this, click the purple 

 button. Configure what options you'd like in 

Share a direct link to just a specific Recording.

 Say you've got many Recordings you've recorded for your Pie, but you want to make sure you're calling out the right one. Remember in the last step, where you renamed your Pie? Instead of clicking the pencil icon, click the first icon that looks like chain links. This will copy a direct link to that specific Recording to your clipboard. Share that with your developer, and you're good to go.

Your Interaction Recordings are protected by the same access settings as the Pie itself. Click the 

 button for any changes you'd like to make.

When you make an Interaction Recording, the recording does not update to reflect any new changes to your Pie you upload to ProtoPie Cloud. It represents that particular version of your Pie at the point you recorded it. So if the changes you have made affect a particular Recording, you'll want to record a new one and share that around to anyone involved. Your old one won't be removed automatically — it will appear listed alongside any new one you create. So you might want to get into a habit of including the date you recorded it in the name of the Recording, something like this:

Of course, you don't need to keep the old one. You can always delete it if it helps keep things better organized. But be aware: once you delete a Recording, it's gone for good. There's no way to recover it.

In just a few short minutes you've learned how to create fully interactive specifications for your interactions that you can share with your development team.

With ProtoPie's interaction recordings, you can make developer handoff way easier by providing the exact prototype specs they need.

Lesson 2: Using Interaction Recordings to Collaborate with Developers

 of the Variables lesson, we worked on a very simplistic demonstration of how variables work. Now let’s take this a step further. 

In order to follow along with this tutorial, download this sample pie and open it in Studio:

By the end of this tutorial, you’ll have learned:

The difference between “for this scene” and “for all scenes” when creating a variable

How to troubleshoot when things don’t work as you expect

Instead of just displaying the name when the user clicks Next, let’s Jump to the next scene, and give the user a proper greeting instead. Open the Pie file from your last saved progress.

Change the behavior of the Tap trigger. Remove the 

 Response (click it and press Delete on your keyboard) and then add a 

 and configure the Jump with whichever transition you prefer. Why not try the brand new and fantastic 

 scene in the scenes palette to open it for editing.

We want this screen to greet the user by name when the scene starts. Add a 

. Click the box underneath Formula to reveal to 

 into the Formula box. You can insert variables using the same techniques we explored in the last lesson.

Notice how ProtoPie has underlined the word “name” with a red zigzag? This is because ProtoPie can’t find a variable called “name” available to this scene. The red zigzag is a really helpful tool when working with variables and formulas. This is your first indication that something needs fixing.

As you’ll soon see, our problem is elsewhere. So for now click 

 to commit your formula. ProtoPie continues to highlight your Formula in amber to indicate there is a problem that needs fixing.

If you recall, in our first example we created a new variable and selected 

This meant that the variable we created is 

 available to the scene in which we created it. We’d like to be able to re-use our variable across multiple scenes. So we should have chosen 

 Scene in the Scenes panel to open it for editing. Then, click the 

 variable in the Variables panel in the bottom left. You’ll notice that there is no way to change the variable to a 

 variable. You can only choose this option when creating the variable. We need to delete our variable and recreate it.

 control to create a new variable. This time pick 

Once again rename the newly created variable to 

 Re-use the exact same name as you had before. Otherwise any Triggers and Responses that use the variable will be broken.

That should be all we need to do in order to make this work. Let’s preview our work again. Enter a name and tap 

 You should be greeted in the subsequent scene by name.

What if this isn’t working as above? Here are some steps you can take to try and pinpoint your issue.

 on Triggers and Responses as well as the 

 underline in your Formulas. These are clear indications that something needs fixing.

In this case, I’ve misspelt the name of my variable. ProtoPie underlines this because a variable named 

Verify your variable is set to be used for all scenes. The icon beside the variable name is solid for 

 variables will appear in the variables panel on all Scenes, while 

If you’re not seeing the value you expected for your variable, you can turn on its 

 When you hover over the variable in the variables palette, a 

 icon appears to its right. Click that and a green box will appear in your scene (click it again to turn it off). When you preview your Pie, this will show the current value of the variable.

You can drag the green debug box around your scene and position it somewhere convenient.

When you preview you should see that value of your variable update as you type.

If the variable is not updating, check the 

 Trigger in the first Scene to ensure it is set to the 

 Response to ensure it is configured as follows:

If all of the above is working, let’s switch to the 

 and make sure were are using our variable properly. You should have a 

If you’re using an animated transition between the two scenes, you may notice a very short delay before you see the greeting reflected in the second scene. If you do, then take a look at the 

. This will make your Responses under the Start Trigger fire when the transition animation starts instead of after it completes.

There are certain considerations you need to be aware of when using variables.

 You will get unexpected results if the type is incompatible with the information you are trying to store in it.

We also talked about the importance of setting whether the variable is 

 As you cannot change this later, it’s important to know ahead of time how you plan to use your variable. If in doubt choose “For All Scenes” as this gives you the most flexibility.

Variables cannot have spaces in their names.

 If you’ve got programming experience this may be obvious to you, but for the rest if us this is an important detail. ProtoPie will warn you if you try to give your variable an invalid name.

If you wish to use multiple words in your variable names to make then more descriptive, there are a couple of popular conventions you can use.

Separate multiple words with the underscore 

Capitalize the first letter of additional words. E.g., 

Now you know how to use variables to store a bit of information in your Pie. You’ve also learned how to use a variable across multiple scenes, and you’ve learned some valuable troubleshooting techniques to use when things don’t work as you expect.

#AskProtoPie: How to Use Predefined Variables ($touchX, $touchY and more)

 In this tutorial video, you'll learn about the built-in variables available in ProtoPie such as $touchX, $touchY and how you can use them in your prototypes.

#AskProtoPie: How to Use Variables Across Multiple Scenes

 In this tutorial video, learn how to store information in a variable in one scene, then retrieve it for use in another.

Design a Circular Slider Using Masks and Chain

ProtoPie School

Lesson 6: Interactive Text Fields

Lesson 5: How to Prototype a Camera Interaction

Lesson 2: Using Interaction Recordings to Collaborate with Developers

Lesson 8: Using Variables II

Lesson 8: Using Variables I

Lesson 7: Formula Basics II

Lesson 7: Formula Basics I

Lesson 4: Voice Interaction

Lesson 3: Creating and Sharing Interaction Libraries with Designers

Lesson 1: Quick Start Using ProtoPie in 3 Steps