将文件导入 Figma

您所在的位置:网站首页 sketch导入图片 将文件导入 Figma

将文件导入 Figma

2023-11-18 12:22| 来源: 网络整理| 查看: 265

将文件导入 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 图标选择要导入的文件。

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

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

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

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

2. 拖放 #

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

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

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

选择要复制的元素。

在 Illustrator 中,选择“Copy”。 在 Sketch 中,选择“Copy as SVG”。 在 Figma 中,选择“Copy”

将 SVG 粘贴到 Figma 的画布中。

故障排除 #

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

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

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

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

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

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

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3