教程

如何在 Figma 中创建框架

学习如何在 Figma 中创建框架，以组织您的 UI 设计和布局。一个适合初学者的指南，帮助您使用框架工具实现更好的结构和响应性。

开始使用我们的AI视频 + 文档生成器创建视频

开始使用 Trupeer

开始使用我们的AI视频 + 文档生成器创建视频

开始使用 Trupeer

详细步骤：

1. 选择框架工具：点击工具栏中的框架工具图标或按下 'F' 键。
2. 选择创建方法：单击并拖动：在画布上单击并拖动以创建具有自定义尺寸的框架。 
预设设备尺寸：从右侧的属性面板中选择预设的框架尺寸。 
框架选择：选择现有元素并将它们转换为框架。 
3. 在现有元素周围创建框架（框架选择）：选择所需元素，然后按下 Ctrl + Alt + G（Windows）或 ⌘ + Opt + G（Mac）以创建包含这些元素的框架。 
4. 调整框架属性：创建后，您可以在右侧面板中修改框架的属性（大小、颜色等）。 

逐步指南：如何在 Figma 中创建框架

第 1 步

单击 "框架" 选项以启动框架创建过程。

Click on the "Frames" option to initiate the frame creation process.

第 2 步

选择 "框架" 选项后，在 Figma 模板上点击您想要放置新框架的地方。

After selecting the "Frames" option, tap anywhere on the Figma template where you want to place your new frame.

第 3 步

单击后，框架将在模板上显示。然后，您可以根据您的具体要求调整框架的大小和尺寸。

Once you've clicked, the frame will appear on the template. You can then adjust the size and dimensions of the frame according to your specific requirements.

详细步骤：

1. 选择框架工具：点击工具栏中的框架工具图标或按下 'F' 键。
2. 选择创建方法：单击并拖动：在画布上单击并拖动以创建具有自定义尺寸的框架。 
预设设备尺寸：从右侧的属性面板中选择预设的框架尺寸。 
框架选择：选择现有元素并将它们转换为框架。 
3. 在现有元素周围创建框架（框架选择）：选择所需元素，然后按下 Ctrl + Alt + G（Windows）或 ⌘ + Opt + G（Mac）以创建包含这些元素的框架。 
4. 调整框架属性：创建后，您可以在右侧面板中修改框架的属性（大小、颜色等）。 

逐步指南：如何在 Figma 中创建框架

第 1 步

单击 "框架" 选项以启动框架创建过程。

Click on the "Frames" option to initiate the frame creation process.

第 2 步

选择 "框架" 选项后，在 Figma 模板上点击您想要放置新框架的地方。

After selecting the "Frames" option, tap anywhere on the Figma template where you want to place your new frame.

第 3 步

单击后，框架将在模板上显示。然后，您可以根据您的具体要求调整框架的大小和尺寸。

Once you've clicked, the frame will appear on the template. You can then adjust the size and dimensions of the frame according to your specific requirements.

开始免费使用我们的AI视频+文档生成器制作视频

探索Trupeer

开始免费使用我们的AI视频+文档生成器制作视频

探索Trupeer

在 Figma 中创建框架的专业技巧

  1. 使用框架工具快捷键
    按下键盘上的 F 键以激活框架工具。然后在画布上点击并拖动以绘制一个框架。这是创建框架最快且最常用的方法。

  2. 从工具栏创建框架
    点击工具栏左上角的框架工具图标（看起来像一个井号或矩形）。然后从右侧面板选择预设的框架大小（如 iPhone、桌面或平板电脑），或在画布上手动绘制一个框架。

  3. 将现有元素转换为框架
    选择要分组的元素，右键单击并从上下文菜单中选择“框架选择”。这会将所选元素包装在一个新框架中，有助于组织你的设计。

  4. 在框架中使用自动布局
    创建框架后，打开自动布局以使其响应式。这在设计按钮、卡片或需要一致间距和对齐的区域时非常有帮助。

  5. 嵌套框架以实现更好的结构
    你可以将一个框架放入另一个框架中。嵌套框架非常适合组织复杂的用户界面设计和组件，如模态框、卡片和导航栏。

