For this workshop we were taught how to design different things in figma. For example pixel densities, layout grids and wireframes.

Pixel densities

We were first taught to always design at 1x. Which is the rectangle 1440 x 900px, and is the same aspect ratio as a 13″ Macbook.

‘Pixel density’ is different on different screens. It’s measured in PPI (pixels per inch) and is higher for sharper images on newer more expensive devices. When you design in Fidma, you don’t always know what screen resolution or pixel density your screen will eventually be seen on. For this reason, always design in 1x – the lowest resolution of the screen you are designing for. As we will be working mostly in with vectors, the designs will be scaled up later on higher end devices that can support this.

Layout grid

In this part we spoke about grids, rows and columns and what the different parts of those are and which is best go use.

The layout grids on a frame are guides for aligning content. You can add as many of each as you like and show and hide them. You can store settings as pre-sets.

Grids

10 or 8px grids?

Figma by default uses a 10px grid, but 8px can be a safer choice as it is always divisible by 2.

Columns

12, 8, 4 columns

A 12 column grid can be a good choice for desktop as it divides by 2, 3, 4 and 6, offering flexibility.

For tablet, 8 columns is a good choice, and 4 columns for mobile.

Wireframing

Paper, Figjam, Figma

Wireframing can be done as paper sketches,, or in Miro, Figjam or Figma, or other dedicated tools.

We make wireframes to get the basic layout designed first before we get into higher fidelity work like font choices, colours and images.

Wireframes can be designed from scratch, or using toolkits and templates.

Wireframe designs can be copy-pasted from figjam or Figma.

Building a website

We were then set the task to follow instructions and build a website. Throughout this I learnt different short cuts that Figma has and how to align everything to columns.

I built the website below whilst following the instructions. The images below are still showing the grid because I left it on to show how I got the text and images to align to the page. These are screenshots of the whole web page.