Start Creating Designs (Part 1): Creating Feed Page for Social App

In this topic

Welcome back to our Figma tutorial series! In this post, we’ll dive into the exciting world of design as we create a feed page for a social app. This tutorial focuses on mastering essential tools like the Shape Tool, Text Tool, and Color Tool to bring your design vision to life. Let’s get started!

Shape Tools

The Shape Tools in Figma allows you to create the foundational elements of your design, such as rectangles, circles, and other shapes. It’s perfect for designing components like post cards, buttons, and containers.

Create the Feed Card Placeholder

Select the Shape Tools from the toolbar or press “R” for the Rectangle Tool.
Click and drag on the canvas to draw a rectangle. This will serve as the image placeholder for our feed card.
Adjust the rectangle’s size by setting its Width to 361px and Height to 285px in the right-hand sidebar under the Layout panel.
Round the corners slightly using the Corner Radius setting in the right sidebar to give it a softer look.

Add a Profile Picture Placeholder

Use the Ellipse Tool from the toolbar or press the “O” key.
Hold Shift while dragging to maintain a perfect circle. This will serve as the placeholder for the profile picture.

Text Tool

The Text Tool is where functionality meets aesthetics. It allows you to add captions, usernames, and other text elements to your design while offering customization options like font, size, and alignment.

Add a Username

Select the Text Tool from the toolbar or press the “T” key.
Click on the canvas to create a text box and type in a placeholder username, such as “Username”.

Add a Post Caption

Duplicate the username text layer and edit it for the caption.
Adjust the text layout to “Auto Height” in the Layout settings in the right sidebar.
Set the width of the caption text to match the feed card placeholder at 361px.

Setting Up Text Properties and Style

Navigate to the Typography Properties panel in the right sidebar to customise the text style.
- Set the line spacing of the caption text to 16px for improved readability.

Save your text settings as a Text Style:
- Click “Apply Styles” in the Typography Properties panel.
- Click the “+” icon to create a new Text Style.
- Name the style (e.g., “Body Text”) and click “Create Style” to save it.

Color Tool

Colors can make or break your design. The Color Tool lets you set solid or gradient colors for text, shapes, and backgrounds, ensuring your design aligns with your theme.

Create and Edit Text Color

Since the app has a white background, high-contrast black text can strain users’ eyes. Instead, we’ll use dark gray for the text to enhance readability and reduce eye strain.

Select the text layers (username and caption).
In the Fill section of the right sidebar, click the color box to open the Color Picker.
Choose a dark gray shade that maintains readability without being too harsh.

Setting Up Color Properties and Style

Once you’ve selected the color, save it as a Color Style for easy reuse.

Click the “Apply Styles” icon in the Fill section.
Click the “+” icon, name your color (e.g., “Dark Gray”), and save it.

Let's Recap

With the Shape Tool, Text Tool, and Color Tool, you’ve built the foundation for a feed page in Figma. These simple yet powerful tools are key to creating structured and visually pleasing designs.

In the next tutorial, we’ll refine this design further and explore advanced features to take it to the next level. Thanks for following along, and we’ll see you in Part 2!