将文件导入 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 团队。

点击 “？”联系支持团队或发送电子邮件至 support@figma.com。

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

如何导出资源