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. Since it is impossible to cover all the ways these features can be combined, this documentation focuses on describing how Principle works and leaves it up to readers to discover creative applications.
The canvas in the center of Principle is where you'll do most of your work. It contains all artboards, and the transitions between them. The current artboard is highlighted with a green border. Principle automatically positions your artboards from left to right. 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 when you move a layer outside the artboard's boundary.
The Preview allows you to interact with your design at any time, and is docked in the corner of the canvas. It can be detached into its own window by dragging it off the canvas. You can change the mouse cursor shown in the preview by selecting View->Toggle Preview Cursor Type.
The layer list on the bottom left of the window shows all of the layers in your design. Layers can be grouped and un-grouped by dragging their rows. The artboard order on the canvas can be changed by dragging an artboard's row. Learn more about layers
Hovering over a layer's row shows the hide button, which looks like an eye. Clicking the icon toggles the layer's visibility in the editor, but does not affect the layer's visibility in the Preview.
Layers can be locked by going to the Arrange menu and selecting "Lock Layer". Locked layers cannot be selected in the canvas. If a layer is locked, A lock icon will be shown in the layer list. Click the lock icon to unlock the layer. Hovering over a locked layer will show a lock icon next to the cursor to let you know that clicking may not select the layer you expect. If you want to select a locked layer in the canvas, you can right click the layer and use the "Select Layer" menu to select it.
On the left of the window and above the layer list, the Inspector displays the properties of selected layers.
Appearing at the bottom of the window, the Animate panel is used to customize animations between artboards. 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 drivers. Drivers are used to create sophisticated continuous interactions.
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 similarly to other drawing programs: each represents a unique state of your design. The size of artboards can be changed to fit different devices, or window sizes. All artboards will have the same size. 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 change inside that area. Some artboards may be conceptually the same screen, but with slight differences. For example: two Artboards of a music player design may be identical except for the play/pause button.
The artboard shown by the preview window will have a green border around it in the editor; new layers will be added to this artboard.
Click the toolbar's Rectangle button or press "R" to add a new rectangle to the current artboard. Circles can be created by setting the radius of a rectangle to a large value. An image background can be added to a rectangle by dragging an image (PNG, JPEG, TIFF) onto the image well in the inspector. Rectangles are created with a size of 44x44 points - the recommended tap area size for iOS.
Text layers have similar properties to Rectangle layers, with the addition of font face, alignment, and size. The font face and alignment properties can not be animated.
We recommend using share to web to share your designs, as it embeds the custom fonts from your design so that others can view the design faithfully. If you prefer to view your designs in the Principle Mirror App for iOS, you will need to use an app like AnyFont to install non-iOS fonts on your device.
Pictures, movies, and sounds can be imported into Principle by dragging from Finder, or with copy/paste. If you're a Sketch user, copying from Sketch flattens the selection to a single image. Image and Video layers have their aspect ratio locked by default, this can be turned off by clicking the lock icon in the inspector.
Assets are copied into the Principle file so that the design can be moved, emailed, and viewed without losing its assets. Because of this, try to use the shortest video and audio assets possible to keep the file size down. Keeping your asset size down will also improve speed when connected to an iOS device running Principle Mirror.
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 image, drag a new image onto the media button in the inspector, or click the media button in the inspector and click "Choose..." in the menu. 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.
An asset can be removed from a layer by clicking the media property in the inspector and clicking "cut" in the menu.
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. (Pro tip: the inspector text fields understand basic equations like "320/2")
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.
Video and Audio assets will play while the mouse is over the preview window. By default, assets will loop forever, but this can be changed by clicking the media button in the inspector and selecting "Play Once".
To play video or audio seamlessly between artboards, just copy the video or audio layer to both artboards and ensure the layers have the same name. The Media 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
Layers can be grouped in Principle by selecting them and clicking the Group button in the toolbar, or pressing Command+G. You can also group layers by dragging one row in the layer list on top of another.
Groups in Principle are actually just Rectangle layers with some child layers. Groups have their own position and size regardless of their child layer's positions. 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 Sketch, and Figma. 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.
You can crop layers by grouping (Command+G) and enabling "Clip Sublayers" on the group. To get a round mask, turn up the group's radius property.
By default, Layers will rotate and scale around their centers. If you'd like to rotate or scale a layer around some other point, you can use a group to do that. By grouping the layer, positioning it inside the group and rotating the group, you will be rotating the layer around a new anchor point. It is helpful to make the group have a width and height of 0 to make it easier to know where the rotation point will be.
There are three common interactions that are built in to Principle: Dragging, Scrolling, and Paged Scrolling. These can be enabled independently on a layer's vertical and horizontal axis.
Enable dragging on a layer when you'd like to allow the layer's position to move when a 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. Maps, Message threads, or any large content make great candidates for scrolling. If you turn on scrolling on a layer that doesn't have any sublayers, Principle will automatically create a scrolling window group for you, how nice. Turn on "Clip sublayers" on the scrolling layer to hide the child layers when they scroll outside the group.
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 now-a-days. If you'd like to add padding between pages, make the paging group a little larger than one element, and space the elements out.
Events trigger transitions 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, then drag from one of the circles to the destination artboard. A transition arrow will be added to the canvas that points from the source artboard to the destination artboard.
Dragging the outlet arrow to the selected layer's artboard will create a duplicate artboard.
Layers with an opacity of 0% are not interactive. To create a clear tappable area, use a clear fill instead of 0% opacity.
There are several types of events:
Tap #
Fires when the layer is touched and released without moving. Commonly used for buttons.
Drag Begin #
This event fires when a finger is placed on the layer and begins moving. Adding this event to a layer will make the layer draggable if it is not already. If a layer with the same name is in the destination artboard, its draggable state will determine if the drag interaction continues after the event fires.
Drag End #
Fires when a finger that was moving on the layer is lifted. Adding this event to a layer will set its vertical and horizontal properties to Drag.
Scroll Begins #
Fires when a scrollable layer begins scrolling. Adding this event to a layer will set its vertical and horizontal properties to Scroll.
Scroll Released #
Fires when a finger scrolling the layer is lifted. This event works for both scrolling and paging. The contents may continue scrolling after this event due to deceleration, or the paging animation. Adding this event to a layer will set its vertical and horizontal properties to Scroll.
Scroll Ended #
Fires when scrolling comes to a complete stop. This event works for both scrolling and paging. Because deceleration takes a while to completely stop, this event may have a longer-than expected delay before it fires. Adding this event to a layer will set its vertical and horizontal properties to Scroll.
Touch Down #
Fires when finger comes into contact with the layer. Useful for transitioning a button to a highlighted state.
Touch Up #
Fires when finger lifts off a layer. Useful for un-highlighting buttons. Doesn't fire if the touch originated on another layer.
Long Press #
Fires when a finger has been held on the layer for half a second.
Hover Inside #
Fires when the mouse is inside of the layer
Hover Outside #
Fires when the mouse is outside of the layer
Auto #
Fires automatically and without user interaction. 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 animations, you can add a dummy layer off-screen of both artboards at slightly different positions. This will create an animation that can be delayed.
Starting with Principle 3.0, components and their parents can communicate with message events. Message Events greatly reduce the complexity of prototypes by allowing components to control each other without having to navigate to a totally different artboard. Message events can be sent from component to parent, parent to component, or from component to component.
Events can send a message, listen for a message, or both. Events listen for, and send messages to, a particular layer: either a component or the component's parent. For a message to work there must be both a sending and listening event. For example, an email component could send a "Send Mail" message to the parent, and the parent has an event coming from the component that listens for a "Send Mail" message. Just because a component sends or listens for a particular message doesn't necessarily mean there is an event on the other end of that message. Principle will create both the sending and listening events for you when creating events into and out of components.
To send an event from a component to its parent, enter the component and begin creating a tap event as usual, but drag the arrow to the "Send to Parent" button in the top left of the canvas. Hovering over the button will show a popup that will let you choose an artboard in the parent. This will create two events: one in the component that sends a message to the parent when triggered by a tap, and another event in the parent that listens for the same message and then goes to another artboard in the parent.
To send an event to a component, drag the event arrow over a component with a flashing blue border to reveal the component artboard popup. Then release over the desired destination artboard.
Clicking the lightning button on a component will show a popup listing the traditional events such as tap, but will also show all the messages that the component sends to the parent.
Principle gives messages unique default names like "Event 1", but you can change this to give events more meaningful names or to switch from one message to another.
Double clicking the blue message on an event arrow allows you to edit the message. Principle has a little magic to make it so renaming a sent message will automatically rename the listening messages and vice versa.
Since messages are just text, the text must match exactly for the sending event to trigger the listening event. An event sending "Send Mail" will not trigger and event listening for "Send-Mail".
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.
Touches are routed to the top-most, inner-most nested layers that are marked as touchable and then passed up the parent layers until one of the layers can use the touch.
Let's go through a few examples:
Group (Has Tap event)
- Layer (Has Tap event)
Tapping the layer will trigger the layer's tap event. The group's event can only be triggered if it is possible to tap the group without touching the layer.
On the other hand consider this situation:
Group (Has Tap event)
– Layer
Tapping the Layer causes the group's tap to fire. Since the layer doesn't use the touch, it gets passed to the Group, which uses it for the tap event.
Components work the same way:
Group (Has Drag event)
– Component
–– Layer (Has Drag event in component)
Dragging the Layer will only trigger the Layer's drag event, since it is the inner-most layer, and the drag event on the group will not fire.
The touchable property allows you to control if a layer captures touches, or allows touches to pass through it. Adding an event (like tap) or a built in interaction (like drag) to a layer will mark the layer as touchable. Un-checking touchable will remove events and clear its' horizontal and vertical properties. A layer's touchable property does not affect it's children's touchable properties: a touchable layer will always be touchable even if it's parent is not.
For components with a large clear artboard it's useful to leave touchable unchecked so that the component doesn't prevent touches from going to other layers behind it. On the other hand, sometimes you want layers to be touchable so that they prevent other layers from getting touches, such when designing a overlay for a modal popup UI.
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.
The animate panel will show the animating properties on layers whose names exist on both the source and destination artboard. If we had a layer with the same name on Artboard 1 positioned at (x:0, y:0) and Artboard 2 at (x:0, y:50). The animate panel will show animation information for the y property, but not the x property.
By default, all animations have a duration of 0.3 seconds, and use the default easing curve used in iOS and OSX. The Animate view 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.
Each row in the Animate view shows two keyframes, one representing the start time of the animation, the other, the end. Dragging these keyframes changes the delay and duration of the animation.
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.
Clicking the blue area between two keyframes shows the Curve Selector. The Curve Selector has several built in curves, as well as a graph of the selected curve.
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.
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. 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. You can indirectly change the duration of a spring animation by changing the tension and friction values.
Sometimes it is useful 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 changing, and thus animating, during a transition. Frozen properties can be used to remember things from other artboards such as scroll offset, the position of a draggable layer, or the artboard a component was on. Principle Freezes the Scroll X and Scroll Y properties by default so that 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 properties to each other using keyframes. Unlike Animated transitions, which occur "between" artboards, drivers work in artboards. Click the Drivers button 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 an animation timeline, except drivers animate based on a changing property, 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 optional properties will automatically be listed as driver sources in the Drivers view.
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 Driver view and choose which property 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, which leads us to:
To add keyframes, drag the gray driver cursor to a position that you'd like to add a keyframe and then change the value of that property. Principle will insert a new keyframe for you automatically. Keyframes can be removed by clicking on them, and then clicking the red button to the left of the keyframe's row.
Components, introduced in Principle 2.0, allow you to reuse design elements in multiple places, and add embedded interactions to existing artboards. Internally, Components work just like a standard principle file; they have their own artboards, events and animations independent of their parent. If you edit one instance of a component, all other instances of the component will be updated. Components can also contain other components, making sophisticated combinations possible.
Events inside components work the same way that events on sublayers of groups work. If a sublayer 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.
To create a component, select one or more layers on an artboard and click the create component button 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 in 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.
Principle routes touches to the deepest topmost layer. If you have a component or clear layer above everything else, it will receive touches. Component artboards can be resized to be smaller, or off screen, so that the component's artboard layer doesn't receive the touches when the contents are not visible.
If you have a touch event within a component and a touch event in the component's parent, the component's touch even will get the touch, since it is the deepest layer. This is the same way that touches are routed when there are events on both groups and the group's sublayers.
Sketch and Figma are vector drawing programs often used for static interface design. Designs created in Sketch and Figma can be imported into Principle by clicking the import button in the toolbar, or going to File > Import.
There are a few things you'll need to import:
Sketch or Figma must have a document open
The document must have at least one Sketch Artboard or Figma Frame on the current page
If the document has multiple pages, the current page will be imported.
Principle will import Sketch artboards and Figma Frames in the order they appear on the page, from left to right and then top to bottom.
You can import a group or layer as a single rasterized image by adding "principle flatten" (without quotes) to the layer name in Sketch or Figma. This can be used to reduce the number of layers that get imported into Principle, which will make it easier to work with, import faster, and run at a higher frames per second.
To prevent a layer from importing, add "principle skip" (without quotes) to the layer name in Sketch or Figma.
In the import dropdown, you can select how flattened images will get scaled when imported. The scale factor doesn't affect the dimensions of layers, just the resolution of raster assets. This feature is useful if your Sketch or Figma file is at 1x resolution, but you'd like to have the Principle prototype look nice on a 2x or 3x retina screen.
If you have made changes to your Sketch or Figma file, it can be re-imported into Principle and animations, events, and layer mappings will remain intact. If you want to change the position or other properties of a layer that was imported, it's easiest to make that change in Sketch or Figma and then import again. Sometimes you may delete a layer in Sketch or Figma 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 or Figma document, or were imported from another document 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 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 imported document, so it will not be affected by changes made in Sketch or Figma.
As much as possible, Principle will try to import Sketch and Figma layers as native Principle layers so their properties can be animated. However, Principle, Sketch, and Figma'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 flatted into an image during import:
Paths
Layers that are more than just a rounded rectangle with a single radius will be flattened
Fills
Layers must have a single, solid color fill in order to avoid being flattened.
Borders
Layers must have at most a single, solid, inside border, or they will be flattened
Blur and other effects
Layers with a blur or other effects will be flatted
Masks
Groups or Artboards with a mask layer will be flatted into a single layer. In order to minimize the number of layers that get flatted due to a mask, you can group the mask layer and the layers it masks.
Text 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 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 us with information about what Principle and Sketch versions you have and we'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, you can renew your license use the latest version.
Once you've created the perfect interaction, you'll want to show the world. There are a few ways to do this.
In Principle 6 and later, Share to web is the easiest way for others to see your design. With one click in File -> Export -> Share to Web, you'll get a link that you can send to anyone to view in a web browser. Your license needs to be renewed or purchased within in the last year to share to web. You can renew your license on the account page to regain the ability to share to web.
You can export layers as images by selecting layers and clicking File -> Export -> Images of Selected Layers. This will export a PNG image of each selected layer to the folder that the Principle file is saved in, or the Desktop if the Principle file has not yet been saved.
To export a video or animated Gif of the design, click the camera icon in the top right of the preview window. When the icon starts blinking, the recording has started and you can begin to interact with your design. Click the camera icon again to stop recording. The export dialog allows you to choose the export format, cursor style, and resolution. In Principle 6.31 and later, you can include sound from your prototype in the exported video by enabling "Export Audio" in the video export dialog.
We strongly encourage you to export as video over gif; videos will have a smaller file size and be higher quality than gifs.
When exporting a Gif, you can choose custom export sizes by choosing a preset from the dropdown or entering in settings with this format:
45%
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.
134h
export a gif with the specified height, keeping the same aspect ratio as the artboards.
320w
export a gif with the specified width, keeping the same aspect ratio as the artboards.
400w 300h
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 may surprise you. TLDR: Export video instead of gif for higher quality and smaller sizes. Export Prores when alpha is needed.
Gif only supports 256 colors
If your design has many colors, or subtle gradients, you may notice that some colors are incorrect when you export to gif. This is because the gif file is having 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 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 does not compress well. 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 produce small gif files is to export small, short animations, with few colors.
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.
Gif animation is a resource hog
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 Mirror for iOS can be used to sync your designs to your iOS device in realtime as you work. 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. In design reviews, press Cmd~ to quickly switch between open Principle documents and the iOS app will switch files as well.
The design will continue to run even after disconnecting from USB, making it easy to show teammates.
If you would like to view your design on Android, Windows, or Linux, use Share to Web.
Principle uses standard bezier easing functions, along with delay and duration values for animations. Since this is a standard way of describing animations, these values will usually map directly into code, no matter what platform you're targeting. Click and hold a keyframe to see its time offset. Clicking the blue area between keyframes to access its easing curve. Spring animations use a standard RK4 physics integrator. We do not recommend using any UIKit spring API that takes a duration parameter, as this is a rough approximation of spring physics, and not an true spring simulation.
If you have feedback, we want to hear it! The best way to reach us is from the support page. The most helpful bug reports include a .prd file with detailed steps to trigger the problem. Feature requests are appreciated, but it's most helpful if you describe your problem rather than suggesting a feature to solve your problem.
Unlike static design tools, Principle needs to animate your designs at a smooth 60 frames per second. You generally don't have to think about this but for best performance it can be helpful to keep a few things in mind:
Use images and videos that are the size of the layer they will be displayed in.
If you were designing a photo viewing interface, you may have some sample photos straight from a camera that are very large, say more than 3000 by 3000 pixels. Since the interface may only show 150x150 pixel icons of some images, it will help to resize and crop the images down before dragging them into Principle.
Flatten groups into a single layer.
Some groups represent static elements, like icons or status bars, and will not ever animate relative to each other. It is helpful to combine these layers as a single flattened layer. If you're importing from Sketch, you can append "principle flatten" (without quotes) to the end of a group's name in Sketch to cause Principle to import the group as a single flattened image layer. For groups that are already in Principle, just drag the group from the layer list onto the canvas to create a flattened image version of the group.
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: Cmd+D
Duplicate and Move: Alt+Drag
Inspector Textfields: understand basic equations like "320/2+10"
Inspector Labels: dragging textfield labels quickly scrubs values
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
Check out the frequently asked questions on our support page.