Many development teams opt for various tools when they need to create a design prototype for the mobile app. Those tools may include Pixate, Flinto, Floid and some others. This article will be dedicated mostly to Principle. We are going to reveal some of its hidden functions in addition to basic possibilities. The list includes 10 hints that will certainly come in handy.
1. Circular motion
Most designers who are new to the tool mistakenly think that it is able to move objects only in a straight line. This fact can cause some inconveniences due to limitations. However, it appears that Principle also lets you move the objects using circular trajectory. You will hardly find this exceptional feature in any official guide. All you need is to include a necessary object in a group and implement a circular motion. Do not forget to use 0% opacity for a single object or a group of objects. The last thing you need to do is to disable Clip Sublayers and set a rotation of the shape.
2. Outline the flow
Many designers make a common mistake when they focus mainly on core elements and features forgetting about other elements. If you want to come up with a cool animation for your prototype, you should never neglect other things and components. Otherwise, you will have to handle endless edits and corrections in future.
For this reason, the best bet is to have a clear plan for your thorough design prototype in order to save time and nerves in future. Do not avoid making blueprints on the sheet of paper and work with other tools like Photoshop. Consider all possible movements performed by the user including scrolling and more. A thorough plan will make it clear what are the best elements to make them clickable.
3. Proper resolution
Always check if the requirements of the platform coincide with the size of your Principle document. Choosing a suitable resolution is vital. Consider all possible parameters in order to avoid such possible problems as reduction of resolution, enlarging and some others. It will turn the entire project into a real nightmare during further stages of the development process.
4. Texts and vector objectives
Every time you want to save your nerves and time when editing your prototype, vector graphics and texts may come in handy
Principle allows using vector graphics although with some obvious limitations. You can create graphics using the shape of rectangle only. On the other hand, you are free to change strokes and colors as well as avoid sharp angles using rounder shapes for your corners.
5. Use groups
If you want to use Principle with maximum efficiency, you should love the order in the same way as this tool does. As soon as you create interrelated objects, do not forget to name them and divide into groups. If you do so, you will be able to move an object within the group as well as in relation to the group. If you forget about this step and remember to group the objects on further stages, it may result in some tough challenges. Using groups will make you cope with the prototyping stage easier and faster.
6. Every action has its part
Of course, Principle is not as flexible as you want it. If you opt for solutions and tools on default, they will come with some limitations every time you try to result in complex object interactions. However, you can solve this problem dividing actions for every object.
It will let you benefit from a smooth and natural animation. All you need is to use the interim state drivers for inactive and active objects.
7. Keep the balance between timelines and motions
If you have ever dealt with animation graphs and timelines, you know that working with them is actually the same as working with texts. Once you need to give your workflow in Principle a boost, the following considerations will certainly come in handy:
- Action logic and order;
- Balanced action speed;
- Animation graphs should feature accurate actions that are also logical and subtle.
Always follow established logic rhythm to avoid overdone bouncing.
8. Substitution and images
In spite of all possible advantages Principle has, the tool does not provide necessary means to create vector objects. For this reason, many UX designer prefer using Apple Motion or After Effects instead. However, there is a solution to this problem.
You can try to break the animation logic into several components to use masks and create a proper order for every object. Moreover, you can substitute some of the objects during the animation process.
9. Trick with importing
You can use Principle to import materials in several ways. They are as follows:
- Drop or drag them directly from Sketch.
- Use a proper format to create a library of images.
- Use the Sketch import function.
Developers have recently introduced new updates for Principle. They have put an ease on the importing process. If you want to use a new function, you need to open your project in Sketch and choose a suitable resolution. The only miss here is the inability to import pages and artboards separately.
Use the following trick to import artboards with Principle:
- Drag the images from Finder to the menu to update them;
- Opt for Drag and Drop function when preserving the original size of the element;
- Organize elements in your prototype using Sketch coordinates;
- If you copy two artboards, you will be able to paste all events between then.
- It will let you perform repetitive actions as well as several design prototypes.
10. Use GIF and MOV to export prototypes
We have already mentioned some recent Principle updates that added more capabilities to the tool. Recording and exporting prototypes is much easier thanks to those updates. They are available in GIF or MOV formats. On the other hand, many designers are used to working with MP4 format, which is easier to understand. Working with GIF formats may experience obstacles although the format is still rather heavy.
If you want to put an ease on prototype exporting, you can benefit from the following approaches:
- Use MOV to record prototypes.
- Use After Affects to assemble videos.
- Export prototypes as a PNG.
- Use Photoshop to adjust the size of the animation and meet the quality requirements towards the recording.
Another great advantage about the tool is the availability of the original prototype. You can provide the file to your customer as well as another designer. The original file can be easily accessed via Principle iOS application with iOS developer.
Mobile design is all about researching and experimenting. Working with Principle may reveal many great hidden opportunities and functions you will certainly appreciate. The tool certainly has a great potential in addition to possibilities you will never find in any official guide. Working in a team with other designers will let you know the secret of the tool and come up with superior prototypes of your customers’ apps.