Best Figma plugins design which deserve your attention

Best Figma plugins which deserve your attention

 I've handpicked most fresh plugins for Figma to boost design systems development .

1-Coda for Figma 

Thanks to this plugin, You can fill your layouts with data from services such as Spotify , Wikipedia , Dropbox , Gmail , Google Calendar , Jira  , Github , etc. 

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.

 → To use this plugin

 1. Create a Coda doc with a table in it, or use the example doc that's provided. The example doc already has data for you to get started with.

 2. Fill individual layers by selecting the layer you want to change, and then select the relevant column in the plugin selector.

 3. Group layers, or create a component, to keep related info together.

 4. Select an entire frame or multiple groups to update all of the layers at once.

 → Live Data

 To pull live data into your Figma designs, create a Packs Table in Coda. Using Packs you can pull in data from Wikipedia, Spotify, Intercom and more. Once you've set up your table, you can connect your design to that table and watch it fill up with real data.

 → Custom Data

 To pull custom data into your Figma docs, create a Table in Coda. You can enter text, image URLs, formulas, and more. Then, connect your layers to that table, and watch your designs fill up with your own data.

https://www.figma.com/community/ plugin/ Coda - for - Figma

2-LilGrid

 LilGrid is a plugin that will clean up your interface . It takes all the disordered elements in the system and organizes them in the form of a grid that you define yourself .

 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.

https://www.figma.com/community/plugin/ LilGrid

3-Table Paste

 This plugin will be very useful for those who need to transfer data from Excel spreadsheets to stylized tables created in Figma . 

Paste data from a spreadsheet into styled Figma table rows.

 Usage

 In Figma, create a table row component with a text box for each cell

 Create a table in your mockup composed of these table row components, and select the table rows where you want the data applied

 In Excel, select and copy your data

 In Figma, run the plugin (Plugins > Table Paste). In the popup window, paste the data from your spreadsheet into the textarea. Click the Apply button.

 The plugin applies one row of data to each selected Figma table row. The insertion order of the data will be the layer order in the Figma sidebar from bottom to top. The visual arrangement can be anything you want.

 Notes

 It's okay if the amount of data doesn't match the Figma table rows - extra cells or rows will be ignored.

 Text boxes can be styled however you want, but you cannot have mixed styles within a single text box. The style of the first character will be applied to the entire text box when the plugin is run.

 Your selection should be the table rows (components or frames) that contain text boxes. Text boxes that are selected directly will be ignored.

https://www.figma.com/community/plugin/Table - Paste

4-Movie Posters 

A great plugin from the creators of Must App . Super useful for those who want to create an application or website dedicated to movies and TV shows . 

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

https://www.figma.com/community/plugin / Movie - Posters

5-GiffyCanvas 

It's simple - you can create GIF images . Install the plugin , select the images that you want to create a GIF with , set the file parameters and after previewing , you can download the file . 

Create your own high quality animated GIFs for Free.

 Unlimited Exports, Transparent Backgrounds, No Restrictions,.

 FEATURES:

 - No Restrictions

 User can select as many number of images they want to create a GIF

 - Unlimited Exports

 User can generate as many number of GIFs they want for free

 - Transparent Background

 User can generate GIFs with transparent backgrounds

 - Set Frame Intervals

 User can set frame interval to each frames in GIFs

 HOW TO USE:

 1. Post installing, select at least two layers to create a GIF image.

 2. Select interval, height, and width of GIF image. Click on ‘Preview’ to see the GIF image.

 3. Click on ‘Download’ button to download GIF image.

https://www.figma.com/community/plugin / GiffyCanvas

6-Color Kit 

This plugin will help you generate light and dark shades of the color that you need . It is useful when you need to create color gradations . 

https://www.figma.com/community/plugin/ Color - Kit

7-Vector Maps 

The Vector Maps plugin allows you to download vector maps of countries , regions , and cities into your Figma mockups . 

https://www.figma.com/community/plugin Vector - Maps

8-LottieFiles 

With LottieFiles , your designs will come to life , adding wonderful animations that will please user's eye . Insert thousands of free Lottie animations to your mockups as GIF files or SVG files 

 With the LottieFiles plugin for Figma you can:

 • Drag and drop your very own dotLottie (.lottie) and Lottie JSON (.json) files

 • Access a library of 1000s of free Lottie animations.

 • Access all your animations previewed on LottieFiles

 • Insert animation frames as high quality SVGs

 • Insert Lotties as GIF animations

 How to use the LottieFiles plugin for Figma:

 Add a Lottie animation as a GIF:

 1. Drag and drop your Lottie or select a free one from the LottieFiles library

 2. Select the background color you want for your GIF

 3. Click ‘Convert to GIF’

 4. After the Lottie has been converted, click “Add to Figma’

 5. Use ‘Prototype’ to watch your designs in action.

 Add a high quality SVG animation layer:

 1. Drag and drop your Lottie or select a free one from the LottieFiles library

 2. Using the player bar, select the animation frame you want to insert

 3. Click ‘Insert as SVG’

https://www.figma.com/community/plugin/ LottieFiles