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.
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.
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.
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.
Few examples of interactions and animations that make use of components are buttons, looping animation, reusable UI libraries, and more.
Events inside components work the same way that events on child layers of groups work. If a child layer of a group or component has a tap event, that tap event will get triggered, and not tap events on the group or parent.
If you need to make a component that changes size, such as a popup menu, the best approach is to make the component the size of the collapsed menu and then make the expanded menu layers go outside of that. If you make the component the size of the expanded menu, it will block touches even when collapsed because the artboard is so large.
- Select one or more layers on an artboard.
- Click the create component button (‘two gears’ icon) in the Principle toolbar.
- The layers will be grouped together in a single component and you will be taken into the component to begin editing it.
Click the “Back to Parent” button on the top left of Principle’s canvas to go back to where you created the component.
If you need to edit the component again in the future, you can select it and click the “Edit Component” button in the Inspector. You can also double click components to edit, or press enter when the component is selected.
You can drag existing Principle files onto the canvas to import it as a component.
Interactions in Principle are routed to the topmost layer. If you have a component or clear layer above everything else, that will get the interactions instead of the layers below it. You can resize your component’s artboard to be smaller, or off screen so that the component’s artboard layer doesn’t receive the touches when the contents are not visible.
Sketch is a vector drawing program often used for static interface design.
To import from Sketch click the import button in the toolbar or Go to File > Import from Sketch… or drag the layer of Sketch on Principle.
When import option is used to import a Sketch file, there are a few things you’ll need to keep in mind:
- Sketch or Sketch Beta must be running.
Sketch must have a document open.
The Sketch document must have at least one artboard on the current page.
If Sketch has multiple documents open, the active document window will be imported into Principle. If the Sketch file has multiple pages, the current page will be imported.
The size of the bottom-most artboard in Sketch’s Layer List will be used for Principle’s artboard size.
You can flatten a group into a single layer by adding an asterisk to the end of its layer name in Sketch. This is also helpful to reduce the number of layers that get imported into Principle, keeping your file clean and agile. To prevent a layer from importing, put a minus sign (-) at the end of its layer name in Sketch.
In the import dropdown, you can select how flattened images will get scaled when imported from Sketch. The scale factor doesn’t affect the dimensions of a layer, just the resolution of its image, if it has one. This feature is useful if your Sketch file is at 1x resolution, but you’d like to have the Principle prototype look nice on a 2x or 3x retina screen. Principle will remember the last scale factor you used, so you don’t have to select it each time you import.
If you have made changes to your Sketch file, it can be re-imported into Principle so animations, events, and layer mappings will remain intact. If you want to change the position or other properties of a layer that was imported from Sketch, it’s easiest to make that change in Sketch and then import again.
Sometimes you may delete a layer in Sketch and then remake it, perhaps with a different approach; in these situations, Principle won’t know that this new layer is conceptually the same layer, so any events that were placed on the old layer will be lost. Artboards that have been deleted from the Sketch file, or were imported from another Sketch file will not be affected by importing again.
If you find you need to make visual changes to your layers, it’s best to do so in the original Sketch document, and then import again. This includes creating duplicate artboards or layers.
Duplicating an imported layer in Principle will create a layer that doesn’t have a 1:1 mapping to the Sketch document, so it will not be affected by changes made in the Sketch file.
As much as it can, Principle will try to import Sketch layers as native Principle layers so their properties can be animated. However, Principle and Sketch’s features differ, so the import can’t always be 1:1. For example, Principle doesn’t have blend modes, so all Sketch layers are imported as having a Normal blend mode. Usually, you can work around these differences by flattening the layer, or group of layers, into a single image layer.
There are a few things that will cause a layer to get automatically flattened into an image during Sketch import:
Layers that are more than just a rounded rectangle with a single radius will be flattened.
Layers must have a single, solid color fill in order to avoid being flattened.
Layers must have at most a single, solid, inside border, or they will be flattened.
Shadows, Blur, other effects
Layers with a shadow, blur, or another effect will be flatted.
Groups or artboards with a mask layer will be flattened into a single layer. To minimize the number of layers that get flattened due to a mask, group the mask layer and the layers it masks.
Text layers are flattened to an image because Principle doesn’t support all of the text options in Sketch. Flattening text has the side benefit of ensuring that all fonts render correctly when the Principle file is viewed on iOS, which does not have the same the fonts as your Mac.
If importing fails, you can restart Principle to rerun it’s Sketch compatibility check. In some cases, updating Principle is required to import from new versions of Sketch, which may have changed its scripting API. If there isn’t a new version of Principle that can import from your version of Sketch, Principle will show a link on the import dialog to download a compatible version of Sketch. If importing still fails, you can contact Principle with information about Principle and Sketch versions you have, and they’ll look into it.
You can update Principle by selecting the “Principle” menu and clicking “Check for updates”. If check for updates is grayed out, the update has already downloaded, and restarting Principle will install it. If your license was purchased more than a year before the latest version of Principle was released, a new license can be purchased to use the latest version.
Principle Mirror for iOS can be used to view and share your designs on iOS devices. Download the Principle Mirror app onto your device and connect it to your computer’s USB port. Principle for Mac and Principle Mirror will find each other automatically, and the top-most Principle document will be sent to your device.
Once loaded, the design will continue to run even after disconnecting from USB, making it easy to show teammates.
In design reviews, press Cmd~ to quickly switch between open Principle documents and the iOS app will switch files as well.
Once you’ve created the perfect interaction, you’ll want to show the world. There are a few ways to do this. You can export your prototypes in an interactive or recorded format.
Interactive prototypes are working models of websites or applications, where the user can interact with the design. Once you’ve created the perfect interaction, you’ll want to show the world and there are a few ways to do this.
Interactive prototypes can be shared only in apple’s ecosystems, which includes Mac and iOS devices.
If you’d like to share your designs with others that may not have Principle, you can export a standalone Mac app that anyone with a Mac can open.
To export your design for Mac, go to File > Export for Mac. The resulting file can be emailed or shared however you’d like.
Export for Mac runs on Mac computers, not iPhones. If you’d like to share your design for iOS, see the next section, share to iOS devices
Unidentified Developer Warning
The people you send the app to may get a message saying it “can’t be opened because it’s from an unidentified developer”. This is because it was created by you (the unidentified developer). They can easily run it anyway by control-clicking the app icon and then clicking “open”.
If you’d like to share your design with others so that they can interact with it, they can install Principle Mirror on their iOS mobile devices (iPhone, iPad and iPod touch) and you can send them the file. The file you share must have the .prd extension and cannot be zipped in order for iOS to open it in Principle Mirror.
To open an attached .prd file from an email, tap the attachment, and then the iOS share button. Select Principle Mirror in the sharing panel or the “Open In…” button if Principle isn’t visible.
Your own server
If you’re concerned about using a file sharing service for security reasons, you can put the .prd file on your own FTP server. Share a direct link to the file and others can view it on their phone. Safari will show an “Open in Principle” button.
Dropbox, Google Drive, Box, etc
You can upload your .prd file to a file sharing service and generate a link to the file.
The Google Drive app has problems with special file types, so we do not recommend using it to share Principle files.
By default, Dropbox links will take you to a Dropbox page rather than to the file itself. You can bypass this by changing the end of the Dropbox link from “dl=0” to “dl=1”.
Recorded prototypes can be shared outside the apple ecosystem. These prototypes are recorded in video and gif format, and cannot be interacted with afterward.
- Click the camera icon in the top right of the preview window. You have the option to use the round touch cursor, arrow cursor, or have the cursor hidden in the recording.
After selecting an option for the cursor, Principle begins a screen recording (Ctrl+V) of the Preview window. When the camera icon starts blinking, the recording has started, and you can begin to interact with your design (it may take a moment for the recording to start).
Once you’re done recording your design, click the camera icon again to stop recording.
Video export does not currently support audio, so if your design utilizes sound, it will not be present in the recorded video.
When exporting a gif, you can choose custom export sizes by choosing a preset from the dropdown or entering in settings with this format:
Any number followed by a percent sign will export a gif that is a scaled down version of what you recorded; the output will be scaled by the percent you enter. If a percent is specified, width and height values will be ignored.
Export a gif with the specified height, keeping the same aspect ratio as the artboards.
Export a gif with the specified width, keeping the same aspect ratio as the artboards.
Export a gif with the specified size. The recording will be scaled down to fit within this dimension but will retain its original aspect ratio. Padding and a drop shadow are automatically added. The color set in the color well will be used to fill the background of the gif.
The gif format is very old (it was invented in 1987) and has some quirks that surprise many people.
- Gif only supports 256 colors
If your design that has many colors or subtle gradients, you may notice that some colors are missing, or wrong when you export it as a gif. This is because the gif file has to pick 256 colors from your design and fitting the whole design into those colors. If you want to produce a really nice looking gif, it helps to reduce the number of colors and gradients in your design. Alternatively, exporting as a movie will have much better color.
Gif files are very large
Most people’s are under the impression that gif files are small because they see lots of tiny, short animated gifs online. In reality, the gif file format is extremely difficult to make small file sizes with and for some content, impossible. If you tried to export a 1080p gif animation that is several seconds long, the file could easily be hundreds of megabytes. Exporting as a .mov will almost always result in a smaller file size compared to gif. The best approach to producing small gif files is to export small, short animations.
Gif only supports 1-bit alpha
Unlike PNG, which has 8-bit alpha, the gif file format only supports 1-bit alpha, which means a pixel is either fully visible or completely transparent. Since there can’t be a gradual transition from opaque to transparent, the edges of gifs with transparency look very jagged and pixelated. It is not possible to export gifs with a clear background or transparent elements from Principle because it would look bad.
Gif animation is a resource hog
Ever left your web browser open on a page with a few gifs only to notice your computer’s fans go crazy and your battery life disappears? That’s because animated gifs are resource intensive to play back. Unlike modern animation formats like mp4, there is no specialized hardware on computers to animate gifs efficiently. This is why Principle doesn’t support animated gifs as layers. It’s better to drag in a movie instead.
Principle doesn’t currently export animation values, but engineers can see them in Principle. Click and hold a keyframe to see its time offset, and click the blue area between keyframes to access its easing curve. These values are platform agnostic.
Add rectangle: R (Alt + R to add as child)
Add Text: T (Alt + T to add as child)
Add Artboard: A
Group: Cmd + G
Ungroup: Cmd + Shift + G
Bring to Front: Shift + Cmd + ]
Bring forward: Cmd + ]
Send Backward: Cmd + [
Send to Back: Shift + Cmd + [
Nudge: Arrow Keys
Big Nudge: Shift + Arrow Keys
Rotate: Cmd + Drag handle
Rotate in 15 degree increments: Cmd + Shift + Drag handle
Duplicate and Move: Alt+Drag
Rename Layer: Cmd+R
Pan: Space + drag
Zoom in: Z + Click
Zoom out: Alt + Z + Click
Continuous Zoom: Alt + Space + Drag
Zoom in: Cmd + =
Zoom out: Cmd + –
Zoom All: Cmd + 1
Zoom Selection: Cmd + 2
Center Selection: Cmd + 3
Actual Size: Cmd + 0
Pan: Space + drag
Zoom in: Z + Click
Zoom out: Alt + Z + Click
Continuous Zoom: Alt + Space + Drag
Pan: Space + drag
Select Parent: Esc
Select Child: Enter
Select Next Sibling: Tab
Select Previous Sibling: Shift+Tab
Select all Siblings: Cmd + A
Change cursor type: View->Toggle Preview Cursor Type
Rewind Prototype: W
Start recording video: Ctrl+V
Start recording video without cursor: Ctrl+alt+V
For queries regarding educational discounts, license, reseller questions visit their website.
To get in touch with the Principle team, click here