常见陷阱及避免方法

  1. 将框架与组混淆
    组只是将元素捆绑在一起，而框架可以包含布局规则和约束。需要结构、对齐或响应式时使用框架。

  2. 未设置约束
    在设计响应式组件时，忘记在框架内设置约束可能会导致元素在调整大小时行为异常。始终检查右侧面板中的约束。

  3. 过度使用框架
    使用过多不必要的框架可能会使你的图层面板混乱，并使编辑变得困难。战略性地使用框架——仅在需要布局控制时使用。

  4. 错误的嵌套
    避免意外将框架放入错误的父框架中。这可能会破坏你的布局层次结构。使用图层面板来跟踪结构。

  5. 跳过命名
    未给框架命名会使协作变得混乱。始终清楚地命名你的框架（如“导航栏”，“页脚”或“iPhone 14 屏幕”），以保持组织性。

在 Figma 中创建框架的专业技巧

  1. 使用框架工具快捷键
    按下键盘上的 F 键以激活框架工具。然后在画布上点击并拖动以绘制一个框架。这是创建框架最快且最常用的方法。

  2. 从工具栏创建框架
    点击工具栏左上角的框架工具图标（看起来像一个井号或矩形）。然后从右侧面板选择预设的框架大小（如 iPhone、桌面或平板电脑），或在画布上手动绘制一个框架。

  3. 将现有元素转换为框架
    选择要分组的元素，右键单击并从上下文菜单中选择“框架选择”。这会将所选元素包装在一个新框架中，有助于组织你的设计。

  4. 在框架中使用自动布局
    创建框架后，打开自动布局以使其响应式。这在设计按钮、卡片或需要一致间距和对齐的区域时非常有帮助。

  5. 嵌套框架以实现更好的结构
    你可以将一个框架放入另一个框架中。嵌套框架非常适合组织复杂的用户界面设计和组件，如模态框、卡片和导航栏。

常见陷阱及避免方法

  1. 将框架与组混淆
    组只是将元素捆绑在一起，而框架可以包含布局规则和约束。需要结构、对齐或响应式时使用框架。

  2. 未设置约束
    在设计响应式组件时，忘记在框架内设置约束可能会导致元素在调整大小时行为异常。始终检查右侧面板中的约束。

  3. 过度使用框架
    使用过多不必要的框架可能会使你的图层面板混乱，并使编辑变得困难。战略性地使用框架——仅在需要布局控制时使用。

  4. 错误的嵌套
    避免意外将框架放入错误的父框架中。这可能会破坏你的布局层次结构。使用图层面板来跟踪结构。

  5. 跳过命名
    未给框架命名会使协作变得混乱。始终清楚地命名你的框架（如“导航栏”，“页脚”或“iPhone 14 屏幕”），以保持组织性。

关于在 Figma 中创建框架的常见问题

  1. 框架和画布之间有什么区别？
    在 Figma 中，框架的功能类似于其他工具中的画布，但具有更多布局和响应式功能。框架可以作为具有约束和自动布局的容器。

  2. 可以在创建后调整框架的大小吗？
    可以。选择框架并拖动其边缘或在右侧属性面板中输入精确的尺寸。

  3. 框架可以导出吗？
    可以。框架可以导出为 PNG、JPG、SVG 或 PDF。选择框架并使用属性面板中的导出部分。

  4. Figma 中有预设的框架大小吗？
    有。当您激活框架工具时，您会在右侧看到一系列预设——如手机屏幕、桌面尺寸、平板电脑和社交媒体尺寸。

  5. 我可以在组件内部创建框架吗？
    当然可以。框架可以是组件或实例的一部分，允许您高效地结构化和重用设计元素。

  6. 如何在 Mac 上录制屏幕？ 
    要在 Mac 上录制屏幕，您可以使用 Trupeer AI。它允许您捕捉整个屏幕，并提供 AI 功能，例如添加 AI 虚拟形象、添加旁白、在视频中缩放等。通过 trupeer 的 AI 视频翻译功能，您可以将视频翻译成 30 多种语言。 

  7. 如何在屏幕录制中添加 AI 虚拟形象？
    要在屏幕录制中添加 AI 虚拟形象，您需要使用AI 屏幕录制工具。 Trupeer AI 是一个 AI 屏幕录制工具，可以帮助您创建多个虚拟形象的视频，还可以帮助您为视频创建自己的虚拟形象。

  8. 如何在 Windows 上录制屏幕？
    要在 Windows 上录制屏幕，您可以使用内置的游戏栏（Windows + G）或像 Trupeer AI 这样的高级 AI 工具，以获得更高级的功能，例如 AI 虚拟形象、旁白、翻译等。

  9. 如何为视频添加旁白？
    要为视频添加旁白，下载 trupeer ai chrome 扩展。一旦注册，上传您的视频与声音，选择您想要的 trupeer 旁白，然后导出您的编辑视频。 

  10. 如何在屏幕录制中缩放？
    要在屏幕录制中缩放，请使用 Trupeer AI 中的缩放效果，它允许您在特定时刻缩放，从而增强视频内容的视觉冲击力。

