Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:2.1 hours
  • Overview
  • Transcript

4.4 Preformatted Code

Finally, we’ll add the last bit of styling into our typography design, and that’s for preformatted code display.

4.4 Preformatted Code

Hey, welcome to the last lesson in advanced typographic design in Figma, we're going to design one more specific element in this typography. And that is gonna be a pre formatted code block, which in HTML is the pre element PRE. So as we have our block quote, the first thing that we're going to need is a frame. So we'll just try to frame it's gonna be a usual 850 pixels wide, and we're gonna make this one 350 pixels high, and then centered. Then we're going to add in a text box, just a random size, we'll tweak this later, and we're gonna paste in a bit of code. This code will be in a text file in with your source files ready for you to copy and paste into this document. As usual, in Figma is gonna hold on to whatever font styling you're using in your most recently patched text item, so that was this. So let's just clean this up a little bit, first set it to be left aligned, that makes it a lot easier to see what we're working with. Now we're going to apply a font family, now if you remember from the last course, we went through an example of setting up a bunch of font stacks. And in that example, we chose the Inconsolata font for our Monospaced font. And when you're doing pre-formatted code block, a pre-element, you want to use a Monospaced font so that It looks like card basically. So we're gonna go into our font list here and start typing, Inconsolata, there we go, much like more proper code. It doesn't need to be as big as the text that we were using before. We're gonna bring the font size down to 18 pixels, that would be just fine. And now let's just bring up the size of this text box, that it's the right height, and now we're gonna start coloring. This vertically align the frame to start with, now we're gonna do something that will be an inverse of our block quite style so that it's really obvious that these are two different things. So we'll select a frame and for the background, this one here, instead of using a light color, we're going to select it, but then we're going to take it down so that it's darker. And then across the lift so that it's got a bit less color to it, and we're gonna choose a dark brown. We want it to be almost grey, so somewhere around here, a brownish gray blend. And the exact color that I ended up with this is 42403b, and now for the code, we're going to use a version of a light color. So that's already pretty close as it is, but I think that in order to make it a little bit more vivid, we're gonna just slightly tweak this color, So that it's a bit richer. So we're gonna drag this color picker over to the right, and just increase the amount of our yellow hue, yellowish-orangeish hue that we have in it. So we get to that there, and for this I ended up with the color code FFE5BBD. Now that's already looking pretty good, that's already looking like a nice decorative code example. And we're gonna just bring this in from the left a little bit, it's a little bit plane. So to help make it jump out a little bit more, I'm just gonna run a line, then left side of this box. So grab our pen tool, and we're just gonna click up the top hold Shift to lock it into a straight line, and then click down at the bottom. And then so you don't have this extra shape dragging off the end, we hit Enter to complete that shape, and now we just need to tweak the ends. Just drag each one of these ends out while holding Shift to keep their lines straight, to make sure that they cover the whole height of our box here. Hold down Ctrl to directly select it, now we're gonna increase the width of our line up to, I think about four, looks right? I'm gonna put over on the left here, four pixels from the edge roughly. So we've got about the same size gap as we have width on our line. And now we want a color on this lines that's gonna match our text, roughly speaking. So that looks pretty cool, but that's a bit too bright. One of the things that forms a part in designing typography is making sure that the elements surrounding the typography don't distract from it too much. So we're just gonna pull some of the color out of that strip, and we'll get that down to a more subdued, less saturated version of this yellow. And for me, the color that I chose ended up being BDB49C. All right, so there we go, there's is our pre-formatted code block for a lite version. And as usual, we're going to do the same thing on our dark version. So I've just copied the whole frame, hold down Ctrl and click to select this frame, and then paste, and that brings in our code here. And we're gonna go with a light on doc block here as well, but we don't wanna have those yellow tones. Again, we wanna shift this over to the purple, hues that we're using a doc design. So for the background color, I'm gonna start by just selecting a main area background color, so we'll just go with that. And then we're just gonna bring it up enough that there's a contrast with the background. So about there will do, the code that I used on this is 4F485A, for our text, we select that. We're gonna go with almost white, but not quiet white, we're gonna have a little bit of purple in it. So let's select this purple and then we're gonna drag the slide up all the way up to the top here. If you watch the hex code, change over here, you see that if you get all the way to the top, anywhere from left to right is gonna become pure white. But if you just a little bit down from it, then it's going to give you some of the purple in your color. So, we're gonna go just a little bit down from the top, and my final hex code for this one was FBFAFD. And then the last thing to do is just change up the color of this line here. Now this one if we went with pretty much any type of a light color, it's gonna look too distracting even if you turn that down, it's still gonna look pretty distracting. So we're actually gonna go with a really dark color. We're gonna bring this all the way down, To about here we're going to leave a little purple in it, but not too much. It's gonna be almost the same color as the background, so the exact color code you can use is 3F374B. And that wraps up our last element, so we've got a pre formatted code block for our dark color scheme, and our pre formatted code block for our light color scheme. And that wraps up everything that we wanted to cover in this course. So now between both of these courses, you've learned every single thing that I have to teach you about typography in web design at least until you get into the browser itself. This is everything that I know that you can cover in the design phase using an interface design tool, like Figma. So we have just one more video left in the course, we're just gonna have a quick recap of everything that we've covered. And I'll give you some tips on where you should from here to keep building on your learning. So I hope you'll join me in the final video, I'll see you there.

Back to the top