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.

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-assets-export - Export assets from Figma and download them as local files.

• 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.

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.