Must-have Plugins That Figma Pros Actually Use

[.blog-body-regular]Figma offers an open environment for third-party developers to create plugins. Now in 2024, plugins have become indispensable tools within the Figma ecosystem – each catering to specific design needs.[.blog-body-regular]

[.blog-body-regular]It wouldn’t be fair to say that picking just 16 of the “must-have” Figma plugins was an easy task but we spoke to many professionals in the field and from our own experience working every day with Figma – we did it.[.blog-body-regular]

[.blog-body-regular]Here are 16 Figma plugins that professionals all over the world use regularly and rely on to boost their productivity, add new functionality, and make designing more enjoyable. And we’re starting things off with a very important plugin…[.blog-body-regular]

‍

[.blog-body-h2]1. Stark[.blog-body-h2]

[.blog-body-regular]Figma professionals all over the world rely on Stark to check their designs in terms of accessibility before it is shipped off to a developer.[.blog-body-regular]

[.blog-body-regular]Stark Suite is a comprehensive set of integrated tools aimed at streamlining the accessibility workflow for designers, engineers, project managers, and QA experts. The Stark plugin brings many features that enable the creation and testing of accessible software efficiently to Figma – features such as Contrast Checker with Color Suggestions, Vision Simulator, Vision Generator, Landmarks and Focus Order, Alt-Text Annotations, Typography Analysis, and Touch Targets.[.blog-body-regular]

[.blog-body-regular]On top of all this, the latest version of Stark automates the accessibility evaluation process for Figma files, providing instant suggestions for improving accessibility without requiring prior knowledge. Whether checking contrast ratios, simulating designs for various types of vision impairment, optimizing alt text, or analyzing typography legibility, Stark ensures a comprehensive approach to accessibility. [.blog-body-regular]

[.blog-body-regular]Get Stark on Figma[.blog-body-regular]

‍

[.blog-body-h2]2. Phosphor Icons[.blog-body-h2]

[.blog-body-regular]If you’re doing any sort of UI/UX work, Phosphor Icons is something you’ll find yourself coming back to regularly.[.blog-body-regular]

[.blog-body-regular]Phosphor, a versatile icon family designed for interfaces, diagrams, and presentations, offers a comprehensive collection of 1,248 icons and counting. With six weights—Thin, Light, Regular, Bold, Fill, and Duotone—the total number of icons reaches an impressive 7,488. Crafted at a size of 16 x 16 pixels, these icons ensure readability at a small scale while maintaining scalability for larger applications. [.blog-body-regular]

[.blog-body-regular]There is certainly a place and time for custom icons but wireframing and (quick) iterative design aren’t two of them. In these early stages, getting things done quickly and efficiently is key and Phosphor enables designers to quickly find icons for nearly every scenario imaginable. [.blog-body-regular]

Get the Phosphor Icons on Figma

‍

[.blog-body-h2]3. Icons8 Background Remover[.blog-body-h2]

[.blog-body-regular]As you can guess from its name, this plugin allows you to remove the background of any image for free without leaving Figma. Simply select your desired image, run the plugin, and just wait for its magic.[.blog-body-regular]

[.blog-body-regular]The Icons8 Background Remover Figma plugin offers a convenient solution for removing backgrounds from one or multiple images simultaneously. Remarkably, it is entirely free, without any limitations on the number of images, subscriptions, registrations, or the need for an API key. The process is straightforward: users can select a single picture, a batch of images, or everything on the canvas, then run the Background Remover from the Plugins menu. The result is images without backgrounds, preserving the original size and quality. Additionally, a web version is available, ensuring accessibility and functionality on mobile devices, providing users with a versatile and user-friendly tool for background removal within the Figma platform.[.blog-body-regular]

[.blog-body-regular]Get Icons8 Background Remover on Figma[.blog-body-regular]

‍

[.blog-body-h2]4. Similayer[.blog-body-h2]

[.blog-body-regular]Similayer is a Figma plugin that elevates the 'Select all with...' command by enabling users to select similar layers based on a variety of properties. [.blog-body-regular]

[.blog-body-regular]Users can employ the plugin to select other layers akin to a chosen layer or, with the new "Select within..." feature, refine the selection based on specific properties and values when multiple layers are already selected. This functionality is valuable for various use cases, such as replacing instances of a specific component, updating layers with a particular Text Style, or selecting layers sharing common attributes like corner radius and fill color. [.blog-body-regular]

