导入

ProtoPie支持以几步点击就能完成的方式从MacOS中导入Sketch设计文件,同时还支持从MacOS或Windows中导入Adobe XD或Figma设计文件。

目前,我们支持无插件导入和通过插件导入两种方式。但之后会将重心放在插件导入方式并逐步减少对无插件导入的运营维护。

ProtoPie现支持的插件有Figma、 SketchAdobe XD。通过插件导入的速度更快,对导入对象的选取也更灵活。

开始学习

  • 插件导入方式:安装用于Figma,Sketch或者Adobe XD的ProtoPie插件,并在要导入的文件中打开相应插件。

  • 无插件导入方式:打开要导入的Figma、 Sketch或Adobe XD文件, 并打开ProtoPie Studio,在ProtoPie的文件菜单项中选择“导入...”。

Figma导入(插件方式)

安装并下载Figma插件

通过新版用于Figma的ProtoPie插件,可以快速、灵活地在指尖完成将设计从Figma导入到ProtoPie的工作,并且这一操作全在本地完成,因此不会有任何延迟。

导入的形式与范围均可控。将顶层画板(Frame)导入为场景、将对象按照相同的层次结构进行导入和定位,同时相应的自适应设置也会一并导入。这些功能使得导入文件与Figma中呈现的原文件完全一致。

与原有的Figma导入方式有何不同?

  • 可导入一或多个画板和对象

  • 可将顶层画板导入为场景

  • 可手动选择要单独导入的内容

  • 可将矢量图层导入为SVG

  • 可将文本图层导入为ProtoPie中的文本图层

  • 可将自适应设置导入为ProtoPie中的中的自适应设置

ProtoPie Figma插件要求使用ProtoPie 5.2或更高版本。

初次进行这样的导入操作吗?可以通过下面的示例文件来尝试使用ProtoPie Figma插件。

导入为场景

将Figma中的顶层画板(Frame)导入为ProtoPie中的场景并保持其原有命名。支持一次性将一到多个顶层画板导入为场景。所导入的顶层画板基于在Figma中的图层层次结构形成ProtoPie中的场景。

导入对象

导入对象维持与Figma相同的图层层次结构、定位以及自适应设置。支持一次性导入一到多个对象。非顶层画板的对象在场景中会被呈现为图层或容器层。

Figma中的组件和子版组件将会被导入为容器层而不是组件。如果需要在ProtoPie中也以组件形式存在,则需手动生成。点此了解更多关于组件的知识。

导入为SVG

将Figma中的矢量图层导入为ProtoPie中的SVG(可缩放矢量图形)。矢量图层将会被转换为ProtoPie中的图形以使其属性可被编辑。目前ProtoPie尚不能支持所有的SVG属性。点此了解更多关于SVG图层的知识。

导入文本图层

将Figma中的文本图层导入后将自动转变成不可编辑的位图,之后通过ProtoPie中的“转化为文本“功能将位图转变为可编辑的文本图层。点此了解更多关于文本图层的知识。

多次导入/重新导入

一般而言,从Figma重复导入画板和对象时,较后导入的画板和对象将会替换掉较早导入的。但也存在几种需要考虑的特殊情形。

  • 当在ProtoPie中对先前已导入对象的某些属性变更后,该对象无法被重新导入,而是作为新的图层被单独导入。

  • 导入后,如果修改了图层的层次结构,则无法完成再次导入。例如,给一个导入的图层套上了滚动容器层,该图层无法被重新导入,而是以新的图层被导入。

  • 导入后又被删除的图层在再次实施导入时将不会被自动重新导入。如要对这样的图层重新导入,需要在Figma中选定该图层后专门针对该图层进行单独的导入操作。

  • 如希望对某个场景或对象可以在ProtoPie创建多个副本,不能通过重复导入完成。而是导入一次后在ProtoPie中使用复制功能进行创建。例如,希望Figma中有一个名为“主页”的画板,因交互逻辑需要,ProtoPie中需要有两个“主页”场景。那么则需要先将画板导入到ProtoPie,然后在ProtoPie中复制该场景以形成副本。

Sketch导入(插件方式)

安装并下载Sketch插件,了解有关插件安装的更多信息。 

将设计稿从Sketch导入到ProtoPie中时,如通过ProtoPie Sketch插件来完成导入,即可感受到这一插件的灵活性和便捷性,所有导入操作均在本地完成,从而避免了任何时间上的延迟卡顿。

导入内容可控——画板可以导入为场景,而导入对象将依照Sketch设计稿中原有的层次结构、定位、约束等来进行等效导入。

与原有的Sketch导入功能有何不同?

  • 一次可导入多个画板和/或对象。

  • 将画板导入为场景。

  • 只导入所选内容。

  • 将矢量图层导入为SVG。

  • 将文本图层导入为SVG并在导入后可以再次转换为文本图层。

  • 导入时保留原稿中定义好的约束。

