Next, let's learn about the software features of the Principle section together
The working mode of linkage is similar to the animation timeline, but linkage is animated based on changed attributes rather than time.
Linkage source: In order to create a linkage, a property that needs to exist on the easel can be changed, which is called a linkage source. Draggable layers, scrollable layers, and optional attributes will automatically be listed as linkage sources in the Linkage view.
Linkage attribute: After having a linkage source, you can use it to control other attributes. Select the layer you want to control, click the blue "+" button in the "Linkage" view, and then select the linkage attribute you need. This will create a keyframe linkage with the current value. This single keyframe itself will not do anything, which leads us to add the following linked keyframes:
Linkage keyframes: To add keyframes, drag the gray driver cursor to the location where you want to add keyframes, and then change the value of that attribute. The principle will automatically insert new keyframes for you. You can delete keyframes by clicking on them and then clicking the red button on the left side of the keyframe row.
2. Components
The components introduced in Principle2.0 allow you to reuse design elements in multiple locations and add embedded interactions to existing art boards. Internally, components work similarly to standard Principle files; They have their own drawing boards, activities, and animations independent of their parents. If you edit an instance of a component, all other instances of that component will be updated. Components can also contain other components, enabling complex combinations.
The working mode of events within a component is the same as that of events on sub layers of a group. If a sub layer of a group or component has a click event, the click event will be triggered instead of clicking on the event on the group or parent.
If you need to create a resizing component, such as a pop-up menu, the best approach is to make the component the same size as the collapsed menu, and then expand the menu layer beyond that range. If you set the component to the size of the expanded menu, even folding it will prevent touch because the drawing board is very large.
Create and Edit: To create a component, select one or more layers on the drawing board, and then click the "Create Component" button in the "Principle" toolbar. These layers will be combined into a component, and you will enter that component to start editing it. Click the "Return to Parent" button in the upper left corner of the Principle canvas to return to the location where the component was created. 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 the component you want to edit, or press Enter when selecting a component.
You can drag the existing Principle file onto the canvas to import it as a component.
Touch path: The main route contacts the deepest and highest layer. If you have a component or transparent layer higher than everything else, it will receive touch. The component drawing board can be adjusted to be smaller or not outside the screen, so that when the content is not visible, the drawing board layer of the component will not receive touch.
If there are touch events in the component and touch events in the parent of the component, the component's touch may even touch because it is the deepest layer. This is the same way as triggering routing when there are events on both groups and their sub layers.
3. Import
Sket ch and Fig ma are vector drawing programs commonly used in static interface design. Designs created in Sketch and Figma can be imported into the Principle by clicking the Import button in the toolbar or going to File>Import.
When you need to import some content:
2. 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.
The Principle will import the Sketch palette and Figma framework in the order they appear on the page, from left to right, and then from top to bottom.
During the import process, there are some things that can cause layers to automatically flatten into images:
Fill: The layer must have a single solid color fill to avoid being flattened.
Borders: Layers can only have a single solid inner border at most, otherwise they will flatten out
Blur and other effects: Layers with blur or other effects will become flattened
A mask group or canvas with a mask layer will be pieced together into a single layer. To minimize the number of layers flattened due to masks, you can group mask layers and mask layers.
The text layer is flattened to an image because Principle does not support all text options in Sketch. Another benefit of flattening text is to ensure that all fonts are presented correctly when viewing the Principle file on iOS, which is different from the font on Mac.
Import troubleshooting: If the import fails, you can restart the Principle to run its compatibility check again. In some cases, updating the Principle is necessary to import from a new version of Sketch, which may have changed its script API. If there is no new version of the Principle that can be imported from your Sketch version, the Principle will display a link in the import dialog box to download a compatible version of the Sketch. If the import still fails, you can contact us to provide information about the Principles and Sketch versions you have, and we will investigate them.
4. Export
Once you create perfect interaction, you will want to showcase it to the world. There are several ways to achieve this.
Image: You can export a layer as an image by selecting the layer and clicking "Export Image of Selected Layer" in the "File" menu. This will export the PNG image of each selected layer to the folder where the Principle file is saved. If the Principle file has not been saved yet, the desktop will be exported to the desktop.
Video and GIF animations: To export a designed video or animated GIF, click on the camera icon in the upper right corner of the preview window. You can choose to use a circular touch cursor, arrow cursor, or hide the cursor in the recording. After selecting the cursor option, Principle will start the screen recording of the preview window. Because it is actually recording your screen, the export size of the video is limited by the resolution of the monitor. When the icon starts flashing, recording has started and you can start interacting with your design (recording may take some time to start). After completing the recording design, click the camera icon again to stop recording.
Export as Mac Program: If you want to share your design with others who may not have a Principle, you can export a standalone Mac program that anyone can open. Note: The export of Mac applications runs on a Mac computer, not on an iPhone. To export Mac designs, go to File>Export to Mac. The generated application can be shared according to your needs, but depending on your sharing method, compressing the application before uploading it to file sharing services or sending it via email may be helpful.
Animation value: Principle uses the standard Bessel slow-moving function, as well as the delay and duration values of the animation. Since this is the standard way to describe animation, these values are usually directly mapped to the code regardless of which platform you are targeting. Click and hold down the keyframe to view its time offset. Click the blue area between keyframes to access their jogging curves. Spring animation uses the standard RK4 physical integrator. We do not recommend using any UIKit spring API with duration parameters, as this is a rough approximation of spring physics rather than a true spring simulation.
5. Performance
Unlike static design tools, Principle needs to create animations for your design at a smooth 60 frames per second. You usually don't have to consider this, but for optimal performance, please remember the following points:
① Use images and videos with the same size as the displayed layer.
② If you are designing a photo viewing interface, you may take some very large sample photos directly from the camera, such as over 3000 x 3000 pixels. Due to the possibility that the interface may only display 150x150 pixel icons for certain images, it will be helpful to adjust image size and crop images before dragging them into the "Principle".
③ Flatten non animated groups into a single layer.
④ Some groups represent static elements, such as icons or status bars, and are not animated relative to each other. Combining these layers into a single flattening layer is helpful. If importing from Sketch, you can attach "principle flat" (without quotation marks) to the end of the group name in Sketch to import the group as a single flattened image layer.
⑤ Use layers as groups.
The rectangular layer of the Principle can contain sub layers, like a group. Using this technique can reduce the total number of layers. For example, the text layer of a button can be placed directly in the rectangular layer behind it, rather than wrapping two layers in one group.
