Phase launched a new feature, Prototyping, on June 16. Prototyping means creating a prototype, a prototype that is made before developing a service and releasing it to users. Prototypes are created to check for any problems before releasing a product and to design a better experience.
Prototyping is essential, especially when creating digital products. Because digital product users are constantly interacting with the UI rather than looking at a static screen, it is important to check the interactive experience in advance. In addition, when designing such experiences, prototyping is useful because it is much more direct to create them in a real form than to imagine them in your head.
However, it has not been easy to create a prototype with motion applied until now. Adobe After Effects, a representative motion tool, is a tool for experts, so it is complicated and difficult to learn, and many motion services provided as plug-ins in Figma are often unstable in terms of movement implementation and file management. Figma itself provides basic prototyping, but it is difficult until you become proficient, and there are functions that are not yet supported in detailed areas.
So Phase has released a feature that makes it easier and more convenient to create prototypes. Phase is web-based, so you can access it anywhere, anytime, and you can create prototypes by simply transferring Figma files.
The combination of Phase and Figma, which focus on motion and interaction, allows you to create prototypes more easily and quickly.
You can select only the desired parts of the motions and prototypes you have created and export them in various formats such as GIF, MP4, JSON, and also export them to Lottie, which is considered the next-generation development animation code standard. It is simpler than having to install the Lottie plugin in Figma and go through a separate process to export assets. In addition, in this update, we have improved the function that converted text to image path, so that it can be exported while maintaining the text format.
Detailed information such as figures required for complex prototype development can also be easily checked in Phase. Motions and prototypes created in Dev Mode can also be exported as React code that can be used immediately in development. Developing movements often requires consultation with developers from the ground up, but can be communicated with general code, shortening the work time.
Phase is a service that anyone can start. Even if you don’t know how to code, you can easily create an experience that is close to the service that users actually use. If you are a designer or a product maker, I hope you will experience Phase’s new prototyping function that has been released this time.
*This article was written with support.
