Prototype interactive design of Principle and Proto specific operation of small white tutorial

Principle is a very popular prototype software in recent years, the recent work needs, that is, read the official website of several video tutorials, and then you can toss out the prototype can be used.

In general, Principle has the advantages of easy to start, efficient production, and other prototype software. Other users also said that Principle may be the easiest to make interactive Demo, the most comprehensive experience of the software.

Of course, before the 25 school also introduced the Mac platform interactive dynamic design artifact – Principle demo


The implementation principle of Principle is somewhat different from others, such as Proto. is a dedicated mobile prototype development platform that can build and deploy a fully interactive prototype of mobile programs, and can simulate similar products. It can run in most browsers, and provides 3 important interfaces: dashboard, editor, and player.

The interface of Proto is as follows:

Proto prototype design

Proto prototype mobile efficiency design official website:


The previous 25 schools introduced in detail the ProtoPie is a simple high-end APP prototype design tools and APP interactive prototype design tools: protopie advantages and disadvantages analysis


The following is the focus of the prototype interactive design software Principle and Proto specific operation difference:

Principle is the decomposition of the dynamic effect into several States, and then put several states in series, as for the middle is how to change, I can not care, you can also adjust it.

And Proto is the decomposition of the dynamic effect into an initial state and change process, give an initial state, and then I define how to change, and then the process of demonstration.

How to put it?

Proto’s way is more user intuitive, but it’s really complicated, and Principle’s principle is understandable, and it’s easier to make. So it might be abstract, let’s give you an example.


Principle and Proto interactive effect principle demonstration

As the figure shown on the left, three A, B, C in Pelle, they will change to the right of the state.

That’s what Proto did:

A: the initial state such as left, right movement 100px, get right;

B: if the radius of the initial state, expanded two times, get right;

C: initial state left, left is a rounded rectangle with a diameter equal to the radius, gradually narrowed to 0, get right.

In Proto, you need to define this process.

In Principle, you can directly to the two state lost enter, then tell me this is Priciple, from left to right effect, I will give you the good name, the A, B, C respectively A, B, C on the left, you go to change. Then the Principle calculates it automatically, and then automatically displays the process. Of course, there are some parameters that can be adjusted in the process.

After finishing the principle of Principle, and then combined with several demo given by the official website, we can basically make some prototypes that can be used.



The following is the interaction designer ( * 039) in the process of using some advice for everyone:


1, because Principle is the interactive prototype design artifact on the MAC computer, it must be used with sketch

The interface between principle and sketch is very similar, which seems to indicate the relationship between them.

All in all, principle and sketch are just like a duck in water.

Principle supports importing artboard directly from sketch, and after you import it, all layers are fully preserved. This saves a lot of trouble. After all, nothing can save you more than a “one click XXX”.


2. All modifications are completed in sketch

This is based on the point where the sketch imported from the artboard automatically overrides the old artboard, which ensures the feasibility of the proposal. Second, sketch is really much more powerful than principle’s editing function. And finally, there’s a point where the modifications made in principle can’t be exported back to sketch. So if you modify it in principle, then if you need to use it anywhere else, you have to do it again.


3 、 cooperate with rename it plug-in

When the principle was mentioned earlier, principle corresponds to the name. But when do the interface, there will be a lot of grouping is the same name, even in the same layer is. If the direct use will find the dynamic effect become very cool, all flying. When I first started, I was going to fix the layers of the questions one by one and then modify them one by one. Until I found Sketch’s rename it plugin. By adding a number to the layer (layer), such as the outermost layer, plus 1~100, the number of 1 of the formation of a layer, plus 1.1~1.100, and so on, so that you can ensure that the grouping (layer) name will not repeat. Can effectively solve the problem of dynamic random fly.



4. Use Principle to handle key processes

As mentioned earlier, principle defines dynamic effects by States. In theory, each change takes up a artboard. So with the increase of the process, the number of States will increase geometrically. And principle artboard is arranged in a row, so in the end, they will mess up. Therefore, it is recommended that only the principle area to deal with key processes, and ignore some unnecessary small process.


The above four tips are very useful for students who have just started using interactive design software Principle. It’s worth seeing.

The autumn leaves the content source demon Jane Book blog, the original link:

Leave a Reply