In this video we’ll style up the appearance of blockquotes when used in our site design.
1.Introduction1 lesson, 00:37
2.Responsive Adjustments2 lessons, 32:50
3.Color & Accessibility4 lessons, 45:32
4.Element-Specific Typography4 lessons, 44:49
5.Wrapping Up1 lesson, 03:33
Hey, welcome back to advanced topography design in Figma. In this lesson, we are going to be designing a block quote style. Now a block quote is a great example of where the kind of styling that we set up here with an alternate background for text can be really useful. So if you don't know, a block quote is something that you would typically use to embed an actual quote from a person in your site and give it different styling to indicate that it is a quote. So we're actually gonna start with this frame here. And then we're gonna modify it and change up its style so that it works as a block quote. So we'll select that and duplicate it. And then just drag it down here, where we can work on it. And we will center it. We don't actually need all this text. This is a bit too much. A quote is typically quite a bit shorter. So let's delete from here. We're gonna start at brownie and we are gonna end at plum. So the first thing that we're gonna do is change up the styling that we have applied to our text here. Generally speaking, it's a good idea to give a quote a little bit bigger font size than the rest of your text, just makes it stand out more or something different. So we are gonna detach this text style. And then we're gonna increase this font size. We're gonna take it to about 21. That's gonna be a good size. We also wanna make it stand out a little bit more again other than ordinarily be bigger. So we're gonna go up to Regular and we're gonna change this to Italic. So that is already looking pretty nice. And to my eye, now that we've changed the font formatting a little bit on this, this text looks a little bit too dark. And part of that is gonna be because we're working with this purple hue. So what I'm actually gonna do to try to make this sort of a nice subtle blended look is I'm going to sample the color from the background here. And then I'm gonna use that to give us a darker color to work with. So we're gonna go with something that's a little desaturated, a little gray, but still keep some of our original color there. So we're gonna go somewhere around here. As usual, I have already selected a color previously. And in this case, the color that I went with is 64605A. So just a tiny bit lighter than what we're looking at just there. So you can see that is over in the bottom left corner, neatly completely desaturated, but with a little of our orangish hue still in there. So that gives us a nice sort of calm and subtle look. And for this purpose as well, now that we've changed up the formatting here, I feel that the letters look a little too crowded. So I think to give this some breathing room, make it a little bit more comfortable to read, we're gonna increase the space in between the letters, which we can do here. So I'm just gonna slide it up a little bit, not too much, about 1.5%, and that looks better. You never really know when you're going to need to change up letter spacing. It's something that you kinda just have to feel your way through and improvise with. Right, now we wanna make this a little bit more decorative. So let's just give ourselves a bit more vertical space to work with. And then I'm going to take paragraph here, drag it in, each side, so that we can make some room for a couple of decorative quotation marks. And actually, because this is not our normal paragraph, we don't really need this whole hierarchy of visual aids and everything. So let's just drag the element out of its parent. And we'll delete the things that we have in there for our visual aids from before. This alone isn't perfect yet. We'll get that set up after we add in our quotation marks. So we grab the text tool, click once here, and then just add in a quotation mark. Now we wanna increase this size of that quotation mark. We're gonna take that up to be quite large. We're gonna go to about 100 pixels. And you can see that this is not the type of quotation mark that's typically used when you're quoting a person and giving them attribution. For that, you will usually see a curly quotation mark. And the reason that we see this straight quotation mark is because of the font that we have selected. We have our Sans Serif font selected. But if we switch that to our Serif font, so Noto Serif, then we get that curly quotation mark. So we're just gonna move that up here so it aligns with the top left corner of our quotation. And now we want to change its color to working with this as well. So we're gonna sample our background color. And just like before, we're gonna drag this down until we get a nice sort of a subtle, soft brown there. So around about there will do the job. The exact color code that I ended up with was BAA480. Now we need the closing quotation mark, too. So I'm gonna duplicate that one, drag this down. And the way to get a closing quotation mark here is to put it closer to the right side of your opening quotation mark, and then just type in another quotation, and then delete the first one. So now that's our closing quotation mark. Now we wanna position this a bit better. We wanna have that a little bit closer to the edge. And this one as well. I'll show you how to make this more precise in just a moment. And then we're gonna increase the size of our text box back again, To about there. And we'll center it. And now actually, now that's gone onto your number of lines. We'll just move that closing quotation mark back up so it aligns with the bottom right corner. And we're gonna give our frame a nice subtle border. Now unfortunately, if we apply a stroke now with the frame selected, it's gonna put a stroke around everything. So I'll show you what I mean. So that's [SOUND] pretty ugly. So to get around that, we're going to need to draw a rectangle inside the box. Send it to the back, make it fit the frame. And then we're gonna set it to scale with the frame. And now we'll apply that same background color to it. And this is now a shape that we can successfully apply a stroke to. So we're gonna press the plus button here to add a stroke. One pixel is all good. We just want this to be a slightly different color to the main background. So around about here, that's gonna be good. My exact color of choice for this one is EADDC9. And now all we need to add in is some attribution to whoever the person was that originally gave this quote. So I think it was probably Gingerbread gummies that said it. So we'll grab our text tool again, add in Gingerbread Gummies, but make sure we capitalize their surname. Gonna add a little dash to the side here to indicate that this is the person who gave this quote. And now to give this a contrast with the rest of the quote, first up, we're gonna go back to our regular text. And we're gonna change this to the Serif version of our font. We'll leave it at the same font size. Or we're gonna bump the white up to semibold just to help it stand out a little bit more. And then we can just align it with the outside of the quote, probably bring it up just a bit. And now that is looking pretty spot on. So now let's just close down this box, that's making the paragraph move. So let's select that and we'll change that from being centered to locking itself to the top. Try again, all right, so now that completes our block quote style. Let me just actually move that up just a little bit, get it closer to the main text. Now, as usual, we wanna make sure that we test our contrast on this. So we'll select the frame and bring up our Color Contract Checker. So this is actually fine. What it's picking up on is the little decorative quotation marks here. So we can see if we change this drag bar, it changes the color there. We're gonna reset that. Now if you want to avoid that, because this is not actually a text item. We don't really need to know that that has a really great color contrast, because it's not essential to the reading process. What we can do is just right-click on this and choose Flatten. So we'll do the same thing over here and we'll flatten that one. So now that won't be seen as a text item anymore. And this time, when we check, We've got our passing score. All right, so now what we need to do is make a dark version of this block quote. So we'll copy that, come over to our dark frame, and paste. Now, we're gonna use the white background that we had up here. So we'll just select the rectangle that we set up as our background, so that's this one here. And we're going to just change that right up into the top left corner to get that to be white. And this time, we're gonna change this to use a purple color. I'm gonna show you a trick to translate this color that's gonna speed the process along a little bit, and that is just swapping out hue numbers. So right now, this value here is our hue. So the hue is the difference between something being orange or red or purple. If we change that number, it changes it to a totally different color. So for example, I can change it to 60. And now we've got a sort of a yellowish green hue that we're working off here. So what we're gonna do is look up the hue of our dark purple background color. We can see here it's 260. So then we can come back down to our text here and just change that hue color to 260. And now it gives us a version of the color that we already had, but with a hue that matches everything that we have going on in our dark color scheme. So we'll do the same thing with this text here, 260. And we can try it on our little quotation marks, too, 260. And that's actually a little bit too broad. We want something a bit more subtle for those quotation marks, because now they stand out more than the quote itself. So what we're gonna do is grab those. And we're gonna decrease their saturation. So that's this number here. You can remember by looking at this HSL, hue, saturation lightness. So decrease their saturation. Let's go with, say, 15. So that's starting to look a bit more appropriate. And we're gonna decrease their lightness as well, so just make them darker. Let's go with, say, 30. That's a bit too dark. Try 45, now that's getting pretty good. And then we're just gonna drag around here to sort of fine tune it. I think about there is good. Now we still have that yellow hue stroke color, they're in the outside. So let's sample our quotation marks to get a color that fits. And then because we are on a dark background, it's actually hard to see that border at all. So what we're gonna do is increase that stroke with up to 3. And now we can see our border much more clearly. So now we have the dark version of our block quote as well. At this point, we have only one more specific element that we're going to design, and that is gonna be a block of preformatted code. The element that that relates to in HTML is the pre, P-R-E, element. And it can be very useful to have a style for that pre-element already in the mix so that if you want to put a code example in any of these sides, then it's all ready to go. So we're gonna put that together in the next lesson. I'll see you there.