Unsplash Plugin in Figma

In this post, I’m sharing on of Figma’s best extensions for adding content: Unsplash. This plugin connects you directly to the Unsplash platform, which includes more than six million images and illustrations, many of which are available for download without leaving your Figma workspace.

We’ll take a close look at how you can save this plugin in Figma, the best ways to utilize its countless resources, and how you can use it to add beautiful images to your User Interface (UI) prototypes in seconds!

This post is based on my Figma Advanced Course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Past, present, and future UI designers: let’s go treasure hunting!

What are Plugins (or Extensions) in Figma?

Students, designers, and third-party developers create and share a wide array of customization, workflow efficiency, and functionality tools that extend the powers of Figma. The terms Plugins or Extensions are used interchangeably and refer to these sets of additional features that help designers with:

• User flow, rich content (text, images, icons, avatars, animations)

• Color management (styles, gradients, palettes, accessibility checkers)

• Mood boards

• Data visualization

• Layouts

• Responsive design

• Vector and raster (pixels) graphics editing

• And so many more tasks!

Many plugins are completely free while others have optional premium features. Today we will be focusing on the Unsplash plugin.  

Unsplash Plugin

Unsplash is an online image bank. Most of the images and illustrations available can be freely used for both personal and commercial purposes. How is this possible? All these assets are shared by an active community of photographers, illustrators, designers, and creatives from all over the world. The Unsplash Figma plugin connects us to this collection from inside our design workspace.There is also a premium subscription that we will explore a bit later. 

Installing Unsplash in Figma

It’s quick and easy to install the Unsplash plugin! Open the Resources tool in the Toolbar or hit the shortcut Shift + I on both Mac and PC. Click on Plugins and type “unsplash” in the search bar. Finally, click the Run button next to the Unsplash plugin description.      

You can save Unsplash in the Resources panel by clicking the bookmark icon next to the plugin icon and name.

Unsplash Interface

Let’s have a look at the Unsplash plugin’s intuitive interface. When you open Unsplash you are browsing the image bank. To assist you in that process, the navigation bar offers three options:

• Editorial

• Presets

• Search

Editorial offers you access to a curated collection of images related to newspaper or magazine content, events, and other themes that suggest a real-life authenticity. 

As I pointed out earlier, many of these images are 100% free, but Unsplash has an optional premium option that offers additional perks. You can easily identify which images are exclusive to the premium version, as they have a + sign on the upper-left corner of the thumbnails and an unlock link below.

Presets are sorted across diverse categories, such as abstract, business, food, nature, or texture. Click on a theme to add a random image from that category to your workspace or frame.

If you’re speeding up a basic prototype draft and looking for placeholder images, you can click the Insert Random button and Unsplash will select a random image from any of the available themes.

Search allows you to use keywords to find specific images. You can type in the search bar words like “pizza”, “terrier”, “eyes”, “wooden bridge”, or “vertical mouse” and Unsplash will gather a relevant collection of images that fit those requests.

You can also click on the theme buttons below the search bar and Unsplash will display a set of images in context with each category.

Let’s have a quick look at the Search image collection filter options. As you can see below, I clicked the art theme button and Unsplashed presents more than 10, 000 results.

It’s a good thing we can filter these results considering:

Relevance vs Latest: Relevance shows you the images that best fit your query. Latest prioritizes the most recent image bank entries.

All orientations vs Portrait vs Landscape vs Square: Lets you sort the images that best fit your frame’s orientation and dimensions.  

All licenses vs Unsplash+ vs Free: Allows you to display all images or sort between what’s available on the free version and what’s exclusive to premium subscribers.

Timeout #1

Find out more about popular plugins developed for Figma. Remember, recommendations are subjective and that you decide what’s best for you design needs and skills.

Applying Unsplash Images to Prototypes

I could say that things will start getting complicated, but I can’t. Still quick and easy!

Let’s say we have our project document open. We have placed a few mobile phone frames as canvas and are currently designing a basic UI card. There’s nothing selected in the workspace. What’s the next step?

Pay close attention:

• Open Unsplash.

