Next, let's learn about the software features of the Principle section together
1. Interface
Canvas: The canvas in the Principle center is where you complete most of your work. It contains all the drawing boards and the transitions between them. The current drawing board is highlighted with a green border. Principle automatically positions the drawing board from left to right. You can reorder the drawing board by dragging them in the layer list, but there is no other way to reposition them. When you move layers outside the boundaries of the drawing board, the Principle will separate the drawing board.
Layer List: The layer list in the bottom left corner of the window displays all the layers in the design. You can group and ungroup layers by dragging rows. You can change the order of the canvas by dragging the rows of the canvas.
Hidden Layer: Hovering the mouse over a row of layers will display a hidden button that looks like an eye. Click this icon to switch the visibility of layers in the editor, but it does not affect the visibility of layers in the preview.
Locked Layer: You can lock a layer by going to the Arrange menu and selecting Lock Layer. After locking, you will not be able to select the locked layer in the canvas. If the layer is locked, a lock icon will be displayed in the layer list. Click the lock icon to unlock the layer. Hovering the mouse over a locked layer will display a lock icon next to the cursor, letting 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 on the layer and use the "Select Layer" menu to select it.
Inspector: On the left side of the window and above the layer list, the inspector will display the properties of the selected layer.
Animation Panel: The animation panel appears at the bottom of the window and is used to customize the animation between the drawing boards. It can be displayed by clicking the "Animation" button on the toolbar or selecting a transition arrow on the canvas.
Linkage panel: At the top of the window, the "Linkage" panel displays the linkage of the currently selected drawing board. Linkage is used to create complex continuous interactions.
2. Painting
Drawing Board: Principle's drawing board works similarly to other drawing programs: each represents a unique state of your design. The size of the drawing board can be changed to accommodate different devices or window sizes. All drawing boards have the same size. If you need to change the size, simulate rotation, or change the window size, make the drawing board the maximum size you need and make the content change within that area. Some art boards may conceptually be the same screen, but slightly different. For example, apart from the play/pause button, the two art boards designed for a music player can be the same.
The dashboard displayed in the preview window will have a green border in the editor; The new layer will be added to this drawing board.
Rectangle: Click the "Rectangle" button on the toolbar or press "R" to add a new rectangle to the current drawing board. You can create a circle by setting the radius of the rectangle to a larger value. By dragging images (PNG, JPEG, TIFF) onto the image in the inspector, the image background can be added to the rectangle. The created rectangle has a size of 44x44 points - the recommended click area size for iOS.
Text: The text layer has properties similar to the "rectangle" layer and adds font appearance, alignment, and size. Unable to set animation for font appearance and alignment properties.
Custom fonts: Not all fonts on your computer can be used on iOS and will not appear in the preview. Install non iOS fonts on your device using apps like AnyFont.
Images, videos, audio: By dragging from Finder or using copy/paste, images, videos, and sounds can be imported into the Principle. If you are a Sketch user, copying from Sketch will flatten the selected content into a single image. By default, the aspect ratio of image and video layers is locked and can be turned off by clicking the lock icon in the inspector.
3. Continuous interaction
There are three common interactions in Principle: dragging, scrolling, and pagination scrolling. These can be enabled independently on the vertical and horizontal axes of the layer.
Drag: When you want to keep touch on a layer and allow the position of the layer to move, enable drag on the layer.
Scrolling: Scrolling can be enabled on the group map layer. When fingers drag on a scrolling layer, the sub layers will move with the fingers, but the group itself will not change position. Maps, message threads, or any large content are ideal choices for scrolling. If you turn on scrolling on a layer without any sub layers, Principle will automatically create a scrolling window group for you, which is great. Enable "clip sub layers" on the scrolling layer to hide sub layers when they scroll outside the group.
Paging: Paging is like scrolling, except that it automatically captures its scrolling position to the increment of group size at the end of scrolling. Using paginated image carousels, with icons on the main screen, any card user interface that is now so popular. If you want to add padding between pages, make the pagination group slightly larger than one element and separate the elements.
4. Event
Events trigger transitions between drawing boards. To add an event, select a layer on the canvas, click the lightning button displayed to its right, and then drag from one of the circles to the target canvas. Add transition arrows from the source canvas to the target canvas.
5. Animation
When an event is triggered, the Principle will perform animation completion between the current drawing board and the target drawing board of the event.
Animation mapping: If two layers on different palettes have the same name, they will be automatically animated during the transition period. If there are no layers with the same name on the source and target palettes, the layers will disappear or appear as having no animation.
The animation panel will display animation properties on layers with names on both the source and target palettes. If we have a layer with the same name on drawing board 1, located at (x: 0, y: 0), and drawing board 2 is located at (x: 0, y: 50). The animation panel will display animation information for the y attribute, but not the x attribute.
Custom animation: By default, all animations have a duration of 0.3 seconds and use the default slow motion curve used in iOS and OSX. You can customize this view in the animation view. Clicking the transition arrow above the canvas will display the animation view, which lists all the properties to be animated and the timeline for changing time and slowing.
Keyframes: Each row in the animation view displays two keyframes, one representing the start time of the animation and the other representing the end. Dragging these keyframes will change the delay and duration of the animation.
Freezing attributes: Sometimes, it is useful to maintain the attribute values of the previous drawing board during the conversion period. The principle refers to these types of attributes as "frozen". You can freeze attributes by clicking on the snowflake icon in the animation panel. Freezing attributes can prevent them from changing during conversion, thus enabling animation production. Freezing attributes can be used to remember content from other palettes, such as scrolling offsets, dragging the position of layers, or the palettes where components are located. The principle freezes the Scroll X and Scroll Y properties by default to maintain the scrolling position between the drawing boards. If you need an event to scroll to a specific location, you can unfreeze Scroll X and Y
