The Bowen Design

Figma is more of a UI/UX design tool than a visual designing or illustrating tool like Adobe Illustrator.

This post is about me exploring to create User Interfaces,

So, I will take you through the process of how I came up with the above image using figma.

Step 1 Create the frame

To start with, I added a frame 1440 X 900

Then I added columns grid of 12 columns, a margin of 160, gutter of 20.

Step 2 Add Texts

I went ahead to create the texts on the page

Header

Font Family: lato,

Bold

Size: 64px

Line height: 90%

Colour: #333333

Paragraph

Font Family: lato,

Regular

Size: 24px

Line height: 90%

Colour: #444444 with 25% oopacity

Note: Do not use pure black (#000000) on a white background because it causes eyestrain.

Step 3: Add the button

I went on to add the view resturant button.

Rectangle

Size: 265x72

Colour: #003358

Text

Font Family: Lato -Regular

Colour: #FFFFFF

Size: 18 px

Find an Image

I used the unsplash plugin to get an image of a restaurant

and then resisze it to fit 5 Columns and the margin

Below is what the restaurant— — -looks like now.

I went a step further and created a darker mode

Creating a dark mode

To acheive a dark mode, I changed the background colour to the navy blue accent colour I used on the button in the light mode and changed all the other text to black

Pls share your thoughts with me, If you will be trying this also, let me know.