精选UIUX设计资源合集：从动画工具到设计系统，提升效率必备

前言

设计师产出优质作品，除了自身天赋，扎实的专业积累也至关重要。设计资源与工具不仅能帮助提升作品审美，还能有效提高工作效率，让设计过程更轻松，也更易出效果。 本文整理了一批实用的UI/UX资源与工具，涵盖动画制作、设计系统等核心领域，供设计师参考使用。

一、动画设计资源

1. 3D动画：Spline 3D

• 官方链接：https://spline.design/
• 核心定位：Spline, a place to design and collaborate in 3D.（一个可进行3D设计与协作的平台）
• 关键特性：Web-Based√（基于网页）、Real-time√（实时）、Collaborative（可协作）

2. WebGL动画：unicorn. studio

• 官方链接：https://www.unicorn.studio/
• 核心定位：The Design Tool for WebGL Magic.（实现WebGL特效的设计工具）
• 核心优势：无需代码，几分钟内即可创建惊艳的动效与交互；只需点击几下即可嵌入使用。

3. 2D动画：lottiefiles

• 官方链接：https://lottiefiles.com/
• 核心定位：Great designs come alive with motion!（让出色的设计通过动效焕发生机）
• 功能范围：可创建、管理并在网站、应用、演示文稿、社交平台等场景中部署轻量动画。

4. 高级原型设计：Protopie

• 官方链接：https://www.protopie.io/
• 核心定位：advanced prototyping tool for dynamic & multimodal interactions（用于动态及多模态交互的高级原型设计工具）
• 行业认可：“ProtoPie是最符合Meta（原Facebook）多数产品设计师或UX研究员功能需求的工具。”

5. 微交互设计：Lottielab

• 官方链接：https://www.lottielab.com/
• 核心定位：The motion design tool for product teams（面向产品团队的动效设计工具）
• 核心功能：可创建并编辑Lottie动画，直接应用到应用程序与网站中。

6. 应用动效灵感：60fpsDesign

• 官方链接：https://60fps.design/
• 核心定位：Endless collection of delightful details from best-in-class apps（汇集顶尖应用中丰富精彩的动效细节资源库）

7. 网页动效灵感：Awwwards

• 官方链接：https://www.awwwards.com/

8. 应用动画参考：APP motion

• 官方链接：https://appmotion.design/
• 核心价值：为UI/UX设计师简化动效学习流程，提供免费的应用动效资源库，涵盖Wise、Shop、Phantom等知名企业的设计案例。

二、设计系统

1. 重新设计系统教程

• 官方链接：https://redesigningdesign.systems/tactics/all-tactics
• 核心定位：Design System Tactics（设计系统实用技巧），一个不断更新的设计系统技巧合集，助力设计师搭建或维护设计系统。

2. 设计组件：Line Design System

• 官方链接：https://designsystem.line.me/LDSG/components
• 核心价值：UI/UX设计师无需从零开始，即可获取完整的移动端UI组件库。该资源包含从操作按钮到下拉菜单的各类移动端应用组件，每个组件均提供结构解析、状态与交互说明，以及设计注意事项（do’s and don’ts）。

更多 AI 前沿技术与设计灵感，欢迎关注「设计小站」公众号（ID：sjxz00），一起探索科技与设计的融合创新。