Recently, I saw a lot of articles on the Internet recommending some books and websites related to UI/UX design. Mr. Xiong thought about it and decided to write an article recommending prototyping tools to share with you. This time, I collected 10 tools, which are mainly divided into the following three categories according to their characteristics: simple and fast, flexible and light, and comprehensive.
The first type of features: simple and fast.
Representative tools: Chainco, InVision, Flinto Lite.
Difficulty of operation: low.
Just like Chainco's slogan, this type of tool is an interactive presentation tool for UI designers. The three tools are all designed on the web side. Although the styles are slightly different, they are essentially the same. The interactive settings are mostly based on the creation of hot spots. Clicking on the hot spots to jump to the page is the main function. There is almost no learning cost and no operational difficulty. Domestic users may be more familiar with Chainco, but there is no foreign version of Chainco, and because of its collaboration function, InVision has shown a better side and won the favor of many foreign users.
The obvious advantage of using this type of tool is that you can directly import the pictures made by UI designers as interfaces, such as InVision and Flinto Lite, which can directly import PS or AI design files. However, they are and can only be interactive presentation tools for UI designers, because these three tools do not support setting up components and component interaction.
Chainco：
InVision： 
The second type of characteristics: flexible and brisk.
Representative tools: Mockplus, Proto.io 6, UXPin, Flinto for Mac.
Difficulty: Moderate.
The four tools in the second category are all good helpers for interaction design, and their common feature is that they are relatively light and fast in design. For example, Flinto for Mac, you only need to move the component position according to the level to create the corresponding interactive effect. At the same time, although these tools do not seem to operate in exactly the same way, they all adopt the basic operation method of dragging and dropping link points. The high degree of visualization in this operation makes the design process very simple and effective.
Mockplus can be said to be more representative among these four tools. Compared with Proto.io 6, which consists of small components and the design pattern of combining containers into other components, Mockplus provides more height directly. Package components. As a "lazy person", Mr. Xiong likes this way of simplifying complexity. And relying on this simple operation method and the more than 2000 vector icons that come with the program itself, you can even complete the prototyping well even when there is no network at all. Exported demo packages, HTML offline packages also make previews free from network constraints.
Flinto for Mac：
Mockplus：
The learning cost and operation difficulty of this type of tools are indeed higher than those of the first type, but if you compare with the third type below, you will find that the learning cost of the second type of tools is really Very low.
The third type of features: comprehensive functions.
Representative tools: Axure RP, Justinmind, Framer JS.
Difficulty of operation: high.
If prototyping wants to be fully functional, it will inevitably be linked to the code. In this category, Axure should be the more familiar one. It can also be said that Axure is one of the better prototyping tools that balances design difficulty and usability. However, even so, its variables, judgments, and other functions still stumped many interaction designers.
If Axure is looking for balance, then Framer JS is explaining what it means to "write" prototypes in code. This is the true code-based prototyping tool in this category, as long as you can write the corresponding code, it can turn your ideas into reality.
Although the functions of this type of tools are relatively comprehensive, the learning cost has been greatly increased, especially Framer JS, whose functions are so powerful that other tools cannot match, but the learning cost can also be said to be "a sword in ten years." Therefore, if you want to use this type of tool proficiently, it is best to have enough knowledge before trying it.
Framer JS：
The above is the recommendation of ten prototyping tools that Mr. Xiong recently explored and summarized. Everyone has a different understanding of prototyping and different degrees of mastery of various types of knowledge. I still hope that everyone can ponder more according to their own specific circumstances. I believe that one of these ten tools must be suitable for you!