为获得最佳性能,建议在将设计稿从Sketch中导入到ProtoPie时保持Sketch处于在桌面上打开并可见的状态。

ProtoPie Sketch插件要求使用ProtoPie 5.4或更高版本。

初次进行这样的导入操作吗?可以通过下面的示例文件来尝试使用ProtoPie Sketch插件。

导入为场景

将Sketch中的画板导入为ProtoPie中的同名场景,支持一次性导入多个画板,导入结果基于Sketch中图层的层次结构。

导入对象

导入对象并保持与Sketch中一致的图层层次结构、定位以及约束。支持一次性导入多个对象。

Sketch中的母版组件和子版组件会被导入为容器。可在ProtoPie中将其转换为相应的母版组件以维持其组件特性。了解更多关于组件的知识。

导入为SVG

Sketch中的矢量图层会被导入为ProtoPie中的SVG (Scalable Vector Graphics,可缩放矢量图形)。如要使导入的SVG的属性可编辑,可在导入后将其转换为形状。ProtoPie目前尚未支持所有SVG属性。了解更多关于SVG图层的知识。

导入文本图层

Sketch中的文本图层会被导入为ProtoPie中的SVG。如要使导入的SVG的属性可编辑,可在导入后将其转换为文本图层。了解更多关于文本图层的知识。

再次导入

通常从Sketch中再次导入画板和对象将会覆盖上次导入的结果,但以下所举的特殊情形需要事先考虑。

  • 如在ProtoPie中改变了某导入对象的一些属性,则再次导入时将不会影响这一对象。

  • 如在导入后改变了图层的层次结构,则再次导入时将不会影响已经改变了的图层层次结构。例如,将一个导入后的图层添加到一个新建的滑动容器层中,那么再次导入时原来导入的图层将不会受到影响。

  • 导入后删掉的图层不会在再次导入时又被导入进来,除非在Sketch中单独对这一图层进行选择后专门地将这一图层导入ProtoPie。

  • 如需一个场景或对象的副本,应先将其导入,然后在ProtoPie中复制出所需的副本。例如,需要将Sketch中的一个画板作为ProtoPie中的两个同样的场景,则应导入一次,然后在ProtoPie中复制该导入进来的场景以得到所需的第二个同样的场景。

Adobe XD导入(插件方式)

通过ProtoPie的Adobe XD导入插件,可以以极快的速度和极强的便捷性将设计从Adobe XD中导入到ProtoPie中,并且这一操作是完全在本机离线实现的,也就意味着没有任何的延迟。

而且导入的内容也不会出现变形。将整个画板作为场景导入或者导入部分图层后,群组仍能维持在Adobe XD中既有的层次结构、位置、以及约束。

与原有传统Adobe XD导入功能的不同之处在于?

  • 可导入一个或多个画板对象。

  • 可将画板导入为场景。

  • 可先选择要导入的对象再实施导入。

  • 可将矢量图层导入为SVG。

  • 可将文字图层导入为SVG,继而可再转换为文字图层。

  • 可将原有的约束一并导入并维持该约束。

为获取最佳导入性能,建议将设计从Adobe XD导入ProtoPie的过程中全程保持Adobe XD窗口打开并展示在电脑桌面上。

ProtoPie的Adobe XD导入插件仅可在ProtoPie 5.3或更高版本中使用。

首次尝试使用这一功能吗?可以跟着这份范例文件来试着使用ProtoPie的Adobe XD导入插件。

安装Adobe XD插件

方法1. 直接下载安装文件进行安装

直接下载插件安装文件并双击进行安装,这个方法适用于Adobe中国地区账号的用户。

如果要升级插件时,需首先卸载已安装的老版本后,再安装新版本的插件。

方法2. 使用Adobe XD插件服务进行安装

通过打开Adobe XD插件下载页,或在Adobe XD插件菜单中搜索ProtoPie进行安装。这个方法适用于Adobe中国以外地区账号的用户。

基于Adobe服务政策的原因,Adobe中国地区账号的用户无法使用Adobe插件服务,所以无法通过第二种方法安装插件。建议中国地区账号的用户使用第一种方法,通过直接下载插件安装文件进行安装。

导入为场景

将Adobe XD中的画板导入为ProtoPie中的同名场景。这一操作支持一次性地将一个或多个画板导入为场景。所导入的场景基于画板在Adobe XD中图层的层次结构。

导入对象

导入对象且使对象维持与Adobe XD的设计中同样的图层层次结构、位置、约束。支持一次性导入一个或多个对象。

