探索设计文件
在这个指南中，我们将介绍如何在 Figma Design 中处理设计文件。
如果您是 Figma 设计的初学者，我们推荐您参加我们的 Figma Design 入门（2025） 课程。在这个课程中，我们将涵盖从导航设计文件、处理图层、将自动布局应用于框架、创建组件以及向设计中添加原型连接等所有内容。到课程结束时，您将能够从头开始创建一个可定制的作品集网站。
想了解更多关于 Figma 产品之间差异的信息？查看我们的什么是 Figma指南。
什么是设计文件？
设计文件为你提供了创建、分享和测试设计的工具。设计文件深受设计师、产品经理、作家和开发人员喜爱。但任何想要进行视觉创建或沟通的人都可以使用它们！
创建设计文件以探索特定问题，或管理整个设计流程。您可以在自己的文件中绘制想法，也可以与他人分享以共同创作并获得反馈。
Figma 文件是实时更新的，因此人们可以同时在一个文件上工作。一个实时文件可以让所有人保持同步，无需保存、下载或反复传递文档。
每个文件都有自己的版本历史记录，你可以在其中追踪设计的演变过程。探索之前的迭代版本，或创建新版本以记录重要节点。
文件浏览器中的设计文件
您可以通过文件卡片上的图标在文件浏览器中识别 Figma 设计文件。
熟悉界面
如果你是 Figma 的新手，在第一次打开文件时感到有些迷茫是很正常的。我们将带你进行一次导览，以便你熟悉环境并开始与你的团队协作。
设计文件有四个不同区域：底部工具栏、左侧边栏、右侧边栏和画布。
工具栏
工具栏是您与画布交互以及向画布添加对象的中心。它包含所有用于选择对象、在画布上移动以及创建框架、形状、文本和其他图层的工具。这些将成为您设计的基石。
当你准备好进一步探索时，可以探索工具栏中的每个工具→
左侧边栏
左侧边栏提供对图层、页面、资源的访问，也是您可以对文件执行操作的地方。
- 使用 Assets 面板查看本地组件或从套件或库中查找组件（需要编辑权限）。
- 访问文件级别的操作，如移动文件、发布库、创建分支或显示版本历史。
- 使用菜单访问更多功能、操作和设置。或调整您的偏好设置，如暗黑模式 或滚动行为。
右侧边栏
右侧边栏是您获取设计更多信息的入口。当您未选择任何内容时，可以查看本地资源，例如颜色或文本样式。
选中图层后，你可以探索当前选中的属性。你的权限将决定你在侧边栏中可以看到什么，以及你可以执行哪些操作。
右侧边栏也是你找到分享设计工具和实时协作的地方。例如，你可以分享文件、查看还有谁在这里、进行音频交谈等。
如果你需要，你也可以调整你的个人缩放和查看选项。你在这里所做的更改仅适用于你的查看。
仅查看访问权限
- 评论：查看和搜索评论
- 属性：查看您选择的属性
编辑权限
- 设计：查看和编辑图层的属性
- 原型：查看和编辑原型交互、流程和设置
使用 Dev 模式检查设计
你正在将文件作为交接过程的一部分查看吗？Dev Mode 是一个面向开发者的界面，用于检查和导航设计文件。
开发模式允许你识别准备就绪的设计，并访问将设计转化为代码所需的信息。开发模式指南 →
画布
画布是你的工作区域，你将在这里排列图层来创建你的设计。你会发现很多空间来探索和迭代你的想法。
平移以四处移动
平移以在文件中移动并查看画布上的其他内容。
鼠标：[左键点击图标] 按住 Space 滚轮，然后点击并拖动以在画布上移动。
触控板：[双指拖动图标] 用两根手指，向任意方向滑动以平移画布。Figma 将使用您电脑的默认滚动方向设置。
缩放
放大以更仔细地查看，或缩小以看到整体情况。在屏幕右上角查看当前的缩放级别。
鼠标：按住 ⌘Command / Ctrl 并向下滚动以放大，向上滚动以缩小。
触控板：将两根手指捏在一起以缩小，将两根手指分开以放大。
无压力的探索
如果是你第一次加入或探索文件，与画布上的元素互动可能会感觉有点吓人。人们常常担心会不小心移动、更改或删除某些内容。
强大的能力不必伴随着巨大的责任。在工具栏中选择手形工具，或按键盘上的 H 键。现在您可以点击、拖动和缩放文件，而不用担心无意中做出更改。
整合一切
让我们快速回顾一下！工具栏 toolbar 为你提供了创建和组合图层的工具和功能。然后你可以在画布 canvas 上排列这些图层来创建你的设计。
左侧边栏是您探索和组织文件的地方。右侧边栏是您查看图层属性的地方。
让我们更深入地了解一下一些关键概念：页面和图层。
页面
页面帮助您组织设计文件。每个页面都是一个独立的画布，为您提供更多空间来创作和探索您的想法。人们使用页面来：
- 通过里程碑或状态管理设计
- 组织组件
- 保留想法的草稿板
- 归档旧设计
要浏览文件的页面，点击左侧边栏中的当前页面名称。你也可以点击创建一个新页面。在侧边栏中查看页面 →
页面非常适合分享特定设计集合。例如，你可以为评审创建一个独立的页面，或者当设计准备好开发时创建一个页面。
要分享页面，右键点击页面名称并选择“Copy link to page”。当任何人打开该链接时，他们将会跳转到正确的页面。
图层
设计通常是由形状、文本和其他元素组合而成的。
当您将对象添加到画布时，Figma 将每个对象视为一个单独的图层。单独的图层允许您独立地更改或编辑每个图层的属性。
像这个社交媒体帖子的设计，包括名称、头像、图片和标题。
你不需要是几何学高手才能使用 Figma。但了解我们在画布上处理的是三维空间会很有帮助。
我们拥有 X（水平）轴和 Y（垂直）轴，它们提供了图层在画布上的坐标。我们还拥有第三个维度，即 Z-index，它决定了图层的深度或显示顺序。
在图层面板中查看图层
图层可以位于其他图层的上方、下方、旁边或内部。要查看图层的组织方式，请检查左侧边栏中的图层面板。
图层类型
每个图层都有一个图层名称和图层类型的图标。你可能已经注意到，其中一些图标出现在工具栏中。你可以从工具栏中选择该工具，或使用键盘快捷键，来创建更多该类型的图层。
| 图层图标 | 图层名称 | 快捷键 |
|---|---|---|
| 框架 | F | |
| 组 | ⌘Command G | |
| 组件 | ⌥ Option ⌘Command K 或 Ctrl + Alt + K | |
| 实例 | N/A | |
| 文本 | T | |
| 形状 | R | |
| 图片 | ⇧Shift ⌘Command k 或 Shift Ctrl K | |
| 自动布局 | Shift A | |
| 部分 | Shift S | |
| GIF 或视频 | ⇧Shift ⌘Command k 或 Shift Ctrl K |
图层顺序和层级
在图层面板中图层的排列顺序也很重要。图层顺序决定了图层在画布上的重叠方式。
这个菜单有一个矩形作为背景。由于它在图层面板中位于其他图层的下方，所以在画布中也显示在其他图层之上。如果它在图层面板中位于其他图层的上方，我们就看不到任何文本或图标图层。
图层作为容器
We mentioned that layers can be inside other layers. You can tell if a layer contains other layers if there is an arrow next to it in the layers panel. Click the arrow to view any layers within that container.
我们提到过图层可以嵌套在其他图层中。如果图层包含其他图层，你可以在图层面板中看到它旁边有一个箭头。点击箭头可以查看该容器内的任何图层。
图层之间的关系
我们使用"父"和"子"这两个术语来描述容器与其内部图层之间的关系。
- 父级图层 Parents 包含其他图层，例如画板、组件和组。
- 子级图层 Child 是父级图层内的图层。它们可以是单个图层，如形状或文本，也可以是包含自己子级图层的容器。
处理容器
有几种不同类型的图层可以作为容器：组、框架和区域。虽然它们可能看起来相似，但每个都有其自身的优势。
组
组是合并图层为单个元素的好方法。它们简化了图层面板，并让你能在画布中与单个对象交互。例如：你有一组想要保持在一起的形状。
组是图层集合，而非独立元素，因此它们没有自己的尺寸或属性。当你对组进行修改时，实际上是将这些修改应用到组中的每一层。
框架
框架是 Figma 中另一种合并图层的方式。框架可以作为特定设备或屏幕尺寸的脚手架，例如应用设计中的单页。它们也可以作为构成不同元素的图层的容器，例如导航栏中的图层。你甚至可以将框架放在其他框架内部。
Unlike groups, frames can have dimensions and properties of their own—like fills, rounded corners, and shadows. They also have features like auto layout, constraints, and layout grids, that allow you to control or influence the layers inside them.
与群组不同，框架可以有自己的尺寸和属性——例如填充、圆角和阴影。它们还具有自动布局、约束和布局网格等特性，这些特性允许您控制或影响框架内的图层。
框架预设
Figma has frame presets for common assets, devices, and screen sizes. Whether you’re designing a mobile app or an Instagram post. Explore frame presets →
Figma 提供了常见资源、设备和屏幕尺寸的框架预设。无论您是在设计移动应用还是 Instagram 帖子。探索框架预设→
区块
The section tool allows you to designate and label a specific region of the canvas. You can use sections to group related concepts and ideas or organize your designs.
section 工具允许你指定和标记画布的特定区域。你可以使用区域来分组相关的概念和想法或组织你的设计。
部分有助于聚焦注意力、提供上下文，并引导协作者完成流程。它们非常适合用于评审活动或分享设计以便交接。
Check out our best practice guide for more information on when to use groups and frames.
查阅我们的最佳实践指南，了解更多关于何时使用群组和框架的信息。
探索图层属性
当你在画布上悬停于图层或对象时，整个元素周围会出现一个框。点击图层以选择它并查看更多关于其属性的信息。
在左侧边栏，您可以查看图层的名称及其组织方式。在右侧边栏，您可以查看图层的属性。
图层的属性将包含有关图层的基本信息，例如其尺寸和位置。此外，还包括任何样式，如颜色、文本属性或阴影等效果。
你能看到哪些属性取决于你选择的图层类型。如果一个图层使用了样式，那么在右侧边栏中只会显示样式名称和图标。
Layout 布局
Appearance 外观
Auto layout 自动布局
Constraints 约束
Fills 填充
Stroke 描边
Selection colors 选择颜色
Effects 效果
Export 导出
支持：
Frames 框架
Groups 组
Components 组件
Instances 实例
Auto layout 自动布局
Sections 部分
GIFs
无法编辑属性？
如果你点击了一个图层但无法调整其属性，这意味着你只有查看权限。你可以使用属性面板查看图层的属性，但你无法进行任何修改。
如果你正在作为交接过程的一部分查看文件，那么 Dev Mode 适合你。Dev Mode 是一个面向开发者的界面，用于检查和导航设计文件。Dev Mode 指南→
设计文件中的权限
您的权限决定了您可以执行哪些操作以及是否可以修改文件。我们在此不会深入探讨 Figma 的权限模型。但有一个概念需要理解： can edit 权限和 can view 权限之间的区别。
- 拥有
can edit权限的人可以修改文件。这包括移动图层、更新属性以及管理文件本身。 - 拥有
can view权限的人员可以浏览页面和原型，但他们无法进行任何修改。查看者仍然可以通过提供反馈来为文件做出贡献。
拥有 can view 权限时的浏览操作
- 打开并查看设计文件
- 测量设计文件中图层之间的距离
- 在左侧边栏或画布中选择图层
- 使用检查面板查看图层属性
- 加入带字幕的音频通话
如何检查您的权限
最快判断是否可以编辑文件的方法是查看工具栏。如果看到完整的工具栏，包含所有创建工具和操作，则表示你有编辑该文件的权限。
如果你看到 Ask to edit 和只有少数工具，你只能查看文件。
需要编辑权限？点击工具栏中的按钮请求访问文件。如果您看不到此选项，这意味着您的访问权限已被团队或组织管理员限制。如果您使用的是专业版计划，请联系您的团队管理员。如果您使用的是组织版或企业版计划，请申请升级到付费席位。
准备好开始创作了吗？
这些快速入门项目是开始您的学习旅程的完美方式：