Figma is a collaborative graphic design tool that has become essential for UX and UI design teams. It offers a multitude of features to help designers create high-quality interfaces. In this article, we'll reveal the 10 Figma plugins that help us save time, improve our productivity, and create user interfaces efficiently.
Our Drupal development stack is made up of a maintained Drupal installation profile (version 10) and a starter theme based on the "atomic design" methodology and the TailwindCSS framework. We strive to design our project interfaces, most often "mobile first," using components derived from our clients' design systems. We therefore work to streamline our method to boost development efficiency and make our projects less costly.
While optimizing the technical stack and development method is important, our design team focuses, with the same mindset, on optimizing design efforts upstream. With Figma, it’s possible to save time, conserve energy, and especially to make the handoff of design elements to developers and integrators smoother and easier. The list of plugins below is dynamic. We strive to update it regularly. And we’ll be sure to keep you informed...
-
Unsplash
Unsplash is a library of royalty-free photos offering a wide selection of images and videos. Thanks to its Figma plugin, you can easily insert high-quality images into your designs without needing the author's permission.
-
Tailwind CSS Color Generator
Tailwind CSS Color Generator allows you to generate Tailwind CSS color palettes from a hex code, an HSL color, or a random color.
This makes it easier for the design and frontend teams to collaborate, as both use Tailwind CSS technology for developing our user interfaces.
You can generate a complete color palette, with shades from 50 to 900. It’s an excellent tool for designers, as it streamlines communication with developers and helps create consistent color palettes for your projects.
Discover the Tailwind CSS Color Generator plugin
Learn more about Tailwind CSS Color Generator
-
Stark Accessibility Tools
With a view toward more accessible design, the Stark Accessibility Tools plugin lets you check the accessibility of your interfaces. It can detect accessibility issues such as:
- Insufficient color contrast;
- Text readability;
- Tab navigation;
- Images without alternative text;
- Missing elements;
- Incorrect focus order.
This plugin helps us meet the accessibility requirements of the RGAA (General Accessibility Improvement Reference) based on the recommendations of the international WCAG 2.1 standard, which sets the accessibility criteria to ensure digital content is accessible to all.
You can generate an accessibility report and share it with other team members or clients.
Discover Stark Accessibility Tools
-
Clean Document
The Clean Document plugin lets you organize and clean up your Figma document. It helps you remove unnecessary elements, intelligently rename layers, and align elements.
Thanks to this plugin, you’ll keep your Figma projects tidy and organized.
-
TinyImage Compressor
The Figma plugin TinyImage allows you to reduce the size of images in your Figma designs. It can compress JPEG, PNG, SVG, WebP, AVIF, GIF, and PDF images, reducing their size by up to 95%.
Image compression is essential as part of our eco-design process based on the 115 criteria of Green IT. This plugin is an excellent tool for designers looking to lighten their images.
To learn more about the environmental impact of a website and best practices to reduce it, you can check our post, which describes our approach toeco-friendly Drupal site design.
-
Streamline Icons
The Streamline Icons plugin allows you to search for and insert icons into your Figma designs. It offers a wide range of options to help you find the perfect icons for your project, including search, filtering, preview, and import features.
-
Master
The Master plugin lets you create reusable components in just a few clicks. A component is a set of objects linked together that can be used in several places in a design. The Master is the original version of the component; instances are copies of the master that can be edited independently.
This plugin offers a variety of tools to manage components and will be very useful when designing your design systems!
-
Design Lint
The Design Lint plugin lets you find and fix errors in your Figma designs. It uses a set of rules to identify potential issues, such as color inconsistencies, fonts, sizes, and positions.
This saves time and reduces the risk of errors in your designs. It’s a free and open-source tool.
-
Figma to code
The Figma to code plugin helps bridge the gap between technical CSS possibilities and what we deliver in design, thanks to the code generated by the plugin. It supports several programming languages, such as HTML, CSS, JavaScript, React, Flutter, and Swift.
It’s a great tool for bringing designers and developers closer together, as well as giving developers a clearer view of the user interface technical specifications.
-
Figmap
The Figmap plugin lets you fully customize the style of maps and location markers. You can adjust map properties such as view style (dark, light, street, satellite) and also latitude, longitude, zoom, orientation, and tilt using the controls.
-
Bonus Plugin: Contentinator
The Contentinator plugin lets you generate content and realistic data for your Figma mockups. It can generate text content, images, tables, charts, and features AI-based assistance.
In conclusion
There are many plugins that can save considerable time during the UI design phase as well as front-end development. To discover them, you can browse the Figma community or ask us for advice via our contact form!
