即时设计

认识即时设计

即时设计是一款运行在浏览器中的专业 UI 设计工具，无需下载安装，打开网页即可开始设计工作。它面向产品经理、UI/UX 设计师和前端开发者，解决从界面设计、原型演示到开发交付的全流程协作问题。

使用即时设计，你可以完成以下工作：

• 绘制高保真界面设计与矢量插画
• 多人同时编辑同一文件，实时同步修改
• 制作可点击的交互原型并分享演示链接
• 一键生成开发标注与设计切图
• 导入 Sketch、Figma、XD 等主流格式文件

前置条件

开始使用前，请确认：

快速上手步骤

第一步：创建或导入项目

1. 访问 https://js.design/，登录账号。
2. 在 dashboard 页面点击「新建文件」，选择画板尺寸（如 iPhone 14、Web 1920 等预设）。
3. 若需迁移旧项目，点击「导入文件」，拖入本地 Sketch/Figma/XD 文件，等待解析完成。

第二步：进行界面设计

1. 使用左侧工具栏的「画板」「形状」「文字」「钢笔」工具完成基础布局。
2. 在右侧属性面板中调整填充色、描边、圆角、阴影、字体等参数。
3. 按 Ctrl/Cmd + D 快速复制元素，配合对齐参考线保持间距一致。

注意事项：即时设计采用自动保存机制，每一步操作都会实时同步至云端，无需手动保存。

第三步：多人实时协作

1. 点击右上角「分享」按钮，生成协作链接。
2. 将链接发送给同事，对方打开后即可看到同一画布。
3. 协作者的头像会显示在顶部，各自的鼠标指针以不同颜色区分。
4. 使用「评论」工具（快捷键 C）在画布上直接标注修改意见。

第四步：制作交互原型

1. 切换到顶部「原型」标签页。
2. 选中一个元素（如按钮），拖拽右侧的连线锚点到目标画板。
3. 在弹出的面板中设置触发方式（点击/悬停）、动画类型（淡入/滑动）和持续时间。
4. 点击右上角「预览」按钮，在浏览器新窗口体验完整交互流程。

第五步：开发标注与切图

1. 选中需要标注的图层，在右侧面板底部点击「导出」，设置倍率（@1x、@2x、@3x）和格式（PNG/JPG/SVG/WebP）。
2. 点击右上角「标注」模式，将链接发给前端开发者。
3. 前端在标注页中悬停任意元素，即可查看尺寸、间距、颜色值和字体信息，并直接复制 CSS/ iOS / Android 代码片段。

预期结果

完成以上步骤后：

• 设计文件已安全存储于云端，可随时从任意设备访问
• 协作成员可并行编辑，无需来回传输文件
• 原型链接可直接用于用户测试或客户演示
• 开发者可自主获取标注与切图，减少沟通成本

常见问题排查

适用边界

• 即时设计免费版支持 3 人协作与 500MB 云端空间，个人或小团队足够使用。
• 复杂动效（如滚动视差、时间轴动画）能力弱于 After Effects 类专业动效工具，建议配合使用。
• 离线状态下无法编辑文件，需保持网络连接。