Which prototyping software to use to improve the UX of your products? – Before starting the actual development of a product it is useful to make drafts and sketches that must summarize the final project.
It serves to create the best possible user experience and save time and money on possible problems, which can be found just by making prototypes.
Also for the realization of our platform for the creation of chatbots crafter.ai we first created a prototype.
We got along well with Figma and made this review to understand the benefits of this software.
FIGMA, OUR EXPERIENCE WITH THIS prototyping software
Figma is the tool we use for interface design and prototyping. It is basically available as a web application and there is a desktop version of it which is nothing more than a clone (probably Electron) of the web version. It is a relatively recent product (the first release took place in 2016) which in a short period of time has become a real game changer. Let’s see why.
1) STATE OF THE ART VECTOR GRAPHICS
Figma offers a set of vector drawing tools that has nothing to envy to traditional desktop software (eg Sketch, Adobe Illustrator, Affinity Designer, etc.). Of course, the amount of tools and options offered by the latter is not comparable but on the other hand, in the everyday work of graphic design of interfaces and user experiences it is really unrealistic to find yourself needing brushes, mesh warping and the like. And having only the tools you actually use available, in the long run, becomes an advantage, not only in terms of cleaning the interface but also in terms of productivity.
2) COMPONENTS, INSTANCES AND INHERITANCE
Here Figma begins to detach its competitors, tools based on raster images such as Invision included. In Figma, just like with modern frontend development frameworks, you can create reusable components. These components can be instantiated as often as necessary. Individual instances inherit all the basic characteristics of the original component but can be modified as needed. In practice it is sufficient to draw a “button” component only once and adapt the single instance by changing its color (eg status success / warning / info / danger) or shape. The changes to the original component are reflected in all its instances. This feature is particularly powerful also and above all in terms of designing complete design systems.
3) PAGE TRANSITIONS AND ANIMATED MICROINTERACTIONS
The features of Figma related to interactivity prototyping are in our opinion another leap forward compared to other similar products. Through a “node” interface it is possible to set page transitions, hover effects, internal scrolls, sticky elements, overlay screens, etc. An animation can be associated with each of these “status changes” between screens or within the individual graphic elements, from simple fades to complex animations such as bounces or push in / out. To all this must be added an automatic animation feature (Auto Layout) that allows Figma to selectively animate components and graphics starting from an initial and final state.
4) THIS prototyping software ALLOWS SIMULATIONS OF REAL DEVICES
With this prototyping software called Figma, prototypes can be viewed interactively within a dedicated presentation interface, in which it is possible to simulate the behavior of the project on different devices. Figma offers a number of presets that cover most of your needs but you can still configure your presentation at will if you have specific needs.
5) SELECTIVE EXPORTS FOR YOUR PROTOTYPES
The graphic elements drawn in Figma, whether they are components, instances, simple vector graphics, raster images or entire screens, can be exported in the most common formats (jpeg, png, svg, pdf) simply by selecting and configuring them for export. The output files are already optimized for the web.
6) GENERATION OF THE CSS CODE
For each element of the various screens, as for the general style settings, Figma generates the relative CSS code “on the fly”. Although in theory it is possible to export the styling of the entire prototype and use it in your frontend project, this feature is particularly useful in cases where you need to recover relatively complex code such as shadows, transformations and the like.
7) PLUGIN ECOSYSTEM
Being a web application and therefore being developed using basic web technologies (HTML, CSS and Javascript), Figma makes it really easy for independent developers to create and publish plugins. Through a dedicated API it is possible to have access to the various core features of the application as well as the objects and interactions present in the projects. This architecture led in a short time to the birth of a plugin ecosystem that covers virtually every imaginable use case: here are some examples (https://www.figma.com/community/explore).
8) TEAM AND COLLABORATIVE WORK
Last but not least, Figma offers a number of first-class collaborative tools. Through the interface it is possible to create work teams, set up Team Libraries of components and graphics, share prototypes and presentations with customers and external collaborators, comment directly on the prototype and work on the same project with several hands and in real time.
