This guide applies to Flinto Lite, for information about our Mac app, go here
Flinto prototypes are made up of screen images. These are simply mockups that you save from your favorite graphics app, such as Photoshop or Sketch. You can use PNG, JPG, GIF or PSD files. Your PSD files will be flattened into PNGs.
Add screens to your prototype by dropping them right into the Flinto editor. You can start working on dropped files immediately. You don’t even need to wait for them to upload. Cool, right?
Flinto is flexible about screen sizes. You can use any size you want, but if you are doing high-fidelity mockups, you’ll want to make sure you use the correct size for your device. The most important thing is to get the width right. Flinto will resize the width to fit the device. If you want your screens to scroll, just use taller screens.
If you are making an iPhone or iPad prototype with the “default” status bar, your screens should be 40px shorter (20px on non-retina screens). For transparent status bars, your screens can extend the full height of the device (1136px for iPhone 5+), get it?
Try to keep your images under five mega pixels. Mobile browsers have trouble with the large images, so Flinto will resize them automatically, which may cause an undesirable blurryness.
When you install your prototype on your device, you’ll see that the system status bar shows up. Sorry, but it can’t be removed. We’d like to provide that option, but neither iOS nor Android allow it for web apps. It’s annoying, but there are a lot of other great benefits to be had from delivering prototypes as web apps. We think it’s a worthwhile tradeoff.
Since the system status bar will appear in your prototype, you shouldn’t include a status bar in your mockups. If you have one there, remove it before you export it. If you are using a transparent status bar style, leave some blank space to accommodate the status bar background at the top of your screen.
For iOS prototypes, you can choose between default, transparent-black and transparent-white status bar styles. Just keep in mind that the transparent styles lay over the top of your screen. You’ll have an extra 40px of vertical space for your screen image.
Flinto supports PNG, JPG, GIF and PSD screens. You can use animated GIFs too!
As you iterate on your design, you’ll probably want to update some of your screens. Just drag a new screen on top of an old one in the editor and it will be replaced.
If you have several screens to update and they have the same original filename as your existing screens, you can drop them all on the editor. You’ll be prompted to replace all the matching screens, or add these as new screens.
Click on a screen to select it. The blue line around the edge means it’s selected. Hold shift and click another screen, now they are both selected. Selecting a screen will reveal a tool bar up top.
Delete selected screens by pressing the delete key on your keyboard. Or select them and press the delete button in the tool bar. Once deleted, there is no way to recover them. Fortunately, adding new screens is easy!
You can rename a screen by selecting it and clicking the little pencil icon in the tool bar. Or double click the title and edit it in place. Then press tab to go to the next screen. You can change all the titles quickly this way. Don’t get carried away, you have real work to do.
Flinto attempts to detect and remove any status bars from your mockups if you forgot to do it yourself. Sometimes this isn’t helpful, sometimes the status bar isn’t detected. In either case, you can adjust it manually by selecting a screen then editing the status bar trim height field in the tool bar.