FD4B: Create the section heading, paragraph text, and quote block

We're now ready to create the elements of our case study page. We'll start by creating a section heading to break up our page into different topics, a paragraph for long-form text, and a quote block which will act as a visual break in the page for quotes that don't belong in the main body content.

Create the section heading

We'll start with the section heading.

1. Select the Text tool and click into the Case study exploration frame.
2. Enter a small bit of placeholder text. Click anywhere on the canvas to stop editing the text content.
3. Use the Typography section to change the font size to 28, the font weight to Bold, and the line height to 38.
4. Rename the text layer to Section heading.

Create the paragraph text

We'll create the paragraph text block next.

1. Click on a blank area of the canvas to deselect all layers.
2. Select the Text tool again.
3. Click and drag to create a text box about two thirds the size of the Case study explorations frame.
4. Start typing a few paragraphs of placeholder text. You'll notice that Figma remembered the text properties we set for the previous layer.
5. Update the font size to 20, the font weight to Medium, and the text resizing to Auto height. Keep the line height set to 38.
6. To increase readability, open the Type settings and set the Paragraph spacing to 24.
7. Set the text layer's width to 1000 to help prevent reading fatigue from having too many words on a single line.
8. Finally, rename the frame to Paragraph text.

Create the quote block

We'll use another text layer for the quote block.

1. Select the Text tool and click and drag to draw another text box about the same width as the Paragraph text layer.
2. Enter a placeholder quote.
3. Increase the font size to 24 and change the text to Medium italic to add some emphasis. Make sure the text resizing is set to Auto height, the line height is set to 38, and the paragraph spacing is set to 24.
4. To help the quotes stand out and act as a break between other content, we'll change the layer's width to 570 and its horizontal alignment to Align center. Learn more about text alignment.
5. Rename the layer to Quote.