{"id":25102,"date":"2024-05-02T09:00:00","date_gmt":"2024-05-02T00:00:00","guid":{"rendered":"https:\/\/designcompass.org\/?p=25102"},"modified":"2024-05-02T09:25:07","modified_gmt":"2024-05-02T00:25:07","slug":"phase","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2024\/05\/02\/phase\/","title":{"rendered":"Phase: Easy motion tool like figma"},"content":{"rendered":"

Introducing the new design tool Phase. Phase is a motion design tool for web\/app digital products that was first launched in Korea today, May 2nd.<\/p>\n\n\n\n

When designing digital products, you often need a variety of animations. It is often used to gently express a brand logo or draw people's attention to a promotional banner when the app is first turned on. Micro-animations such as button movements are often applied to provide a little enjoyment in using the product.<\/p>\n\n\n\n

\"Homepage
\u24d2Phase<\/figcaption><\/figure>\n\n\n\n
\"Example
\u24d2Phase<\/figcaption><\/figure>\n\n\n\n

Everyone knows that motion creates a better user experience, but many people hesitate to do it because it requires more work than creating a static UI. Using code instead of images requires some adjustments on the development side. Additionally, animation tools are too heavy for what is needed, and plug-ins used in conjunction with Figma have limited functionality or are expensive.<\/p>\n\n\n\n

\"Phase
\u24d2Phase<\/figcaption><\/figure>\n\n\n\n
\"Phase
\u24d2Phase<\/figcaption><\/figure>\n\n\n\n
\"Phase
\u24d2Phase<\/figcaption><\/figure>\n\n\n\n

Phase is an interaction-focused design tool that allows you to easily create animations needed for UI. It is a lightweight, web-based tool that anyone who has used Figma can easily learn. The basic structure is similar to existing UI tools and video tools, but it is easy to learn quickly by deploying only the functions necessary to create motion. Design results can be exported as gif, mp4, and lottie extensions.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Being able to comment on the results while collaborating in real time is basic. What is especially attractive is that, unlike other tools, it allows version control. It is not easy to reverse motion once you touch it, but it seems to be a feature that will be used often. In the future, it will be good for prototyping to check app behavior in real time as well as motion and screen transitions.<\/p>\n\n\n\n

<\/div>\n\n\n\n