[.blog-body-regular]Similayer streamlines the design process, providing a powerful tool for efficiently managing and modifying layers within Figma. Users can also show support for the plugin's creator by contributing through the Buy Me a Coffee link.[.blog-body-regular]

[.blog-body-regular]Get Similayer on Figma[.blog-body-regular]

‍

[.blog-body-h2]5. Beautiful Shadows[.blog-body-h2]

[.blog-body-regular]The Beautiful Shadows Figma plugin simplifies the process of generating smooth and aesthetically pleasing shadows. Beautiful Shadows features a draggable 'light source” that users can use to create shadows that are cast onto selected elements. [.blog-body-regular]

[.blog-body-regular]In addition to the quick and beautiful shadows, this plugin also generates valid box-shadow CSS styles, and users can easily access the CSS values from the Figma Inspect panel, conveniently located next to the Prototype tab. This intuitive tool enhances the design process by providing a straightforward method for creating visually appealing shadows, contributing to the overall aesthetic quality of Figma projects.[.blog-body-regular]

[.blog-body-regular]Get Beautiful Shadows on Figma[.blog-body-regular]

‍

[.blog-body-h2]6. Content Reel[.blog-body-h2]

[.blog-body-regular]The Content Real plugin allows you to quickly populate text and images to your design. It has a variety of text and profile image libraries such as name, address, email, currencies, etc. Simply select a few text layers or shapes and click on one of these libraries. It's so helpful.[.blog-body-regular]

[.blog-body-regular]The home screen is customizable, allowing users to pin frequently used content for quick access. The plugin supports streamlined workflows, enabling one-click access to various content types. To use Content Reel, users can find and pin content, apply text or image content to selected layers, and easily incorporate icons into their designs. Additionally, the "Add" tab allows users to create and share their own text and image content, with options for public or private distribution. The plugin provides a collaborative platform for designers to optimize their creative processes.[.blog-body-regular]

[.blog-body-regular]Get Content Reel on Figma[.blog-body-regular]

‍

[.blog-body-h2]7. Unsplash[.blog-body-h2]

[.blog-body-regular]Unsplash is a popular online platform that provides a vast library of royalty-free images that can be used for personal or commercial projects. And the Unsplash Figma plugin brings all of that into your design canvas.[.blog-body-regular]

[.blog-body-regular]Using its plugin, you can easily search and import high-quality images from Unsplash directly into your project.[.blog-body-regular]

[.blog-body-regular]Although Content Reel is great for certain, very common use-cases, you won’t always find what you’re looking. For these cases, Unsplash is a great option for adding free and commercially-usable media to your designs.[.blog-body-regular]

[.blog-body-regular]Get Unsplash on Figma[.blog-body-regular]

‍

[.blog-body-h2]8. Super Tidy[.blog-body-h2]

[.blog-body-regular]Super Tidy is a Figma plugin designed to enhance design organization by facilitating easy alignment, renaming, and reordering of frames based on their canvas position. [.blog-body-regular]

[.blog-body-regular]With Super Tidy, users can choose a preferred spacing grid for alignment, ensuring a consistent and visually organized layout. The plugin will also automatically rename frames and reorder them in the layers list with a single click. [.blog-body-regular]

[.blog-body-regular]Get Super Tidy on Figma[.blog-body-regular]

‍

[.blog-body-h2]9. Rename It[.blog-body-h2]

[.blog-body-regular]Like Content Reel and Unsplash, Super Tidy and Rename It are two great plugins that can be used together to make managing your layers a whole lot easier.[.blog-body-regular]

[.blog-body-regular]We use The Rename It Figma plugin for its enhanced layer renaming features, something that Super Tidy does not offer. Users can now leverage the Figma quick actions launcher to swiftly rename layers by selecting them.[.blog-body-regular]

[.blog-body-regular]Rename It features sequence renaming. This means multiple layers can be renamed simultaneously, and sequential renaming options include ascending or descending numbered sequences (%N or %n) and alphabetical sequences (%A). Users can customize the sequence order based on the layer panel or canvas position. The %* keyword allows copying the current layer name, and additional features include changing layer name cases (e.g., UPPER CASE, lower case, Title Case) and adding width and height information. Furthermore, users can perform find and replace operations on selected layers, enhancing overall workflow efficiency.[.blog-body-regular]

