Open Source Resources for Figma Plugin Development
A collection of open source plugins and resources for Figma + FigJam that have been shared on GitHub.
Pull Requests are being welcomed. Please see the Contributing Guide before opening a Pull Request.
DISCLAIMER:
The resources provided are meant to be helpful for Figma plugin and widget development. They are not endorsed or sponsored by Figma in any way. Please do your own due diligence and security review before using any resources listed.
Table of Contents
Resources
A collection of resources to help accelerate the development process of Figma Plugins.
Starter Templates
These starter templates package the boilerplate needed to develop plugins and widgets.
Create Figma Plugin
FigPlug
figplug is a small program for building Figma plugins. It offers all the things you need for most projects: TypeScript, React/JSX, asset bundling, plugin manifest generation, etc.
Figma Plugin React Template
SOURCE CODE · NO LICENSE
Quickstart your Figma Plugin with this template and tooling.
Figsvelte
A boilerplate for creating Figma plugins using Svelte.
Figma Plugin Template
SOURCE CODE · NO LICENSE
A Figma plugin template using svelte. SCSS and Typescript support
Design System Components
Figma Plugin DS Svelte
Figma Plugin DS components made with Svelte
Figma Plugin DS
A small lightweight design system for use in Figma Plugins
React Figma Plugin DS
React components of Figma design system
Helper Functions
Figma Plugin Helpers
SOURCE CODE · NO LICENSE
A collection of useful helper functions to import to your Figma plugin project
Plugins
A collection of plugins that have been open-sourced. You can install these plugins, audit them or fork your own if you want to host your own.
Accessibility
zebra
SOURCE CODE · PLUGIN · NO LICENSE
Zebra is a fast, lightweight colour contrast checker.
Color
Chroma
SOURCE CODE · PLUGIN · MIT
A Figma plugin for creating bulk color styles from selection.
Dominant Color
SOURCE CODE · PLUGIN · MIT
Generate a palette from an image to magically populate your designs.
Easing Gradient
SOURCE CODE · PLUGIN · MIT
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.
Navigator
SOURCE CODE · PLUGIN · NO LICENSE
An easy way to find and apply color styles from your current document.
system.colors()
SOURCE CODE · PLUGIN · NO LICENSE
Import color palettes from popular design systems directly to your file.
Valor
SOURCE CODE · PLUGIN · NO LICENSE
Visualise existing or new color palettes in your design system or Generate lists of color variables from color palettes.
Lucidi
SOURCE CODE · PLUGIN · CC0
Create & sync opacity styles based on primary opaque color styles.
Design Linters
Design Lint
SOURCE CODE · PLUGIN · MIT
Find and fix errors in your designs for free.
Design Systems
Styler
SOURCE CODE · PLUGIN · MIT
Styler is a Figma plugin that provides a more efficient way to build and maintain design systems.
Themer
SOURCE CODE · PLUGIN · MIT
A Figma plugin designed to allow you to swap between styles named the same from different published libraries.
Tokens Studio for Figma
SOURCE CODE · PLUGIN · MIT
Tokens Studio for Figma is a plugin for Figma allowing you to define and use design tokens in Figma. You can store your design tokens in JSON, sync them with a sync provider such as GitHub and define tokens even for properties that have no native support yet in Figma, such as borderRadius or spacing.
Developer Tools
Figma Tailwindcss
SOURCE CODE · PLUGIN · NO LICENSE
Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss.
Kaleidocode
SOURCE CODE · PLUGIN · NO LICENSE
Convert VS Code themes to Figma color libraries, create new themes via JSON, and swap themes automatically.
Tailwind CSS
SOURCE CODE · PLUGIN · MIT
Generate styles and other cool stuff straight out of your tailwind config file.
Export
Android Resources Export
SOURCE CODE · PLUGIN · MIT
Export multiple sizes PNG from selected slice or exportable layer, with a fixed folder structure (drawable-xhdpi, etc..) and valid name.
Figma Export
SOURCE CODE · PLUGIN · NO LICENSE
Easily export assets from Figma directly into a .zip file.
Lazy Export
SOURCE CODE · PLUGIN · MIT
Lazy Export allows the user to quickly apply default export settings to selected objects in Figma.
Icons
Feather Icons
SOURCE CODE · PLUGIN · NO LICENSE
Quick access to Feather icons in Figma.
Iconify
SOURCE CODE • PLUGIN • APACHE LICENSE 2.0
Import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many other icons (more than 100 icon sets containing over 100,000 icons) to Figma document as vector shapes.
3dicons
SOURCE CODE • PLUGIN • MIT
Collection 1400+ 3dicons. You can use within Figma or Figjam files quickly. The icons can be searched and filtered by color and angle.
Maps
Figma Map Maker
SOURCE CODE · PLUGIN · MIT
Figma plugin to generate map, supporting Google Maps and Mapbox.
Figmap
SOURCE CODE · PLUGIN · NO LICENSE
Fully customizable styled maps and markers for Figma
Placemark Figma Plugin
SOURCE CODE · PLUGIN · NO LICENSE
Create maps with Figma.
Organization
Figma Format
SOURCE CODE · PLUGIN · MIT
Figma Format let's you format your canvas by grouping them by the names.
GridGen · Automatic Table Generator
SOURCE CODE · PLUGIN · MIT
Utilizes built-in Figma rectangles, lines, and texts to generate tables with neatly organized layers.
Project Scaffold
SOURCE CODE · PLUGIN · NO LICENSE
This plugin Generates a Scaffold for your Product design project in just 1 click.
Super Tidy
SOURCE CODE · PLUGIN · MIT
A Figma plugin to easily align, rename and reorder your frames based in their canvas position.
Responsive
Responsify
SOURCE CODE · PLUGIN · NO LICENSE
A Figma plugin to quickly test your designs across multiple device sizes.
Text
Better Font Picker
SOURCE CODE · PLUGIN · MIT
Better Font Picker helps you select fonts with a preview of how it looks.
Content Buddy
SOURCE CODE · PLUGIN · MIT
A Figma Plugin that makes replacing text content in multiple layers super easy for anyone.
Typograf
SOURCE CODE · PLUGIN · NO LICENSE
Figma plugin for making good typographic text.
Tolgee
SOURCE CODE • PLUGIN • MIT
Easily manage translations within your Figma design files by connecting Figma with Tolgee localization platform.
Utilities
Batch Styler
SOURCE CODE · PLUGIN · MIT
Batch Styler is a plugin allowing you to edit multiple text or color styles at once.
Component to page
SOURCE CODE · PLUGIN · MIT
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.
Edit in place
SOURCE CODE · PLUGIN · NO LICENSE
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!
Figma Measure
SOURCE CODE · PLUGIN · MIT
A plugin for easy measurement of sizes. A small user interface allows you to add arrows for heights and widths.
Figma Remove.bg Plugin
SOURCE CODE · PLUGIN · NO LICENSE
Remove background of images with just 1-click
Figma Sort It
SOURCE CODE · PLUGIN · MIT
Sort selected Frames or Layers by names or position.
Figma Walker
SOURCE CODE · PLUGIN · MIT
Walkthrough your project without lifting your keyboard
Figmoji
SOURCE CODE · PLUGIN · NO LICENSE
Add emojis seamlessly onto your designs.
Nester
SOURCE CODE · PLUGIN · MIT
Nester will nest any object that resides above (but not inside) a top-level frame/artboard.
Pattern Hero
SOURCE CODE · PLUGIN · NO LICENSE
Pattern Hero enables you to place selected elements or frames in a grid to create patterns.
Reattach Instance
SOURCE CODE · PLUGIN · MIT
Relink a frame to a component by searching for similar instances.
Reverse layer order
SOURCE CODE · PLUGIN · NO LICENSE
Figma plugin to reverse the order of the selected layers.
Send to top
SOURCE CODE · PLUGIN · MIT
Sends selected layers to the very top of the layer stack above all other frames on the canvas.
Sorter
SOURCE CODE · PLUGIN · MIT
Enables the user to quickly sort the order of layers based on position, name (alphabetical), reverse order, or random.
Misc
Retro Snake
SOURCE CODE · PLUGIN · MIT
Bringing the retro game we all love into Figma, Snake!