从Figma导入

将设计从Figma导入到ProtoPie的方式有两种。

用于Figma的ProtoPie插件

下载并安装用于Figma的ProtoPie插件,插件要求使用ProtoPie 5.2或更高版本。

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

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

为了使用最佳的导入性能,请在将设计导入ProtoPie时保持Figma在桌面上处于打开和可见状态。

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

支持的属性

  • 能见度
  • 锁定
  • 位置
  • 大小
  • 旋转
  • 透明度
  • 约束条件
  • 填充(单一颜色和图片)
  • 边框
  • 阴影

了解有关ProtoPie图层属性的更多信息。

插件导入方式与无插件导入有何不同

通过插件导入方式可以实现:

  • 可导入一或多个画板和对象。
  • 可将顶层画板导入为场景。
  • 可手动选择要单独导入的内容。
  • 可将矢量图层导入为SVG。
  • 可将文本图层导入为ProtoPie中的文本图层。
  • 可将自适应设置导入为ProtoPie中的中的自适应设置。
[object Object]
导入为场景

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

[object Object]
导入对象

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

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

[object Object]
导入为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时更新图层顺序和分组

删除已在Figma中删除的图层

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

panel impor figma

FAQs

Back To Top