FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 UI Mockup With Adobe Software

We often want to use graphics software to mock up our UI designs before we get to coding and the browser. In this lesson, we’ll see how variable fonts can be used in Adobe software, and I’ll give you a rundown of where other graphic design applications are with their plans to support variable fonts.

2.5 UI Mockup With Adobe Software

Hey, welcome back to Up and Running with variable fonts. In this lesson, we're gonna talk a little bit about what software you can use to create mockups for your sites that are going to be involving variable fonts. now, this may change over time, but right now, the best software that you can use, if you're wanting to do variable font mockups, is either Adobe Photoshop or Adobe Illustrator. And that's quite simply because the other applications just simply don't support variable fonts yet. And we'll talk about where that is heading in a little bit, after I just show you how variable fonts are gonna work in Photoshop. And as I mentioned at the end of the last lesson, not only are you gonna be able to use Photoshop to help you with your mockups, but you're also gonna be able to install a variable font on your system. Then open up Photoshop, and help play around with it using Photoshop as another preview tool. All right, so let's see what you need to do in Photoshop to work with variable fonts. So first we're just gonna select the text tool. And we're just gonna add in a little bit of text. And now if I have a look at my list of available fonts, the first thing that I'm gonna wanna know is, how can I tell the difference between which of my fonts are variable fonts and which of them are regular fonts? Well, Photoshop has actually made this really simple. It's actually pre-installed a whole bunch of variable fonts for you. And the way that you identify them is they have this little var symbol over the o that stands for Open Type. So any of these var symbol fonts that you choose are gonna to be fully functional variable fonts that you can check out inside Photoshop. So let's grab the Decovar font, and then we will check out how Photoshop gives us access to the name instances and the axes in a variable font. So with the layer selected that you have your variable font on, you wanna look in the Properties tab here. So if you don't see that on your layout, go up to Windows and then select Properties. Now if we scroll down, now we can see sliders for all of the different axes of Decovar. So we can mess around with any of these as we want. And we can put together whatever kind of variation that we want of our fonts. Or, We can go up here, and we can choose specific name instances. You go directly to the different looks that have already been designed as part of the font. And as I mentioned before, that's also gonna give us an easy way to look more closely at the axis values that are involved in each one of our named instances. So that we can recreate those looks with our CSS. So that's everything that you need to know to work with variable fonts in Photoshop. They're also supported in Adobe Illustrator, so you can use that if you prefer. As far as other software options, the mockup design that might be more specifically catering to interface design. I suspect one possibility that might come up in the future is support for variable fonts in Adobe XD. And that actually just became a free piece of software. So definitely keep an eye on that, in case Adobe decides to bring over their variable font support into their interface design software. And then I'll just give you a quick update on the status with other design applications. Affinity Designer right now doesn't seem to be showing any particular interest in adding variable font support. On their forum, somebody asked about it, and they've said pretty much that they've got other things that they wanna do first before they look at variable fonts. Gravit Designer has said that they do want to add more support for Open Type features. But they haven't specified which Open Type features and if that might involve variables. But keep an eye on version 3.5 to see what comes up in that. Figma have definitely shown a lot of interest in variable fonts. One of their representatives here said variable fonts are magic, it would definitely be cool to see them supported it in Figma, or we should add it to our feature request list. So that sounds fairly positive, we can probably expect to see variable fonts show up in Figma in the future. And InVision app also looked very interested in variable fonts. They haven't specifically said that they're gonna be including support. But they did tweet out that they think the future of web topography looks promising with variable fonts. So I think that's also a pretty good indication that we're gonna see support for variable fonts in InVision app. So for now, you're looking at Photoshop and illustrator. And likely the next ones to come along will probably be Figma, InVision, and possibly Gravit Designer. All right, so at this point in the process, you've gone and found a variable font, you've previewed it. You've decided that you definitely wanna use it in your websites, and now you're almost ready to actually start building. But there's one last step that you have to go through before you can actually get into coding, and that is learning about browser support. So because this is a cooperative effort, we're actually seeing browser support come along much quicker for this than we have with other new features. But it's not quite at 100% yet. So in the next lesson we're gonna go over the level of support that there are in major browsers. Any little quirks that you need to look our for, and what's available to help you with development in dev tools. So we'll see you in the next lesson.

Back to the top