设计软件精通
Chapter 46
设计软件
精通指南
Ps
Ai
Fg
Ae
01 / Tool Ecosystem
设计工具生态系统
UI/UX 设计工具
Figma云端协作设计工具，当前行业标准
SketchMac 专属界面设计工具
Adobe XDAdobe 生态系统中的 UX 设计工具
Axure RP高保真原型和交互设计工具
平面设计工具
Adobe Photoshop图像处理、照片编辑
Adobe Illustrator矢量图形设计
Adobe InDesign排版和印刷设计
Affinity 系列Photo、Designer、Publisher 替代方案
原型与动效工具
Principle界面动效设计
ProtoPie高级交互原型
After Effects复杂动画和特效
Framer代码驱动的交互设计
协作与交付工具
Zeplin设计到开发交付
Abstract设计版本控制
InVision原型演示和协作
Miro团队协作白板
02 / Figma Mastery
Figma 精通指南
Figma 核心功能
协作特性
- - 实时多人协作编辑
- - 评论和反馈系统
- - 版本历史记录
- - 团队库和组件系统
设计功能
- - 矢量编辑工具
- - 自动布局
- - 组件和变体
- - 约束和响应式设计
原型功能
- - 交互原型制作
- - 动效设计
- - 用户流程设计
- - 原型分享和测试
Figma 高效工作流
组织文件结构
// 项目文件结构
项目/
├── 设计系统/
│ ├── 颜色样式
│ ├── 文字样式
│ ├── 图标库
│ └── 组件库
├── 页面框架/
│ ├── 首页
│ ├── 产品页
│ └── 用户中心
└── 原型流程/
├── 用户注册流程
└── 购买流程组件设计规范
- 原子：基础元素（颜色、字体、图标）
- 分子：简单组件（按钮、输入框）
- 有机体：复杂组件（导航栏、卡片）
- 模板：页面布局框架
- 页面：具体内容实例
变体管理
- - 定义组件状态（默认、悬停、激活、禁用）
- - 创建尺寸变体（小、中、大）
- - 管理类型变体（主要、次要、危险）
自动布局技巧
/* 自动布局设置示例 */ - 方向：水平/垂直 - 间距：固定值或自适应 - 对齐：开始、居中、结束 - 填充：内边距设置 - 约束：拉伸、固定尺寸
Figma 插件推荐
效率插件
- Auto Layout增强自动布局功能
- Content Reel快速填充真实内容
- Unsplash直接插入高质量图片
- Iconify访问大量图标库
设计系统插件
- Stark可访问性检查
- Adee对比度检查
- Similayer查找相似图层
- Rename It批量重命名图层
原型插件
- LottieFiles插入 Lottie 动画
- Map Maker创建地图界面
- Charts快速创建图表