文章目录

已有Figma设计稿,想转到中文工作台继续编辑,可以先保存一份.fig本地文件,再导入Pixso工作台。从一个常用页面开始,把文字、图片和组件整理好,就能接着完成界面设计与原型演示。

1. 将Figma设计稿保存为.fig文件

打开需要迁移的Figma Design文件,在主菜单选择File → Save local copy,将.fig文件保存到电脑。如果菜单中没有这一项,请联系文件所有者开通复制或导出权限。本地副本不包含评论和版本历史,项目讨论记录可以另行整理。

Figma文件菜单中的保存本地副本入口
Figma文件菜单中的保存本地副本入口

建议使用“项目名称—页面或版本—日期”命名文件,方便导入后查找。原始文件先保留,团队库项目还可以一并记录使用的字体和主组件来源。

2. 在Pixso工作台导入设计稿

登录Pixso后,从工作台的文件导入入口选择Figma格式。已有多份.fig文件时,可以使用批量导入,减少逐个上传的操作。

Pixso工作台的Figma文件导入入口
Pixso工作台的Figma文件导入入口
在文件导入面板选择Figma格式
在文件导入面板选择Figma格式
多份设计稿可以从批量导入入口添加
多份设计稿可以从批量导入入口添加

把.fig文件拖入导入区域,或点击区域从电脑选择文件。在文件选择窗口中选中需要上传的设计稿,确认后等待导入完成。

将.fig文件拖入Pixso导入窗口
将.fig文件拖入Pixso导入窗口
从电脑选择一份或多份.fig文件
从电脑选择一份或多份.fig文件

结果列表会显示文件处理状态。完成后点击“打开文件”,即可进入画布;也可以返回工作台,在对应位置找到导入的设计稿。

导入完成后直接打开设计文件
导入完成后直接打开设计文件

打开后先查看常用页面:文字是否换行、图片是否完整、按钮和卡片的位置是否符合预期。涉及字体、组件属性或原型连接的地方,可以边检查边调整,再把整理好的文件交给团队继续协作。

3. 在Pixso中继续制作按钮交互

文件进入工作台后,可以沿用现有页面,也可以从组件资源开始补充界面。下面以一个能够切换开关状态的按钮为例,完成从组件到演示的操作。

准备两个按钮状态

在文件左侧打开资源面板,找到需要的组件库。示例使用WeUI浅色组件库,将开启和关闭两种状态的按钮拖到画布中。

从Pixso资源面板打开WeUI组件库
从Pixso资源面板打开WeUI组件库
将两种状态的按钮放入画布
将两种状态的按钮放入画布

把按钮组织成变体

选中两个按钮,从组件菜单选择“创建多个组件”,再将它们组合为组件变体。给两个状态分别命名,后续在页面中使用时更容易找到正确选项。

把按钮分别创建为组件
把按钮分别创建为组件
将按钮状态组合到同一个组件集中
将按钮状态组合到同一个组件集中

连接状态并预览

切换到右侧“原型”面板,从一个状态的连接点拖向另一个状态,设置单击时切换变体。再添加一条反向连接,让按钮能够在开启与关闭之间来回切换。

在Pixso原型面板添加状态连接
在Pixso原型面板添加状态连接
为开关的两个状态分别添加点击切换
为开关的两个状态分别添加点击切换

把组件实例放到页面中,打开演示,点击按钮查看切换效果。用同样的方法,可以继续制作复选框、标签和其他具有多种状态的控件。

在演示中查看按钮状态切换
在演示中查看按钮状态切换

可以现在打开Pixso,导入一份Figma文件,从项目中最常用的按钮或卡片开始整理。多人共用组件时,继续参考团队库迁移与组件整理方法。

4. 本地文件、桌面客户端和私有化怎么选?

备份或迁移设计稿,使用.fig文件即可;习惯桌面窗口操作,可以选择相应产品的桌面客户端;如果团队需要在内部网络管理设计文件和协作服务,则应进一步了解企业部署方案。后者关注的是服务器、访问权限、备份和维护,与保存一份本地设计稿解决的问题不同。

有内网协作需求的团队,可以查看设计协作工具私有化部署指南,按团队规模和现有环境选择方案。

参考:Figma本地副本说明。