Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

What fonts can I use? Plus font pairing in Figma

Course contents
SECTION: 10
Tips & Tricks 7:21
SECTION: 14
Working with Illustrator 4:16
SECTION: 19
Saving & History 5:42
SECTION: 24
Teams & Projects 5:19
SECTION: 27
Thumbnail update 4:10

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi ya, in this video we're going to look at what fonts am I allowed to use in Figma, which ones are really common to use, and then we're going to look at a bit of font pairing, kind of sticking free examples together, that look really nice, here we go. That's a good pairing there, just to help you out, if you are unsure about what fonts to pick, and which ones match, all right, let's jump in. 

So what fonts can I use? You can use kind of anything these days, you want to make sure that there is-- whatever font you use, there's a web version of it. Most commonly people will just use Google Fonts, Google Fonts or fonts.Google.com, just is full of free fonts that we can use commercially, and they're available to be used online, and inside of apps. 

So this is a great place to kind of get fonts. Why can't you just use all the fonts on your machine? It's mainly because you need to make sure that they are available, that's a different kind of font that ends up inside of apps and websites. So let's say there's a font that I bought the other day, so let's type in "Scott", I'm going to use capitals, "Scott Headphones", it's this one here, Geograph, I bought it, it's great, I love it, and when I was buying it though, it was here, I was like, "Great, I love this font," I was using it for t-shirt design for one of my last courses, and I went, "All right, I'm going to buy this one because it's a paid font." 

Don't be afraid to pay for fonts, this one here, and I decided that I wanted to use it for desktop version, and I just bought, instead of the whole thing for 300, I just bought the sizes that I want only for desktop, but if I needed to use this for an app or for a website, I need to pay for a different license. So you can-- it will depend on kind of how many page views, so know that you can actually put a lot of fonts online, but that is a bit of a hurdle, a lot of people avoid by using something like Google Fonts, because we don't have to pay for these. 

Google have really kind of, I don't know, beautified the web with their fonts, so you can go through and pick fonts from here and download them. Let's say that, like I've already had a little look through, how I got my fonts, you know, there was one called Crimson Text that I liked, I wanted a Serifed font along with a matching Sans Serif font, so I like this one, I was like, "Great." It's cool, you can type in here, so you can put in my marketing message, "Marketing Message", so you can kind of check what it looks like, and then you can either download parts of them, or download the whole family. 

What's nice about this is, you download them, you put them somewhere, open them up, and install them, you just double click on them, they install, pretty easy. What's really nice about that though is that your developer or whoever's making your website will be able to have access to the same fonts, they'll install them slightly different, they'll probably use a content something, network, something called a CDN, and they, they have different ways of making it happen, but it's the same font, which is nice, so, very common to use Google Fonts. 

There's a lot of alternatives for Google Fonts, if you've got an Adobe License, there's Adobe Fonts, you can use those, kind of free as part of your license, you can go to other sites where you buy them, like this is just an independent foundry that I bought stuff from, beautiful stuff here, but-- this one's called Klim, but you can also go to fonts.com or Envato, we looked at Envato Elements earlier? They have lots of cool fonts in there, Creative Market, there's a million places you can buy fonts, but just know that you might have to buy a specific license, and there are just some fonts that nobody's bothered, to make a web version of it yet, so don't get yourself into trouble. 

Another little bit of a tip is, font pairing, what I find is, like let's say that you do decide that you like, this semi-bold version, look, 600, there you go, there's that kind of like weird numbering again in the 100s, that we did for color, and let's say you do like the 600 version, you select the style, actually, let's not do it that way, let's have a look down the bottom here, what you'll see is, often they'll have popular pairings, with Crimson Text, there you go. 

So Montserrat, is a really common one, you're like, "Yeah, that's a good combo," or maybe Open Sans, these are all other fonts, that you can download from Google Fonts. Now this is not like a typography class, but a nice simple kind of, quite a common way of working, is that if you've picked a font that has a Serif for your, like say, hero text, or your kind of heading text, see these little serifs, these little feet on it, it'd be common to use a Sans Serif as the body copy and vice versa, not, it's not the 100% rule, it's just a really common rule. 

Now if you are new to the font game or design game, you might find something, this term, quite useful, font pairings. So if we're going to use Google Fonts or Adobe Fonts, or whatever it is, the word font pairings is useful, and the results here, let's have a look. I'm going to open up a few of these. Anyway, a bunch of them, and what you'll see is, there is font pairing, somebody else before you, has gone and decided to pair stuff up, this, there we go, there's some examples, finally, Abril with Lato, what do you think? There you go, not, gone that one, this is pretty cool, Art Deco going on. 

Yeah, so lots of examples of Google Fonts that you can-- oh, so many pop-ups, anyway, let's have a look, some more examples, Montserrat Oswald, you don't have to agree, I don't like that pairing, let's have a look, yeah, but these are all downloadable from Google Fonts, and you might just see, like, ah, man, that's it, April Fat Face, Abril Fatface with Roboto, is where I'm going, and just have a little work through all the different ones. 

You can go into the Figma community, there is some font pairing files in there as well, but it can just be a little bit of a leg up, when you are trying to pick fonts for an app or a website, a bit of font pairing. So that's it for what fonts can I use in my Figma files, let's get on to the next video.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024