Xiffe - Getting Started

Welcome to Xiffe. We have tried to make Xiffe easy to use for anyone who knows how to use the internet. We aim to make the tool better using your feedback. Here’s a quick starter guide on how to use Xiffe for prototyping your iOS apps. The tutorial will guide you through the process of deploying fully interactive iOS app prototypes and how you can see the simulation as it would look on an actual iPhone. Xiffe is a web app and you don’t need to install anything or configure your browser to use it. Just login with your account and get started.

For best results, use it on Google Chrome, Apple Safari (version 6.0 or above) or Firefox.

Getting Started

1. After logging in, on the Dashoboard, click + button to get started with designing your first app

2. Give your app a name , select your preferred device (iPhone 5/ iPhone/ iPad) from Device dropdown (iPad option available in pro plans only) and select your preferred Platform - iOS 7 or iOS 6. This will define which controls you see when creating the mocks - flat UI or skeuomorphic graphics.

Screen shot 2013-11-11 at 8.04.51 PM

3. Select your preferred color scheme from predefined color sets for your buttons, backgrounds, titles etc. and save your preference. You can change colors for individual elements within the app. This option just makes sure you don’t need to set the colors for each control. They will all follow your selected theme

Screen shot 2013-11-11 at 8.09.54 PM

4. Click Next to reach the Editor area

Drag and Drop Interface

The Editor area is divided into 3 main sections - Tools, Screen-Area and Properties

Drag and drop controls from the Tools section to your screen area. Change control properties from the Properties area on the right side.

Screen shot 2013-11-11 at 8.05.36 PM

 

Adding new screen

To add a new screen, click + button in the lower scrollable area

Connecting 2 screens

1. To connect 2 screens together, add a button or an image which has a Link property. Then select the screen name you need to connect to and the transition type for the navigation animation. Screen shot 2013-11-11 at 8.15.42 PM Screen shot 2013-11-11 at 8.17.02 PM

Let us select slide animation here as this is the default animation for screen navigation in iOS apps.

2. Select the screen to which you need to navigate from the bottom screen area.

Add a reverse transition link to the back button so that you can traverse back to the originating screen.

Screen shot 2013-11-11 at 8.19.04 PM

3. Select the Preview link on top of the editor area to see app preview

4. Watch your screen connected together in the Preview area using appropriate button clicks.

Preview app on an iPhone

Additionally, you can share the app preview link via email and view the link on your phone’s browser. This will simulate how the app will look on an actual iPhone.

Screen shot 2013-11-11 at 8.20.44 PM

Happy prototyping!

You can get in touch with us at support@xiffe.com and we would be happy to help you if you have any questions.