Unsplash + Figma

Bringing over 1 million images from Unsplash right into Figma 🖤

Kirill Zakharov
Aug 1, 2019 · 4 min read

We’re huge fans of Figma at Unsplash. Earlier this year, our team migrated over to Figma from Sketch for most of our designing needs — and we haven’t looked back since. We’re happy to say it has simplified our workflow, helped us collaborate between teams, and just generally made sense for us.

Truth be told, while our love for Figma is unconditional, we did miss a few things about our ex. The ability to easily fill our canvas with beautiful images from Unsplash was one of them. As a result, we’d end up with mockups that looked liked like so:

We do try to work with real data as much as possible. In our case, real data consists of actual images from Unsplash. So we know the frustration of having to manually download and insert images into Figma.

While our need is very specific, turns out we weren’t alone…

Luckily for us, in June, Figma introduced the Figma plugins beta — and called-out for anyone to apply to be among the first creators, as one of their first moves to open up their platform. They’ve even built their APIs with this idea in mind — making sure third parties can create plugins without fear that all of their hard work will break or malfunction whenever there’s a new update or feature introduced in Figma. To read all about Figma’s newest plugins, check out their blog post here.

As soon as Figma’s plugin application went live, it didn’t take long for Liam Martens—a developer and Unsplash contributor—to reach out to me in our members Slack and demo an already working proof of concept using the Unsplash API.

After playing with demo plugin locally, the ability to easily insert Unsplash images into Figma put a huge smile on my face and put all frustrations to an end.

I was so excited about seeing this integration come to life that I decided to team up with Liam and help him polish it up—turning it into the official Unsplash for Figma plugin.

Now, you can search and insert Unsplash images without ever leaving Figma. So whether you’re mocking something up for your latest project, or your designing something in-need of beautiful imagery, Unsplash images are dropped right into Figma, ready to use for any design project.

  1. In Figma, navigate to Plugins and install Unsplash.
  2. Once installed, select a shape (or multiple shapes) that you’d like to fill.
  3. In the Random panel, insert a completely random image, by pressing the Insert random button.
  4. To insert a random image relating to a specific topic, select the preset of your choice in the Presets section.
  5. To search for a specific image, use the search bar in the Search panel.

Helping you simplify your design flow even further, Unsplash for Figma allows you to focus on what counts: creating. So go make something awesome — we can’t wait to see what you come up with.

More on Unsplash Partnerships. This partnership with Figma is part of our continued mission to enable creativity by making quality visuals openly accessible.

1290 partners including Squarespace, Medium, Dropbox, Trello, Adobe, Google, Sketch, Square, InVision, Typeform, PicsArt, WeTransfer, BuzzFeed, support this mission by officially integrating with the Unsplash API. 🔥

Unsplash Blog

Behind the scenes building the open photography movement at Unsplash.

Thanks to Alex Begin

Kirill Zakharov

Written by

Head of Design at Unsplash

Unsplash Blog

Behind the scenes building the open photography movement at Unsplash.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade