Figma主要工具和属性

Finder / 2025-11-14

一、 Figma 底部工具栏（Toolbar）功能详解 #

Figma 的顶部工具栏（旧版本）被改到了底部。熟练的设计师多使用快捷键操作。

1. 基础选择与拖拽工具 #

工具名称快捷键功能描述核心操作技巧
选择工具 (Selection Tool)V 或 M用于选择和拖拽画布中的元素。按住空格键（Spacebar）进行上下左右拖动，这是常用的拖拽方式。
拖动画布工具 (Hand Tool)H用于在画布中拖动和拖拽内容。
缩放工具 (Scale Tool)K选中元素后，进行等比例的放大。此工具前期较少使用。

2. 编组与画板工具（Frames and Sections） #

工具名称快捷键功能描述核心操作技巧
画板/框架 (Frame Tool)FFigma 中非常重要的编组类型。选中后，可以在右侧看到内置的画部（如iPhone或桌面尺寸）供快速创建。也可以单独拖拽创建自定义画板。
区域 (Section)在创建画板后，可用于将多个画板包裹进去，实现对这些画板的统一移动和调节。
切图工具 (Slice)S框选一个区域，专门用于导出图像。在今天的协作环境里基本不会用到，可以暂时略过。

3. 视觉元素（Visual Elements） #

此功能菜单包含了基础的视觉元素，如矩形（Rectangle）、线（Line）、箭头（L）、圆（Ellipse）、多边形（Polygon）、星形（Star）、图片（Image）和视频（Video）。

  • 核心快捷键： Shift 键 (S的键)
    • 在拖拽矩形时，按住 Shift 键可将其变成正方形。
    • 在拖拽椭圆时，按住 Shift 键可将其变成正圆。
    • 在拖拽横线或箭头时，按住 Shift 键会以 45度角的方式进行调节，方便做出严谨的图形。

4. 矢量绘制工具（Pen and Pencil） #

Figma 中的 Pen/Pencil 工具是用于绘制矢量图形的，并非PS或绘图软件中的“笔刷”类型。

  • 钢笔工具 (Pen, P)：使用贝塞尔曲线 (Bézier Curve) 来控制绘制的图形。这是在Figma中绘制矢量图形的常用工具。
  • 铅笔工具 (Pencil)：完全根据鼠标轨迹来控制。基本上可以视作“白板”，只在极少数特殊情况下使用。

5. 其他功能工具 #

  • 文本工具 (Text, T)：可以直接点击输入文本，也可以按 T 键后拖拽绘制出一个文本框。
  • 评论工具 (Comment, C)：用于添加备注解。它在团队协作环境中作用更大，个人设计过程中用处不大。
    • 可以按快捷键或在右上角点击 Hide Comment 来打开或关闭评论显示，避免影响观看。
  • 助面板（搜索）：类似于系统搜索功能，可搜索所有包含的元素、功能点、资源（如组件、素材）和插件。使用频率相对较低。

二、 右侧属性面板（Attributes Panel）功能详解 #

属性面板用于调整选中元素（图层）的属性参数。

1. 属性面板的原则与结构 #

  • 变化性： 不同的元素，其属性设置会有一定差异。
  • 学习策略： 重点在于理解属性栏中包含的面板类型（模块），而不是先记住内部的小功能。
  • 未选中状态： 如果未选中任何元素，属性栏会默认选中“布局（Page）”属性，允许用户更改背景色或导出内容。

2. 核心属性面板模块 #

Figma的属性栏核心模块包括：图层操作、位置、布局、外观、填充、描边、效果和导出。

(1) 图层操作与位置面板 #

  • 图层操作： 包含基本的图层操作和设计模式切换。
  • 位置属性 (X/Y 轴)：
    • 相对定位： 元素的 X 和 Y 轴位置是基于其上级图层（如 Frame 或 Section）的左上角 (0, 0) 来确定的。
  • 间距查看（常用功能）： 选中一个元素，按住 Alt 键（Windows）或 Option 键（Mac），鼠标悬停到其他元素上，即可显示该元素与目标元素的 X/Y 轴位置和距离。
  • 对齐操作： 基于上级图层或共同选中的元素进行对齐（左、中、右、上、居中、底）。
  • 旋转与翻转： 可以直接输入角度或拖拽进行旋转。翻转（左右/上下）主要用于位图编辑。

(2) 布局面板（Layout） #

  • 尺寸控制 (W/H)： 控制元素的宽 (W) 和高 (H)。
  • 裁剪内容 (Clip Content)： 默认开启。如果在一个 Frame 内部创建内容，并将内容拖到 Frame 外部，它会被隐藏。关闭此功能后，超出 Frame 范围的内容会显示出来。
  • 模块变化： 布局面板会根据元素类型（例如，应用 Auto Layout 自动布局）而显示更丰富的设定。👀后续详细学习👀

(3) 外观面板（Appearance） #

  • 透明度： 对整个图层进行总体透明度控制。
  • 圆角控制 (Corner Radius)： 可设置圆角。
    • 点击圆角设置旁的图标，可以单独设置四个角的圆角数值。
    • 还提供了平滑圆角的选项（一种工业设计逻辑）。
  • 图层叠模式 (Blending Mode)： 调整图层与背景或下方图层之间的色彩混合关系。
  • 元素特有样式： 对于特殊图形（如多边形或星形），外观面板会增加特有的控制设置。

(4) 填充面板（Fill） #

  • 填充类型： 可用于填充色彩、渐变、图片或视频。
  • 多重填充： 可以添加多层填充内容（例如，在背景色上方添加一层渐变）。
  • 透明度差异：
    • 总体透明度：控制整个元素的透明度（在 Appearance 面板）。
    • 单层透明度：在填充面板内部，可以单独控制某一层填充（如某个渐变色）的透明度。
  • 空图层： 删掉所有填充层，元素虽存在于画板中，但不可见。

(5) 描边面板（Stroke） #

  • 作用： 给元素增加描边。
  • 描边位置： 可设置描边在形状的内部（Inside）、外部（Outside）或基于线条的中间（Center）。
  • 描边样式： 可选择实线（Solid）或虚线（Dashed）。
    • 虚线设置包括调整间隙（Gap）和线的长度（D）。
  • 方向性展示： 可选择只在某个固定方向上展示描边（如只显示上方或下方），对制作列表分割线很有帮助。

(6) 效果面板（Effect） #

  • 四种图层效果：
    1. 内阴影（Inner Shadow）
    2. 投影（Drop Shadow）
    3. 画部的模糊（Layer Blur）
    4. 背景的模糊（Background Blur）
  • 参数设置： 效果设置参数是隐藏的。必须将鼠标移动到效果名称处，点击出现的齿轮图标，才能弹出对应的设置面板。

(7) 导出面板（Export） #

  • 设置： 可以选择不同的倍率进行导出（如@2x），并选择导出的格式（如PNG, JPG）和细节质量设定。
  • 预览功能： 面板下方有预视图，允许用户在导出前查看最终图像效果。
#Figma学习指南 #学习笔记

最后一次修改于 2025-11-14