Figma: Designing Instagram Homepage

Figma is a UI design and prototyping tool. It helps clients or users to visualize the final product without investing hours in coding.

Designing existing apps can be a great start for figma beginners. In this article, we will be designing Instagram homepage in figma.

Figma: Setting up the environment

Create a “New design file”. Select “Frame” from top navigation bar. A sidebar will appear on the right side of the screen. Select “iPhone 13 Pro Max” (You can select any device of your choice).

Now, select the left most icon in the top navigation and select “Plugins” > “Browse Plugins in Community”.

Search and install following plugins:

1. UI Faces
2. Material Design Icons
3. Multiply
4. Material Symbols
5. Font Awesome Icons

Now, create 4 rectangles on the phone screen as shown in the picture. The first box will contain Instagram logo at left and add post, messenger icons on right. The second box will contain Instagram stories. Third box will have Instagram post. And the last box will have bottom navigation of Instagram app containing home, search, reels and heart icons along with profile pic at the end.

 

Designing Instagram header

Select the box, and change background color of the box to white (in the fill section) and either change border color to white or remove the border (in the stroke section). Download Instagram logo and place it in the top bar as shown in the image. Here, the height is 52 and width is 145. In Material Symbols plugin, search “add” and insert it into header as shown. In Material Design Icons plugin, search “messenger” and insert it into header as shown.

Designing Instagram Stories Section

Part 1: Profile pic and add button

1. Change the background and border color of the second block to white.
2. Create circle of width and height 76 and place it at the left end of the block.
3. Now, we will be using the plugin called UI faces to insert profile pic in the circle.
4. Open the UI faces, then select the circle and click apply avatar. A random image will be inserted in the circle.
5. Add another circle of width and height 23. Fill the circle with the color code of #0095F6 and add change border color to white.
6. Using Material Symbols plugin, insert “plus” symbol and place it in the center of the little circle as shown in the image.
7. Select “plus” icon and blue circle then right click and select “Group selection”.
8. Move the little circle around the profile pic as shown in the image.

Part 2: Instagram Stories

1. Click the profile pic and using Multiply plugin, create one more duplicate of the profile pic in the same column.
2. Using UI faces plugin, change its avatar.
3. Now, create a circle of width and height 80. Remove its fill by clicking on the “eye symbol” on the right side in the fill section.
4. Increase the stroke width to 2, in the stroke section.
5. Click the stroke color, a box will appear. on the top left of the box click the dropdown and select linear.
6. Add colors like red, pink and orange in the linear gradient to create Instagram story like effect as shown in the picture.
7. Finally, group the pic circle and story circle together and duplicate it using Multiply plugin and change avatars of other circles using UI faces plugin.

 

Designing Instagram bottom navigation

Change the background, border color of the last block to white.

Copy the profile pic from first block and place it in the rightmost end of this block with the width, height of 32 and add all the Instagram navigation icons as shown in the following image.

Note: For the reels icon, download a svg from google images

Now the design looks as follow:

Designing Post Section of Instagram

Part 1: Structure Create 5 rectangles and arrange them as shown in the picture. The top most block will contain profile pic, username and vertical dots. Second block will have the post image. Third block will have like, comment, share and bookmark icons. Fourth block will have likes and bio And the fifth block will have comment input.

Part 2: First and second block Copy the profile pic from bottom navigation and place it in the first block as shown in the image. Click on the second block and then change the fill type to image. Now select any image from computer and past it into the second block. You can change the avatar of the profile pic in the post using UI faces plugin. Insert text and add any username in it. Place it next to the profile pic as shown in the image. Change the text size to 12 and bold to medium. Select vertical dots from Material Symbols plugin and place it in the rightmost end of the first block as shown in the image.

Part 3: Third block

Using Font awesome, material design icons or material symbols plugins, insert and place all relevant icons as shown in the image.

Part 4: Fourth block

1. Copy the profile pic from the bottom navigation, change its width, height to 25 and place it in the leftmost end of the fourth block.
2. Copy the new profile pic, change its UI using UI faces plugin, change its border color to white and place it above the other image (use bring to front, when right clicked) as shown in the following image.
3. Insert a text of font size 11 with the text “Liked by _user1_ and 100 others” and bold the relevant parts as shown in the following image.

4. Insert another text of size 11 and add the username added to the post with a desired bio as shown in the following image. Also, bold the relevant parts.
5. Insert another text of size 11 and give it some grayish color, and write “View 5 comments”, as shown in the following image.

Part 5: Fifth block

1. Change the background and border color of the fifth block to white.
2. Copy the profile pic from bottom navigation and place it at the leftmost end of the fifth block.
3. Insert a text of size 11 and write “Add comment…”. Place it on the right of the image.
4. Insert a heart, circular add icon using any of the icons plugin and place them at the rightmost end of the block as shown in the following image.

Completed Instagram Homepage design in Figma