7 Useful Figma plugins 2023
1. Palette
Palette helps you create the perfect color palette through machine learning from Colormind.
Usage
When you open Palette it will detect which shapes you have selected and use their fill colors (up to 5) or an image fill to seed your new color palette.
Color palettes are generated automatically using machine intelligence. You can click on colors to lock them in as you generate new colors and drag colors to reorder. The order of colors in your palette can have a major impact on how the service decides to fill in the blanks. So, please remember to experiment with the order of your colors.
Though the “Normal” color model is selected for you, you can try other models provided by Colormind. The “Normal” and “UI” models are always available but the rest of the list changes daily.
Once you stumble upon a color palette you are excited about, just click the checkmark and Palette will throw shapes filled with your new colors down on the page.
2. Color Contrast Checker
Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards.
This plugin checks the color 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 color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.
Currently only supports single, 100% solid fills. Working on some known issues with background layer detection (this is due to currently only supporting the aforementioned).
3. 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.
Separated UI to free your Figma viewport
The full Figmotion editor runs in a separate window so you can place your timeilne wherever you want. This is especially useful for using split-screen or when using multiple monitors.
Animating with expressions
Figmotion allows you to use expressions to animate your layers. This allows you to create advanced animations with ease.
Export to Lottie files (beta)
You can export your animations to a Lottie JSON file which allows your developers to easily embed the animation inside the final design.
Render your animations
You can export your animation to different formats such as GIF, MP4 and WEBM.
4. Autoflow
Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them.
5. Coda for Figma
Design with data from apps like Spotify, Wikipedia or your own custom data with this plugin. This plugin works with Coda, a tool for making documents. Simply create a table in Coda, and use the plugin to fill your designs with content from the tables.
6. LilGrid
LilGrid takes elements and arranges them into a grid automatically.
Select elements to organize, or leave nothing selected to let it organize everything on your page. It only affects top-level elements on your page.
For example it’s great to use on pages full of icons for your design system.
The Auto Size feature lets you ignore “width” and “height”. Just start LilGrid and hit “Organize to Grid” and you’re done!
That’s all it does. It’s non-destructive, it only changes positioning of elements, and it’s a one-step undo if you need to.
7. Movie Posters
Add a random popular movie or TV series poster.
1. Select any vector object and run the plugin (repeat with as many objects as necessary). The plugin will fetch a poster image and add it as a filler on your selected object.
2. Run the plugin without anything selected and it will add an element with a poster image.
3. The posters are aggregated from the mustapp.com database and are automatically updated according to their popularity.
