Principle is a tool for designing animated and interactive user interfaces for web, mobile, and desktop (some design teams are even using it for virtual reality!). By allowing you to quickly evaluate your ideas before investing valuable engineering time, Principle accelerates the design-development cycle. After deciding on the final design, Principle prototypes communicate ideas to the engineering team.
Rather than offer features specifically for passing design trends or niche use cases, Principle strives to provide a toolbox of generic features that can be combined in creative ways to produce a variety of results.
An interface is where you interact with Principle’s tools that enable you to create animations and interactions.
The canvas in the center of Principle is where you’ll do most of your work.
Principle automatically positions your artboards from left to right, and you can reorder artboards by dragging their rows in the Layer List, but otherwise, they can’t be repositioned.
Principle will space out your artboards to make room for outside layers every time you select a different artboard. Learn more about artboards
Preview allows you to interact with your design at any time. It can be detached into its own window by dragging it off the canvas.
The Layer List on the bottom left of the window shows all of the layers in your design. Layers can be grouped and ungrouped by dragging their rows.
Hovering over a layer’s row shows the eye button, which hides the layer in the editor once clicked but does not affect the layer’s visibility in the Preview.
On the left of the window and above the Layer List, the Inspector displays the properties of the selected layers like position, dimension, fill, stroke, etc.
Animate Panel appears at the bottom of the window. It can be shown by clicking the animate button on the toolbar, or by selecting a transition arrow on the canvas. Learn more about animation
At the top of the window, the Drivers Panel shows the currently selected artboard’s Driver Sources. Learn more about Drivers
At first glance, Principle feels like a graphic design tool, just like other tools you’ve used. Basic elements can be created right inside Principle, and images can be imported for everything else.
Principle’s artboards work similar to other drawing programs, with each artboard representing a unique state of your design.
The size of artboards can be changed to fit different devices or window sizes. All artboards in the current Principle file will have the same size and resizing one artboard will resize all other artboards around the same origin.
If you need the size to change, to simulate rotation or a window changing size, make the artboards the largest size you will need and make the contents smaller inside that.
Principle’s rectangle tool creates a rectangle at the top left corner of the artboard. These rectangles can then be used to create transitions, interactions, vector elements, etc.
Circles can be created by setting the radius of a rectangle to a large value.
By default new rectangles are created with a size of 44×44 points – the recommended tap area size for iOS.
Text tool lets you add a layer of text to the artboard. Text layers have similar properties as that of rectangle layers, with the addition of font face, alignment, and size.
The font face and alignment properties can not be animated.
Not all of the fonts on your computer are available on iOS devices(iPhone and iPads), and will not appear in Principle Mirror. Use an app like AnyFont to install non-iOS fonts on your device.
Assets (Images, Videos, and Audio) can be imported into Principle by dragging from Finder, or with copy/paste. If you’re a Sketch user, directly copying from Sketch flattens the selection to a single image.
Assets are copied into the Principle file so that the design can be moved, emailed and viewed without losing its assets. Try to use the shortest video and audio assets as possible to keep the file size down. Keeping your asset size down will also improve previewing speed over USB.
Image and Video layers have their aspect ratio locked by default; this can be turned off by clicking the lock icon in the Inspector.
Animated gifs are not supported in designs because they can be simultaneously very large (poor compression) and low quality (only supports 256 colors). They also perform very poorly because, unlike video, there isn’t a hardware decoder. We recommend using videos for small animations instead of trying to use gifs.
To change a layer’s asset, drag a new image onto the media button or click the media button in the Inspector and click “Choose…” in the menu.
To remove a layer’s asset, click the media button and select “cut” from the dropdown.
If there are other layers that also use the old asset, Principle will give you the option to update all of those layers with the new asset.
Directly copying and pasting from Sketch or other tools will usually result in 1x assets, so exporting at retina resolution before importing into Principle ensures the assets are the correct size.
Images with “@2x” or “@3x” at the end of their filename will be imported at 1x point size and the asset will look correct when viewed on a retina screen. If you have already imported a high-resolution image without the suffix, manually halving the width and height of the layer results in the same thing.
The Inspector text fields understand basic equations like “320/2”.
Video and audio assets will play while the mouse is over the preview window.
To play video or audio seamlessly between artboards, copy the video or audio layer to both artboards and ensure the layers have the same name.
The media button’s time property is frozen by default, which allows seamless playback, but can be manually unfrozen to make the playback start over. Learn more about Frozen Properties
When one or more layers are grouped together, they get contained in one single group layer. Group layers have similar properties as of a layer and have their own position and size regardless of their child layer’s positions.
Layers can be grouped by selecting them and clicking the Group button in the toolbar, or pressing Command+G.
This is how UIKit, Android, and the DOM draw and animate elements and may be unexpected if you’re used to the way groups work in programs like Photoshop and Sketch. This behavior is useful to make the interactive area of a layer larger, rotate a layer around a different origin, or layer multiple animations on top of each other.
By default, the group takes the size and position of its child layers, but this can be manually changed with respect to the use cases:
- When group layer is larger than its children:
It can be used to increase the interactive area for its child layers.
- When group layer is smaller than its children:
It can be used to mask/crop the child layers.
- Group the layers (Command + G) to be clipped.
Set the group layer’s size to the desired cropping area.
Enable “Clip Sublayers” on the group. The area outside the group layer will get clipped.
To get a round shaped mask, turn up the group’s radius property.
Changes that occur on a layer when a user scrolls or drags on the screen is called continuous interactions.
There are three common interactions that are built into Principle: dragging, scrolling, and paged scrolling. These can be enabled independently for a layer’s vertical or horizontal axis or both.
Interactions in Principle are routed to the topmost layer.
Dragging makes the selected layer draggable. It allows the layer’s position to move when touch is held over it.
Scrolling can be enabled on a group layer. When a finger is dragged on a scrolling layer, the child layers will move with the finger, but the group itself will not change position.
Message threads or any large content make great candidates for scrolling.
If you turn on scrolling on a layer that doesn’t have any child layer, Principle will automatically create a group for you, with the name ‘Scroll Window’.
Turn on “Clip Sublayers” on the scrolling layer to hide the child layers when they scroll outside.
Paging is just like scrolling, except it automatically snaps its scroll position to group-sized increments when scrolling ends.
Use paging for image carousels, home screens with icons, any of those card UIs that are so popular nowadays.
If you’d like to add padding between paging groups, make the paging group a little larger than one element, and space the elements out.
Events trigger transitions between artboards.
- Select a layer and click the lightning bolt button that appears to the right of it.
- Drag from one of the listed options (e.g. Tap, Long Press, etc.) to the destination artboard.
- A transition arrow for that event, that points from the source artboard to the destination artboard, will be added to the canvas.
Layers with opacity of 0% are not interactive. To create a clear tappable area, use a clear RGBA fill instead of 0% opacity.
Fires when the layer is touched and released. It is commonly used for buttons.
Fires when a finger has been held on the layer for half a second.
Touch Down and Touch Up breaks the Tap event into two parts.
- Touch Down
Fires when the finger comes in contact with the layer. It is useful for transitioning a button to a highlighted state.
Fires when the finger lifts off a layer. It is useful for un-highlighting buttons. It doesn’t fire if the touch originated on another layer.
An event can be triggered at the beginning or at the end of dragging action. Adding drag begin or drag end to a layer will set its vertical and horizontal property to drag if it hasn’t already been set.
- Drag Begin
Fires when the finger is placed on the layer and begins moving.
If a layer with the same name is on the destination artboard, its draggable state will determine if the drag interaction continues after the event fires.
- Drag End
Fires when finger that was moving on the layer is lifted.
For scroll events to work, the horizontal or vertical property of the layer needs to be set to scroll or page.
- Scroll Begins
Fires when the layer begins scrolling.
Fires when the finger scrolling the layer is lifted. It is possible that the layer may continue scrolling after this event, as it decelerates, and eventually comes to a complete stop.
Fires when scrolling comes to a complete stop. Because deceleration takes place, after the scroll is released, this event may have a longer-than-expected delay before it fires.
Events can be triggered by hover action.
- Hover Inside
Fires when the mouse moves inside of the layer.
Fires when the mouse moves outside of the layer.
Some of the scroll and hover events might be restricted based on the pointing mechanism (trackpad/ mouse/ finger) being used on the viewing device.
Auto event fires automatically, without user interaction. It can be used for looping prototypes and animations.
Auto events only fire when the mouse is over the Preview, in order to conserve battery life and your sanity.
To add a delay to an Auto event, click the Auto event arrow and delay its animations in the Animate Panel.
To delay auto events between screens that have no animation, add a dummy layer off-screen of both artboards at slightly different positions. This will create an animation that can be delayed.
If you would like to change the type of event that triggers a transition, you can delete the transition (click the transition arrow and press delete on your keyboard), and create a new transition with the desired event type. Your animation keyframes and curves will not be lost because they are stored in the artboard, and not in the transition. Learn more about shared animations.
When an event is triggered, Principle animates between the current artboard and the destination artboard. You can delay, change the timing, or set a different animation curve for any animated layer’s property from this panel.
Clicking a transition arrow above the artboards will show the Animate Panel, which lists all the layers that can be animated.
When two layers on different artboards have the same name and different properties, Principle will map those layers to each other, and will automatically animate between them.
No animation will take place in the following cases:
Case-1: If the layer has a different name on both artboards, it will simply disappear or appear with no animation.
Case-2: If the layer has identical properties on both artboards, you won’t see that layer in the Animate Panel because nothing about it will animate.
By default, all animations have a duration of 0.3 seconds and use the default easing curve used in iOS and OSX; you can customize this in Animate Panel using animation keyframes and curve selector.
In Principle, each row in the Animate Panel shows two keyframes, one representing the start time of the animation, the other, the end. Dragging these keyframes away from the origin (0s) changes the delay of the animation. Moving keyframes closer or apart, changes the duration of the animation
When animating between artboards, the Curve Selector helps map the speed at which the transition from one artboard to another takes place.
The built in curves are the same curves used in iOS and OSX. 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.
The easing curve determines the rate at which a property animates: does it move slowly and then speed up? Does it lurch quickly to the end, and then gradually slow to a stop? Behaviors like this are controlled with the easing curve.
Spring animations can be used by selecting “Spring” in the Curve Selector. This is useful for adding physicality and playfulness to layers, but should not be overused as it can be distracting.
The Curve Selector has options for the spring’s tension and friction. A spring animation does not have an end keyframe because the spring animation’s end time will be determined by the physics simulation.
To change the duration of a spring animation, change the tension and friction values.
Sometimes it is useful to maintain the value of a property from the previous artboard during a transition. Principle calls these types of properties “Frozen”.
You can freeze a property by clicking the snowflake icon in the Animate Panel. Freezing a property prevents it from being changed, and thus animated, during a transition.
Frozen properties can be used to remember things from other artboards such as a group’s scroll offset, the position of a draggable layer, or the opacity of a selected element.
Principle freezes the Scroll X and Scroll Y properties by default so that the scroll position is maintained between artboards. If you need an event to scroll to a specific position, you can unfreeze Scroll X and Y.
The animation information for every transition is stored in the transition’s destination artboard. This means that all transitions going to a particular artboard will have the same animation settings.
For example, if you use a spring animation in the transition going from artboard A to artboard B, then a spring animation will also be used in the transition going from artboard C to artboard B.
Want to make an interactive parallax effect? Want a layer to rotate while it is dragged? Drivers are for you. Drivers connect changing properties to each other using keyframes.
Unlike animated transitions, which occur “between” artboards, drivers animate in artboards. Click the Drivers button to show or hide the current artboard’s drivers. If your mouse doesn’t support horizontal scrolling, hold space and drag the Drivers panel to scroll.
Drivers work similarly to a typical animation timeline, except drivers animate based on a changing property (scrolling and dragging), instead of time.
In order to create a driver, a property which could change needs to exist on the artboard, this is called a Driver Source. Draggable layers, scrollable layers, and the child layers under them will automatically be listed as Driver Sources in the Drivers Panel.
Once you have a Driver Source, you can use it to control other properties.
- Select a layer you’d like to control.
- Click the blue “+” button in the Drivers Panel.
- Choose which property (opacity, width, height, angle, etc.) you’d like to drive.
- This will create a driver with a keyframe for the current value.
By itself, this single keyframe will not do anything. Every Driver Source can have two or more keyframes which leads us to:
- Drag the gray driver cursor to a position that you’d like to add a new keyframe.
- At the start of the keyframe, set value for the initial state of the layer.
- Drag the cursor to the desired position, and set value for the final state of the layer.
- Click the blue “+” button in the Drivers Panel to join the initial and final state.
- Principle will insert a new keyframe for you.
Keyframes can be removed by clicking on them, and then clicking the red button to the left of the keyframe’s row.
You can drag multiple keyframes by holding down the shift key
Components, introduced in 2.0, allow you to reuse design elements in multiple places and add embedded interactions to existing artboards.