[.blog-body-regular]Get Rename It on Figma[.blog-body-regular]

‍

[.blog-body-h2]10. Mockup[.blog-body-h2]

[.blog-body-regular]From the makers of the website ls.graphics, this plugin offers a large collection of high-quality mockups.[.blog-body-regular]

[.blog-body-regular]The fidelity isn’t quite on the level with the mockups created in Photoshop but that’s more on Figma lacking the advanced 3D manipulation capabilities than on the creators of this plugin. Regardless, the ease of usage more than makes up for it. Simply, pick a device, choose a frame, and your design will be added to the device instantly. You can even customize the color of these devices.[.blog-body-regular]

[.blog-body-regular]Get Mockup on Figma[.blog-body-regular]

‍

[.blog-body-h2]11. html.to.design[.blog-body-h2]

[.blog-body-regular]html.to.design is a Figma plugin that offers the capability to convert any website into fully editable Figma designs. Simply paste the URL into the plugin and click 'Import' to convert HTML to Figma designs, with options to select devices, dimensions, and themes during the import process.[.blog-body-regular]

[.blog-body-regular]For importing private websites or those behind login screens, a Chrome extension is available with detailed instructions in the documentation. The advantages of html.to.design include redesigning existing websites, capturing web content for moodboards without using screenshots, collaborative editing of webpages in Figma, enhancing UX writing with different copy, and extracting design assets for ongoing projects.[.blog-body-regular]

[.blog-body-regular]The free version of html.to.design allows up to 10 imports every 30 days, making it a versatile and accessible solution for Figma users looking to integrate web content seamlessly into their design workflows.[.blog-body-regular]
[.blog-body-regular]It's not our most used plugin but if you're just starting out in the UI design field and you want to analyze other projects to figure out how they are structured and designed, then this plugin is a great place to start.[.blog-body-regular]

[.blog-body-regular]Get HTML to Design on Figma[.blog-body-regular]

‍

[.blog-body-h2]12. TypeScales[.blog-body-h2]

[.blog-body-regular]Typescales is a Figma plugin designed for quickly creating a simple typescale or modular scale—a technique in typography that establishes a visual rhythm in font sizes. Type Scales comes in very handy if you’re not sure about the hierarchy of your typeface and are just trying out a new font.[.blog-body-regular]

[.blog-body-regular]The plugin enables users to define the modular scale by setting a base size, specifying a multiplier for font size increments and decrements, determining the number of sizes above and below the base size, and choosing whether to round the values. This tool operates in a manner reminiscent of functions found on websites dedicated to modular scale generation. With a focus on simplicity, Typescales offers basic functionality akin to established practices in the field, providing users with a foundational tool for creating visually harmonious font size progressions.[.blog-body-regular]

[.blog-body-regular]Get Typescales on Figma[.blog-body-regular]

‍

[.blog-body-h2]13. Fast Isometric[.blog-body-h2]

[.blog-body-regular]One of the most fun plugins on Figma, Fast Isometric allows you to convert your 2D design into an isometric design. It's amazing for creating promotional materials or presentations. You can simply select your entire frame, run the plugin, and select your desired direction, and the perspective of your whole frame changes, including all the layers inside.[.blog-body-regular]

[.blog-body-regular]Offering a range of features, users can create isometric cubes with customizable parameters, adjust cube dimensions post-creation, and move selections along isometric directions. The plugin also features a wide variety of pre-made 3D shapes that users can import with the click of a button and then change dimensions to suit their needs. [.blog-body-regular]

[.blog-body-regular]Users can apply color palettes from within the plugin itself. Additionally, a beta feature enables snapping items to an invisible grid system based on the base unit while dragging and moving. This versatile tool accelerates the creation of voxel art and precise isometric drawings within Figma, providing a faster and more streamlined design process.[.blog-body-regular]

[.blog-body-regular]Get Fast Isometric on Figma[.blog-body-regular]

‍

[.blog-body-h2]14. Autoflow[.blog-body-h2]

