Figma plugins are a recent addition to what is shifting to be the go-to collaborative tool for UI designers everywhere. Plugins are built by the community, and you can even create one yourself if you wish to and it provide an easy way to extend your capabilities with Figma. Through this awesome update, designers can automate repetitive tasks, add accessibility features, furthermore add helpful content into mockups.
It’s simple to install and Use a Figma Plugin
Begin by signing in at figma.com or create an account if you haven’t already, then from the main downloads page and find the plugin you want to download. Hit Install to the right of the list.
1. Proportional Scale
Easily resize your shapes with all other attributes resizing proportionally. This plugin supports resizing by percentage, width or height.
2. Masker
Masker allows you to easily overlay devices on selected layers in your project. First, select one or more layers in your design file, then choose from the Masker palette to apply. The plugin author recommends that you select layers that match the actual size of the device.
3. Simple Table Generator
This plugin generate tables with information from Excel/Google Sheet.
4. AutoLayout
AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. It behaves similar to Framer Stacks and the Anima Toolkit for Sketch.
5. Spelll
This plugin gives Figma a spell-checking super powers similar to that of Google Docs. It constantly checks your Figma document for any spelling errors and let’s you fix them with a couple of clicks. With this plugin you can avoid embarrassing spelling errors during your design presentation.
6. Scripter
Speed up your workflow or experiment with the Figma API through scripts. Backed by the same editor infrastructure used by Microsoft VS Code, Scripter provides a fun and safe environment for playing with the Figma plugin API without the need to write actual plugins. Just type and run.
7. Color Compass
This plugin was designed to make choosing colours a more accurate and efficient affair by generating interactive swatches using a single base colour.
8. Humaaans for Figma
This plugin brings the amazing illustrations library called Humaaans by Pablo Stanley to Figma. With Humaaans you can either use the already pre-made people illustrations or mix-&-match illustrations to create your own unique work.
9. Paddi
Paddi helps you to set paddings for a Group, a Frame, or a Component. When you specify the padding values in the component name you can change the elements inside the component and apply the paddings in one click.
The component will automatically resize itself so that it surrounds all other elements within the component according to padding values.
10. Button Generator
Button Generator does what it says on the box, it generates button components with no fuss.
11. Contrast
Contrast makes it easy to check the contrast ratios of colours as you work. Select a layer and Contrast will immediately look for the colour directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If Contrast cannot find the background colour, just add another layer to your selection and Contrast will compare them both.
12. Color Designer
The plugin generates shades, tints, and colour harmonies based on select layers or local styles.
13. Social Media Image
Cheat sheet on Social Media image sizes. All in one place! The plugin contains presets for image sizes of social networks, which allows you to quickly begin directly to design development.
14. Export .zip
Easily export assets from Figma directly into a .zip file.
15. iOS Export Settings
This plugin automatically applies the correct export settings for every required iOS App Icon size and density. No more adding these settings manually, or looking up the latest size requirements from the iOS documentation.
16. Status
When collaborating on features with multiple designers and developers, it can be hard to keep track of which designs are ready to be implemented and what is still a work in progress. Status for Figma brings order to the chaos by providing a simple way to mark the status of a design. Simple right-click on your frame, go to Plugins, Status, and select your desired status.
17. Brands Colors
With Brands Colors for Figma, you can search for your favorite brand’s colours or app’s colours and apply it on your design and make it awesome.
18. Remove BG
Remove the background of images automatically with just a single click – using the remove.bg API. Note: You will need a remove.bg account for this plugin.
19. Archiver
Archiving frames within a design lifecycle is good practice to ensure that design assets are not lost, while also not getting in the way of current work. Archiver is the best way to quickly and seamlessly archive frames in Figma.
Simply select all the frames and layers you’d like to archive, run the plugin, and Archiver will create an ‘Archive’ page containing all the selected work, along with newly added time stamps.
20. Tailwind CSS
Generate styles and other cool stuff straight out of your tailwind config file? This plugin already supports adding your colour styles and has more features coming up in the future.
21. A11y – Color Contrast Checker
This plugin checks the colour contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides colour sliders that allow users to adjust the colours and understand how the corresponding contrast ratio changes in real-time.
22. Marvel Prototyping
Seamlessly sync frames from Figma to new or existing Marvel projects, allowing you to quickly create prototypes or get audio and video feedback using our new User Testing feature.Automated syncing means less manual work for you and your team!
23. Color Blind
Color Blind allows you to view your designs in the 8 different types of colour vision deficiencies. All you need to do is make a selection and the plugin will clone it and create versions with the colour changed based on what each one would look like to a person with that type of colour blindness. Each copy is contained within a group that is labelled with the colour blindness type.
24. Unsplash
Insert beautiful images from Unsplash straight into your designs. The Unsplash License allows images to be used freely for both commercial and personal projects.
25. Mapsicle
With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a 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.
26. Material Design Icons
This plugins provides you instant easy access to the entire Material Design Icons library. You can search by icon name. More features coming soon, including Filter by category, change style and size, multi-select and option to choose variants such as filled, outlined, rounded, etc…
27. Charts
Charts allows you to generate charts that can be added and edited within your Figma document. Choose from Line, Area, Pie, Doughnut, Scatter and Bar charts. Each chart comes with its own set of configurations such as number of points, max and min values.
28. Figmotion
Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as well as it is built with web technologies in mind.
29. Autoflow
Autoflow makes it easy to draw flows. Simply select 2 objects, hit a hotkey, and a line will be magically drawn between them.
30. Content Reel
Content Reel helps you easily pull text strings, avatars and icons into your designs. First, select one or more layers in your design file, then choose from the Content Reel palette to apply.
