# Figma 设计与开发资源大全 (2026 Checklist)

> [!TIP]
> **Indie Hacker Insight**: 2026 年，Figma 不仅仅是设计工具，更是**前端代码的源头**。
> - **变量系统 (Variables)**：这是设计系统与 Tailwind CSS 同步的核心，务必在设计初期就定义好颜色与间距变量。
> - **Dev Mode**：充分利用 Figma 的开发模式，直接获取 CSS、SwiftUI 或 Compose 代码，减少像素级校对的时间。

---

## 📚 学习与进阶 (Learning)

- [ ] [**Figma 变量 (Variables) 完全指南**](https://www.figma.com/blog/figma-variables/) - 掌握 2026 年最核心的设计系统管理功能。
- [ ] [**Figma 官方 YouTube 频道**](https://www.youtube.com/@Figma) - 获取最新的“小技巧与窍门”视频教程。
- [ ] [**组件架构最佳实践**](https://www.figma.com/best-practices/component-architecture/) - 学习“原子设计”在 Figma 中的落地规范。

---

## 🛠️ 效率插件 (Productivity Plugins)

- [ ] [**Iconify**](https://www.figma.com/community/plugin/735098383952799173) - 一键搜索并插入 100+ 图标库的 100 万+ 图标。
- [ ] [**FigmaToCode**](https://github.com/bernaferrari/FigmaToCode) - 将设计稿生成 Tailwind CSS, Flutter 或 SwiftUI 代码。
- [ ] [**Themer**](https://github.com/thomas-lowry/themer) - 一键在“白天”与“黑夜”模式之间切换整套设计。
- [ ] [**Auto Layout Pro**](https://www.figma.com/community/plugin/1029210672723049166) - 强化原生自动布局，实现更高效的排版对齐。
- [ ] [**LottieFiles**](https://www.figma.com/community/plugin/841133452981258160) - 将 Figma 动效直接转换为 Lottie 格式嵌入应用。

---

## 🏗️ UI 组件包与模板 (UI Kits)

- [ ] [**Material Design 3 官方包**](https://www.figma.com/community/file/1035203688168086460) - 谷歌官方出品的最新设计标准。
- [ ] [**Tailwind UI Figma 套件**](https://tailwindui.com/figma) - 与 Tailwind CSS 开发规范完美对应的设计组件库。
- [ ] [**Ant Design Figma 库**](https://www.figma.com/community/file/1042583793535578115) - 适合中后台管理系统设计的行业标准。
- [ ] [**Bootstrap 5 UI Kit**](https://themeselection.com/products/free-figma-bootstrap-ui-kit/) - 快速搭建传统 Web 界面。

---

## 👩‍💻 开发者集成 (Developer Integrations)

- [ ] [**Storybook Addon Figma**](https://github.com/hharnisc/storybook-addon-figma) - 在前端组件文档中嵌入设计稿。
- [ ] [**Figma.js**](https://github.com/jongold/figma-js) - 通过 JavaScript API 批量获取设计资源（颜色、图标、图片）。
- [ ] [**figma-export**](https://github.com/RedMadRobot/figma-export) - 命令行工具，自动导出资源到 iOS/Android 工程。

---

## 💡 选型建议
1. **快速上线个人项目**：选 **Tailwind UI Figma 套件** + **Iconify**。
2. **构建复杂设计系统**：深入学习 **Variables** 与 **Component Sets**。
3. **交付给前端开发**：确保开启 **Dev Mode** 并标注好变量名称。
4. **制作精美 PPT/展示**：使用 **FigJam** 社区的脑图与流程图模板。
