• Stars
    star
    600
  • Rank 74,640 (Top 2 %)
  • Language
  • License
    MIT License
  • Created about 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A collection of open source plugins, widgets and other resources for Figma + FigJam that have been shared on GitHub.

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

SOURCE CODE · MIT

🔋 The comprehensive toolkit for developing plugins and widgets for Figma and FigJam


FigPlug

SOURCE CODE · MIT

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

SOURCE CODE · MIT

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


Back to TOC

Design System Components

Figma Plugin DS Svelte

SOURCE CODE · MIT

Figma Plugin DS components made with Svelte


Back to TOC

Figma Plugin DS

SOURCE CODE · MIT

A small lightweight design system for use in Figma Plugins


React Figma Plugin DS

SOURCE CODE · MIT

React components of Figma design system


⬆ Back to TOC

Helper Functions

Figma Plugin Helpers

SOURCE CODE · NO LICENSE

A collection of useful helper functions to import to your Figma plugin project

Back to TOC


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.


Back to TOC

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.


Back to TOC

Design Linters

Design Lint

SOURCE CODE · PLUGIN · MIT

Find and fix errors in your designs for free.


Back to TOC

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.


⬆ Back to TOC

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.


Back to TOC

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.


Back to TOC

Icons

Feather Icons

SOURCE CODE · PLUGIN · NO LICENSE

Quick access to Feather icons in Figma.


Iconify

SOURCE CODEPLUGINAPACHE 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 CODEPLUGINMIT

Collection 1400+ 3dicons. You can use within Figma or Figjam files quickly. The icons can be searched and filtered by color and angle.


Back to TOC

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.


Back to TOC

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.


Back to TOC

Responsive

Responsify

SOURCE CODE · PLUGIN · NO LICENSE

A Figma plugin to quickly test your designs across multiple device sizes.


⬆ Back to TOC

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 CODEPLUGINMIT

Easily manage translations within your Figma design files by connecting Figma with Tolgee localization platform.


Back to TOC

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.


Back to TOC

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.


Back to TOC

Misc

Retro Snake

SOURCE CODE · PLUGIN · MIT

Bringing the retro game we all love into Figma, Snake!


⬆ Back to TOC

More Repositories

1

plugin-samples

🔌 Sample Figma plugins.
TypeScript
1,479
star
2

figma-api-demo

JavaScript
1,316
star
3

code-connect

A tool for connecting your design system components in code with your design system in Figma
TypeScript
812
star
4

sds

Simple Design System (SDS) is a base design system that shows how Figma’s Variables, Styles, Components, and Code Connect can be used alongside a React codebase to form a complete picture of a responsive web design system.
TypeScript
289
star
5

plugin-typings

Typings for the Figma Plugin API
Shell
190
star
6

code-snippet-editor-plugin

Translate component variants, properties, and more into dynamic code snippets for your design system.
TypeScript
129
star
7

widget-samples

FigJam widget code examples & starter projects using the FigJam Widget API
TypeScript
100
star
8

variables-github-action-example

Example GitHub Actions workflows for syncing variables to Figma
TypeScript
98
star
9

ai-plugin-template

An example of making a Figma plugin that talks to OpenAI GPT models.
TypeScript
90
star
10

strict-null-check-migration-tools

Scripts used to migrate Figma's codebase to strictNullChecks
TypeScript
73
star
11

webgl-profiler

A GPU-side profiler for WebGL using EXT_disjoint_timer_query
JavaScript
69
star
12

rest-api-spec

OpenAPI specification and types for the Figma REST API
64
star
13

dynamic-universal-app

Size efficient alternative to macOS universal binaries
Objective-C
57
star
14

architecture-diagram-components

Figma / FigJam components for creating beautiful and informative architecture diagrams.
40
star
15

community

The Official Figma Community
24
star
16

create-widget

Create new FigJam widgets with a single command.
JavaScript
17
star
17

eslint-plugin-figma-plugins

typescript-eslint rules for plugins
TypeScript
16
star
18

widget-typings

Typings for the Figma Widget API
Shell
11
star
19

sorbet-rails

Forked from https://github.com/chanzuckerberg/sorbet-rails
Ruby
3
star
20

it-eng-pub

it-eng-pub
1
star
21

terraform-provider-figma

Go
1
star
22

mergequeue-eval-mergify

Test repository to evaluate the Mergify merge queue
JavaScript
1
star
23

gpumon-datadog

JavaScript
1
star
24

mergequeue-eval-bors

For testing bors
JavaScript
1
star
25

terraform-provider-aws-4-49-0

Go
1
star