将文件导入 Figma #

你可以将不同的文件类型导入 Figma,包括 Sketch 或 Figma 的设计文件,以及图片和矢量图形。

导入 Sketch 文件 #

你可以将 Sketch(.sketch)设计文件导入 Figma,这将创建一个新的 Figma 文件。

有三种方法:

  • 将文件拖放到文件管理面板中。
  • 点击文件管理面板中的 Import 按钮
  • 从菜单中找到 Menu > New > From Sketch File

支持的 Sketch 功能 #

页面 Pages

与 Sketch 一样,你可以在单个 Figma 文件中存储多个页面,Sketch 文件中存在的任何页面都将作为 Figma 文件中的单独页面导入。

你可以在编辑器左侧的图层面板切换页面

了解有关 图层面板 的详细信息。

符号 Symbols

将 Sketch 文件导入Figma时,Sketch 文件中包含的 Symbols 都将转换为 组件(Components)。Sketch 文件中的 Symbols 页面将作为包含主组件的名为 Symbols 的页面导入 Figma。

如果你使用的是 Figma Professional计划,则可以将这些组件发布到你的团队库。 这允许你在多个设计中重用任何这些UI元素。

使用组件和实例 一文中了解有关组件的更多信息。

注意

Sketch Symbols 将作为 Figma 文件导入,而不是作为团队资源库导入。 导入后,你需要将主组件发布到团队资源库。

字体 Fonts

如果你一直在 Sketch 中使用自定义或本地存储的字体,Figma 同样支持。要确保从 Sketch 正确导入文本对象,你需要确保在 Figma 中可以使用这些字体。

  • 如果你使用的是 Figma Desktop 应用程序,则默认情况下你可以访问本地字体。
  • 如果你在浏览器中使用 Figma,则需要下载 Figma Font Helper 以使用本地字体。

字体的使用 一文中了解有关下载和使用本地字体的更多信息。

注意

使用 Linux 或 ChromeOS 的专业版团队目前不支持使用本地字体。

你导入 Sketch 文件时可能无法正确导入文本对象。如果发生这种情况,你将在 Figma 中收到 “Missing Fonts” 警告。 你可以将任何受影响的文本对象更新为另一个字体。

字体的使用 一文中了解有关管理缺失字体的更多信息。

Linux 和 ChromeOS 用户可以使用企业级访问组织内的共享字体。

样式 Styles

样式不会被导入,你在 Sketch 中使用的任何样式都需要在 Figma 中重新创建。

有关创建和添加样式的更多信息,请查看 创建样式

导入图像 #

你可以在任何浏览器上将以下格式的图像导入 Figma:PNG、JPEG、GIF、TIFF 和 WEBP。

我们将缩小任何宽度或高度大于 4096px的图像,这将按比例缩放图像到最长边为 4096px。

有时候我们需要在导入之前解码并转换原始文件,这意味着元数据不一定能保留。

你可以通过几种不同的方式导入图像:

  • 文件管理面板中的 Import 按钮。
  • 将文件拖放到文件管理面板中。
  • 将图像文件拖到画布上。
  • 复制图像并将其粘贴在画布上。
  • 使用 Place Image 将图像直接添加到设计中。

图片置入 一文中详细了解 Place Image 功能。

导入矢量图形 #

由于 SVG 是无损格式,我们建议导出 SVG 文件以确保获得最佳结果。 Figma 可以从各种设计工具导入 SVG。

你可以通过多种方式导入矢量图形:

  • 使用 Import 按钮导入 .fig,.sketc h或 .svg 文件。
  • 将 .fig,.sketch 或 .svg 文件拖到文件管理面板中。
  • 将 .svg 文件件拖到画布上。
  • 从 Sketch、Illustrator 或 Figma 中复制和粘贴 SVG。
  • 复制 SVG 源代码并将其粘贴到 Figma 中的画布中,我们将自动解释代码并显示图形。

SVG Symbol,marker 和 clipPath 元素目前不支持导入。

导入文件 #

1. 文件导入器 #

你可以使用 Import File 图标选择要导入的文件。

  1. 单击工具栏中 “+” 旁边的 Import File 图标:

  2. 从对话框窗口中选择文件:

  3. 单击“打开”以开始导入过程。根据文件大小,导入可能需要几秒钟。

  4. 单击“完成”返回文件管理面板。

2. 拖放 #

你可以将文件从计算机上的文件夹或桌面拖拽到 Figma 中。

  • 你可以将 .fig,.sketch,PNG,JPG 或 GIF格式的文件导入到文件管理面板。
  • 你可以将 SVG,PNG,JPG 或 GIF 格式的文件添加到画布。
  1. 选择要导入的文件。
  2. 将文件拖到 Figma 上。 Figma 中将出现一个蓝色框,表示你的文件已准备好导入。
  3. 释放鼠标以开始导入过程。根据文件大小,这可能需要几秒钟。
  4. 完成后,单击“完成”返回文件管理面板。

3. 复制和粘贴 #

将高保真设计导入 Figma 的最佳方法是通过 SVG,你可以通过复制它们并将它们粘贴到 Figma 中。

  1. 选择要复制的元素。

    • 在 Illustrator 中,选择“Copy”。
    • 在 Sketch 中,选择“Copy as SVG”。
    • 在 Figma 中,选择“Copy”
  2. 将 SVG 粘贴到 Figma 的画布中。

故障排除 #

我们汇总了一些常见的导入错误。

  • 文件大小:如果你正在使用 Sketch 文件太大,特别是具有多个页面和大量图像的文件,那么你可能导入 Figma 时会遇到问题。

    如果遇到长时间加载,或者导入的文件中图像丢失,我们建议在重新导入之前将原始 Sketch 文件拆分为较小的文件。

  • 缺少字体:如果你在浏览器中使用 Figma,则需要下载 Font Helper 才能访问任何本地字体。默认情况下,Figma Desktop 应用程序已经可以访问本地字体。

  • 不支持的功能或属性:如果你在控制台中看到有关不支持的功能或属性的错误,则可能表示你使用的是旧版 Sketch。

    我们建议在保存文件并重新导入 Figma 之前更新到最新版本的 Sketch。

  • Sketch 测试版:如果你使用的是测试版的 Sketch,特别是最近更新过的版本,可能导入后会有些问题。如果你在使用 Sketch 测试版导入文件时遇到任何问题,请联系 Figma 团队。

点击 “?”联系支持团队或发送电子邮件至 [email protected]

为了更快地解决问题,请包含任何错误消息的屏幕截图,以及控制台日志中任何错误的输出。可能还需要访问原始文件以进一步排除故障。