Iron Hack| Prework | Exercise 2
Mimicking Bolt app in Figma
This is an exercise for Iron Hack, and consists in mimicking an existing app in Figma.
I chose to copy the design from Bolt, a transportation app from Europe.
First, I took several screenshots with my own phone. Then I measured my phone and did a first frame with the correct height and width.
After that I copied the screenshots to Figma, and organized then with a determined spacing, so it would be easier to work.
I did the most intriguing part to me first, which is the logo. I was determined to do it entirely on Figma, step by step, and so I did it using simple geometric figures and boolean operations.
After that I went to Bolt website, and with the help of ColorZilla and Fonts Ninja (both Chrome plugins), I find out the correct green tone and the main font "Euclid Circular B".
With that information I could write almost everything, paying attention only to the color (that vary specially on tones of gray), and to the size of the font (that I found out it was increasing in 0.25 or 0.50 — and it makes a lot of difference on the final screen).
I also did all the rectangles, most of them with corner radius detail, and drop shadow effect.
For the symbols (and there was a lot of them) I got them all in the Noun Project website. It has a great variety of icons for free, and it was were I spend most of my time. Not all of the icons that I used were similar, but close enough to convey the message in this exercise.
Some images I preferred to just copy from the screenshot, like the little cars from the "Choose car screen", the illustration from "Code Free screen" and the last icons of the keyboard.
With all the information inside each screen, I started to correct the position using the rulers.
This was the final result. I believe it got really close to the original screens!
I really enjoyed this exercise, as I could learn more about grids to make everything legible and clean. It was my first time using Figma, so I learned a lot about the software and its possibilities.
This exercise also helped me to understand all the icons/symbols/details that are part of the high-fidelity, final product app, and that in the daily use are normally not noticed (unless you need it).
I hope to make my own products pretty soon!
Thanks for reading!