• Search for the image you need as background for your UI Card.

• Click once on the thumbnail to download it to the workspace, in full size.

Couldn’t be easier! Now, many of these images are really huge, especially those with high resolution. If we are designing a UI card for a mobile phone screen, we need to downscale our work a notch or two. Here’s what we can do to make sure the image easily fits our prototype’s attributes.

Ready? Heads up, maybe this time things will get too complex:

• Create a frame, using the Frame tool (shortcut F key). Make its size close to the UI card’s dimensions and keep it selected.

• Search for the image you need as background for your UI Card.

Click once on the thumbnail to download it, matching the frame!

Quick and easy, once again! How awesome is this?

Now all we have to do is drag our frame into the UI card component. Use the Layer panel on the left to make sure the image gets placed inside the component. If it’s not, you can click and drag it into the component’s layer.

Using Unsplash Images as Fill

There is another way to add a background image to our UI Card. I must say that I prefer this second one, but as a teacher I have to show you both approaches and let you decide what’s best for you and your projects.

Let’s use an Unsplash image as a Fill.

Third time’s the charm, things may go crazy, so keep up!

• Select the UI Card Frame.

• Search for the image you need as background for your UI Card frame.

• Slick once on the thumbnail to download it, as a Fill!

Still quick and easy, hope I didn’t scare you!

I’ve picked an image that’s exclusive to Unsplash+ for you to see that it’s still possible to download it into our prototype. However, the resolution may be low or you’ll find the image watermarked.

Pro tip: This is still a fine option for prototyping, but when you have to send your project for development, make sure that you or the developer have access to Unsplash+ resources. This makes for good design and solid teamwork practice. Respect the production chain, from start to finish.

Editing Unsplash images

Can we make changes to Unsplash images? Yes, the title above gave that one away, so moving on! Unsplash allows for creative freedom, so there are no limits to adjusting colors, adding filters, or cropping details. That’s how cool this plugin is!

We can edit Unsplash images just as we can any other images we bring to Figma. There are some cool raster adjustments we can try that are easy to manipulate and live preview assists us as we perform our changes.

I’ve added a few more touches to our UI card, it’s starting to look like a venue card for a techno festival. Unsplash had some great options for a background, so I picked one, made it a Fill, and… it still needs work. It’s too dark, and needs glow and electricity! It’s a techno party!

Tag along! Move to the Properties Panel, look for the Fill option and click on Image. Figma opens a new dialog window. For the first set of options, you can change Fill type back to solid color, gradient, or video (yes, that one’s possible, too!). If the Image type is selected, you’ll see the adjustment options below. 

We can change Fill type (Fit, Crop, or Tile), rotate 90-degrees, or adjust the intensity settings such as Exposure, Contrast, Saturation, Highlights, or Shadows. We can also modify color settings: Temperature and Tint. Combine them to add character and visual impact to your design. It’s fun!

Timeout #2

Check out this cool article on tips for efficiently using images in UI design and get inspired by the myriad of possibilities. 

One final detail

I couldn’t leave before showing you the last item in the Unsplash plugin. If you click the More button at the right end of the navigation bar, you’ll find three options:

About presents the installed version number and gives you access to the Unsplash License Terms. Remember to double-check these Terms when you come back to Unsplash for professional projects. Ensure that nothing has changed about free commercial use or other conditions that influence your work.

View History is an interesting feature. You can browse through images you’ve picked in the past, remember some options that you really liked, but that didn’t make it all the way to the final product, or download any image that for some reason got lost.

And there we have it!

Plugins are game changing. Unsplash is a valuable option because of the vast offerings, easy to use interface and simplified license terms. 

If you have the resources to invest in Unsplash+ the extended benefits may be of use to you, especially if you are a established professional. But the free version of Unsplash also has more than enough capabilities to help you create beautiful and professional prototypes. 

Go forth and explore the power of Unsplash to evolve your project from wireframe sketches to realistic looking interactive prototypes!  

What 's Next?

Go further with Figma by joining BYOL. As a BYOL member, you will gain access to my Figma Essentials and Advanced courses as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class!