Hi everyone, we're going to bring in images... using my favorite image plugin called Unsplash... I get asked a lot what the best plugins are, this is one of my faves... it's pretty easy to use, we kind of set this up here... so it's kind of spread into the background... there's a little bit of more information about images...

not just kind of like how to put them on a page... but if you're comfortable with images, and Unsplash, you've heard of before... go ahead and skip this video... I want to keep it here because we're building something... we're all at different levels... and also if you're reasonably, you know, you kind of know what you're doing...

maybe just jump to the end of this video, editor will put the time code up here... where I break it, and, some reason when I change this, these all don't change... and I'll fix that problem that I have, that might be interesting for you... if you had it before, and if you haven't, you'll probably have it in the future... so let's go and add some images to our design. Let's start by using a plugin...

I'm going to use the plugin, it's really common for free stock imagery... to use Unsplash... up to you, there's lots of them around, this one's really good... and what I'm looking for is... find an image that fits with your kind of brief that you've got... if you're country and western, type that in...

you might have to get creative, depending on the genre that you've got... techno, yeah, plenty... when you are bringing in images from... like any sort of plugin, really, Unsplash included... it's probably, there's two ways, right? You can just kind of click once, and you get this like...

big giant version, sometimes they can be really big... so it's easier to put a frame down first and then click on them... so you can have an image by itself... you can have an image inside of a frame, which gives you extra bonus points... gives you things like auto layouts... which are just a plain old image, it doesn't-- there you go.

The other thing you can do is you can have a frame within, my component... I'm going to try and drag it inside of this, goodbye, let's have a look... there's two ways we can make this happen, I can try and get it inside of here... when it's too big it doesn't really know where to go... I find it's easier to make things smaller... and then they jump inside my Card Event component, easier...

before, it just kind of sat on top of it. So I can do it two ways, I can have the image on the top half... and have my kind of thing below... or I can maybe have it running completely there... move it to the back and maybe have this thing kind of transparent... I think that's what I want to do...

it doesn't really matter, except, the way I'm going to lay it out... if I'm going to have it up the top here as like a separate unit... still needs to be at the back, I'm using my shortcuts... square brackets, so have a look on your keyboard, there's a--  on my keyboard they're next to the P key... open and close square brackets... that just send it forward and backwards within the component...

my Event Card, or my Card Event component, and sometimes that's useful... if you want it just as the full background... there's no real problem with that, leaving it there... but actually it might be nicer instead of having this Event Card... that has its own background of green... and then inside of there I have another frame, kind of messy.

I'll call it "Image" to make it less messy, I don't really need that, right? what I can do is say, actually, I know that my parent frame, the component... has a background of Fill, let's change that for an image... there's a few different ways, the way I like to do it is... I'm going to click on my image and say... this frame has a Fill, I'm going to click on this part...

remember, this little outside bit... lets me select the whole thing, I just go 'Copy'... going to get rid of that frame now, goodbye... click on the main component, my Card Event... and you can have two Fills, look at that, just paste straight over the top... do I need this one?

I'll probably leave it there just in case I delete the image, as a backup... I just got to make sure it is above, there we go... it doesn't really matter, except that's tidier... especially, if you hand it off to somebody else... and there's like a bunch of frames that you don't really need... this one here is going to be, so the bottom part of this...

I'm going to call, instead of Frame 2 this is going to be called... "Card Lower"... and it's going to be a Fill from my local colors... which is going to be my purple, my 500... I wish it was a List view here... or maybe just, it popped up, to tell you what the name was when you hover over it...

I'm guessing, it's in the middle, looks like 500... and I'm going to lower the opacity down to something like that, 80, 70. What you'll need to do is... you need to test with a couple of images before you commit... this is really dark, so let me open up my last plugin that I used... who remembers what the shortcut is, do you remember, do you even care?

I do, 'Command Option P', 'Ctrl Alt P' on a PC... that doesn't work if you've closed Figma down though, because it doesn't remember... somehow it doesn't remember what the last one is... if you like shut it down and come back the next day, it doesn't remember... it's all right, we'll forgive you. So I need to go and check, just make sure that I find an image that is...

actually, I'm going to select it here... I can see, I've got the right one, and I click on this one... and the purple is just fine, I'll be able to read on top of that as well... so I'm going to go... pick a different one, and that is meant to be it... but these aren't updating, they should do...

changed the main component, change this... if I delete it and add it again, they're not deleting... strangeness... you wait there, I'm going to close Figma down and open it back up. Super weird, oh well, I'm going to select this one and I'm going to go, you... so I'm going to go 'Command /' to go to my Quick Actions...

and I'm going to go to 'Select Same Properties'... so selects everything on my document that kind of does the same thing... you go away, Fills... now if I take away, you, Fill... and add a Fill... and it's not white...

oh man, what's happening? Fill Image, you... you, you... it really doesn't want to add... these must be overriding from early on, I must have done so much to them... I've been playing around that these have a Fill override...

so it's not listening to this, so what I'm going to have to do is, you, my friend... I should do my Select Same again... I'm going to say, right click, and I'm going to go to 'Reset All Changes'... which works, except these are all dead now... uh, fun times, Dan. I'll leave this in the course because things like this happen...

now I must have played with the Fill... yours might be working, it might not, let me know in the comments... but now when I change my image I should be able to go... and they all delete, there we go... man, I hate that image now... I picked it earlier in the course, I'm not a fan...

I'm going to go switch back to a cool techno one... all right, so that is going to be it... I will see you in the next video.