Awesome Figma

Figma 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!

Contents

• Videos
• Articles
• Community
• Open-Source Plugins
• Plugins development
• Templates & UI Kits
• Rest API integrations
• Clients
• Converters

Videos

• Figma Tips & Tricks - UI Designer's Superpower
• Figma Plugins Show & Tell
• Figma Plugins: My Top 5 Favourite Figma Plugins
• How I used Figma to design awesome Website UI
• Design A Website In Under 1 Hour With Figma
• Sketch vs Figma - Why I switched!

Articles

• Introducing: Figma to React
• Adobe XD vs Sketch vs Figma vs InVision
• Our Review of Figma, the Google Docs for Designers!
• Building A Component Library Using Figma
• Sketch vs Figma, Adobe XD, And Other UI Design Applications
• Component architecture in Figma
• Design System for Figma — The Power of Dynamic Elements
• Stack mirroring: Designing for code and coding for design
• UI Designers Guide to Creating Forms & Inputs
• 10 tips on using components in Figma
• The UX of Figma Plugins

Community

• Figma Plugins Slack
• Figma Spectrum

Open-Source Plugins

• Themer - A Figma plugin designed to allow you to swap between styles named the same from different published libraries.
• figma-plugins-on-github - A list of Figma Plugins that have been shared on GitHub.
• Figlight - Code highlighter for Figma.
• FigmaThird - Import, lit and use 3D models right there in Figma.
• svg-to-jsx - Figma plugin to copy svg as a react component.
• figma-latex-complete-plugin - Put LaTeX into your Figma documents.
• system.colors - Import color palettes from popular design systems.
• figma-speech-recognition - Hey Figma Speech Recognition.
• FigmaToCode - Generate responsive pages and apps on Tailwind, Flutter and SwiftUI.
• html-figma - Plugin to import HTML into Figma layers.
• tailwindcss-figma-plugin - Figma Plugin for TailwindCSS.
• design-tokens - Figma plugin to export design tokens to json in an amazon style dictionary compatible format.

Plugins development

• react-figma - Render React components to Figma.
• figma-jsonrpc - Leverage JSON-RPC to communicate between your Figma plugin and your Figma UI.
• figma-api-stub - Figma API Stub.
• figplug - Figma plugin builder.
• figma-messenger - Type-safe iframe - main thread communication.
• figma-plugin-helpers - A collection of useful helper functions to import to your Figma plugin project.
• create-figma-plugin - A comprehensive toolkit for developing Figma plugins.
• figx - A comprehensive and reliable figma utilities library.
• figma-plugin-react-template — Quickstart your Figma Plugin with this template and tooling.
• figma-plugin-react-vite — A figma plugin boilerplate, that simplifies building plugins with React + Vite.

Templates & UI Kits

• free-figma-bootstrap-5-ui-kit - Design faster with a collection of prebuilt Figma components with powerful auto layout and resizing constraints.
• figma-plugin-ds - A small lightweight design system for use in Figma Plugins.
• figma-ui-components - An unofficial set of Figma UI components.
• figma-styled-components - Figma UI styled components.
• tailwindcss-figma-kit - Figma Kit for TailwindCSS.

Rest API integrations

• storybook-addon-figma - Embed Figma designs in a storybook panel.
• figma-api-demo - This project contains demo apps using the Figma API.
• Figma.js - A simple JS wrapper for the Figma API.
• figma-graphql - A GraphQL connector for the Figma API.
• Figma-To-Pdf - A simple demo of exporting pdf from Figma using the API.
• figma-theme - Generate development-ready theme JSON files from Figma Styles.
• figma-to-flutter - A Dart code generator that converts Figma components to Flutter widgets.
• Figma to web - This repository will collect all developments related to the integration of Figma to Web.
• figma-and-production - An example of how you can sync Figma & production.
• Figma Asset Downloader - Optimize and download assets directly to your computer.
• figma-slack-updates - Post updates to Slack from a Figma file's version history.
• figma-tools - Tools to help you programmatically interact with your Figma files.
• figma-export - Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project.
• figma-lottie - Figma Lottie integration.
• FigmaPy - An unofficial Python3+ wrapper for Figma API.

Clients

• Figmac - A super lightweight Figma desktop app that delivers a more natural Mac experience.
• figma-app-ubuntu - Figma, Snap Package (unofficial).
• figma-linux - Figma electron app (unofficial).

Converters

• Aeux - Easily move Figma designs to Adobe After Effects.
• Figma to Sketch/XD Converter - Allows you to convert and open Figma designs in Sketch and Adobe XD.