Figma,一款起初相对小众如今愈发火热的在线UI设计工具,其基础功能介绍如下:
1. **Figma入门教程**:为设计新手提供在线UI设计的基础知识,包括工具使用、界面操作等,帮助用户快速上手。
2. **Figma界面解析**:
- **顶部导航栏**:展示打开的所有文档,左侧Figma图标为返回团队主页的按键,快捷键冲突需注意,使用Shift+1、Shift+2切换视图。
- **基础工具栏**:与Sketch类似,包含移动、画板、矩形工具、钢笔、文字、视图和评论工具,右侧功能侧重协作与导出。
3. **图层与组件**:
- **图层导航栏**:支持图层与组件切换,展示元素缩略图,组件为不可逆的实例,可逆向为Grop。
- **属性检查器**:提供图层属性查看与调整功能。
4. **画板与文字工具**:
- **画板Frames**:建立画板可通过快捷键F或工具栏,基于选中元素创建画板时,可选择Frame Selection或Grop Selection。
- **文字工具与字体**:通过快捷键T使用,字体样式分为字号、字族、字重和颜色填充,支持百分比与像素值输入。
5. **投影、模糊与栅格**:
- **投影与模糊**:在效果模块调整,与Sketch完全一致。
- **布局栅格**:通过属性检查器启用,包含常用栅格与网格规范。
6. **遮罩与颜色取色器**:
- **遮罩蒙版**:通过顶部工具栏或右键菜单激活。
- **布尔运算**:实现图形间的运算。
7. **快捷键汇总**:
- **视图切换**:Shift+1、Shift+2放大视图。
- **属性调整**:Option+鼠标左键拖动调整属性值。
- **组与画板操作**:Cmd+G/Cmd+Option+G选择内容打组或新建画板。
- **高效操作**:Shift+H、Shift+V、Shift+R、Option+L、Cmd+E、Cmd+Shift+O等快捷键加速设计流程。
8. **Sketch与Figma差异**:
- **拖动单个图层**:Sketch中Command拖动移动单个图层,Figma中则为框选操作。
- **快速视图**:Sketch中快捷键查看全部视图与放大视图与Figma操作不同。
- **滚轮放大**:Figma与Sketch在滚轮放大与缩小视图的逻辑上相反。
- **复制图层组**:Sketch中复制图层至画板位置可预见,Figma则位置随机,需使用特定快捷键解决。
Figma作为一款功能全面的在线设计工具,其基础操作与Sketch等传统软件存在差异,但通过学习与实践,可以高效利用其优势,提升设计效率。