fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

How to Create a Basic Interaction in Principle


Tegra - February 12, 2020 - 0 comments

How to create a basic interaction in Principle

🔮 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
5️⃣ Easing

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.

Create a basic design element
Understanding Events 
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 TAP event.

Understanding Events

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.

Continue…

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.

Understanding Animation 
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.

Understanding Animation

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.

Custom 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 the properties that will be animated and a timeline to change timing and easing.

Custom 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.

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 ball coming towards ground, or gradually slow down like throwing a ball towards sky? Behaviors like this are controllaed with the easing curve.

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.

Continue... 
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.

Continue…

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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *