ui设计 · 云端协同

高保真矢量网格 · 智能排版 · 布尔运算 · 一站式在线ui设计工具

下载桌面版 在线使用 插件下载 移动端

8.7M

全球用户

2.3M

日活用户

54M

累计下载

186+

覆盖国家

✨ 软件特点

矢量网格

精确矢量网格系统，对齐像素级设计，轻松绘制复杂界面，适配多端布局。

布尔运算

强大的布尔运算（合并、减去、相交、排除）让形状组合更自由，快速构建图标与组件。

样式创建

全局颜色、文字样式、效果样式一键管理，保持设计一致性，团队协作更高效。

智能排版

自动布局、响应式调整、间距约束，智能排版让设计稿适配各种屏幕，节省大量时间。

云端协同

多人实时在线编辑，评论、标注、版本历史，设计评审无缝衔接，团队效率倍增。

设计转代码

一键生成 CSS、React、Vue 代码，设计稿直接变为前端代码，研发与设计零距离。

📂 分类导航

UI组件

按钮/卡片/表单

图标库

线性/面性/彩色

字体排版

中英文字体配对

色彩系统

主题/调色板

布局网格

栅格/间距/对齐

动效设计

微交互/过渡

团队协作

分享/评审/权限

插件生态

扩展/API/工具

❓ 常见问题

如何开始我的第一个ui设计项目？

1. 注册/登录在线ui设计平台。
2. 点击“新建项目”并选择画板尺寸。
3. 从左侧组件库拖拽UI元素至画布。
4. 使用矢量工具绘制自定义图形。
5. 应用全局样式或创建新样式。
6. 添加交互或智能排版约束。
7. 保存并分享设计链接给团队。

如何与团队成员协同编辑？

1. 点击“邀请成员”输入邮箱。
2. 设置编辑/查看权限。
3. 所有成员可同时打开文件。
4. 光标实时显示协作者位置。
5. 使用评论功能标注反馈。
6. 版本历史可回溯任意修改。
7. 支持导出设计规范文档。

设计稿如何导出为代码？

1. 选中需要导出的图层或组件。
2. 点击“导出”选择“代码”选项卡。
3. 选择框架 (React/Vue/HTML)。
4. 复制生成的CSS或JSX代码。
5. 调整导出设置(单位/属性)。
6. 下载代码包或直接粘贴到IDE。
7. 设计稿与代码保持同步更新。

是否支持离线使用？

1. 桌面端支持离线模式。
2. 首次登录后缓存设计文件。
3. 离线可编辑本地项目。
4. 网络恢复后自动同步云端。
5. 插件资源需预先下载。
6. 离线状态限制协作功能。
7. 建议保持网络以获得最佳体验。

如何管理设计系统中的组件？

1. 在“组件库”面板创建分类。
2. 将设计好的UI元素保存为组件。
3. 设置组件属性(文本/颜色/尺寸)。
4. 在多个页面复用组件实例。
5. 修改主组件自动更新所有实例。
6. 发布组件库供团队订阅。
7. 通过API同步至前端代码库。

📖 下载使用指南

Windows 安装

下载exe，双击安装，登录即可使用。

macOS 安装

下载dmg，拖入Applications，启动。

Web 在线

浏览器打开，无需安装，注册即用。

CLI 工具

npm install -g ui-design-cli 快速启动。