react-figma / awesome-figma

💡 A curated list of delightful Figma resources

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.

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.

awesome-figma's Issues

Installing awesome-lint

Fixing linting issues

Align with awesome list requirements

[Insert URL to the list here]

[Explain what this list is about and why it should be included here]

By submitting this pull request I confirm I've read and complied with the below requirements 🖖

Please read it multiple times. I spent a lot of time on these guidelines and most people miss a lot.

Requirements for your pull request

• Don't waste my time. Do a good job, adhere to all the guidelines, and be responsive.
• You have to review at least 2 other open pull requests.
  Try to prioritize unreviewed PRs, but you can also add more comments to reviewed PRs. Go through the below list when reviewing. This requirement is meant to help make the Awesome project self-sustaining. Comment here which PRs you reviewed. You're expected to put a good effort into this and to be thorough. Look at previous PR reviews for inspiration.
• You have read and understood the instructions for creating a list.
• This pull request has a title in the format Add Name of List.
  • ✅ Add Swift
  • ✅ Add Software Architecture
  • ❌ Update readme.md
  • ❌ Add Awesome Swift
  • ❌ Add swift
  • ❌ Adding Swift
  • ❌ Added Swift
• Your entry here should include a short description about the project/theme of the list. It should not describe the list itself. The first character should be uppercase and the description should end in a dot. It should be an objective description and not a tagline or marketing blurb.
  • ✅ - [iOS](…) - Mobile operating system for Apple phones and tablets.
  • ✅ - [Framer](…) - Prototyping interactive UI designs.
  • ❌ - [iOS](…) - Resources and tools for iOS development.
  • ❌ - [Framer](…)
  • ❌ - [Framer](…) - prototyping interactive UI designs
• Your entry should be added at the bottom of the appropriate category.
• The suggested Awesome list complies with the below requirements.

Requirements for your Awesome list

• Has been around for at least 30 days.
  That means 30 days from either the first real commit or when it was open-sourced. Whatever is most recent.
• Don't open a Draft / WIP pull request while you work on the guidelines. A pull request should be 100% ready and should adhere to all the guidelines when you open it.
• Run awesome-lint on your list and fix the reported issues. If there are false-positives or things that cannot/shouldn't be fixed, please report it.
• Includes a succinct description of the project/theme at the top of the readme. (Example)
  • ✅ Mobile operating system for Apple phones and tablets.
  • ✅ Prototyping interactive UI designs.
  • ❌ Resources and tools for iOS development.
  • ❌ Awesome Framer packages and tools.
• It's the result of hard work and the best I could possibly produce.
  If you have not put in considerable effort into your list, your pull request will be immediately closed.
• The repo name of your list should be in lowercase slug format: awesome-name-of-list.
  • ✅ awesome-swift
  • ✅ awesome-web-typography
  • ❌ awesome-Swift
  • ❌ AwesomeWebTypography
• The heading title of your list should be in title case format: # Awesome Name of List.
  • ✅ # Awesome Swift
  • ✅ # Awesome Web Typography
  • ❌ # awesome-swift
  • ❌ # AwesomeSwift
• Non-generated Markdown file in a GitHub repo.
• The repo should have awesome-list & awesome as GitHub topics. I encourage you to add more relevant topics.
• Not a duplicate. Please search for existing submissions.
• Only has awesome items. Awesome lists are curations of the best, not everything.
• Does not contain items that are unmaintained, has archived repo, deprecated, or missing docs. If you really need to include such items, they should be in a separate Markdown file.
• Includes a project logo/illustration whenever possible.
  • Either centered, fullwidth, or placed at the top-right of the readme. (Example)
  • The image should link to the project website or any relevant website.
  • The image should be high-DPI. Set it to maximum half the width of the original image.
• Entries have a description, unless the title is descriptive enough by itself. It rarely is though.
• Includes the Awesome badge.
  • Should be placed on the right side of the readme heading.
    • Can be placed centered if the list has a centered graphics header.
  • Should link back to this list.
• Has a Table of Contents section.
  • Should be named Contents, not Table of Contents.
  • Should be the first section in the list.
  • Should only have one level of nested lists, preferably none.
• Has an appropriate license.
  • We strongly recommend the CC0 license, but any Creative Commons license will work.
    • Tip: You can quickly add it to your repo by going to this URL: https://github.com/<user>/<repo>/community/license/new?branch=master&template=cc0-1.0 (replace <user> and <repo> accordingly).
  • A code license like MIT, BSD, Apache, GPL, etc, is not acceptable. Neither are WTFPL and Unlicense.
  • Place a file named license or LICENSE in the repo root with the license text.
  • Do not add the license name or text to the readme. GitHub already shows the license name at the top of the repo.
  • To verify that you've read all the guidelines, please comment on your pull request with just the word unicorn.
• Has contribution guidelines.
  • The file should be named contributing.md. Casing is up to you.
• Has consistent formatting and proper spelling/grammar.
  • The link and description are separated by a dash.
    Example: - [AVA](…) - JavaScript test runner.
  • The description starts with an uppercase character and ends with a period.
  • Consistent and correct naming. For example, Node.js, not NodeJS or node.js.
• Doesn't include a Travis badge.
  You can still use Travis for list linting, but the badge has no value in the readme.
• Doesn't include an Inspired by awesome-foo or Inspired by the Awesome project kinda link at the top of the readme. The Awesome badge is enough.

Go to the top and read it again.

Configure CI

Auto search typos in the text with yaspeller

What do you think about that @ilyalesik ?

tool 👇🏻
https://github.com/hcodes/yaspeller

Repo pivote

I think we should accomulate figma plugins that hosted on github, because figma have great search tool and link to install doesn't have any value.

Do you have opinion on this question? @LosYear @ilyalesik 🙌🏻

python wrapper for figma

might be worth adding this to the repo?
it's a python wrapper to interact with figma
https://github.com/Amatobahn/FigmaPy