Iron Hack| Prework | Exercise 2

Design Practice

This is an exercise for Iron Hack, and consists in mimicking an existing app in Figma.

What I felt like doing during the exercise

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.

Frame from Moto E4 Plus. Yeah, I know I need a new phone.

After that I copied the screenshots to Figma, and organized then with a determined spacing, so it would be easier to work.

All the screenshots aligned and ready to begin.

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.

My copy of Bolt's logo

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.

In detail, the shadow effect, plus rectangles with and without corner radius.

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.

Each search led to thousands of icons — the fun part!

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.

The images that I just copied from the original screenshot or from random images (maps).

With all the information inside each screen, I started to correct the position using the rulers.

Making it neat — vertically…
… and horizontally.

This was the final result. I believe it got really close to the original screens!

My final version of Bolt

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store