Make Principle a productivity tool (2) Linkage in a single page

Make Principle a productivity tool (2) Linkage in a single page

Sketch49 updated the link function, but the intermediate frame completion is the advantage of Principle over the new version of Sketch.

The words written in the front:

Sketch49 is officially released, and the long-awaited Link function is added to the new version. Currently, it only supports clicking to jump to the specified page. There have been many articles about this function, so I won't go into details.

Some people have begun to slander Flinto, Principle and other interactive tools (including myself), but for now, Principle and other tools still have irreplaceable value: single-page linkage and multi-page dynamic effect frame supplement.

Today I will mainly talk about the principle of single-page linkage and multi-page dynamic effects.

First of all, in the previous figure, what is the single page linkage:

Figure 1: When you manipulate an element on the page, other elements will move at the same time

Principle of single page linkage effect:

Monitor the changes of the X-axis or Y-axis position of the A element on the page, such as: when the A element changes from the X-axis position, the attributes of the B element change at the same time.

Figure 1: When the list in the list slides left and right (X-axis displacement):

1. The small yellow block of the navigation bar slides left and right at the same time (X-axis displacement)

2. The opacity of "Product Manager" and "UI Designer" is changing

PPS: When you want to perform a linkage operation, there must be an element in the page with any effect of "Drag: Drag", "Page: Page", and "Scroll: Scrolling".

When linking effects, the attributes that can be set are as follows:

Types of linkage effects


When the "active block" on the page slides left and right, the radius of the "linkage block" changes

The first step is to prepare two blocks

Step 2: Set the X axis (horizontal direction) scrolling effect for the active block

After setting the scrolling effect, the active block will automatically create a folder (for the reason, see the previous article).

After you set the scroll effect of the active block, the top bar does not change. Click the "Link" button on the top bar to expand an interface.

Before setting scroll: Nothing

After setting the scrolling: one more monitor bar for "active block-group" X-axis change (horizontal displacement)

The function of this bar, you click on the block corresponding to "0" and drag left and right, you will find that the "active block" is also sliding left and right.

Note: It is not the "active block-group" that is moved. When setting the scrolling effect, all the elements inside the folder are moved.

Officially here

The third step is to set the attributes of the linkage block that need to be changed

1. Click to select the linkage block (the linkage block must be selected)

2. An item named "Linkage Block" will appear in the linkage area, click the + sign

3. Select "Radius" in the pop-up box (we want to set the radius change)

After the setting is completed, there will be an additional "Linkage Block" entry on the page, and there will be a radius attribute.

The meaning here is: when the X-axis displacement of the active block is 0, the fillet (radius) of the linkage block is 0.

The fourth step, association

There is a "0" block in front of the linkage area, click and drag it to the position of 80, you will find that the "active block" in the screen has moved 80 to the left.

This operation represents when the active block moves a distance of 80 to the left.

After dragging to 80, select "Linkage Block" and set the rounded corner attribute value of the linkage block to: 40;

The result of the whole operation is: when the active block moves 80 to the left, the rounded corner of the linkage block will change from 0 to 40.

Note: The whole process is not instantaneous, but changes slowly. Principle will automatically help you fill in how the fillet changes from 0 to 80.

If you want to swipe to the right, just set a negative value.


When the relative movement of the X-axis or Y-axis occurs in the "active block" on the page (that is, the value of X or Y changes), other elements (change to the "linkage block" after setting) can monitor the change and set the linkage The properties of the block change. 

Next: Multi-page jump rotation effect principle

Let me briefly talk about the principle of multi-page: the reason for the multi-page animation is that there is a file named "small square" in both pages, but they have different attributes, such as: on the X axis of the "small square" on page A The position of is 80, and the position of the "small square" on page B is 100. Then when the page jumps from A to B, the small square will shift, and this shift is gentle, because Principle will help you fill it up The effect of the change missed in the middle.

Intermediate frame completion is the advantage of Principle over the new version of Sketch.