Design Practice in Figma
Ironhack Prework — Exercise 4
Another prework exercise for Ironhack’s UX/UI Design bootcamp gave us an opportunity to practice design in Figma, a vector graphics editor and prototyping tool. See my previous prework exercise here.
The point of this exercise was to get familiar with the editor and to focus our attention on detail when analyzing UI elements. We were asked to choose an app that we like and often use, take at least five random screenshots, and then re-create (clone) them in Figma as close to the originals as possible. I’ve picked Frantastique.
Frantastique is a French learning program that delivers short, personalized, and fun daily lessons, sent directly to your inbox. These lessons are customized to your needs, preferences, and your level of French. They will include professional scenarios, funny cartoons, dialogs with scripts, videos, and multitude of exercises. These lessons can be accessed through a web link or through an app on your phone. It’s your choice. And what I really like is that you complete these lessons at your own pace. If you skip a day or two, that’s ok. You won’t get another lesson until you submit the last one. So, no pressure there :-)
So, here are the screens :
To get the correct fonts, I’ve used WhatFont, a plugin for a Chrome browser. It turned out, I needed two fonts : EB Garamond and Open Sans. To get the right colors, I’ve used Color Picker — Pixel Color from a Mac App Store. Both tools worked great!
Here’s also a link to a Figma file:
This was a great exercise. I really enjoyed it ! But most importantly, as intended, as I was working on these clones, I noticed a lot of detail that just didn’t seem to be there before :-)
