导入

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

目前,我们正在开发相应的插件。通过插件,ProtoPie可以更快、更灵活地导入Figma、 Adobe XD和Sketch设计文件。

长远规划而言,我们将逐渐淡化原有的导入方式,并将重点放到更高效的插件导入方式上来。

用于FigmaAdobe XD的ProtoPie插件已可以使用;Sketch的插件也会很快推出。

开始学习

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

  • 插件导入方式:安装用于Figma的ProtoPie插件,并在希望进行导入的Figma文件中打开该插件。

导入Figma(插件方式)

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

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

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

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

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

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

  • 可将矢量图层导入为SVG

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

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

用于Figma的ProtoPie插件需要使用ProtoPie 5.2或更高版本来运行。并且为了确保性能,在导入时应打开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中复制该场景以形成副本。

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的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中的画板导入为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中复制这个被导入进来的场景以创建出同样的副本场景。

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