推荐阅读

技术文档生成器

用户手册指南

知识库软件

如何在 Figma 中隐藏框架名称

如何保存 Figma 文件

如何在 Figma 中制作网格

如何在 Figma 中制作网格

如何在 Figma 中模糊背景

关于在 Figma 中创建框架的常见问题

  1. 框架和画布之间有什么区别？
    在 Figma 中，框架的功能类似于其他工具中的画布，但具有更多布局和响应式功能。框架可以作为具有约束和自动布局的容器。

  2. 可以在创建后调整框架的大小吗？
    可以。选择框架并拖动其边缘或在右侧属性面板中输入精确的尺寸。

  3. 框架可以导出吗？
    可以。框架可以导出为 PNG、JPG、SVG 或 PDF。选择框架并使用属性面板中的导出部分。

  4. Figma 中有预设的框架大小吗？
    有。当您激活框架工具时，您会在右侧看到一系列预设——如手机屏幕、桌面尺寸、平板电脑和社交媒体尺寸。

  5. 我可以在组件内部创建框架吗？
    当然可以。框架可以是组件或实例的一部分，允许您高效地结构化和重用设计元素。

  6. 如何在 Mac 上录制屏幕？ 
    要在 Mac 上录制屏幕，您可以使用 Trupeer AI。它允许您捕捉整个屏幕，并提供 AI 功能，例如添加 AI 虚拟形象、添加旁白、在视频中缩放等。通过 trupeer 的 AI 视频翻译功能，您可以将视频翻译成 30 多种语言。 

  7. 如何在屏幕录制中添加 AI 虚拟形象？
    要在屏幕录制中添加 AI 虚拟形象，您需要使用AI 屏幕录制工具。 Trupeer AI 是一个 AI 屏幕录制工具，可以帮助您创建多个虚拟形象的视频，还可以帮助您为视频创建自己的虚拟形象。

  8. 如何在 Windows 上录制屏幕？
    要在 Windows 上录制屏幕，您可以使用内置的游戏栏（Windows + G）或像 Trupeer AI 这样的高级 AI 工具，以获得更高级的功能，例如 AI 虚拟形象、旁白、翻译等。

  9. 如何为视频添加旁白？
    要为视频添加旁白，下载 trupeer ai chrome 扩展。一旦注册，上传您的视频与声音，选择您想要的 trupeer 旁白，然后导出您的编辑视频。 

  10. 如何在屏幕录制中缩放？
    要在屏幕录制中缩放，请使用 Trupeer AI 中的缩放效果，它允许您在特定时刻缩放，从而增强视频内容的视觉冲击力。

推荐阅读

技术文档生成器

用户手册指南

知识库软件

如何在 Figma 中隐藏框架名称

如何保存 Figma 文件

如何在 Figma 中制作网格

如何在 Figma 中制作网格

如何在 Figma 中模糊背景

开始使用我们的AI视频 + 文档生成器创建视频

开始使用 Trupeer

开始使用我们的AI视频 + 文档生成器创建视频

开始使用 Trupeer

开始使用我们的AI视频 + 文档生成器创建视频

开始您的免费试用

即时 AI 产品视频和文档，从粗略的屏幕录制中生成

Get started for free

免费开始

体验创建产品视频的新快速方式。

即时AI产品视频和文档来自粗糙的屏幕录制。

Get started for free

免费开始

体验创建产品视频的新快速方式。

即时AI产品视频和文档来自粗糙的屏幕录制。

Get started for free

免费开始

体验创建产品视频的新快速方式。

即时AI产品视频和文档来自粗糙的屏幕录制。

Get started for free

免费开始