# Figma Notes

{% embed url="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FbOwyinWBikQ5jdEpSx5WcI%2FFamily-Promise-Copy" %}

{% embed url="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FbOwyinWBikQ5jdEpSx5WcI%2FFamily-Promise-Copy%3Fnode-id%3D0%253A1" %}

{% embed url="https://youtu.be/RCZJGkvYR74" %}

### Videos

* [Figma Tips & Tricks - UI Designer's Superpower](https://www.youtube.com/watch?v=Vo0sEPqArRQ)

{% embed url="https://www.youtube.com/watch?v=Vo0sEPqArRQ" %}

* [Figma Plugins Show & Tell](https://www.youtube.com/watch?v=i6ppX9fjXz0)

{% embed url="https://www.youtube.com/watch?v=i6ppX9fjXz0" %}

* [Figma Plugins: My Top 5 Favourite Figma Plugins](https://www.youtube.com/watch?v=LiqKIeH9Sdk)

{% embed url="https://www.youtube.com/watch?v=LiqKIeH9Sdk" %}

* [How I used Figma to design awesome Website UI](https://www.youtube.com/watch?v=m0sHva0JjZE)

{% embed url="https://www.youtube.com/watch?v=m0sHva0JjZE" %}

* [Design A Website In Under 1 Hour With Figma](https://www.youtube.com/watch?v=FK4YusHIIj0)

{% embed url="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.
* [@figma-plugin/types](https://github.com/figma-plugin-helper-functions/types) - Figma plugin types.

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

{% embed url="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FCznIKrVmbIaXUh40BSj1ca%2FFamily-Promise-Copy%3Fnode-id%3D0%253A1" %}

{% embed url="https://youtu.be/jk1T0CdLxwU" %}

\\
