在Figma中调整了按钮位置、替换了图片，已经制作好的Principle原型该怎样更新，是设计协作中经常遇到的问题。重新导入可以合并设计变化，并保留已有的动画和事件，但前提是Principle仍能识别原来的图层。只改外观与删除后重建，带来的结果并不相同。导入前整理好页面和对象，后面更新原型时会少一些返工。

　　一、Principle怎么导入Figma设计稿

　　Principle通过连接Figma账号读取设计，导入操作从Principle发起。可以导入当前页面的全部画框，也可以只导入选中的画框。

　　1、准备需要导入的页面和画框

　　导入范围过大，会把暂时不用的页面状态一起带进原型。建议让本次需要制作交互的画框集中在同一页面，并把页面状态和图层名称整理清楚。

　　①在Figma中打开目标设计文件，切换到需要导入的页面。

　　②在图层面板中核对【画框】及内部图层，将按钮、图片和背景分别命名。

　　③如需导入部分内容，在画布或图层面板中选中对应【画框】。

　　2、连接Figma账号

　　①打开Principle，点击工具栏【Import】，在导入窗口中选择【Figma】。

　　②点击【Connect to Figma】，在浏览器中登录能够访问该设计文件的账号。

　　③在授权页面点击【Allow access】，完成后返回Principle。

　　④若浏览器没有自动切回应用，手动返回Principle，查看连接是否已经建立。

　　3、选择文件和导入范围

　　①在Principle导入窗口的【Document】中选择目标Figma文件。

　　②导入整页时点击【Import Page】，只导入选中画框时点击【Import Selected Frames】。

　　③等待图层渲染和导入完成，在【Layers】面板中核对画板及内部对象。

　　导入整页与导入选中画框的范围不同，选错文件或页面时，不宜直接继续搭建交互。导入内容用于在Principle中制作原型，也不要预设Figma里已有的原型连线、组件交互会随设计外观一并迁移。

　　二、Principle重新导入会保留交互吗

　　在同一Principle文件中重新导入对应的源设计，动画、事件和图层映射可以保留。不过，保留结果依赖对象的对应关系，并非只要名称相同就能恢复原交互。

　　1、保留原对象的视觉修改可以合并

　　①在Figma中选中原有图层，修改需要调整的位置、尺寸或外观。

　　②返回已经制作交互的Principle文件，点击【Import】，选择【Figma】及原【Document】。

　　③使用与本次更新范围相符的【Import Page】或【Import Selected Frames】重新导入。

　　④在Principle预览窗口中测试原有点击和切换，核对更新后的视觉状态。

　　例如，原按钮仍是同一个对象，只调整了位置和颜色，重新导入时可以沿用已有的事件与动画关系。更新后外观发生变化，并不代表动画效果一定符合原先预期，移动距离、遮挡关系和画板之间的状态差异仍应实际播放检查。

　　2、删除重建的图层可能丢失事件

　　把旧按钮删掉，再画一个同名按钮，视觉上可以完全相似，但Principle未必知道新对象应承接旧对象的交互。事件附着在被删除的旧图层上时，重新导入后可能丢失。

　　①在Figma图层面板中核对被修改对象，区分原图层编辑与删除后重建。

　　②重新导入后，在Principle【Layers】中选中新对象，检查对应事件连线。

　　③对确需重建的对象，按交互要求重新添加事件，并核对目标画板。

　　④在预览窗口中测试该入口及后续返回路径。

　　三、Principle更新设计后怎样避免交互遗漏

　　更新是否成功，不能只看画面有没有变。图层被合并、对象来自不同文件，或副本失去源设计对应关系，都可能影响后续维护。

　　1、检查图层是否被合并成图片

　　①在Principle【Layers】中展开导入内容，查看需要单独交互的按钮和图片是否仍为独立图层。

　　②在Figma中检查相关图层名称，核对是否添加了【principle flatten】或【principle skip】后缀。

　　③根据交互需要调整源图层组织，再回到Principle点击【Import】更新。

　　principle flatten用于将图层或组作为一张图片导入，principle skip用于跳过对象。部分复杂效果和蒙版结构也可能导致内容被栅格化。若整个区域已经合并为一层，内部元素就无法再按原来的独立图层分别制作交互，应在视觉还原与可编辑结构之间作出取舍。

　　2、区分源设计副本与Principle内的副本

　　①在Principle【Layers】中定位没有随设计变化的对象，核对它是否由原导入图层复制而来。

　　②需要持续同步的新增状态，在Figma中复制对应【画框】或图层，再通过Principle【Import】导入。

　　③对旧状态与新增状态分别播放预览，检查事件是否连接到预期画板。

　　在Principle里复制导入图层，不会自动为副本建立与Figma源对象的一一对应关系，源设计变化也不会照原图层那样更新这个副本。另外，源文件中删除的画板，重新导入时不会自动从Principle中清除，原型里可能保留旧状态，需要结合流程判断是否继续使用。

　　3、文件或选区不对时核对连接账号

　　账号不一致时，可能出现文件列表不符合预期、选区无法正确读取等情况。反复更换画框，未必能够解决连接对象错误的问题。

　　①打开Principle【Import】窗口，核对显示的Figma账号和【Document】。

　　②如需更换账号，点击菜单【Principle】→【Disconnect from Figma】。

　　③重新进入【Import】，选择【Figma】并点击【Connect to Figma】，连接正确账号。

　　④仍有导入异常时，通过【Principle】→【Check for updates】检查可用更新，再重新测试。

　　总结

　　重新导入的价值，在于让视觉修改与已经完成的交互工作衔接起来。原对象持续保留、源文件范围清楚，原型就更容易维护；涉及重建、栅格化或新增状态时，则需要多核对几处连接。更新完成后把关键流程完整体验一遍，比只确认按钮还能点击更有意义。希望这些方法能帮助大家减少设计迭代中的交互遗漏，如有Principle相关使用需求，欢迎联系交流。