[.blog-body-regular]Autoflow automates the creation of flow arrows, making it effortless to illustrate user flows, diagrams, or graphics in hand-drawn or minimalist styles. Run the plugin and select any two shapes or frames while holding down the shift key, and it will create a flow between them. [.blog-body-regular]

[.blog-body-regular]The plugin offers intelligent obstacle detection, text annotations on paths, custom path routing, auto-update on movement, and various terminal styles. Autoflow provides a seamless user experience, allowing users to pause drawing mode and keep the plugin open while working. [.blog-body-regular]

[.blog-body-regular]If you want to reposition your shapes or frames, run the plugin again and easily move them around. But it’s not completely free. Users can have up to 50 flows per file or for a one-time fee of $29 (limited time offer), users can obtain individual lifetime access to Autoflow, entailing unlimited flows per file, all future updates, and ongoing support from the developer.[.blog-body-regular]

[.blog-body-regular]Get Autoflow on Figma[.blog-body-regular]

‍

[.blog-body-h2]15. Google Sheets Sync[.blog-body-h2]

[.blog-body-regular]Google Sheets Sync, a third-party Figma plugin by David Williames, facilitates seamless content synchronization from Google Sheets directly into Figma files. [.blog-body-regular]

[.blog-body-regular]To utilize this plugin, ensure your Google Sheets file has a shareable link. Followed by appropriately naming Figma layers with a '#' followed by the desired value (e.g., '#Title'), users can run the plugin, paste the shareable link, and click 'Sync.' The plugin supports specifying a particular sheet in the workbook by naming the Figma page, frame, or group accordingly. [.blog-body-regular]

[.blog-body-regular]Additionally, users can incorporate images dynamically by assigning image URLs to specific properties in the Google Sheet and naming corresponding Vector/Shape layers appropriately (e.g., '#image'). For continued support, users can contribute through the creator's Buy Me a Coffee link. Further documentation for advanced usage is available at docs.sheetssync.app.[.blog-body-regular]

[.blog-body-regular]Get Google Sheets Sync on Figma[.blog-body-regular]

‍

[.blog-body-h2]16. Text Porter [.blog-body-h2]

[.blog-body-regular]Text Porter is a great alternative to the fantastic Google Sheets Sync for non-Google workplaces. It generates a .csv files for all frames you have selected, that gives the layer names & text content for all text layers in that file, as well as a PNG of the frame, in a zip file. [.blog-body-regular]

[.blog-body-regular]Like Google Sheets Sync, Text Porter allows users to quickly export and import CSV copy decks, streamlining the collaboration between designers and copywriters. With Text Porter, users can generate a CSV file containing text element labels, text, and the root frame name. The plugin also exports PNGs of all root frames for reference when sharing with copywriters outside of Figma. Exclusion options provide flexibility in choosing which text elements to export.[.blog-body-regular]

[.blog-body-regular]Text Porter supports the updating of both text and the names of text elements. To use the plugin, users select frames containing the UX copy they want to export, run Text Porter, click the "Export" button to generate a zip file with a CSV file and reference images, share the zip with copywriters for updates, and then use the "Import" button to apply the changes from the updated CSV file. It's an efficient solution for managing and updating copy within the design workflow.[.blog-body-regular]

[.blog-body-regular]Get Text Porter on Figma[.blog-body-regular]

‍

[.blog-body-h2]Wrapping up…[.blog-body-h2]

[.blog-body-regular]From this list of must-have Figma plugins in 2024, it's evident that these third-party additions have evolved from mere accessories to indispensable assets within the Figma ecosystem. The open environment fostered by Figma has allowed developers to craft tools that not only cater to the diverse needs of designers but have also become integral to their daily workflows.[.blog-body-regular]

[.blog-body-regular]Selecting a mere 16 from the vast array of Figma plugins wasn't a task taken lightly. Engaging with professionals in the field and drawing from our own experiences, we've curated a list of plugins that stand out as must-haves. In the coming years, as Figma and its vibrant community continue to evolve, we’ll have an even bigger space where innovation meets creativity in perfect harmony. Can’t wait for that![.blog-body-regular]

[.blog-body-regular]Speaking of the Figma community, we’re happy to share that House of Brilliant Ideas is an active contributor of Figma Community Resources. If you’re a designer on the hunt of free to use design assets, check us out at https://www.figma.com/@BrilliantIdeas[.blog-body-regular]