Formline
返回文档
通用教程

在 Figma 中使用 MacBook SVG:排版桌面首屏

先选择 MacBook 开合姿态,再将 SVG 放入 Figma 桌面首屏,并为标题留出空间。

MacBook 插画可以成为桌面产品首屏的视觉重点,同时为标题和操作按钮留出位置。

先在模型查看器中设置屏幕开合姿态,再将导出的静态 SVG 放入 Figma。

选择开盖或合盖姿态

首屏需要紧凑轮廓或低调配图时,可以选合盖。需要同时呈现屏幕和键盘时,可以选开盖。

MacBook Pro 查看器提供 0°、60°、105° 和 120° 开合角度。选好姿态和主题后导出 SVG。

将 SVG 放入首屏

  1. 将导出的 SVG 文件从电脑拖到 Figma 画布。Figma 会把导入的 SVG 转换为可编辑的矢量图层。
  2. 创建宽版桌面画板。把 MacBook 放在一侧,另一侧留作标题和主要操作按钮的文字区。
  3. 选中图稿,按 K 使用 Figma 的缩放工具。拖动角点可按比例缩放,描边和效果也会随图稿缩放。屏幕和底座周围要留白,也要顾及首屏画板的边缘。

平衡设备和标题

开盖姿态更高,细节也更多。给图稿足够宽度,确保屏幕和键盘清楚可辨。合盖姿态更紧凑,可以放低一些,为文案留出空间。

在图层面板中选择可用的矢量图层。进入矢量编辑模式后,可以调整对应图层的节点或属性。具体分组和路径边界取决于导入的 SVG。

保留选定的开合姿态

SVG 是导出时开合角度的静态图。要展示其他角度,请回到查看器重新导出。需要使用开合控件时,请打开独立 HTML 查看器。

常见问题

桌面首屏适合用哪种姿态?

要展示屏幕和键盘时选开盖。文案较多、需要紧凑配图时选合盖。

可以在 Figma 里调整开合角度吗?

不可以。SVG 保留的是查看器中选定的静态角度。要换角度,请重新导出。

选择适合你的模型包

一次付费,无订阅。

免费

$0

适合个人作品与客户项目。

获取免费模型
  • 17 款免费模型
  • 纯矢量,任意缩放依然清晰。
  • 高性能 SVG 渲染。
  • 3D 立体风格,无需复杂引擎。
  • 预设视角切换,自带精致动效。
  • 浅深主题,配色自由定义。
  • SVG、PNG 与完整文件包。
  • 单 HTML 文件,无需额外依赖。
  • 商业项目全面授权。
  • 完全本地使用,离线也可用。

单款

$6

适合有明确产品、页面或演示需求的你。

浏览模型库
  • 任选 1 款付费模型
  • 纯矢量,任意缩放依然清晰。
  • 高性能 SVG 渲染。
  • 3D 立体风格,无需复杂引擎。
  • 预设视角切换,自带精致动效。
  • 浅深主题,配色自由定义。
  • SVG、PNG 与完整文件包。
  • 单 HTML 文件,无需额外依赖。
  • 商业项目全面授权。
  • 完全本地使用,离线也可用。

完整包

最划算
$29

全部现有与未来新增模型,一次购买,永久更新。

  • 全部 27 款模型及未来所有新增
  • 纯矢量,任意缩放依然清晰。
  • 高性能 SVG 渲染。
  • 3D 立体风格,无需复杂引擎。
  • 预设视角切换,自带精致动效。
  • 浅深主题,配色自由定义。
  • SVG、PNG 与完整文件包。
  • 单 HTML 文件,无需额外依赖。
  • 商业项目全面授权。
  • 完全本地使用,离线也可用。