Web Design


Using shapes for design in Figma

Types of shapes

There are many shapes you can create in Figma, from rectangles to stars. Let’s start creating the blog design we will be creating in the next section.

Creating a blog post

Add a white rectangle to the frame. Give it a height of 183px and 1110px width. Then, either drag the corners by the little circles or edit the design panel to give it a border radius of 3px.

Then, drag the rectangle to the center. Red guidelines will show up for horizontal and vertical centering. After that, on the design panel, click on the + next to Effects. Then, modify the drop shadow to give each blog card some depth.

Adding a bit of flair

Right now, we just have a rounded rectangle with a shadow. Let’s add a bit of color. Add another rectangle with the same width but 10px height. Now, instead of adding a solid color fill, let’s add a linear fill. Click on Fill, then Solid, and go to Linear. We can modify the curve of the gradient created. We will add a blue-green gradient. Align it to the bottom of the card, and press SHIFT-UP. This will bring it up 10px, which gives a good gap.


In the next lesson, we will be adding text to the home page and creating an individual post page. Text will allow us where to place where everything will be.