Principle is one of the tools that you can use to design an animated and interactive user interface. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle helps you create designs that look and feel amazing.
Now, I want to share my little exploration with this tools. Remember, this is my first time to use this thing. I will just share a simple thing, in this exploration, I use Sketch to design the UI and Principle for the interactive UI. I will make example of Credit Card List UI in mobile
Prepare the UI Design
I’ve designed the UI Design using Sketch. I create three sample page which will be useful for creating the interactive UI. FYI, you can easily convert your design from Sketch to Principle. It will be very helpful.
Convert your design
Before you convert your design from Sketch, pay attention to your document size. Make sure the size are same both Sketch and Principle. I use the iPhone 8 size (375 x 667) in this case.
Now, we will convert the design from Sketch. Make sure the file that you want to convert from Sketch is open and active.
This is it, I’ve all the converted file in Principle.
Create the interaction
To create the interaction just select the area (that will be click) and then point that to another page that you want. Before it, choose the action you want to give (tap, long press or other). For example, see the GIF below.
Just make it according to your needs. After you finish, you can simply check the preview to make sure you doing right.
Convert to GIF
If you’ve finished the interaction, you can convert the result to gif file or video file. Just simply record your activity on the preview screen and save the file to your storage. See the GIF file below.
and tadaaaaaa, you’ve done!
So after I use Principle, I think will love this tools. Easy to use and have much features on it.
Oke thank you, maybe that’s all for today. Please leave me a comment to make my article better next time. See youuuuu!!