MY FIRST EXPERIENCE IN UI DESIGN

When I decided to learn about UX design, I started with a basic theoretical understanding of UX design. I started with basic questions such as “What is UX design?”, “Why is it important?”, etc. You can find the answers to these basics in my previous articles.

So next moving on to practical knowledge, I started searching for tools to design an UI. I came across tools like Figma, Sketch, Adobe XD and so on.

After some research and guidance, I decided that Figma is a beginner-friendly tool to start learning with. 

To start from scratch, I found replicating UI designs that are already present will be a good start. So, before designing and implementing my own UI ideas I could become more familiar with the tools and basic functions of the Figma tool.

Let’s get into learning together.

STEPS:

1. Signing into Figma

I started the learning process by opening the Figma website and creating an account.

2. Choosing a design to learn from

I started looking into Figma resources to choose a free design to learn from. 

I selected a food delivery app UI kit to start with as it was not a complex design.  One can see the preview of a design by using the preview option.

3. Duplicating the resource:

After reviewing and selecting the design, I duplicated a copy of the resource so that I can make changes in the design.

You can align the pages next to one another for better practising. You can do it by just dragging the page and placing it wherever you want. It is simple.

PAGE 1:

   4.Process of designing

•  Choosing the right frame according to devices

You need an outline or a blank space to start designing with. Here, it is called a frame. To select a frame, I used the shortcut “F”. When you press “F”, You can see a lot of options to the left under “Frame”. 

We can choose the right device and the desired frame from the list. Here, I choose the frame “iPhone 11 Pro Max ”. After selecting, my new frame is available.

• Using different shapes from shape tools

Now my frame is ready to start designing it. So looking into my reference, it basically has two rectangles. In Figma, there are many shape tools available.

From the “shape tools” dropdown menu, select “rectangle”. Start drawing the lower rectangle shape in your frame by dragging it from a lower edge to the desired shape.

Now the lower rectangle shape is ready. Next, we can notice that the upper corners are curved. To do that, choose a corner radius tool and give desired measures.

You can change all 4 corner radius in the way you wish. For our reference design, the measures of upper corner radii are changed to 45.

As the lower rectangle outline is ready now, the upper rectangle is automatically formed.

• Adding background colour or picture to the shapes

Now the next thing we have to change is the background colours of the shapes. Select the lower rectangle by clicking it and you can view various options appearing to the right side.

You can see the option “Fill” which shows the background colour of the selected shape. Click on the option and a colour palette appears where you can select the desired colour. We can select a colour from the screen by using the “ colour selecting pen”.

By using this tool, I pick the colour from the reference and apply it to the lower rectangle. Next, in the same way, select the upper rectangle and apply desired background colour. The background design in the upper rectangle is complicated. So we ignore that for the beginner’s level.

There is also a circle shape in the middle of the lower rectangle shape. So select the “shapes” tool and select the “ellipse” option.

 Draw a circle by right-clicking and dragging the shape in the desired place.

You can change the width and height as desired. You can compare the measurements with the reference. By clicking on the shape on the reference, you can see the measurements of the shape. The colour of the ellipse shape is changed in the same way.

Now the background colours are ready.

• Choosing icons accordingly and placing them on the screen

The next step is placing the icon. There are many free icons plugins

available on the internet. You can search for them, install and choose the desired icon for your design. Here we can copy the icon from the reference and paste it into our design. We can change the width and height of the icon with the tools at the right.

 To check the alignment of the icon, you can use right click+alt and align accordingly. 

• Adding required text with the right font, colour and alignment

Next, we have to add text to our design. To add text, select the “text” tool from the toolbar.

By using that tool, draw a text box by dragging and dropping where you have to add the text. After placing the text box, type the text to be added. You can see that there are various options in the right to design our text. You can apply the desired font, size and colour for the text.

To copy the design of“Non-Contact Deliveries'' from the reference, I change the font to “Roboto slab”, normal font style to “bold” from the dropdown box, size to “36” and colour by picking the colour from the reference.

 Then, in the same way, add the paragraph below and style the same as the reference.

  Then align the text boxes in the same way we align other elements on our design.

• Placing buttons with the right font, colour and alignment

Next, we have to place the button at the bottom of the page. Choose the “rectangle” tool from “shape” tools and add a rectangle at the bottom of the page.

After drawing the rectangle, change the corner radius and choose the background colour.

Then add a text box in the green space. 

 Add “order now” text and style it by changing font, size and colour according to the reference and align accordingly. Then add another text box at the bottom of the button and add “dismiss” text. Style it according to the reference.

Now our first page is ready!

PAGE 2:

• Choosing the right frame according to devices

In the same way, we created the first frame, we can create another frame by using "f" shortcut for our desired device. After creating the frame, the first thing present on the page is the arrow icon on the right top corner. We will see how to install and add the plugin to our design. You can search for Figma icons and choose the plugin you need. I selected this plugin and installed it.

After installing the plugin, go to your Figma drafts which you are currently designing. If you right-click on the screen anywhere, you can see a pop-up menu appear.

Select the “plugins” menu and you can see the plugins you have installed. Select the desired plugin and all the icons are displayed.

Search for the “arrow” in the search bar and you can see all arrow icons available in this plugin. Select the icon same as the reference and it will be placed on the page.

Now you can drag the icon and place it anywhere you like on the page. You can also change the size of the icon in the desired way by dragging the corners of the icon.

• Placing text and styling it

We know how to place a text and style it from learning to design the first frame. In the same way, place a text box below the arrow icon and type “Categories” and style it according to the reference

• Designing the search bar

For the search bar, select the “rectangle” tool from the shapes tool. Place a rectangle below the text.

