Principle is one of the tools that you can use to an and interactive user interface. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, helps you create designs that look and feel amazing.

Now, I want to share my little 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

Design the UI in Sketch first

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

Principle App

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.

Make sure both have the same size

Now, we will convert the design from Sketch. Make sure the file that you want to convert from Sketch is open and active.

How to import Sketch file from Principle

This is it, I’ve all the converted file in Principle.

Successful convert to 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.

Show Preview

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!

The result!
The result!

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!!



Source link https://blog..io/an-exploration-for-animated-design-using-principle-5324235a18ca?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here