> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/design/awesome-figma/readme-en.md).

# Awesome Figma

[![](https://3720450447-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe5Q35edJYrEDsLYgJC3J%2Fuploads%2Fgit-blob-f1a2faa12dffa50c958cdc48c910ab49af81b672%2Ffigma-logo.svg?alt=media)](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**](https://github.com/tentenco/awesome/blob/main/design/awesome-figma/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.

## 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-assets-export](https://github.com/ohkimur/figma-assets-export) - Export assets from Figma and download them as local files.
* [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.

## 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://xd2sketch.com) - Allows you to convert and open Figma designs in Sketch and Adobe XD.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.tenten.co/awesome/design/awesome-figma/readme-en.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.