Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-figma/awesome-figma

💡 A curated list of delightful Figma resources
https://github.com/react-figma/awesome-figma

List: awesome-figma

awesome awesome-list figma

Last synced: 3 months ago
JSON representation

💡 A curated list of delightful Figma resources

Awesome Lists containing this project

README 

        
# Awesome Figma [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



[](https://www.figma.com)



> [**Figma**](https://www.figma.com/) is the first interface design tool with real-time collaboration. 



A curated list of awesome Figma stuff that focused on integration Figma and development, e.g. Figma Plugins, Figma Rest API.



Found something cool? Please, **[contribute](contributing.md)**!



## Contents



* [Videos](#videos) 

* [Articles](#articles) 

* [Community](#community) 

* [Open-Source Plugins](#open-source-plugins) 

* [Plugins development](#plugins-development)

* [Templates & UI Kits](#templates--ui-kits)

* [Rest API integrations](#rest-api-integrations)

* [Clients](#clients)

* [Converters](#converters)



## Videos



* [Figma Tips & Tricks - UI Designer's Superpower](https://www.youtube.com/watch?v=Vo0sEPqArRQ)

* [Figma Plugins Show & Tell](https://www.youtube.com/watch?v=i6ppX9fjXz0)

* [Figma Plugins: My Top 5 Favourite Figma Plugins](https://www.youtube.com/watch?v=LiqKIeH9Sdk)

* [How I used Figma to design awesome Website UI](https://www.youtube.com/watch?v=m0sHva0JjZE)

* [Design A Website In Under 1 Hour With Figma](https://www.youtube.com/watch?v=FK4YusHIIj0)

* [Sketch vs Figma - Why I switched!](https://www.youtube.com/watch?v=wIyhqEra7Sc)



## Articles



* [Introducing: Figma to React](https://www.figma.com/blog/introducing-figma-to-react/)

* [Adobe XD vs Sketch vs Figma vs InVision](https://dev.to/creativetim_official/adobe-xd-vs-sketch-vs-figma-vs-invision-1pfc)

* [Our Review of Figma, the Google Docs for Designers!](https://usersnap.com/blog/review-figma/)

* [Building A Component Library Using Figma](https://www.smashingmagazine.com/2019/06/building-component-library-figma/)

* [Sketch vs Figma, Adobe XD, And Other UI Design Applications](https://www.smashingmagazine.com/2019/04/sketch-figma-adobe-xd-ui-design-applications/)

* [Component architecture in Figma](https://www.figma.com/best-practices/component-architecture/)

* [Design System for Figma — The Power of Dynamic Elements](https://medium.com/@juauz/design-system-for-figma-the-power-of-dynamic-elements-4ca4dc3e4524)

* [Stack mirroring: Designing for code and coding for design](https://www.designsystems.com/stack-mirroring-designing-for-code-and-coding-for-design/)

* [UI Designers Guide to Creating Forms & Inputs](https://medium.com/design-with-figma/ui-designers-guide-to-creating-forms-inputs-b6516f366a93)

* [10 tips on using components in Figma](https://medium.com/design-with-figma/10-tips-on-using-components-in-figma-c7db9c5e7fe1)

* [The UX of Figma Plugins](https://medium.com/@yuanqing/the-ux-of-figma-plugins-f4f896f8cf35)



## Community



* [Figma Plugins Slack](https://figmaplugins.slack.com)

* [Figma Spectrum](https://spectrum.chat/figma?tab=posts)



## Open-Source Plugins



* [Themer](https://github.com/thomas-lowry/themer) - A Figma plugin designed to allow you to swap between styles named the same from different published libraries.

* [figma-plugins-on-github](https://github.com/thomas-lowry/figma-plugins-on-github) - A list of Figma Plugins that have been shared on GitHub.

* [Figlight](https://github.com/jeetiss/figlight) - Code highlighter for Figma.

* [FigmaThird](https://github.com/ahkohd/FigmaThird) - Import, lit and use 3D models right there in Figma.

* [svg-to-jsx](https://github.com/SaraVieira/svg-to-jsx) - Figma plugin to copy svg as a react component.

* [figma-latex-complete-plugin](https://github.com/maxkrieger/figma-latex-complete-plugin) - Put LaTeX into your Figma documents.

* [system.colors](https://github.com/thelittlewonder/system.colors) - Import color palettes from popular design systems.

* [figma-speech-recognition](https://github.com/sonnylazuardi/figma-speech-recognition) - Hey Figma Speech Recognition.

* [FigmaToCode](https://github.com/bernaferrari/FigmaToCode) - Generate responsive pages and apps on Tailwind, Flutter and SwiftUI.

* [html-figma](https://github.com/BuilderIO/html-figma) - Plugin to import HTML into Figma layers.

* [tailwindcss-figma-plugin](https://github.com/impulse/tailwindcss-figma-plugin) - Figma Plugin for TailwindCSS.

* [design-tokens](https://github.com/lukasoppermann/design-tokens) - Figma plugin to export design tokens to json in an amazon style dictionary compatible format.



## Plugins development



* [react-figma](https://github.com/react-figma/react-figma) - Render React components to Figma.

* [figma-jsonrpc](https://github.com/Lona/figma-jsonrpc) - Leverage JSON-RPC to communicate between your Figma plugin and your Figma UI.

* [figma-api-stub](https://github.com/react-figma/figma-api-stub) - Figma API Stub.

* [figplug](https://github.com/rsms/figplug) - Figma plugin builder.

* [figma-messenger](https://github.com/okotoki/figma-messenger) - Type-safe iframe - main thread communication.

* [figma-plugin-helpers](https://github.com/figma-plugin-helper-functions/figma-plugin-helpers) - A collection of useful helper functions to import to your Figma plugin project.

* [create-figma-plugin](https://github.com/yuanqing/create-figma-plugin) - A comprehensive toolkit for developing Figma plugins.

* [figx](https://github.com/n0ruSh/figx) - A comprehensive and reliable figma utilities library.

* [figma-plugin-react-template](https://github.com/nirsky/figma-plugin-react-template) — Quickstart your Figma Plugin with this template and tooling.

* [figma-plugin-react-vite](https://github.com/CoconutGoodie/figma-plugin-react-vite) — A figma plugin boilerplate, that simplifies building plugins with React + Vite.



## Templates & UI Kits



* [free-figma-bootstrap-5-ui-kit](https://themeselection.com/products/free-figma-bootstrap-ui-kit/) - Design faster with a collection of prebuilt Figma components with powerful auto layout and resizing constraints.

* [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds) - A small lightweight design system for use in Figma Plugins.

* [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components) - An unofficial set of Figma UI components.

* [figma-styled-components](https://github.com/jhardy/figma-styled-components) - Figma UI styled components.

* [tailwindcss-figma-kit](https://github.com/impulse/tailwindcss-figma-kit) - Figma Kit for TailwindCSS.



## Rest API integrations



* [storybook-addon-figma](https://github.com/hharnisc/storybook-addon-figma) - Embed Figma designs in a storybook panel.

* [figma-api-demo](https://github.com/figma/figma-api-demo) - This project contains demo apps using the Figma API.

* [Figma.js](https://github.com/jongold/figma-js) - A simple JS wrapper for the Figma API.

* [figma-graphql](https://github.com/braposo/figma-graphql) - A GraphQL connector for the Figma API.

* [Figma-To-Pdf](https://github.com/gweltaz-calori/Figma-To-Pdf) - A simple demo of exporting pdf from Figma using the API.

* [figma-theme](https://github.com/jxnblk/figma-theme) - Generate development-ready theme JSON files from Figma Styles.

* [figma-to-flutter](https://github.com/aloisdeniel/figma-to-flutter) - A Dart code generator that converts Figma components to Flutter widgets. 

* [Figma to web](https://github.com/Severenit/figma-to-web) - This repository will collect all developments related to the integration of Figma to Web.

* [figma-and-production](https://github.com/simareeno/figma-and-production) - An example of how you can sync Figma & production.

* [Figma Asset Downloader](https://robertohuertasm.github.io/figma-asset-downloader) - Optimize and download assets directly to your computer.

* [figma-slack-updates](https://github.com/jordansinger/figma-slack-updates) - Post updates to Slack from a Figma file's version history.

* [figma-tools](https://github.com/souporserious/figma-tools) - Tools to help you programmatically interact with your Figma files.

* [figma-export](https://github.com/RedMadRobot/figma-export) - Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project.

* [figma-lottie](https://github.com/robinetbatman/figma-lottie) - Figma Lottie integration.

* [FigmaPy](https://github.com/Amatobahn/FigmaPy) - An unofficial Python3+ wrapper for Figma API.



## Clients



* [Figmac](https://figmac.com/) - A super lightweight Figma desktop app that delivers a more natural Mac experience.

* [figma-app-ubuntu](https://github.com/302bis/figma-app-ubuntu) - Figma, Snap Package (unofficial).

* [figma-linux](https://github.com/ChugunovRoman/figma-linux) - Figma electron app (unofficial).



## Converters



* [Aeux](https://aeux.io/) - Easily move Figma designs to Adobe After Effects.

* [Figma to Sketch/XD Converter](https://magicul.io) - Allows you to convert and open Figma designs in Sketch and Adobe XD.