Then change the corner radii of the rectangle to 50 so that all the corners are curved and it becomes the required search bar shape.

Then change the colour by choosing the “fill” option and choosing the required colour from the reference. 

Then we have to place a “magnifying glass” icon on the search bar. Follow the same steps we used for the “arrow” icon and place the desired icon in the search bar.

Then style the size and place the icon according to the reference.

Next is the “search” text in the search bar. Place a text box inside the search bar and then add the text. Align and change the size, colour accordingly.

Next is the border of the search box is highlighted with a grey colour. To do that, select the search bar and in the “stroke” option change the desired colour.

• Designing the item cards

There are various pictures to be included. So first of all, download the pictures you want to insert into the design. I downloaded some relevant pictures from pexels .

To add the picture, select “shape” tools and then the “place image” option.

Select the desired download image from your pc. By right-click+ dragging the cursor, the picture will be added to the frame and then resize and align the image accordingly.

Change the top corner radius of the image to 10. Next, add a rectangle shape and change its corner radii to 10. You can see the measurements of the elements selected in the right panel. You can verify the measurements from screenshots added here.

Place the rectangle right behind our image. Such that the place is left behind for our text to be added below the image. If the rectangle shape appears above the image, right-click and select the “send backwards” option.

Then change the “fill” colour and “stroke” colour of the rectangle shape.

Next, add the text “vegetables (43) “ below the image using a text box and change its colour size and alignment according to our reference.

In this same way, I have designed six-item bars. There may be some difficulty while placing the text in the blank space. By changing the line spacing between two lines, we can align the text in the right way.

• Adding icons

Add a rectangle shape to the bottom to place the icons and change the “stroke” colour. For adding icons, follow the same steps we use for adding the “arrow” icon on top of the frame. 

Now all three icons are added and the second frame is ready!

PAGE 3:

Select the desired frame and change the background colour.

• Adding icons

We are now familiar with using icons. So let’s start with it. Add the “arrow” icon on the top and then the three bottom icons same as the last frame.

Next, we are familiar with designing a “search bar” too. So let’s do it again. Add the text “ vegetables” above the search bar and style it accordingly. 

• Styling the category bars

For the first category “Cabbage and lettuce (14)” , add the rectangle shape and change the corner radius to “50”. Then add text in the shape. Add background colour and style the text accordingly. Add the “tick mark” icon in the shape.

In the same way, style the other category bars. 

• Adding images

As we did in the last frame, download suitable images and then add them using the “place image” option in the shapes tool. Align them and change their size according to the reference. Change the corner radii to 20.

• Adding item name and price

Add a text box and add the item name. Next while adding price, you can see that “$/price” is light. So to change that use the “bold” dropdown and change it to “regular” by only selecting the desired text.

• Adding icons

Add rectangle boxes and change corner radius to 10. Change the background colour, stroke for each box and add suitable icons in them.

Make sure the sizes of the boxes are the same and align them accordingly.

Voila! Our third frame is ready.

PAGE 4:

 Add the fourth frame. We can see the frame is divided into two rectangle shapes.

So draw a lower rectangle and change the upper corner radius.Then change the  background color of the lower rectangle.

• Adding image

Download a suitable image. Add the image using the “place image” option in shape tools and align in accordingly.

The image hides the corners of the lower rectangle. So i select the lower rectangle, right-click and select the option “bring forward”.

• Adding text

Add the different text and style them according to our reference.

•  Adding icons

Add the rectangles and change their corner radii. Add required  background colour and stroke.

Add the icons from the plugin and add the “add to cart” text in the right rectangle.

You can also customize the colour of the icons. 

Now you can add  coloured icons in the rectangles.

Now, page 4 is ready.

PAGE 5:

Add the 5th frame .

• Adding icons

We are now familiar with using icons. So let’s start with it. Add the “arrow” icon on the top and then the three bottom icons same as the last frame. Customize the icon colour and add the icons.

 Add the top and bottom rectangles and add “dropshadow” for the upper rectangle.

Change the blur and colour of the drop shadow to get the desired output. Add stroke color to the lower rectangle.

For the middle icon, add an ellipse by using the “ellipse” tool from shapes. Add the ellipse on the right top corner of the icon and change the colour of the ellipse.

 Then add a text “8” into the ellipse and change its colour. Maginyfying the screen and styling small icons is much easier.

• Adding text

Start with the “checkout” text in the top rectangle.

Next, move on to the bold headings. Firstly, add the “Payment method” text . You refer to the style settings of the text in the screenshot attached.

In the same way, add the headings “Delivery address”, “Delivery options” and “Non-contact-delivery”.

Add the other texts and style according to the reference.

• Adding icons:

Add the desired icons in the same way we did for the last frames. Add “yes” text in the “switch” icon added near the “non-contact delivery” option at the bottom of the frame.

The 5th frame is ready!

PAGE 6:

Add the desired frame and change the background colour.

• Adding image

I downloaded an example credit card image from pexels. You can use the desired image and add it using the “ place image” option in shape tools. Change the corner radius of the image respectively.

Add the “dropshadow” for the image and also you change its colour.

• Adding text boxes

Add the rectangle boxes for the fields. Change its background colour stroke, size and alignment accordingly.

• Adding text

Add the text field headings and the spaceholders. Style then according to our reference.

• Adding icons

Add the “arrow” icon on the left top of the frame as the last frames. Add the camera icon, visa icon and the card icon. Change their style and position accordingly.

•  Adding button

To add a button, add the rectangle shape and change its corner radius. Change the “fill” colour to green .

Add “use this card” text in the rectangle and change its size and alignment accordingly.

Now you deserve a pat on your back for completing this work! You have learnt the basic tools to design a UI. You can start practicing with more reference designs and all the best for creating more amazing designs.