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.
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.
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
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.
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.
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.
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.
You can get in touch with us at email@example.com and we would be happy to help you if you have any questions.