Last June 2019, Figma plugins were introduced and have been popularized and used excessively since then. By the looks of the Figma plugins library, it has received overwhelming numbers of submissions coming from developers, also famously called “builders” or “creators” around the world.
Figma plugins are used to help designers automate their workflows and speed up their design process especially when dealing with repetitive tasks such as multiple uses of components and elements. [s] Plugins are critical components to a designer’s workflow that can serve as little power-ups and help extend Figma’s product functionality.
On this list, I’m going to share with you the plugins that I have been using which helped me speed up my workflow when creating wireframes and mock-ups.
Content Reel
I absolutely love this plugin! Content reel plugin enables you to quickly add text-based, avatars, and icons into your designs. Just select one or more layers in your design, then choose a content type from the Content Reel palette to apply.
Choose from the following content:
- Text: Names, phone numbers, U.S. addresses, numbers, date & time, Lorem Ipsum, email addresses and URLs.
- Avatars: Male, female, or a mix of both.
- Icons: Glyph images from Microsoft’s Segoe MDL2 Assets font.
Unsplash
Unsplash is a platform where people can easily access and use beautiful images for free. With the unsplash plugin, you can export images to your design without leaving the figma app. Make sure to check out Unsplash’s blog post about how they’re simplifying their design workflow with plugins.
This plugin is best for when you need random pictures on your design. The good thing is, unsplash plugin offers categorized images so you can select a specific category that the image you are looking for fits best.
Google sync sheet
Google sync sheet allows you to sync data from a spreadsheet containing your elements. This is best used when you want to use real, defined, and specific text elements and images to your design. [s] Google Sheets Sync is also really handy because you can still manage your data with all of the benefits and features of a spreadsheet; making it a breeze to leverage formulas or make updates down the road.
To get started, here’s a pro-tip:
- Create a simple component
- Create a set of data in a google sheet
- Arrange your data according to the order you want it to appear in (as I am testing it out, I notice that it fetches the data from top to bottom)
Note: It syncs well when your instances are coming from the same components.
More documentation available here.
Data Lab
Data Lab allows you to insert texts and components quickly and easily. This plugin supports numbers, names, dates, addresses, phone numbers, emails, and even lists. You can even upload your own defined set of data lists by uploading your google sheet data. It is easy to navigate and you can even select multiple text layers and then populate them at once.
How to use:
- Run Data Lab
- Select text layers or components
- Construct content query with any symbols and variables
- Click Paste data
Advanced features:
- Names, Dates and Geo locations in English and Russian
- Upload data from API or shared Google Sheet via LIST variable
Mapsicle
Mapsicle allows you to quickly and seamlessly place real maps on your designs. [s] An interactive map lets you pan to the perfect location, or you can search for any place anywhere in the world.
Once you’ve placed a map in your designs, head back into Mapsicle to adjust the location, style, zoom level and more. Mapsicle uses Mapbox maps to give you a variety of customization options.
If you want to define your own map, you have to create an account and get your own token at mapbox.
Brandfetch
Brandfetch saves you time from searching a brand logo and color scheme all over the internet by letting you export a brand or product’s latest logo with their respective color scheme and fonts without leaving the figma app.
Simply enter a company’s name and instantly get its corresponding brand assets into Figma. You can find your access token by creating an account (which is very easy and has a smooth process) and then copy/paste your plugin window (limited at 150 requests/month).
Iconscout
Iconscout allows you to insert millions of high quality icons, illustrations and stock photos right into Figma. Search any item from the large library of icons, illustrations, and stock photos. Search for the right item and click on it to insert it in your design. You may create an account or login as a guest user to get access.
You can download an icon or an icon packs. You can also filter it by relevance, popularity, or latest icons. You may also download free icons and/or stock photos or a premium one. Aside from that, you can select different styles like colored, doodle, dualtone, flat, glyph, and more and lastly, you may have an option in applying specific colors you preferred.
Blush
This is one of my favorite plugins when it comes to illustrations populating purposes. It contains sets of beautiful illustrations that you can add to your design. By just creating an account, you can use any illustration for personal and commercial purposes. If you need SVG-editable layers and more advance functionalities, you can subscribe to their paid plan.
Linky
This time around, I have this one task to deal with that requires me to provide my workmate all the social media assets and video thumbnails images by collating it in one document. Imagine dealing with 100+ of those images.
So, here’s my process without linky:
Its quite annoying right? But with the help of linky, I can reduce this process into 2 steps (shown in the GIF below). You can even shorten and customize the link! That’s a bonus point right? (Of course you have to go through a process of opening the plugin itself but after that, all are good and easy 😉).
Note: You need to sign up in order to use the link shortening feature.
Blobs
This one is one of those plugins that has very simple functionality yet is extremely helpful. Blobs is one of the most popular design pattern – it’s used thoroughly on websites, apps graphics, and even assets due to its smooth and fine effects when added as a background.
The plugin allows you to add/customize the complexity and contrast. Complexity is its pattern/shape and contrast means how many points are in your blobs.
Pattern Hero
Pattern Hero enables you to place selected elements or frames in a grid to create patterns. If you are a fan of icon/shape pattern designs, then this is the plugin for you! Use it to speed up your workflow and instead of copy and pasting assets multiple times, you can populate assets in just a few clicks with Pattern Hero.
That concludes my list of plugins that I am currently using the most while creating designs. With the help of these plugins, I am able to save a lot of time and ease the pain of thinking dummy data. Lorem ipsum, Joe and Jane Doe is old, let’s create designs that bring a presentation of live user experience.
Figma has an extensive offering of plugins that help speed up your workflow when it comes to exporting data, dealing with dummy text, images and placeholders.
I frequently update my plugin list, so if you have any favourite Figma plugins that you think I should check out, share them:
We’d love to hear from you!
More from
Design
Enhancing User Experience through the Art of UX Audit
Jesson Sacote, null
Do Designers Need Drawing Skills?
Rose Anne Quirante, null
Motion Design Principles
Jelo Pabayo, Multimedia Designer