Design Practice — Figma
Exercise 2 of prework as a UX / UI student at Ironhack Berlin
What is Figma?
Figma is a vector graphics editor and a primarily web-based prototyping tool, with additional offline features enabled by desktop applications for macOS and Windows. You can use it to do all kinds of graphic design work, from wireframe websites, mobile app interface design, prototyping designs, creating social media posts. Figma’s feature set focuses on use in the user interface and user experience design, with an emphasis on real-time collaboration.
In this exercise, the idea was to choose an application that I would like to work with, capture at least five screens, reproduce the screens using the Figma tool. The goal was to try to create the perfect clone of these five screens.
Chosen application
I chose Natura’s app. Natura is a Brazilian company that has been operating in the cosmetic products sector since 1969. Today, Natura is present in Brazil, Argentina, Chile, Colombia, Mexico, Peru, Venezuela, France and the United States, in addition to 63 other countries indirectly. In 2020, with the acquisition of Avon, the Natura & Co group (a union of Natura, Aesop and The Body Shop) created the fourth largest group in the world in the beauty segment. I chose it because I find it intuitive, easy to use and they are strong in the online sales market. You can choose your products, make the payment and receive them at your home very easily. The way that Natura exploits its commercial potential through the User Interface involves its users.
Exercise screens
On the left are the screens I reproduced and on the right are the screenshot.
I noticed that the app’s predominant color is white and orange tones (color of Natura’s logo). The colors are inspired by the sun to convey the richness of Brazil. In some points, orange, green and blue are used, which in the color wheel are split-complementary colors. In most of the app I used the Roboto typeface, with font variations. In some parts, for example in the blue box on the Home screen, another type of font was used. It was a challenge for me to find a typeface that would fit in that space, I moved the font spacing and size until I found the size that fit best.
In the App I found several UI Elements such as radio buttons, list boxes, buttons, drop-down button, text fields, icons, image carousel and accordion container.
Conclusion
As it was the first time I used Figma, I had some difficulties at the beginning, but I believe that with practice I will be able to improve. Figma is very easy to use and it has many tools that help anyone who has never had contact with it before. Despite the difficulties at the beginning, the exercise went well.
