https://github.com/xiaomingx/awesome-figma

💡 A curated list of delightful Figma resources
https://github.com/xiaomingx/awesome-figma

List: awesome-figma

Last synced: 3 months ago
JSON representation

💡 A curated list of delightful Figma resources

• Host: GitHub
• URL: https://github.com/xiaomingx/awesome-figma
• Owner: XiaomingX
• License: apache-2.0
• Created: 2024-12-03T04:27:24.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-12-03T04:29:37.000Z (6 months ago)
• Last Synced: 2024-12-03T05:28:07.556Z (6 months ago)
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• ultimate-awesome - awesome-figma - 💡 A curated list of delightful Figma resources. (Programming Language Lists / JavaScript Lists)

README

        
# awesome-figma

## 视频资源

* [Figma小技巧与窍门 - UI设计师的超级武器](https://www.youtube.com/watch?v=Vo0sEPqArRQ)

* [Figma插件展示与分享](https://www.youtube.com/watch?v=i6ppX9fjXz0)

* [Figma插件：我最喜欢的5款Figma插件](https://www.youtube.com/watch?v=LiqKIeH9Sdk)

* [如何使用Figma设计炫酷的网站UI](https://www.youtube.com/watch?v=m0sHva0JjZE)

* [如何在1小时内用Figma设计网站](https://www.youtube.com/watch?v=FK4YusHIIj0)

* [Sketch与Figma对比 - 为什么我选择了Figma](https://www.youtube.com/watch?v=wIyhqEra7Sc)

## 文章推荐

* [Figma与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)

* [我们对Figma的评价：设计师的Google Docs！](https://usersnap.com/blog/review-figma/)

* [使用Figma构建组件库](https://www.smashingmagazine.com/2019/06/building-component-library-figma/)

* [Sketch vs Figma vs Adobe XD：UI设计应用对比](https://www.smashingmagazine.com/2019/04/sketch-figma-adobe-xd-ui-design-applications/)

* [Figma组件架构最佳实践](https://www.figma.com/best-practices/component-architecture/)

* [为Figma设计系统——动态元素的力量](https://medium.com/@juauz/design-system-for-figma-the-power-of-dynamic-elements-4ca4dc3e4524)

* [Stack镜像：为代码设计，还是为设计编写代码？](https://www.designsystems.com/stack-mirroring-designing-for-code-and-coding-for-design/)

* [UI设计师创建表单和输入框的指南](https://medium.com/design-with-figma/ui-designers-guide-to-creating-forms-inputs-b6516f366a93)

* [使用Figma组件的10个技巧](https://medium.com/design-with-figma/10-tips-on-using-components-in-figma-c7db9c5e7fe1)

* [Figma插件的用户体验](https://medium.com/@yuanqing/the-ux-of-figma-plugins-f4f896f8cf35)

## 社区资源

* [Figma插件Slack社区](https://figmaplugins.slack.com)

* [Figma Spectrum社区](https://spectrum.chat/figma?tab=posts)

## 开源插件

* [Themer](https://github.com/thomas-lowry/themer) - 允许你在不同发布库之间切换样式的Figma插件。

* [figma-plugins-on-github](https://github.com/thomas-lowry/figma-plugins-on-github) - 收录在GitHub上的Figma插件列表。

* [Figlight](https://github.com/jeetiss/figlight) - Figma代码高亮插件。

* [FigmaThird](https://github.com/ahkohd/FigmaThird) - 在Figma中直接导入和使用3D模型。

* [svg-to-jsx](https://github.com/SaraVieira/svg-to-jsx) - 将SVG复制为React组件的Figma插件。

* [figma-latex-complete-plugin](https://github.com/maxkrieger/figma-latex-complete-plugin) - 在Figma文档中插入LaTeX公式。

* [system.colors](https://github.com/thelittlewonder/system.colors) - 从流行设计系统导入调色板。

* [figma-speech-recognition](https://github.com/sonnylazuardi/figma-speech-recognition) - 通过语音控制Figma。

* [FigmaToCode](https://github.com/bernaferrari/FigmaToCode) - 生成基于Tailwind、Flutter和SwiftUI的响应式页面和应用。

* [html-figma](https://github.com/BuilderIO/html-figma) - 将HTML导入Figma图层的插件。

* [tailwindcss-figma-plugin](https://github.com/impulse/tailwindcss-figma-plugin) - Figma插件，支持TailwindCSS。

* [design-tokens](https://github.com/lukasoppermann/design-tokens) - 将设计标记导出为JSON格式的Figma插件。

## 插件开发

* [react-figma](https://github.com/react-figma/react-figma) - 将React组件渲染到Figma。

* [figma-jsonrpc](https://github.com/Lona/figma-jsonrpc) - 使用JSON-RPC与Figma UI进行通信。

* [figma-api-stub](https://github.com/react-figma/figma-api-stub) - Figma API存根。

* [figplug](https://github.com/rsms/figplug) - Figma插件构建工具。

* [figma-messenger](https://github.com/okotoki/figma-messenger) - 类型安全的iframe主线程通信。

* [figma-plugin-helpers](https://github.com/figma-plugin-helper-functions/figma-plugin-helpers) - 用于Figma插件项目的实用函数集合。

* [create-figma-plugin](https://github.com/yuanqing/create-figma-plugin) - 用于开发Figma插件的工具包。

* [figx](https://github.com/n0ruSh/figx) - 一套全面可靠的Figma工具库。

* [figma-plugin-react-template](https://github.com/nirsky/figma-plugin-react-template) - 快速启动Figma插件，提供模板和工具。

* [figma-plugin-react-vite](https://github.com/CoconutGoodie/figma-plugin-react-vite) - 使用React+Vite开发Figma插件的模板。

## 模板和UI组件包

* [免费Figma Bootstrap 5 UI组件包](https://themeselection.com/products/free-figma-bootstrap-ui-kit/) - 快速设计的Figma组件集合，支持强大的自动布局和尺寸调整。

* [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds) - 用于Figma插件的小巧设计系统。

* [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components) - 非官方的Figma UI组件集。

* [figma-styled-components](https://github.com/jhardy/figma-styled-components) - Figma UI样式组件。

* [tailwindcss-figma-kit](https://github.com/impulse/tailwindcss-figma-kit) - 支持TailwindCSS的Figma设计工具包。

## Rest API 集成

* [storybook-addon-figma](https://github.com/hharnisc/storybook-addon-figma) - 在Storybook面板中嵌入Figma设计。

* [figma-api-demo](https://github.com/figma/figma-api-demo) - 包含使用Figma API的示例应用程序。

* [Figma.js](https://github.com/jongold/figma-js) - Figma API的JS封装。

* [figma-graphql](https://github.com/braposo/figma-graphql) - Figma API的GraphQL连接器。

* [Figma-To-Pdf](https://github.com/gweltaz-calori/Figma-To-Pdf) - 使用Figma API将Figma文件导出为PDF的简单示例。

* [figma-theme](https://github.com/jxnblk/figma-theme) - 从Figma样式生成开发用的主题JSON文件。

* [figma-to-flutter](https://github.com/aloisdeniel/figma-to-flutter) - 将Figma组件转换为Flutter小部件的Dart代码生成器。

* [Figma to web](https://github.com/Severenit/figma-to-web) - Figma与Web集成的开发资源。

* [figma-and-production](https://github.com/simareeno/figma-and-production) - Figma与生产环境同步的示例。

* [Figma资产下载器](https://robertohuertasm.github.io/figma-asset-downloader) - 优化并直接下载Figma资产到本地电脑。

* [figma-slack-updates](https://github.com/jordansinger/figma-slack-updates) - 将Figma文件版本历史更新推送到Slack。

* [figma-tools](https://github.com/souporserious/figma-tools) - 帮助你编程与Figma文件交互的工具。

* [figma-export](https://github.com/RedMadRobot/figma-export) - 命令行工具，将Figma中的颜色、字体、图标和图片导出到Xcode/Android Studio项目。

* [figma-lottie](https://github.com/robinetbatman/

figma-lottie) - Figma与Lottie集成。

* [FigmaPy](https://github.com/Amatobahn/FigmaPy) - Figma API的Python3+非官方封装。

## 客户端工具

* [Figmac](https://figmac.com/) - 超轻量级的Figma桌面应用，为Mac用户提供更自然的使用体验。

* [figma-app-ubuntu](https://github.com/302bis/figma-app-ubuntu) - Figma的Snap包（非官方）。

* [figma-linux](https://github.com/ChugunovRoman/figma-linux) - Figma的Electron应用（非官方）。

## 转换工具

* [Aeux](https://aeux.io/) - 将Figma设计轻松转移到Adobe After Effects。

* [Figma to Sketch/XD转换器](https://magicul.io) - 将Figma设计转换并在Sketch和Adobe XD中打开。