How to Use Prott for Mac
This article gives you a breakdown on how to get started with using Prott for Mac.
- 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
- Open the Mac app and begin by clicking on the New Project button.
- Enter your project name, select your device and press Create.
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.
- 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).
- Hit the arrow icon that appears on the top left side of your screen. Select the target screen to link it to.
- 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.
- Click on the hotspot for the squiggly line to appear.
- Drag the end of the squiggly line and attach it to the new target screen and you are done.
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:
- Start off by highlighting the area of the base screen that you'd like to make your hotspot.
- Link it to the overlay screen.
- Select your gesture, transition and check off Display as Overlay.
- 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 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.
- To increase and decrease the size of your preview screen, select from the % drop down menu.
- To move to the next screen click > to go back click <.
- 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.
- From the top right hand corner, click on the Upload button.
- Select the account or organization that you would like to upload your project to and hit Upload.
- Check off Enabling Sharing if you'd like to share your work with others.
- Click Upload to upload/overwrite your project created in the Mac app to your Prott for Web account.
- 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.
The project settings can be accessed from the menu bar at the top and heading over to Project > Settings.
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
The Preview tab allows you to customize your project preview. If you would like to de-select the settings, simply uncheck the box.
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.
To log out of Prott for Mac, simply head over to the menu bar and click on Prott > Log Out.