How to Use Prott for Mac

This article gives you a breakdown on how to get started with using Prott for Mac. 

Download the latest version of Prott for Mac here.
Note:
  • Prott for Mac is available exclusively to Pro, Team and Enterprise plan users and to those on the 30-day trial of the Pro plan.
  • Projects created in Prott for Web and Prott for iOS are not synced to Prott for Mac. To work on projects created in your web account, download your screens and upload it to the Mac app. Please be advised that you'll need to set link and set your transitions from scratch.

Create a Project

  1. Open the Mac app and begin by clicking on the New Project button.
  2. Enter your project name, select your device and press Create.


Add Screens

There are three ways to add your screen images in the Mac app.

1. Import your screen images using the Sketch plugin

If there's a design that you've already created in Sketch, you can easily sync your Sketch files to the Mac app. Simply install the Prott Sketch plugin if you already haven't done so. 

The latest plugin can be accessed from the left hand panel.

If you are not familiar on how to go about setting the Sketch Plugin, refer here for more info.

2. Import image files from your computer

If you have a local file that you want to import to the Mac app simply click on the + button above where it says New Screen

3. Drag and drop your screen images

Another way to upload your images is simply to drag and drop your local files to the center screen.


Link Your Screens Together

Once you've finished uploading your screens to the Mac app, the next step is to link your screens together.

  1. Click and drag your cursor over the area of the screen that you'd like to make your hotspot (the area you want to make interactive for the user).
  2. Hit the arrow icon that appears on the top left side of your screen. Select the target screen to link it to.
  3. Select the gesture or transition and hit Done to save.

Change the Target Screen

If you'd like to change the target screen, you can easily switch the screen destination by following the steps below.

  1. Click on the hotspot for the squiggly line to appear.
  2. Drag the end of the squiggly line and attach it to the new target screen and you are done.

Note: For screens that contain multiple transitions, please update it from the edit panel located on the right hand side of the screen.

Add Gestures and Transitions

Once you've linked your target screen, the next step is to select the gesture and or transition. Once you've chosen your target screen, select your gesture or transition from the drop down menu. Hit Done once you are complete.

Here's a closer look at the types of gestures and transitions that you can select from.


Set a Timed Transition Screen

To set a timed transition between your screens, simply check off where it says Timed Transition (from the panel on your right) and select the time, target screen along with the type of animation. 


Set an Overlay Screen

If there's an overlay screen that you'd like to create, you'll need to begin by having two screens ready.

  • Your base screen - this screen will contain the hotspot (interactive area) along with,
  • The screen that contains the overlay details (ex. the message that you want to pop up)

Here's how to get started:

  1. Start off by highlighting the area of the base screen that you'd like to make your hotspot.
  2. Link it to the overlay screen.
  3. Select your gesture, transition and check off Display as Overlay.   
  4. To check how the overlay screen will look on top of the base screen, click the Edit button (located next to where it says Display as Overlay as per the image above). You'll be able to edit the position along with the color and opacity. Hit Save once you are done.

Preview Mode

Preview Your Work in the Prott Mirror App

Once you've finished creating your prototype in the Mac app, it's now time to preview it! To view your work that you created in the Mac app, install the sidekick app, Prott Mirror. For more info on how it works, refer here

Preview in Prott for Mac

If you just want to check your designs as you work through creating your prototype, simply your  to check your work as you wTo preview your prototype, simply click the Preview button. To close the preview window, simply close the x button. 

  1. To increase and decrease the size of your preview screen, select from the % drop down menu.
  2. To move to the next screen click > to go back click <.
  3. To go back to the home screen, hit the home button.

Upload Projects to Prott for Web

Once you've finished designing your prototypes in the Mac app, you can upload your projects to your Prott for Web account to begin collaborating with your team members.

  1. From the top right hand corner, click on the Upload button.
  2. Select the account or organization that you would like to upload your project to and hit Upload.
  3. The ability to select from the Account/Organization drop down menu will appear if you are part of an organization(s).

  4. Check off Enabling Sharing if you'd like to share your work with others.
  5. Click Upload to upload/overwrite your project created in the Mac app to your Prott for Web account.

Note:

  • The account/organization destination to upload your project to cannot be changed once it's been uploaded. Please confirm the account/organization destination before proceeding.
  • If you upload the same project to the same destination for the second time, the project will be overwritten.

Project Settings

The project settings can be accessed from the menu bar at the top and heading over to Project > Settings.

General tab

When you click on the General tab, you'll be able to edit the following:

Update project name

Change the app icon image

Change the splash screen

Preview tab

The Preview tab allows you to customize your project preview. If you would like to de-select the settings, simply uncheck the box.

Share tab

When you click on the Share tab, you will see two URLs.

Share the Preview URL when you would like others to take a look at your project online.

Share the Project URL when you want to involve others in editing your project on Prott for Web.


Set screen as the home screen

If you have a screen that you would like to set as the home screen, simply head over to the edit panel located on the right hand side and check off Set as Home screen.You'll notice that the screen you set as your home screen will have a home icon displayed on the top left hand corner.

If a screen has not been selected, by default, the first screen that will appear when you hit preview is the home screen.

If you select a screen then hit preview, the selected screen will be the first to appear.


Other

Log out

To log out of Prott for Mac, simply head over to the menu bar and click on Prott > Log Out

To view and access the projects you made in the Mac app, simply log back in with the same account details.

Still need help? Contact Us Contact Us