Adobe XD中的母版组件和子版组件将被导入为容器,可以在ProtoPie中将其转换为组件以便在ProtoPie中按照组件的方式来对其进行管理和操作。点击此处了解更多关于组件的知识。

导入为SVG

将Adobe XD中的矢量图层导入为ProtoPie中的SVG (Scalable Vector Graphics,可缩放矢量图形)。如要对所导入SVG的属性进行编辑,只需在导入后将其转换为形状。ProtoPie目前尚未支持全部的SVG属性。点击此处了解更多关于SVG图层的知识。

导入文字图层

将Adobe XD中的文字图层导入为ProtoPie中的SVG。如要对所导入SVG的属性进行编辑,只需在导入后将其转换为文本图层。点击此处了解更多关于文本图层的知识。

重新导入

一般来说,对Adobe XD中的画板和对象再次实施导入将会覆盖上一次导入的同等内容。但以下几点需要格外留意。

  • 如果在ProtoPie中改变了已导入对象的属性,则再次导入时这一对象已被修改的属性不会受到影响(不会变回原值)。

  • 如果在导入后对图层的层次结构做了调整,譬如,将已导入的图层添加到一个新创建的滚动容器中,则再次导入时不会影响到已做的调整,即滚动容器中的已导入图层仍然存在。

  • 对于导入后又已删除掉的图层,实施再次导入时该图层将不会被导入,除非在Adobe XD中单独选择该图层然后专门实施一次对该图层的导入。

  • 如果希望获得场景或对象的副本,则只需导入一次,然后在ProtoPie中对其进行复制。例如,希望Adobe XD中的一个画板出现在ProtoPie的两个场景中,则将这个画板导入一次后在ProtoPie中复制这个被导入进来的场景以创建出同样的副本场景。

Figma导入(原有导入方式)

ProtoPie提供了多种在macOS和Windows上将 Figma 创建的文件导入进来的方法。您可以根据需要来自定义导入的方式,如导入所有图层或只导入在Figma中标记为可导出的图层。点击此处了解关于如何在Figma 中标记导出的更多知识。您可以在Figma 中变更您的设计并重新导入到ProtoPie中,这意味着您可以在Figma 和ProtoPie之间来回切换以确保实现设计和原型构建工作流程上的无缝衔接。

画板

在Figma 中选择要导入的Frame

导入尺寸

设置图层的放大系数。此项可以根据Figma中所选择的Frame的尺寸来变更。

所有图层

Frame中的所有图层均会被导入到文件夹结构中

仅批量导入选中图层

只有在Figma 中被标记为"导出"的图层才会被导入

更新图层坐标和大小

当从Figma 重导入frame时覆盖图层位置值

更新图层大小

当从Figma 重导入frame时覆盖图层尺寸值

同步图层排序和层级

当从Figma 重导入frame时更新图层顺序和分组

删除已在Adobe XD CC中删除的图层

当从Figma 重导入frame时移除Figma 中已删除的图层

Sketch导入(原有导入方式)

ProtoPie提供了多种在macOS上将Sketch创建的文件导入进来的方法。您可以根据需要来自定义导入的方式,例如根据工作流程的差异您可以从Sketch文件中导入所有图层,也可以只导入已设为"可导出"的图层。再导入时,可以自动同步在Sketch除图层位置和尺寸之外的其它变更。

画板

在Sketch中选择要导入的画板

导入大小

设置图层的导入比例。此项可以根据Sketch中所选择的画板的尺寸来变更。

所有图层

画板中的所有图层均会被导入到文件夹结构中

可导出图

层仅当图层被设置为"可导出"时才会被导入

更新图层坐标和大小

当从Sketch重导入画板时覆盖图层位置值

更新图层大小

当从Sketch重导入画板时覆盖图层尺寸值

同步图层排序和层级

当从Sketch重导入画板时更新图层顺序和分组

删除已在Sketch中删除的图层

当从Sketch重导入画板时移除Sketch中已删除的图层

Adobe XD导入(原有导入方式)

仅在ProtoPie 5.2或更低版本中可用。

画板

在Adobe XD中选择要导入的画板

导入尺寸

设置图层的放大系数。此项可以根据Adobe XD中所选择的画板的尺寸来变更。

所有图层

画板中的所有图层均会被导入到文件夹结构中

仅批量导入选中图层

只有在Adobe XD中被标记为"批量导出标注"的图层才会被导入

更新图层坐标和大小

当从Adobe XD重导入画板时覆盖图层位置值

更新图层大小

当从Adobe XD重导入画板时覆盖图层尺寸值

同步图层排序和层级

当从Adobe XD重导入画板时更新图层顺序和分组

删除已在Adobe XD CC中删除的图层

当从Adobe XD重导入画板时移除Adobe XD中已删除的图层

FAQ

Back To Top