# Awesome Figma #### 內容 * [視頻](#videos) * [文章](#articles) * [社區](#community) * [開源插件](#open-source-plugins) * [插件開發](#plugins-development) * [模板和 UI 工具包](#templates--ui-kits) * [Rest API 集成](#rest-api-integrations) * [客戶](#clients) * [轉換器](#converters) ## 視頻 * [Figma Tips & Tricks - UI 設計師的超能力](https://www.youtube.com/watch?v=Vo0sEPqArRQ) * [Figma Plugins Show & Tell](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) * [使用 Figma 在 1 小時內設計一個網站](https://www.youtube.com/watch?v=FK4YusHIIj0) * [Sketch vs Figma - 為什麼我切換了！](https://www.youtube.com/watch?v=wIyhqEra7Sc) ## 文章 * [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) * [我們對 Figma 的評論，谷歌設計師文檔！](https://usersnap.com/blog/review-figma/) * [使用 Figma 構建組件庫](https://www.smashingmagazine.com/2019/06/building-component-library-figma/) * [Sketch vs Figma、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) * [堆棧鏡像：為代碼而設計和為設計而編碼](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 插件的 UX](https://medium.com/@yuanqing/the-ux-of-figma-plugins-f4f896f8cf35) ＃＃ 社區 * [Figma Plugins 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) - Figma 插件將 svg 複製為一個反應組件。 * [figma-latex-complete-plugin](https://github.com/maxkrieger/figma-latex-complete-plugin) - 將 LaTeX 放入 Figma 文檔中。 * [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) - TailwindCSS 的 Figma 插件。 * [design-tokens](https://github.com/lukasoppermann/design-tokens) - Figma 插件，用於以亞馬遜風格的字典兼容格式將設計令牌導出到 json。 \##插件開發 * [react-figma](https://github.com/react-figma/react-figma) - 將 React 組件渲染到 Figma。 * [figma-jsonrpc](https://github.com/Lona/figma-jsonrpc) - 利用 JSON-RPC 在 Figma 插件和 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 實用程序庫。 ## 模板和 UI 工具包 * [free-figma-bootstrap-5-ui-kit](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) - 在故事書面板中嵌入 Figma 設計。 * [figma-assets-export](https://github.com/ohkimur/figma-assets-export) - 從 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) - 使用 API 從 Figma 導出 pdf 的簡單演示。 * [figma-theme](https://github.com/jxnblk/figma-theme) - 從 Figma Styles 生成開發就緒的主題 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 Asset Downloader](https://robertohuertasm.github.io/figma-asset-downloader) - 優化並直接將資產下載到您的計算機。 * [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 集成。 ## 客戶 * [Figmac](https://figmac.com/) - 一款超輕量級的 Figma 桌面應用，提供更自然的 Mac 體驗。 * [figma-app-ubuntu](https://github.com/302bis/figma-app-ubuntu) - Figma，Snap Package（非官方）。 * [figma-linux](https://github.com/ChugunovRoman/figma-linux) - Figma 電子應用程序（非官方）。 ## 轉換器 * [Aeux](https://aeux.io/) - 輕鬆將 Figma 設計移動到 Adob​​e After Effects。 * [Figma to Sketch/XD Converter](https://xd2sketch.com) - 允許您在 Sketch 和 Adob​​e XD 中轉換和打開 Figma 設計。
Figma 熱門關鍵字 * figma模型 * figma素材 * figma中文 * figma教學 * figma意思 * figma是什麼 * figma下載 * figma中文介面 * figma下載檔案 * figma付費方案
### Bookmark {% embed url="" %} {% embed url="" %}