UXPin logo

Number Pad

In this tutorial, you will learn how to create a telephone-like number pad.

→ Download a ready .uxp file for this tutorial.

Creating the mockup - first steps

  1. First, we'll need an input field to display the numbers. Click the Forms icon in the Quick Tools panel (left of the canvas) and draw a rectangle on the canvas. Name the input "Number box." We have set our fill to 0%, but you can choose any color.
  2. Next, use the Box tool to create the numerical keypad. Select the Box from Quick Tools or press "b" on your keyboard.
  3. Draw the first key and copy/paste it to create the remaining nine digits.
  4. Double-click inside the keypads to type each number 1 - 9 and 0 below as per the example.

Adding interactions - number boxes

Now you have a static keypad; it's time to add interactions. Start by clicking on number 1 and then Interactions at the top of the right Properties Panel.

  1. Under Trigger, select Click (Tap).
  2. We won't use Conditions for this interaction.
  3. Under Action, click More..., and select Set Content.
  4. Under Element, choose the number box input field you created.
  5. Under Set content as select Expression. In the input field type: "concat('number box', '1')"
  6. Click Add to save the interaction.

Repeat these steps for each number on the keypad. You will need to change the number in step 5 according to the key–i.e., for number 2, "concat('number box', '2')" , number 3 "concat('number box', '3')" , etc. or you can copy and paste the interaction and the numbers will change accordingly.

Adding interactions - number display

First, we need a variable to access the display through Interactions.

  1. Click the Variables icon {$} below the Quick Tools panel on the left.
  2. Click New Variable.
  3. Name the variable telephone and press enter to confirm.

Now we will create an interaction using this variable.

  1. Click on the number box element you created.
  2. Click Interactions at the top of the Properties Panel.
  3. Under Trigger, select Click (Tap).
  4. We won't use Conditions for this interaction.
  5. Under Action, select Set Variable.
  6. Select telephone from the Variable dropdown.
  7. Under Set variable as choose 'value of variable' and telephone
  8. Click Add to save the interaction.

Creating the call button

Next, we'll create a call button similar to a standard phone UI to display a calling screen when you press it.

  1. Select an Oval from Shapes in the Quick Tools panel or press "O" on your keyboard.
  2. Click anywhere on the canvas to draw an oval and position it below the zero on your keypad 
  3. Select Icon from the Quick Tools panel or press Alt "I" on your keyboard. Click anywhere inside your oval to place an icon.
  4. Select your icon by clicking on it and type "Call" in the Search icons field in the Properties Panel.
  5. Choose the call icon from the results.
  6. Below Interactions in the Properties Panel, change the icon's dimensions to 59 wide x 50 high.
  7. Select the oval and icon by holding "Shift" and clicking each one.
  8. Align the icons by pressing Alt "X" and Alt "Y" . You can also align items using the buttons at the top of the Properties Panel.
  9. With both items still selected, group them by pressing Ctrl "G" . You can also group using the Folder icon above the canvas.
  10. Name the group 'Call Button'

Creating the calling screen

  1. Open the Pages & Layers at the bottom left of the screen, and click the + icon next to PAGES at the top of the sidebar to create a new page–Page 2 will appear below Page 1.
  2. Select Text from the Quick Tools or press "T" on your keyboard and click anywhere on the canvas to create a text element.
  3. Type: Calling... inside the text element.
  4. Next, we need a component to display the number.
  5. Select Box in the Properties Panel or press "B" on your keyboard. Click and drag below the Calling... text element to create a shape 211 wide x 58 high.

We need a canvas interaction to insert the number a user enters on Page 1 into the rectangle.

  1. Click anywhere on the canvas so you don't have any elements selected.
  2. Click Interactions in the Properties Panel.
  3. Under Trigger, select Page Load.
  4. Under Action, click More..., and select Set Content.
  5. Select Box from the Element dropdown.
  6. Under Set content as select Value of variable and, below that telephone from the dropdown.
  7. Click Add to save the interaction.

Adding interactions to the call button

Return to the first page by clicking Pages & Layers at the bottom left of the screen and selecting Page 1.

  1. Click the Call button group under Layers or select the button on the canvas.
  2. Click Interactions in the Properties Panel.
  3. Under Trigger, select Click (Tap).
  4. Under Action, select Go to Page.
  5. Under Page, choose Page 2 from the dropdown.
  6. Click Add to save the interaction.

Now we need to pass the number entered on Page 1 to the Box on Page 2.

  1. Click New interaction.
  2. Action - select Set Variable.
  3. Select telephone from the Variable dropdown.
  4. Under Set variable as choose "Content of element" and "Number box"
  5. Click Add to save the interaction.

Optional features

The hangup button

Let's add a hangup button to create a more realistic phone prototype. Follow the instructions from Creating the call button to design a call end button for Page 2. Replace the call icon with the call end icon from the search results.

  1. Select the call end button you've just created and click Interactions in the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Action, select Go to Page.
  4. Under Page, choose Page 1 from the dropdown.
  5. Click Add to save the interaction.

With this interaction, when the user presses the call end button, they'll return to Page 1 to start another call.

Displaying number in a telephone number format

You can display numbers in any format using Expressions. For this prototype, we'll use the standard US telephone number format.

We will start with the keypad numbers on Page 1.

  1. Select number 1 on the keypad.
  2. Click Interactions in the Properties Panel.
  3. Under Trigger, select Click (Tap).
  4. Under Action, click More..., and select Focus.
  5. Select number box from the Element dropdown.
  6. Click Add to save the interaction.

Copy this interaction to all numbers:

  1. Right-click on the number 1 using your mouse.
  2. Hover over Copy Interaction and select: On Click (Tap): Focus number box.
  3. Right-click on the number 2 using your mouse.
  4. Hover over Paste and select Paste Interactions or use the keyboard shortcut Ctrl "Shift" "V" .

Repeat this process for all the numbers.

Now we need to format the number we pass from Page 1 to Page 2.

  1. Click the number box element on the canvas.
  2. Click Interactions in the Properties Panel and New interaction.
  3. Under Trigger, select Focus.
  4. Under Action, click More..., and select Set Content.
  5. Select number box from the Element dropdown.
  6. Under Set content as select Expression. In the input field type: 'replace(toNumber(replace(toString('number box'), "\d" , "")), " \d(?=(\d{3})+$) ", " $& ")'
  7. Under Animation settings, set the Delay to 200ms and Loop to No.
  8. Click Add to save the interaction.

Now you have a functional phone prototype. Click the Preview (play icon) in the top right corner or use the keyboard shortcut Ctrl "P" to open the prototype in the browser.