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

Tips & tricks for using images in Figma

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:00:51
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14:53

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 everyone, this video is all about images, we're going to look at the various ways to import them, how to adjust them, multiple images, and how to kind of play around with things like exposure, kind of like basic Photoshop stuff, so we can kind of push this in the background, some of it is a little bit unintuitive, so stick around and let me show you what to do. 

So we've covered a little bit of images earlier, let's go through it all, all the kind of good useful stuff to know. So bringing in images, you've probably seen, there is about a zillion ways. So earlier on, I'm not sure how we did it, but there is a 'Place Image', or you can go to here, and go to 'Place Image', they're the same thing, or the shortcut, that's what I use the most. 

So let's bring in an image, just one, when you bring in an image, you can click once and it comes in at its full size, which is too big, in our case, yours might be fine, you want-- and you might want to see it at its full size. I'm going to use my shortcut, that's 'Command Shift K' on a Mac, and that's 'Ctrl Shift K' on a PC. So what I tend to do is, when you bring in an image, is to drag it out, so I'm going to drag it out here, you get it the right size, be careful though, hold down 'Shift' to get it to kind of, proportionately height and width, all right, let's bring in multiple images. 

So I'm going to use my shortcut again, 'Command Shift K', 'Ctrl Shift K' on a PC, and I bring in all of them, come on, guys. What you'll notice is that your little cursor will update, eventually, there's seven images, and hold 'Shift' down, and just bring them in the right sizes, the things appropriate to this. 

All right, rotating, we've talked about before, but let's just reiterate, if you have your Selection tool selected, and just hover in this magical corner, you can click and drag, hold 'Shift', it will snap it around, you can type it in over here, you can be 180º, thank you, very much. 

Now although this isn't Photoshop, you can do some basic stuff in here, they give you enough to get by-- because what I want to do is, I want to, let's say that I like this image here, but I want to lighten it up, so when I select it, over here, under 'Fill', that's where 'Image' ends up. I can click on it, and I get rid of all the color swatches, and I get image related adjustments, so I can play around with the exposure. 

So I want to bring the exposure up a little bit, you can do basic stuff, we're not going to cover it all, but Saturation, oh, black and white, there you go, change the Temperature if it's, maybe bit too blue, bit too yellow, have a play around with these. 

Again, not Photoshop, but some of the good basics in here, to update an image, another way to bring in an image is to have a shape already. So let's say that I've got this circle here, could be a rectangle, with it selected, I can say-- actually, I don't want you to have a Fill of this primary color. I'm going to break that link, and we saw before, images are Fills, so I can just go, I want to change the color of this Fill, from solid, not to linear or radial, gradients, as great as those are, I can go to 'Image', you get this, like little checkerboard thing, you see, it's just like a placeholder, you can say, 'Choose Image', and we kind of go this way. 

It's great if you've already got shapes on your document, like I do, kind of mocked up, click out, I'm going to delete these things now, we're starting to move along. So there's a couple of places, just to click the button, there's a shortcut, you can drag it on from your desktop, did I cover that one? I didn't. If I do this, problem is it comes in a giant size, so if yours are appropriately sized, you can just drag them in from your Finder window, and that last one there, where we just clicked on a shape, and went into the Fill, and said, you are an 'Image' now. 

All right, I'll do one more, I'm randomly picking these. The last thing I want to do before we go, is I'm going to use-- I'm going to get rid of this colored background, and I'm going to kind of combine the things, we just learned a little bit, because I want a background image. It might be a hero box, I'm using it for the full website, so I'm going to grab-- you've got two options here. 

So I want to use, say this image, and this is not the bad way, but I'll-- it's a way, it's kind of natural way you might do it. So I'm going to put this on here, and I'm going to make it bigger. If you hold 'Shift', it will do it proportionately, which is normally good, but what I want to do is I want to hold nothing down, because, can you see what it does? It naturally wants to be responsive, so I can just drag it out to the size of this window, anything, all right, just move it to the back , where is it? There it is there. 

So I'm just going to right click it and say, 'Move to Back', or use that sweet shortcut, and then you start working that way. Now there's an image here at the back, that's fine, but it's an object that can be moved around, it's a bit of a, there's nothing wrong with it, but it's actually easier to just switch out, the Fill of the actual frame itself, you don't have to, but the cool thing about it is, over here, Home page, I've got selected , again I'm going to break the link to that Style, because actually I want that fill to be an image. 

You need to play with both, because you'll get lots of stuff from the community, that is set up this way, and it's not intuitive, but it's useful. So let's go choose image, and I'm going to find that one, which one is it? That one there, cool. So it works the same sort of way, we already had a shape, and it's filled it, but the cool thing about it is, there's nothing in my layers, it's tidy, and even though we've applied it to this kind of like top level Home page, is actually right at the bottom, and I'm going to go back to where I did it before, my Image settings, I'm going to say, actually, exposure is a good way to kind of lower it down, it's the most obvious one. 

What I find useful though is, often get exposure down a little bit, but it's not so much, everything being down, it's mainly the highlights lowering to kind of remove, some of that strong contrast, so you can just play around with these, decide where you want this to be. I'm going to pull the saturation out as well, not all of it, I wanted to do this, like background-ey thing, you're like, I can't see the text, yeah, that's what I'm going to do in between videos, I'm going to grab all this and make it white, just so it stands out in the background. 

All right, that was my quick, going through all image-y stuff in one video. All right, let's get on to more image stuff in the next video.

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