使用方法

注册与创建工作区

要使用 Pixso,首先访问官网并点击“免费使用”按钮。支持微信、手机号或邮箱注册,注册后系统自动创建默认团队空间。在团队空间中,所有文件按项目归类,适合个人或多人协同。建议在首次进入时完善个人资料,并设置合适的权限等级(如编辑者或查看者)。新建文件时,点击左侧“我的文件”旁的加号,选择“新建文件”即可进入空白画板。Pixso 基于浏览器运行,无需下载客户端,但若需要离线功能可安装桌面版。

界面布局与核心工具

进入设计文件后,顶部是工具栏,包含选择、形状、钢笔、文字等基本工具;左侧图层面板显示所有元素的层级与顺序;右侧属性面板随选中元素动态切换,可调整填充、边框、阴影、圆角等参数。画布中心区域支持无缩放滚轮,按住空格键可平移视图。快捷键与 Figma 高度相似,例如 V 切换选择工具、R 绘制矩形、T 插入文字。对于刚接触的用户,建议在右上角“帮助”菜单中调出快捷键参考表。

基本图形与路径编辑

选择矩形或椭圆工具,在画布上拖拽即可生成矢量图形。选中图形后,属性面板提供锚点编辑模式,双击图形可进入路径编辑状态,自由调整锚点曲率与节点位置。Pixso 支持布尔运算(合并、减去、交集、排除),在选中多个形状后点击顶部“布尔”选项,能快速创建复杂组合图形。钢笔工具(P)支持直线与贝塞尔曲线,绘制后可用“编辑路径”工具继续调整,适合绘制图标或自定义形状。

文本样式与排版

点击文字工具(T)后在画布单击创建文本,支持在线中文与英文输入。属性面板中可设置字体、字号、字重、行高、字间距、段落对齐等。Pixso 内置多款免费商用字体,同时支持上传自定义字体(通过团队资源库)。若要实现响应式文本,可使用自动布局功能——选中文本图层后,在周围添加自动布局容器,使文本随内容变化自动调整框体大小。此功能对按钮、标签这类动态长度组件尤为实用。

组件化设计与复用

将设计元素转换为组件,是提升效率的关键。选中一个或多个图层,右键选择“创建组件”或按 Ctrl+Alt+K。组件会出现在左侧资源面板的“组件”分类中,拖入画布即生成实例。修改主组件,所有实例同步更新;若需局部覆盖,可在实例上单独调整属性。Pixso 也支持嵌套组件、组件变体(Variant)以及交换插槽,适合搭建复杂的设计系统。官方推荐在团队协作时,先整理基础组件库再开展具体页面设计。

原型与交互链接

设计完成后,切换到顶部“原型”模式。选择任意元素,按住右侧圆圈拖拽到目标页面或元素上,即可建立交互连接。属性面板可设置触发方式(点击、悬停、拖拽等)以及动画类型(推入、融入、滑动等)。支持设置滚动区域和固定定位,模拟真实 App 或网页滚动效果。创建原型后,点击播放按钮可在浏览器中预览交互流程,并生成分享链接供团队成员测试。

多人实时协作与反馈

点击文件右上角的“分享”按钮,可生成链接并设定查看或编辑权限。团队成员打开链接后,光标实时可见,互相看到对方正在操作的图层与选区。Pixso 内置评论功能:选中任意元素,按 C 键即可添加评论,@特定成员会收到通知。评论可定位到具体坐标,方便设计师与产品的沟通。同时支持版本历史,点击顶部“文件”菜单中的“版本历史”,可回溯任意时间点的设计快照,避免误操作丢失内容。

导出与开发者交付

选中图层或画板后,右侧属性面板底部提供“导出”区域。支持 PNG、SVG、PDF、JPG 等格式,可自定义倍数(1x、2x 等)以及后缀名。对于开发协作,Pixso 内置“开发模式”:点击顶部按钮切换到开发视图后,选中元素即可查看 CSS、iOS、Android 等多平台代码属性,包括尺寸、颜色、间距等数值。开发者还可直接下载切图资源,无需设计师手动切图。同时支持将设计稿一键分享给第三方工具,如通过 URL 嵌入到 TAPD 或飞书项目中。