plugin-resources
plugin-resources copied to clipboard
figma
A collection of open source plugins, widgets and other resources for Figma + FigJam that have been shared on GitHub.
Open source Figma plugins related projects on GitHub
A list of Figma Plugins and resources for building them.
- Plugins — Plugin source code.
- Resources — Resources for building plugins
Plugins
A collection of plugins that have been open-sourced.
Valor
Visualise existing or new color palettes in your design system or Generate lists of color variables from color palettes.
Image Palette
Extracts a colour palette of 5 different colours from the selected images.
Send to top
Sends selected layers to the very top of the layer stack above all other frames on the canvas.
Themer
Enables you to create themes and easily swap between sets of styles across your projects. Eg: Light/Dark
Sorter
Enables the user to quickly sort the order of layers based on position, name (alphabetical), reverse order, or random.
Dominant Color
Generate a palette from an image to magically populate your designs.
Responsify
A Figma plugin to quickly test your designs across multiple device sizes.
Figma Export
Easily export assets from Figma directly into a .zip file.
Project Scaffold
This plugin Generates a Scaffold for your Product design project in just 1 click.
Figma Walker
Figma Walker is a new launcher for Figma. You can take any actions you want from a single input field.
Figma Sort It
Sort selected Frames or Layers by names or position.
Figma Map Maker
Map Maker allows you to make a customized map blazing fast. It currently supports Google Maps and Mapbox.
Figma Format
Figma Format let's you format your canvas by grouping them by the names.
Android Resources Export
Export multiple sizes PNG from selected slice or exportable layer, with a fixed folder structure (drawable-xhdpi, etc..) and valid name.
Feather Icons
Quick access to Feather icons in Figma.
Tailwind CSS
Generate styles and other cool stuff straight out of your tailwind config file.
Figma Tailwindcss
Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss.
Rich data plugin
Replace placeholder Figma text values with real data from real APIs.
Easing Gradient
Make beautiful smooth gradients in Figma. Linear gradients often have hard edges where they start and/or end. This plugin adds gradient stops to approximate easing functions.
Figma Measure
A plugin for easy measurement of sizes. A small user interface allows you to add arrows for heights and widths.
Super Tidy
A Figma plugin to easily align, rename and reorder your frames based in their canvas position.
system.colors()
Import color palettes from popular design systems directly to your file.
Content Buddy
A Figma Plugin that makes replacing text content in multiple layers super easy for anyone.
Kaleidocode
Convert VS Code themes to Figma color libraries, create new themes via JSON, and swap themes automatically.
Chroma
Create bulk color styles from selection. Simply select any objects that have a fill color, run the plugin, and it will generate the color styles for you automatically.
Navigator
An easy way to find and apply color styles from your current document.
Better Font Picker
Better Font Picker helps you select fonts with a preview of how it looks.
GridGen | Automatic Table Generator
Utilizes built-in Figma rectangles, lines, and texts to generate tables with neatly organized layers.
Retro Snake
Bringing the retro game we all love into Figma, Snake!
Pattern Hero
Pattern Hero enables you to place selected elements or frames in a grid to create patterns.
Figmoji
Add emojis seamlessly onto your designs.
Reverse layer order
This plugin will reverse the order of the selected layers.
Reattach Instance
Relink a frame to a component by searching for similar instances.
Component to page
This plugin enables you to create a component (like you would in Sketch) where the master moves to a dedicated page leaving an instance in place.
Typograf
Figma plugin for making good typographic text.
Edit in place
Select any instance of a local component and edit the master component in place from the context of wherever you are using the instance. This is handy if your master components are on another page!
Nester
Nester will nest any object that resides above (but not inside) a top-level frame/artboard.
Design Lint
Find and fix errors in your designs for free.
zebra
Zebra is a fast, lightweight colour contrast checker.
It was built as a teaching exercise and the companion tutorial can be found here
Lazy Export
Lazy Export allows the user to quickly apply default export settings to selected objects in Figma.
Styler
This is a plugin for Figma that generates styles based on selected layers.
Basically, you can control your styles by changing layer properties and updating the styles.
Figma Tokens
Figma Tokens allows you to utilize Tokens in Figma, letting you create tokens for things suchas border radii, spacing and sizing units, typography and color styles.
Batch Styler
Batch Styler is a plugin allowing you to edit multiple text or color styles at once.
Resources
A collection of resources to help accelerate the development process of Figma Plugins.
Figma Plugin DS
HTMl/JS/CSS design system without dependencies that closesly matches the Figma UI for use in plugins
Figsvelte
A boilerplate for creating Figma plugins using Svelte (which comes preconfigured with a Svelte components Figma Plugin DS Svelte.
Figma Plugin DS Svelte
This is a Svelte version of the Figma Plugin DS specifically for use in creating Figma Plugins.
Figma Plugin Template
This is a Figma plugin template using rollup and svelte. TS and SCSS support included 🤙
Figplug
Figma plugin Builder
Fika
A small figma plugin generator using Parcel.
Create Figma Plugin
A toolkit for developing Figma plugins.
Figma Plugin React Template
This template contains the react example as shown on Figma Docs, with some structural changes and extra tooling.
React Figma Plugin DS
React components of Figma design system based on thomas-lowry/figma-plugin-ds.
Figma Plugin Vue Starter
A Vue.js starter template for building Figma plugins.
Figma Plugin Vue Template
TypeScript, RPC, components from figma-plugin-ds.
Figma Plugin Vue Template 2
Vue, TypeScript, Pug, figma-plugin-ds integration, message handlers.
Figma Plugin Vue3 Template
A port of the Vue2 template, updated to use the latest Vue3 features.
Vue3, TypeScript, figma-plugin-ds integration, message handlers.
Figma Plugin Helper Functions
A growing collection of Figma Plugin helper functions (WIP), soon to be published on NPM.
Drag and Drop Example
A sample plugin showing a reliable way to implement drag and drop from the plugin window to the Figma canvas.
Figma Remove.bg Plugin
Remove background of images with just 1-click
Create React Figma Plugin
A CLI tool to generate a Figma plugin project with React. Supports CSS modules, Typescript & SCSS and UI can be viewed in browser for quicker iteration.
figma