The right tools can significantly simplify designers' work, for instance, by aiding in the creation of high-quality designs in the shortest possible time. As we know, deadlines and other pressures are ever-present.
One of the most popular tools in the UI industry is Figma — a comprehensive programme for designing and prototyping interfaces.
Ah, Figma! An incredible tool that is an absolute must-have for every designer. It enables you to quickly and easily create prototypes, test designs, and collaborate with other team members.
Although Figma offers a very wide range of functionalities on its own, there are numerous plugins available on the market that further enhance its capabilities. These plugins provide features that streamline work, improve productivity, and add new options during the design process.
In this blogpost, we talk about top 🔟 selected plugins for Figma that can prove extremely useful in your daily work.
Enjoy!
Oh, one more thing — the order does not matter.
🔠 Typescale
You can learn how typography “makes a difference” from free web design lessons with Tomek Biskup.
How do you maintain typographic order and assign appropriate hierarchy and size to headings and other elements?
This is where the Typescale plugin comes in, helping you select suitable sizes based on a chosen scale.
Once you launch the plugin, you set the scale and sizes:
- Scale — this is the number by which you multiply the base font size. Lower ratios provide subtle differences, while higher ratios ensure more noticeable changes.
- Sizes — here, you specify how many sizes you require, above and below the base size.
After launching the plugin, you need to choose the base font size. The plugin will generate the specified number of sizes above and below this base size.
As stated on the plugin’s page:
Scale – This is the number by which your base font size is multiplied. Lower ratios will give subtle differences, while higher ratios will offer more dramatic variations.Sizes – Here you specify how many sizes you require, above and below your base size.
🤝 Clean Document
Who enjoys tidying up layers, names, and groups? 🤫 There surely aren’t many of those enthusiasts. Fortunately, this is what plugins are for!
Clean Document, as the name suggests, elegantly cleans up chaos and inconsistencies.This is particularly useful when sharing your project with clients and other team members.
📝 Find & Replace
Oh, it can drive you mad when clients constantly change content or naming conventions.
What if there were a plugin for convenient content editing? Well, there is!
With the Find & Replace plugin, it’s a fairly painless process — it automatically replaces names, and you don’t have to spend hours poring over it!
🤌 Font Awesome
Font Awesome is a font that contains icons. The advantage of this method over other icon plugins is that you can select icons by typing keywords directly into a text field. It’s that simple! It’s that quick! Just take advantage of it!
How do you do this?
1️⃣ First, you need to install Font Awesome on your computer.
2️⃣ Then, in Figma, select Font Awesome as your typeface and type in a keyword, such as “globe”, “file”, or “desktop”, using the text tool (shortcut “T”). Here’s a cheat sheet of keywords.
If you prefer to select icons from a window, Font Awesome also has its dedicated plugin right here.
🏹 Arc
If you sometimes feel the need for a bit of fun with text and think your writings are somewhat dull, Arc will let you bend the rules a bit! 🕺
This plugin allows you to create text along curves.
🧑🦯 Accessibility – Stark
Accessibility is a broad topic. When designing, it’s important to consider aspects like appropriate contrast.
The Stark plugin will assist you with this.
👉 You can learn more about accessibility in our #12 podcast episode with Wojtek Kutyła. You can also check out the article “👀 Accessibility in UX: data, pro tips... and AI!”. You won’t regret it.
🎑 Unsplash
Beautiful photos at your fingertips?
You have an entire gallery of photos from Unsplash within just a few clicks. And aren’t those photos lovely? Plus, the search functionality is so intuitive!
This plugin primarily saves you a lot of time. ⏱️
✍️ Content Reel
Designing with lorem ipsum isn’t the best idea.
It’s better to use real data, even if it’s created by you or a… plugin.
With Content Reel, you can paste in addresses, specific data types, numbers, as well as photos, avatars, and icons.
🤏 File Compression – TinyImage Compressor
Caring for performance should also be a priority for designers.
One significant aspect is file size. The larger the files, the worse the performance.
When exporting, it’s essential to ensure file compression. This will not only improve performance for things like websites, but it’s also a good move towards digital ecology.
Your ally in this matter will be the TinyImage Compressor!
🤖 Automator
Automate tedious tasks!
The main slogan of this plugin is “Supercharge Figma”. It’s a bit like a plugin that lets you build your own plugins — #inception. 😎
You can also automate various tasks — check out the example from the Automator’s creator. 👹
It’s worth playing around with and harnessing its superpowers!
🎁 Bonuses
These are plugins that may not be used every day, but are truly interesting!
👋 Say goodbye to dangling modifiers! The Typograf is here! Do you want to focus on typographic details and automate the movement of dangling modifiers? No problem, the Typograf plugin will do it for you! Additionally, you can confidently use specific symbols and signs such as currency symbols and more.
🧩 Do you dream of a bit of chaos?
The special assistant for randomly scattering objects is already here, and it’s called Ovvverrrflowww* It’s a fantastic tool, especially for creating various patterns.
📄 Do you like tidiness?
There’s also a plugin for editing list styles and bullet points called Bullets.
These plugins will surely improve the way you work! 🚀
👀 Psst! You can learn even more about design from our blog posts:
→ 🖐️ 5 Web design tips to elevate your website
→ 🎨 TOP 5 Pro tips on UI Design
