Trying out Figma

As you already know, I worked with GNU/GPL tools when I was a front-end developer. So in that sense, what I did design-wise was mostly done with Inkscape and Gimp. I need to learn the latest tools and I have used InDesign for one project before, but now is the time to get to know how Figma works.

What I have done so far? Well, Figma really has pretty cool tutorials that you can use to learn. But some months ago I found this really fun YouTube tutorial by Salomon Sanchez teaching how to create a Pokedex.

And here is the final result:

Sample of the UI I created following the instructions of Salomon's YouTube video. It's a simple Pokedex showing pokemons names and pictures
You can see the number of frames, only include one example with Charizard.

Create a portfolio in Figma

I also did this one on how to create a portfolio in Figma.

New Domestika course!

Since I was doing a Domestika course on illustration, I decided to search for one about Figma and I found one by Pablo Stanley (such a big fan of his work). The course is called “Web Design with Figma: Building Striking Compositions“.

Pablo Stanley in one o the frames of the intro video for the course We Design with Figma
Screenshot, Pablo Stanly explaining what is the course all about.

First homework: Find Examples and Put Them on a Figma Board! PRACTICE EXERCISE 2.1

  • Find examples of products or websites where visual hierarchy is being used.
  • Search for designs that have used Gestalt principles in ther visual language.
  • Share your findings with the community!

SAMPLE 1: Visual Hierarchy: Area with the logo of the Web Application is dominant and attracts the eye.
For this one contrast and scale were used. Subtitles: Both of these elements look more relevant and show more visual weight than the other text located in this area. It’s really cool having an option to see your own boards and create a new board separately

SAMPLE 2: Gestalt principle of Similarity: The icon “Other Apps” will look and behave in the same way, even if is located in different products by the same company (Google). In the images bellow: Gmail, Google Photos and Google Drive.

SAMPLE 3: Gestalt principle Common Regions: In Gmail there are different regions at glance in their design: 1- Left side for a menu bar, 2- then the inbox sidebar that also includes a list of labels, 3- In the middle you have on top a search bar and the emails listed in 3 different tabs. 4- Also on the right side there is an additional sidebar that you can use to interact with other applications like calendars, notes, todo list and contacts

SAMPLE 4: Gestalt principle of proximity: Microsoft Edge, we can see quick links to several websites, those look grouped together thanks to the correct use of white space.