Web Design

Text

Adding content to Figma Design

Adding Text

To add text, all we have to do is select the Text tool, and click in our frame. Let’s add our blog title first. Choose a font you like, give it black color, and a font size of 20px. Place it on the card near the top. 20px is the size of a <h5>. Give it a font weight of Bold.

Now for our date text. Give it black color, and a font size of 16px. 16px is the size of a <h6>. Give it a font weight of Semibold. Change the opacity to make the color gray. Using opacity to control colors is an advanced skill used rather than using a gray hex code. Place it below the title text.

Now for our short summary. Give it black color, and a font size of 16px. Place it on the card near the top. 16px is the size of a <p>. Give it a font weight of Regular. Place it below the date text.

Let’s add a view post and share icon. Create a blue text, semibold, 16px. Then, add a circle/rounded rectangle to the right of it to indicate a share icon that we will add.

Adding Main Page Text

Now, above the card, let’s add a title to our blog, some navigation tabs, and a description.

First, for the title. Give it black color, and a font size of 40px. Place it on the card near the top. 40px is the size of a <h1>. Give it a font weight of Bold. Place it below the top of the frame.

Next, for the description. Give it black color, and a font size of 20px. Place it on the card near the top. 20px is the size of a lead <p>. We will talk about what the lead is in a later lesson. Give it a font weight of Regular. Place it below the title.

Finally, for the navigation bar. We only have one main page to go back to, but let’s add a second tab for Instagram or something. Near the top right of the page, create text that says Home, is 16px, and black. Then, click on the three dots and and click the U. This will underline the text. This is good to show the current page. Now, duplicate the text by either copy/paste or CONTROL-D. Place this text to the right of the Home and change the text to whatever you want.

Finishing our Design

And with that, we are almost done with our design. In the next lesson we will learn how to export CSS from this, make another page, and create more blog cards.

chevron_up