🔮 How to create a basic interaction in Principle for Mac
Courtesy of @millionframes
1️⃣ Create a basic design element
2️⃣ Understanding events
3️⃣ Understanding Animation
4️⃣ Custom Animation
There are also other important features in principle which we as a designer should have knowledge about if we want to create animations and interactions efficiently. I’ll be sharing those things in the next posts.
Let me know if you have questions about design, animation or interactions in the comments below and don’t forget to share this post with others.
Events trigger transitions or animation between artboards. To add an event, select a layer on the canvas and click the lightning bolt button that appears to the right of it, select the event for example here we will select the TAP event.
Dragging the outlet arrow and dropping the arrow to the selected layer’s artboard will create a duplicate artboard. A transition arrow will be added to the canvas that points from the source artboard to the destination artboard.
When an event is triggered, Principle animates between the current artboard and the event’s destination artboard. If two layers on different artboards have the same name, Principle will automatically animate between them during a transition. If there is not a layer with the same name on both the source and destination artboard, the layer will disappear or appear with no animation.
By default, all animations have a duration of 0.3 seconds and use the default easing curve used in iOS. The Animate view or Animation timeline is where you can customize this. Clicking a transition arrow above the artboards will show the Animate view, which lists all the properties that will be animated and a timeline to change timing and easing.
The easing curve determines the speed at which a property animates. Slow or Fast? Physics plays it’s role here. Does it accelerate to the end like the ball coming towards the ground, or gradually slow down like throwing a ball towards the sky? Behaviors like this are controllaed with the easing curve.
The built-in curves are the same curves used in iOS. At any time the curve can be tweaked by dragging the handles in the preview or typing in new coordinates for the handles at the bottom of the popup.
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.