Awesome
Awesome Figma
<img src="figma-logo.svg" align="right" width="100">
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
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.